今天淘寶首頁的導(dǎo)航又改版了，和上一次淘寶商城改版一樣，微博上的朋友七嘴八舌給了不少意見，粗粗看來大多是負面的意見。我一向認(rèn)為負面意見大家都會提，重要的是能提出有建設(shè)性的意見。剛好現(xiàn)在已經(jīng)離開淘寶，反倒可以公開地說說我的意見，對錯都請大家多指教了。

這兩次改版，從交互上來說沒有大的問題。大首頁中規(guī)中矩，橫向Tab為主導(dǎo)航、左側(cè)縱向Tab為輔導(dǎo)航（非二級導(dǎo)航，如為二級，最好還是橫的），把 淘寶目前的“主業(yè)”、“輔業(yè)”說得非常清楚了。

商城首頁交互更有“出彩”的地方，就是左上角的“所有商品分類”。這個交互在搜索結(jié)果頁面可以體現(xiàn)出它的優(yōu)勢來，算是一個很好的借鑒（應(yīng)該來自 amazon )。

但是，從視覺設(shè)計上來講，兩個頁面都有一些問題。特別是大首頁的視覺設(shè)計，可以算得上是重大失誤。

我們說“設(shè)計=解決問題”，而視覺設(shè)計，就是“用視覺語言去解決邏輯問題”。 舉一個很簡單的例 子，如果一個東西重要，我們會讓它居中、留白、加大、加粗等等。居中（位置）、留白（色彩）這些都是視覺語言，我們用它來解決一個邏輯問題——“重要”。

視覺設(shè)計師在做設(shè)計的時候，一定要牢牢記住這句話。打開PS之前心里應(yīng)該很明白：我要解決的邏輯問題是什么？然后再打開PS，開始選擇你掌握的視覺 語言。

在這里我只以商城首頁為例來具體講講它的問題。只說商城首頁是因為我知道它的設(shè)計師是我曾經(jīng)的徒弟飛飛，她是淘寶最出色的視覺設(shè)計師之一，也是我?guī)?過的視覺設(shè)計師中最有靈氣的一位。

這是目前的商城首頁（點擊放大）：

這個頁面視覺沖擊力強，主次分明，品牌形象表達極富張力。特別是頂部的大色塊，用得非常大膽，而且效果出色（無論下面的banner怎么花哨，都不 會搶過它了）。

但此頁面有兩個致命傷：

1. 搜索框不明顯，有“被淹沒”的感覺；
2. 左側(cè)的分類菜單，起的是導(dǎo)航的作用，但沒有與“主導(dǎo)航”產(chǎn)生任何的視覺關(guān)聯(lián)。

這兩個致命傷，嚴(yán)重地削弱了商城首頁最主要的功能：引導(dǎo)流量。

所有電子商務(wù)網(wǎng)站首頁，對流量的引導(dǎo)功能，都少不了這三樣：搜索、分類、推薦。搜索和分類是用戶主動自我引導(dǎo)，是精準(zhǔn)流量。如果對這部分流量不能很 好地把握，一定會從最終的銷售數(shù)字上看到后果。

接下來我們分別分析這兩個問題產(chǎn)生的原因。

先看這個搜索框的局部：

發(fā)現(xiàn)問題了么？還沒有？^_^ 這樣看應(yīng)該非常明顯了。這里有兩個白色長條，一個是非常有用的搜索框，另一個是無乎無用的留白。它們在這么近的距離上同時出現(xiàn)（間隔太近），兩側(cè)又都是這 么重、這么花哨的色彩，我們的眼睛和大腦，鐵定會把它們歸為一組。注意我的說法是——“歸為一組”，也就是在邏輯上把 它們歸作了一類，這還能不出問題么？當(dāng)然被淹了。

要解決這個問題也不難，同樣是運用視覺語言來解決。比如讓它們在空間上分開一點、讓其中一個條換個顏色等等。

再來看菜單的局部：

我們用同樣的思路來看，這里面哪些東西是一組的？ 很明顯“淘品牌”和“所有商品分類”是一組，下面的菜單是另一組。從邏輯的角度來看它，問題是不是顯而易見？

另一個問題就不是那么明顯了，這要在搜索結(jié)果頁面才能看到，也就是我上面提到“出彩的交互”。當(dāng)用戶鼠標(biāo)hover在“所有商品分類”按鈕上的時 候。下面灰色的分類菜單會以Dropdown Menu的形式向下展開。所以這里還有一個隱含的邏輯問題需要解決，就是“按鈕”與“下拉菜單”是一組。

這是我改的效果圖（點擊放大），看看是不是好了些：

一共有四處小改動：

1. 加了個漸變背景；
2. 把搜索框向上移了一點，與第1點配合，它就不會被淹了；
3. 菜單的圖標(biāo)改成了紅色，與頂上的導(dǎo)航呼應(yīng)，形成一組；
4. 把菜單向上移了十來個像素，沖進了大色塊，并加了一點點投影，體現(xiàn)出它的“下拉菜單”特性。

所以視覺設(shè)計實際上在解決的還是交互問題——或者極端一點說——是邏輯問題。

某些設(shè)計師做了幾年甚至十幾年網(wǎng)頁設(shè)計，卻仍然認(rèn)為網(wǎng)頁設(shè)計是一個藝術(shù)問題，這是大錯特錯的。

淘寶大首頁的問題就不說了，大家有興趣的話可以跟著討論討論，也希望看到它盡快的完善。

淘寶的設(shè)計師已經(jīng)是行業(yè)中千挑萬選的精英，實際經(jīng)驗豐富，如果整個團隊的“設(shè)計理念”和“設(shè)計哲學(xué)”的大方向正確，一定能繼續(xù)保持領(lǐng)頭羊的地位。

來源;http://blog.sharkui.com/2010/05/05/design-of-taobao-mall/