電子商務(wù)網(wǎng)站設(shè)計(jì)分析系列之一：首頁(yè)導(dǎo)航

伴跟著互聯(lián)網(wǎng)的成長(zhǎng)，通過(guò)電子商務(wù)網(wǎng)站實(shí)現(xiàn)商品交易越來(lái)越頻繁，而訪客在面臨越來(lái)越龐大的信息量時(shí)會(huì)感到迷茫，因此，優(yōu)秀的導(dǎo)航設(shè)計(jì)能夠進(jìn)步網(wǎng)站的易用性，對(duì)實(shí)現(xiàn)電子商務(wù)網(wǎng)站的高效運(yùn)作具有實(shí)際意義。另外，電子商務(wù)網(wǎng)站的首頁(yè)導(dǎo)航設(shè)計(jì)必需本著用戶體驗(yàn)為佳的原則，既要將網(wǎng)站中的所有信息都在有限的導(dǎo)航欄中體現(xiàn)，又要為用戶反饋出重要的匡助信息。網(wǎng)站因其獨(dú)特的重要性和不可替換性，在電子商務(wù)網(wǎng)站設(shè)計(jì)中日漸凸顯出舉足輕重的地位。

1、符合網(wǎng)站內(nèi)容結(jié)構(gòu)

在設(shè)計(jì)電商網(wǎng)站的導(dǎo)航之前，事先應(yīng)該對(duì)網(wǎng)站整體的內(nèi)容有一個(gè)全面的了解，并且將網(wǎng)站內(nèi)容進(jìn)行歸類。這里涉及到的一個(gè)題目就是，無(wú)需把所有的板塊都在導(dǎo)航上一五一十的展現(xiàn)出來(lái)。電商網(wǎng)站普遍有兩個(gè)導(dǎo)航，分別是網(wǎng)站頭部的總導(dǎo)航和側(cè)邊的分類導(dǎo)航。一般來(lái)說(shuō)，總導(dǎo)航會(huì)比較籠統(tǒng)的展示網(wǎng)站商品，而分類導(dǎo)航則會(huì)比較具體�？倢�(dǎo)航的內(nèi)容過(guò)多不管在體驗(yàn)仍是視覺(jué)上，都會(huì)有拖泥帶水的感覺(jué)。

另一方面，導(dǎo)航中顯示的內(nèi)容應(yīng)該與網(wǎng)站內(nèi)容是緊密相關(guān)的，這也體現(xiàn)了導(dǎo)航與內(nèi)容的匹配度。
 

2、結(jié)合網(wǎng)站業(yè)務(wù)目標(biāo)

首頁(yè)中的導(dǎo)航就是網(wǎng)站當(dāng)下情況的一個(gè)縮影，用戶通過(guò)導(dǎo)航就能大概的了解到網(wǎng)站銷售哪些商品。因此，導(dǎo)航很有必要跟著網(wǎng)站主營(yíng)商品的變更，或是根據(jù)商品銷量而變化，讓呈現(xiàn)在用戶眼前的導(dǎo)航始終與網(wǎng)站本身內(nèi)容以及時(shí)下熱點(diǎn)很貼合。在電商網(wǎng)站的運(yùn)營(yíng)過(guò)程中，很多題目會(huì)逐漸的浮現(xiàn)出來(lái)，所以網(wǎng)站改版也是無(wú)法避免的過(guò)程之一，但在改版之前，應(yīng)該先列出所有的題目，再思索這些改動(dòng)能否真正解決題目。

設(shè)計(jì)師在不同項(xiàng)目的設(shè)計(jì)過(guò)程中，單從過(guò)程來(lái)說(shuō)基本上大同小異，但至關(guān)重要的是，每一次網(wǎng)站設(shè)計(jì)會(huì)根據(jù)客戶不同的業(yè)務(wù)需求而產(chǎn)生不同的設(shè)計(jì)目標(biāo)，當(dāng)你心中一旦有了這個(gè)目標(biāo)，就應(yīng)該時(shí)刻提醒自己，你的設(shè)計(jì)不管多么花哨或是簡(jiǎn)樸，都必需把這一目標(biāo)完完整整的體現(xiàn)出來(lái)。

3、遵從用戶使用習(xí)慣

根據(jù)用戶的使用體驗(yàn)和感慨感染來(lái)設(shè)計(jì)網(wǎng)站是必定的，但往往有良多設(shè)計(jì)師會(huì)用附近同事的意見代替大部門用戶的意見，這一點(diǎn)長(zhǎng)短常不可取的。在做導(dǎo)航設(shè)計(jì)的時(shí)候，設(shè)計(jì)師應(yīng)該把使用對(duì)象都看成是新用戶或是沒(méi)有耐心的用戶，尤其是電商網(wǎng)站，在第一時(shí)間就要知足用戶的需求，盡量削弱導(dǎo)航的學(xué)習(xí)性，好比鼠標(biāo)懸停的分類打開方式就可以很大程度上的降低用戶的學(xué)習(xí)本錢。

