本文主要想表達(dá)的內(nèi)容是：如果某個(gè)組件具有某個(gè)屬性，那就把這個(gè)屬性發(fā)揮到極致；如果某個(gè)組件不具備某個(gè)屬性，那么就不要把它偽裝成具備這個(gè)屬性，并用這個(gè)屬性來(lái)誘奸用戶。

簡(jiǎn)單說(shuō)，設(shè)計(jì)就是要解決問題，這是設(shè)計(jì)的本質(zhì)與落腳點(diǎn)。
電子商務(wù)網(wǎng)站的主導(dǎo)航設(shè)計(jì)是整個(gè)網(wǎng)站最最最核心的模塊之一。導(dǎo)航需要解決的問題就是，告訴用戶如何快速準(zhǔn)確的到達(dá)他想要去的任何地方。

在所有電子商務(wù)網(wǎng)站中，Amazon（注意，不是卓越亞馬遜）的導(dǎo)航設(shè)計(jì)向來(lái)是所有電子商務(wù)網(wǎng)站學(xué)習(xí)與仰慕的對(duì)象。Amazon的導(dǎo)航在經(jīng)過(guò)數(shù)次變遷之后被從頂部挪到了左側(cè)，從橫向Tab變成了縱向Tab。Amazon的這種Tab頁(yè)簽式導(dǎo)航，相對(duì)與卓越亞馬遜的標(biāo)簽列表式導(dǎo)航而言縮短了主導(dǎo)航的高度，在第一屏的時(shí)候就能把所有商品大類全部暴露出來(lái)，降低了用戶的尋找成本。因此，這種模式的導(dǎo)航被越來(lái)越多的電子商務(wù)網(wǎng)站所接受。

大約在1年前，QQ商城改版，借鑒了Amazon的這種導(dǎo)航模式，同時(shí)做了創(chuàng)新式的擴(kuò)展。QQ商城在每個(gè)Tab頁(yè)簽里不僅展示了二級(jí)類目，同時(shí)還展示了品牌，這使得整個(gè)主導(dǎo)航從縱向上進(jìn)一步縮短同時(shí)往橫向上擴(kuò)張。
隨后而來(lái)的京東商城和淘寶商城（擴(kuò)展有分類推薦與品牌推薦）以及淘寶電器城紛紛相仿并采用了這種擴(kuò)展式的Tab導(dǎo)航模式。

不過(guò)，我覺得這種創(chuàng)新在某些交互細(xì)節(jié)上有待改進(jìn)，我們先來(lái)看一下QQ商城的主導(dǎo)航截圖：

QQ商城的這個(gè)主導(dǎo)航在Tab頁(yè)簽的標(biāo)題上顯示的形式是“一級(jí)分類標(biāo)題+二級(jí)分類推薦”的形式。
從這個(gè)表現(xiàn)形式上看，“運(yùn)動(dòng)鞋”、“棒球帽”是2個(gè)標(biāo)簽，我這么認(rèn)為是沒問題的吧？

我們假設(shè)這樣的一個(gè)場(chǎng)景：你來(lái)到QQ商城，很明確的就是想購(gòu)買“棒球帽”，你肯定是會(huì)直接奔去點(diǎn)擊“棒球帽”（注意，是點(diǎn)擊）。因?yàn)檫@個(gè)“棒球帽”長(zhǎng)的跟一個(gè)標(biāo)簽一模一樣，我們之前的Web使用經(jīng)驗(yàn)告訴我們，標(biāo)簽就意味著是帶超鏈接的，是可以點(diǎn)擊的?？墒?，當(dāng)你把鼠標(biāo)移到“棒球帽”這個(gè)標(biāo)簽上的時(shí)候，你發(fā)現(xiàn)，他是個(gè)偽娘！
你點(diǎn)擊了半天，發(fā)現(xiàn)沒有反應(yīng)，你再仔細(xì)一看，他引導(dǎo)你打開了整個(gè)“運(yùn)動(dòng)戶外”下的二級(jí)分類….這個(gè)時(shí)候，你的鼠標(biāo)需要在做一次長(zhǎng)途奔襲，去彈出來(lái)的彈層里尋找“棒球帽”，當(dāng)然，你還得小心點(diǎn)別奔襲到界外，不然整個(gè)彈層就關(guān)閉了，你需要再來(lái)一次（圖中虛線）。
這個(gè)場(chǎng)景里，我們經(jīng)過(guò)幾個(gè)動(dòng)作：1、準(zhǔn)備點(diǎn)擊；2、無(wú)數(shù)次點(diǎn)擊后覺醒；3、鼠標(biāo)小心翼翼的滑過(guò)彈層去尋找；4、點(diǎn)擊。
P.s:其實(shí)，圖中這個(gè)例子我們?cè)趶棇永镆舱也坏健鞍羟蛎薄保驗(yàn)樗蛔儺惓闪恕斑\(yùn)動(dòng)帽”？

