這兩天正好在看《網站界面設計》一書，這本書，也是我首次接觸比較系統的介紹界面設計理論的書，書中對界面的可用性設計原則、交互設計、呈現設計以及網絡廣告設計四方面介紹的很系統很詳細的介紹，而且書中包含了大量的實際案例分析，看后收獲很大。于是，最近一直想找個界面來練練手，剛好taobao的首頁進行了新一輪的“胖身”改版，就全當成學習來，來分析一下Taobao的首頁界面改版評測：

首頁是網站的大門，用戶從這里進入網站，又從這里進入到網站的各個頻道和內容，首頁是用戶的主要集散地，他的呈現和側重點直接決定了網站的導向，對于用戶來說，首頁是導航，對于網站來說，他相當于目錄和發布區，對于活動以及商家，他又是廣告。平衡三者的關系是首頁設計的重點，網站的首頁和欄目頁體現了網站的主旨以及特色，把流量引向網站最重要的地方，這一方面來說，Taobao的網站改版還是達到要求了。

首頁的基本設計原則：

（1）首頁上最顯著的設計元素之一應該是公司網站的名稱，讓用戶知道他來到了什么地方。

呵呵，這個很明顯，TAObao的LOGO依舊放在左上角最顯眼的地方。

（2）首屏需要體現最基本的用戶任務，即70%以上目標用戶需要使用的功能和網站的主推的服務，需要將兩者巧妙地結合在一起，引導網站流量。

Taobao是一個C2C的網站，用戶上網主要來淘自己喜歡的東西，所以搜索是他最重要的入口，這里淘寶的首頁把搜索的設計很顯眼，也很人性化，只不過不知道為什么右上角上方也有一個搜索，雖然搜索很重要，但是太多相似的信息會不會令用戶感到迷惑。

（3）首屏需要傳達足夠的信息，以讓用戶感受網站內容或功能的豐富。

這個看看后面密密麻麻的寶貝類目，就能感覺到，不過這個也是最最困難的，信息多了，要如何安排，安排不當，就容易造成信息的雜亂無章，讓用戶迷失導向，不過這里這個處理的還可以，一些重要的常用的用不同顏色處理，各個類目用不同的背景區分開來，相對信息還是比較清晰。只是他的背景背景感覺應該用橙色系的色度比較淡的來做背景，這個整體的有機型會強一些。

（4）首屏需要體現網站的更新，體現網站的活力。

淘寶集市；品牌商城，二手閑置。類目的右側，全球購和促銷區的領地，尤其是新增的促銷區域，這些動態的數據更新，相信已經足夠體現了這個中國最大的C2C的活力，這一版，也把這些強化了不少。

（5）首頁的設計能夠引人注目，能夠讓目標用戶過目不忘，并對網站形象產生良好的準確的認知和記憶，就設計和視覺而言，用戶所希望的是：布局整齊清晰，板塊明確，色調不要讓眼睛疲勞。

這一塊，感覺改版後，板塊比原來清晰不少，整個網站的架構也更明了，設計上更加大膽，色彩依舊保持鮮艷為主，刺激用戶購買欲望，還是保持原來的主色調，畢竟也是一個企業色，但是個人感覺用色還是有點雜，有點很強烈的對比，讓用戶感覺心理很不舒服，

（網頁頁面的顏色跳躍會不會太突然了些，雖然這樣可以強調公告信息，但是，感覺不是很和諧~）

（整體的色彩過于混亂，按照我個人的理解，taobao的主題色應該是橙紅色，但是，感覺整個頁面中，藍色跟橙紅比重相似，從上來拉下來，感覺進入兩個世界，感覺整體性不是很好~）

（6）首屏需要較快的下載，因此網頁頂端需要減少圖片，減少表格的復雜性，保證表格橫切的可能性以加快下載速度。

這個個人感覺淘寶的導航雖然設計的很漂亮，但是經常打開后圓角丟失，或者背景圖片沒現實出來，不過好在導航文字能很快出現，但是過多的圖片還是影響了用戶對網站整體的感覺，還有個問題，也是關于頁面下載速度的，公告欄以及中間的圖片廣告的背景，好像是深色的粉紅，在頁面下載之前很刺眼，但是最后有出現清淡的板塊，感覺用戶心理變化很大，這一塊的背景設置應該還是以淡色為主，雖然用戶最終影響不大，但是，速度慢的時候，還好思很明顯的。

（7）對于商業網站而言，首屏需要考慮廣告的位置和呈現。

這個不要說了吧，眼球最中間就是三幅翻動廣告， 廣告鼠標放在下面數字上會出現相對應的圖片，下面對應的數字會變大，背景變難，以前面區分開來，這個讓用戶有控制權，讓用戶掌握所有操作的主動權，感覺產品是為他服務，廣告也是自己需要的，廣告雖然對網站的生存很重要，但是Taobao的廣告還不是很令人討厭，已經成為首頁設計的一分子，這方面他們處理得很不錯。

Taobao的首頁改版，整體來說還是很成功的，功能板塊比之前清晰了不少，立體感也強了很多，給人感覺很好，之前的頁面感覺信息有點匱乏，而且信息冗余很多，經常進來，就陷入迷失狀態（會不感覺有點馬后炮的感覺，呵呵，不過這的確是我的最初的感覺：）），首頁信息的雜亂，影響了用戶最網站忠誠度，現在的改版，整體感覺更清新，頁面功能也更明了，對用戶的操作也有一定的引導性

整體來說，個人感覺改版還是非常成功的，至少在一定程度上我在首頁關注的時間比以前多很多，很多有用的信息，在首頁就能找到。目前還在學習相關理論，等書全看完了，再過來分析一下～

原文：http://www.onling.net/blog/?p=988