用戶在頁(yè)面停留的時(shí)間都是按秒來(lái)計(jì)算的，因此，導(dǎo)航必需一目了然，讓用戶產(chǎn)生依靠感。這里還要說(shuō)一點(diǎn)，當(dāng)網(wǎng)站決定改版的時(shí)候，導(dǎo)航盡量不要做很大的改變，由于導(dǎo)航是整個(gè)網(wǎng)站中比較重要的組成部門，也是用戶相對(duì)比較依靠的一個(gè)模塊，一旦導(dǎo)航有了很大的變化，會(huì)讓用戶在無(wú)形中產(chǎn)生一種目生感和間隔感，新的技術(shù)只用在無(wú)關(guān)痛癢的地方。

關(guān)于用戶體驗(yàn)，這里還有小細(xì)節(jié)可以和大家分享。當(dāng)用戶的鼠標(biāo)從一級(jí)導(dǎo)航移動(dòng)到二級(jí)導(dǎo)航的瞬間，有時(shí)會(huì)由于移動(dòng)角度和時(shí)間上的偏差，無(wú)意懸停到下面的一級(jí)分類中。固然只是一個(gè)不經(jīng)意的小細(xì)節(jié)，但這會(huì)讓一些不耐心的用戶非常惱火。目前市道市情上比較主流的電商網(wǎng)站在這一點(diǎn)上都做得比較合格。

4、避免重復(fù)的分類

在導(dǎo)航的設(shè)計(jì)過(guò)程中首先要對(duì)網(wǎng)站的整體運(yùn)營(yíng)內(nèi)容有一個(gè)全面的了解，了解之后才能擬定出詳細(xì)的板塊，而首頁(yè)導(dǎo)航的作用就是將這些板塊做出具體的分類，在清晰導(dǎo)航的目的和重要性之后，把類似的板塊拼湊在一起，形成一個(gè)整體，這也就是主導(dǎo)航了。在主導(dǎo)航的左下或右下方會(huì)有一個(gè)比較全面完整的分類導(dǎo)航，我們稱之為局部導(dǎo)航。在一些較為著名的電商網(wǎng)站中，局部導(dǎo)航的使用率可能更高于主導(dǎo)航，這兩者之間實(shí)在有一種微妙的遞進(jìn)關(guān)系，要盡量避免內(nèi)容重復(fù)。

不管是文字仍是圖片，重復(fù)性的內(nèi)容會(huì)很輕易讓用戶產(chǎn)生疲倦感。

5、使用合適的案牘

為了迎適用戶在導(dǎo)航上只愿意停留短短的幾秒鐘，導(dǎo)航文字內(nèi)容的可用性就變得至關(guān)重要。文字標(biāo)簽是傳達(dá)信息最有力的途徑，因此，導(dǎo)航中泛起的案牘應(yīng)該避免使用一些用戶很難理解的詞匯，好比專業(yè)術(shù)語(yǔ)、縮寫和個(gè)性化語(yǔ)言等。其中最常見的就是縮寫，良多電商網(wǎng)站會(huì)因?yàn)榕虐婷烙^，或是文字長(zhǎng)度上的限制而選用縮寫，從而犧牲用戶體驗(yàn)，增加了用戶對(duì)導(dǎo)航的理解難度。

在電商網(wǎng)站導(dǎo)航中，案牘的首要任務(wù)就是讓每個(gè)用戶都能正確快速的理解相關(guān)信息。而作為設(shè)計(jì)師，我們理所當(dāng)然的花費(fèi)很多時(shí)間一味的專注于視覺(jué)美學(xué)，這是幾乎所有設(shè)計(jì)師的通病，但這一通病在導(dǎo)航設(shè)計(jì)中卻成了致命傷。清楚明了的表達(dá)是美觀的條件，任何交互項(xiàng)目的最佳狀態(tài)就是實(shí)現(xiàn)透明化。

6、清楚的視覺(jué)體驗(yàn)

從視覺(jué)角度上來(lái)說(shuō)，用戶只用幾秒鐘的時(shí)間掃視網(wǎng)站，所以導(dǎo)航的視覺(jué)設(shè)計(jì)必需符合邏輯，用色彩給用戶提供一種指引，成為用戶點(diǎn)擊的向?qū)��？牲c(diǎn)擊的部門盡可能的顯著一些，減少用戶對(duì)其的預(yù)測(cè)。在色彩的使用上應(yīng)避免大片亮色，這會(huì)間接地降低導(dǎo)航文字的可識(shí)別度，與此同時(shí)，電商網(wǎng)站面向的是所有的消費(fèi)者，因此，在導(dǎo)航與導(dǎo)航文字內(nèi)容的色彩搭配上也要考慮到一些色彩障礙者。

7、為用戶提供反饋

