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

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

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

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

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

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

在這里我只以商城首頁為例來具體講講它的問題。只說商城首頁是因?yàn)槲抑浪脑O(shè)計(jì)師是我曾經(jīng)的徒弟飛飛，她是淘寶最出色的視覺設(shè)計(jì)師之一，也是我?guī)н^的視覺設(shè)計(jì)師中最有靈氣的一位。

這是目前的商城首頁：

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

但此頁面有兩個(gè)致命傷：

搜索框不明顯，有“被淹沒”的感覺；
左側(cè)的分類菜單，起的是導(dǎo)航的作用，但沒有與“主導(dǎo)航”產(chǎn)生任何的視覺關(guān)聯(lián)。
這兩個(gè)致命傷，嚴(yán)重地削弱了商城首頁最主要的功能：引導(dǎo)流量。

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

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

先看這個(gè)搜索框的局部：

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

要解決這個(gè)問題也不難，同樣是運(yùn)用視覺語言來解決。比如讓它們?cè)诳臻g上分開一點(diǎn)、讓其中一個(gè)條換個(gè)顏色等等。

再來看菜單的局部：

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

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

這是我改的效果圖，看看是不是好了些：

一共有四處小改動(dòng)：

加了個(gè)漸變背景，這樣搜索框下面的白色長(zhǎng)條就沒有了；
把搜索框向上移了一點(diǎn)，繼續(xù)拉開與下方空白之間的距離。這樣一來，它就不會(huì)被淹了；
菜單的圖標(biāo)改成了紅色，與頂上的導(dǎo)航呼應(yīng)，形成一組；
把菜單向上移了十來個(gè)像素，沖進(jìn)了大色塊，并加了一點(diǎn)點(diǎn)投影，體現(xiàn)出它的“下拉菜單”特性。
所以視覺設(shè)計(jì)實(shí)際上在解決的還是交互問題——或者極端一點(diǎn)說——是邏輯問題。

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

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

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