我們?cè)賮?lái)看京東商城和淘寶電器城（注意，不是淘寶商城）。其實(shí)跟QQ商城差不多，只不過(guò)樣式上做的難看點(diǎn)….當(dāng)我目標(biāo)明確的奔著“洗衣機(jī)”去的時(shí)候，鼠標(biāo)所到之處彈層出現(xiàn)了一級(jí)分類“大家電”下的所有二級(jí)類。同時(shí)，“洗衣機(jī)”、“平板電視”這2個(gè)處在Tab頁(yè)簽標(biāo)題上的推薦二級(jí)類被覆蓋了。
這個(gè)場(chǎng)景里我們經(jīng)過(guò)的動(dòng)作：1、準(zhǔn)備點(diǎn)擊；2、發(fā)現(xiàn)要點(diǎn)的家伙沒了，開始尋找；3、點(diǎn)擊

從這個(gè)意義上講，我認(rèn)為，京東商城和淘寶電器城的這種處理方式要比QQ商城在體驗(yàn)上更好。QQ商城在鼠標(biāo)Mouse on之后給了我2個(gè)道路：點(diǎn)擊，拼命的點(diǎn)擊、鼠標(biāo)奔襲到彈層；而京東商城和淘寶商城直接覆蓋了之前那2個(gè)長(zhǎng)的像標(biāo)簽的家伙，我只有一個(gè)道路：鼠標(biāo)奔襲。
有的時(shí)候，給用戶越少的選擇更能讓用戶集中起來(lái)完成目標(biāo)任務(wù)。

OK，案例觀摩完畢，分析一下為什么會(huì)出現(xiàn)上面的問題？
很簡(jiǎn)單，我覺得就是沒有把一個(gè)東西做到極致，隨心所欲的使用表現(xiàn)層的東西去覆蓋了框架層與結(jié)構(gòu)層的事情。展示在Tab頁(yè)簽標(biāo)題上的那些（洗衣機(jī)、平板電視）其實(shí)并不是標(biāo)簽，但是，他們?cè)谡宫F(xiàn)上跟標(biāo)簽一模一樣（京東使用了灰色字體，說(shuō)明他們意識(shí)到了這不是標(biāo)簽，但是我覺得還不夠）。

解決方案？
請(qǐng)參見Amazon的做法。
把那些長(zhǎng)得像標(biāo)簽的家伙砍掉，使之不具備標(biāo)簽的屬性，換成文字描述就OK了。

最后，幾句題外話：
1）不知道京東商城暴露在每個(gè)Tab頁(yè)簽標(biāo)題欄里的那2個(gè)二級(jí)分類是怎么來(lái)的？我仔細(xì)看了一下，似乎是程序直接調(diào)用而不是經(jīng)過(guò)人工編輯的？如果是讓程序來(lái)調(diào)用這個(gè)黃金地段的內(nèi)容，那就真太可惜了。
2）京東商城在首頁(yè)左側(cè)主導(dǎo)航里的一級(jí)分類都是可以點(diǎn)擊的（如數(shù)碼手機(jī)），但是在全部分類頁(yè)面卻變成了不可點(diǎn)擊的，Why？
3）QQ商城暴露在每個(gè)Tab頁(yè)簽標(biāo)題欄里的那2個(gè)二級(jí)分類似乎是經(jīng)過(guò)編輯的，但是這種標(biāo)簽式的展示讓我很挫敗，比如我想買個(gè)棒球帽，結(jié)果找了半天只發(fā)現(xiàn)個(gè)類似的運(yùn)動(dòng)帽….
4）最后， 大熊哥主導(dǎo)的淘寶商城在此次主導(dǎo)航比拼中最終勝出！

來(lái)源：http://www.ikent.me/blog/2554