當(dāng)用戶對(duì)導(dǎo)航中的某一個(gè)元素有了動(dòng)作之后，導(dǎo)航項(xiàng)都應(yīng)該對(duì)此做出相應(yīng)的回饋，好比當(dāng)用戶在分類導(dǎo)航上懸�；蚴屈c(diǎn)擊某些文字內(nèi)容后，文字應(yīng)該做出一些改變，可以是字體的大小、顏色的變化，或是任何其他合適的效果。關(guān)于這一點(diǎn)，海內(nèi)的大部門電商網(wǎng)站都做的比較到位。

8、導(dǎo)航符合網(wǎng)站整體風(fēng)格

導(dǎo)航與網(wǎng)站整體風(fēng)格的搭配要區(qū)分為視覺(jué)和內(nèi)容兩個(gè)部門。在視覺(jué)上，大多數(shù)網(wǎng)站基本不會(huì)泛起大題目，由于所有的設(shè)計(jì)師都懂得導(dǎo)航基本上占據(jù)了整個(gè)頁(yè)面的主視覺(jué)這個(gè)道理，電商首頁(yè)中只有導(dǎo)航既需要迎合網(wǎng)站的整體又同時(shí)主導(dǎo)著網(wǎng)站風(fēng)格。從內(nèi)容上來(lái)說(shuō)，導(dǎo)航的內(nèi)容與網(wǎng)站的點(diǎn)擊量，甚至商品銷量都有著緊密親密的關(guān)系。一旦用戶無(wú)法通過(guò)導(dǎo)航找到自己想要的商品，就意味著商家丟失了一位客戶。而假如能在導(dǎo)航中推薦一些商品給用戶，也許能促進(jìn)網(wǎng)站商品的銷售。

導(dǎo)航要符合網(wǎng)站整體的風(fēng)格可以細(xì)節(jié)到每一個(gè)小細(xì)節(jié)，甚至于任何的線框字體。這樣做的目的主要是減少用戶的頁(yè)面跳躍感，盡量避免用戶由于頁(yè)面跳轉(zhuǎn)的原因而產(chǎn)生的思索和反應(yīng)。同時(shí)，對(duì)網(wǎng)站的整體美觀程度也有一定的好處。

9、利于搜索引擎優(yōu)化

搜索引擎的優(yōu)化是幾乎所有初創(chuàng)電商都會(huì)選擇的推廣方式，而電商導(dǎo)航是電商網(wǎng)站最主要的進(jìn)口，基于此，有良多欄目的導(dǎo)航并不利于搜索引擎的抓取。在內(nèi)容的設(shè)置上，應(yīng)該將主要內(nèi)容一目了然的展現(xiàn)出來(lái)，這樣的設(shè)計(jì)不僅利于用戶查看，也讓搜索引擎蜘蛛能順著導(dǎo)航目錄層層深入。所以，在導(dǎo)航欄中盡量使用文本，減少用戶思索時(shí)間的同時(shí)利于搜索引擎的優(yōu)化，按鈕和圖片會(huì)阻礙到搜索引擎的訪問(wèn)和抓取。

10、趨于專業(yè)化的導(dǎo)航

貿(mào)易化和專業(yè)化對(duì)B2B電子商務(wù)網(wǎng)站尤為重要。時(shí)下有良多電商網(wǎng)站的導(dǎo)航看起來(lái)比較凌亂，在色調(diào)和布局上也過(guò)于幼稚，這樣的導(dǎo)航會(huì)讓用戶對(duì)整個(gè)網(wǎng)站的風(fēng)格基調(diào)產(chǎn)生截然不同的看法。假如電商網(wǎng)站需要體現(xiàn)出嚴(yán)厲簡(jiǎn)潔的特點(diǎn)，就應(yīng)該盡量避免過(guò)多的運(yùn)動(dòng)效果。作為導(dǎo)航欄，比其他標(biāo)題欄更高的高度，更大的加粗字體是個(gè)不錯(cuò)的選擇，但一旦過(guò)度反而會(huì)看起來(lái)不夠精致。

總結(jié)：

筆者以為，電子商務(wù)網(wǎng)站的導(dǎo)航設(shè)計(jì)也不能一概而論，不同的網(wǎng)站類型有不同的設(shè)計(jì)側(cè)重點(diǎn)。

而垂直類電商的用戶對(duì)商品更有目標(biāo)性，所以在導(dǎo)航的設(shè)計(jì)上往往需要按照自己的業(yè)務(wù)邏輯來(lái)進(jìn)行科學(xué)分類索引。

還有一種類型就是由傳統(tǒng)企業(yè)轉(zhuǎn)型而來(lái)的電子商務(wù)，這類電商網(wǎng)站的營(yíng)銷通常以單個(gè)品牌為主。因?yàn)榉诸惡蛿?shù)目都很少，因此除了傳統(tǒng)的科學(xué)分類索引以外，首頁(yè)的單品推薦也對(duì)單個(gè)商品的營(yíng)銷非常有效。

電子商務(wù)網(wǎng)站的導(dǎo)航設(shè)計(jì)仍是應(yīng)該本著用戶體驗(yàn)為佳的原則，既要將網(wǎng)站中的所有信息都在有限的導(dǎo)航欄中體現(xiàn)，又要為用戶反饋出重要的匡助信息。