DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> apple.com網站有特點的設計
apple.com網站有特點的設計
編輯:關於網頁技巧     

以前聽同行講過一次apple.com,在他眼裡apple.com就是豐碑,基本沒有不好。任何哲學的理論和術語都可以往它身上套,簡直就是成就與完美的化身。這問題我覺得需要拆解分層次的看,任何有特...

以前聽同行講過一次apple.com,在他眼裡apple.com就是豐碑,基本沒有不好。任何哲學的理論和術語都可以往它身上套,簡直就是成就與完美的化身。這問題我覺得需要拆解分層次的看,任何有特點的設計必然有其優勢,也有其局限性。

我認為講apple.com很有特點可能更合適,因為“特點”只是個中性詞。關鍵它把特點表現的恰到好處,特別符合apple應有的“范兒”。比如占據一屏極具沖擊力的大照片,讓期待已久的粉絲們特別滿足。與我欣賞的另外個網站muji.net相比,同樣走簡潔路線,apple就顯得“大條”了些。毫不掩飾的講,我更中意muji.net更精細化的路數。

仔細看過iphone 4專題,不緊不慢的告訴用戶怎麼怎麼好,可以耐心的搞幾十個頁面、上百張圖片分別說功能。而且還藏挺深,不像很多中文網站,有點好東西恨不得全部放首頁上。我相信絕大多數iphone 4的用戶都沒看過這些內容,但如果你真有興趣去找,至少可以看半小時。文案上也下了很多功夫,用戶順其自然就被引導過去了。內容組織很好,層次清晰主次分明,給用戶的感覺是條理特別清楚。不過,這點並不算apple.com多大優勢,因為歐美網站普遍都以內容組織見長。

而在版式角度,apple.com布局中規中矩,普通到讓我感覺很單調。具體布局也是一個個模塊的平鋪,一行三個四個五個的羅列。如果不是照片出彩,整張頁面會非常普通。我一向不喜歡此類橫向單列布局的頁面設計,這種版式很難做出效果,也沒有往下引導的感覺。模塊細節多采用圓角,我想是用於配合圓弧形的logo標識。

為測試購買,還在store上下單買過iphone 4。從apple.com首頁進去,單是購買流程需要點擊13次,然後才進入跨域的在線支付。在易用以及門檻角度,真一點都不“便捷”,與中文電子商務網站一味簡單迅速的要求完全相反。此特點也是歐美網站的共性,這個流程直接翻譯過來,對中國用戶來說門檻太高。

知乎上有人問“能學到哪些網頁設計的重要原則和啟發?”我認為蘋果網站(apple.com)最值得學習的是頂部主導航,其組織、模式、代碼都很考究,精雕細琢並且用了好多年。比如導航條目有“默認、當前、觸發、按下”四種表現狀態,較差的導航不區分“當前”和“觸發”狀態,而後來加的“按下”更具動感。再比如動態擴展搜索,點擊後自動擴長並提高對比度,還是挺合理的,這個應該是今年才調整的細節。

總結起來,我認為apple.com在內容組織、頁面版式、交互設計層面沒有特別獨到之處,純粹用戶界面層次真正把apple的基因發揮到了機制。再在宏觀角度來講,我認為“灰色調、圓角、陰影、大圖”這些所謂的簡潔都不算重要,apple.com最難能可貴的有兩點。其一,從任何頁面打開都能一眼看出這就是apple風格;其二,軟硬件產品風格和基調統一。前者只是網站設計層面的技術活,而後者則貫穿整個公司戰略的產品體系。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved