雙十一快點來淘寶咯！阿裡(lǐ)上市，京東上市，唯品會上市，眼看著(zhe)身邊的電商設計師都(dōu)是股權在手，房子我有，時不時跟加班租房吃泡面(miàn)的你談笑風生。調侃幾句，明顯是爲了推薦今天這(zhè)篇超多私貨的好(hǎo)文，從10個方面(miàn)全方位分析電商網站的導航設計方法，趕緊學(xué)習。

　　伴随著(zhe)互聯網的成(chéng)長(cháng)，通過(guò)電子商務網站實現商品交易越來越頻繁，而訪客在面(miàn)對(duì)越來越龐大的信息量時會感到迷茫，因此，優秀的導航設計能(néng)夠提高網站的易用性，對(duì)實現電子商務網站的高效運作具有實際意義。

　　另，電子商務網站的首頁導航設計必須本著(zhe)用戶體驗爲佳的原則，既要將(jiāng)網站中的所有信息都(dōu)在有限的導航欄中體現，又要爲用戶反饋出重要的幫助信息。網站因其獨特的重要性和不可替代性，在電子商務網站設計中日漸凸顯出舉足輕重的地位。

　　1、符合網站内容結構

　　在設計電商網站的導航之前，事(shì)先應該對(duì)網站整體的内容有一個全面(miàn)的了解，并且將(jiāng)網站内容進(jìn)行歸類。這(zhè)裡(lǐ)涉及到的一個問題就是，無需把所有的闆塊都(dōu)在導航上一五一十的展現出來。電商網站普遍有兩(liǎng)個導航，分别是網站頭部的總導航和側邊的分類導航。一般來說，總導航會比較籠統的展示網站商品，而分類導航則會比較詳細。總導航的内容過(guò)多無論在體驗還(hái)是視覺上，都(dōu)會有拖泥帶水的感覺。如下圖案例，當當網的總導航分類就顯得比較複雜瑣碎。

　　這(zhè)其中牽涉到了導航中或導航周圍出現的廣告，正如當當網案例所示，導航周邊融入一些廣告無可厚非，運用的恰當不僅不會遭到用戶的反感，相反還(hái)能(néng)提升用戶的滿意度，但需要注意的是應該盡量避免與本站内容無關，并且廣告成(chéng)分過(guò)于明顯的一些内容，過(guò)量的無關内容勢必會讓用戶感覺在購物時受到幹擾。

　　2、結合網站業務目标

　　首頁中的導航就是網站當下情況的一個縮影，用戶通過(guò)導航就能(néng)大概的了解到網站銷售哪些商品。

　　因此，導航很有必要随著(zhe)網站主營商品的變更，或是根據商品銷量而變化，讓呈現在用戶面(miàn)前的導航始終與網站本身内容以及時下熱門很貼合。（例如優設網的頂部導航，就挑選了最實用的設計師網址導航以及大牛雲集的設計講座，強烈推薦同學(xué)們收藏起(qǐ)來）在電商網站的運營過(guò)程中，許多問題會逐漸的浮現出來，所以網站改版也是無法避免的過(guò)程之一，但在改版之前，應該先列出所有的問題，再思考這(zhè)些改動能(néng)否真正解決問題。

　　設計師在不同項目的設計過(guò)程中，單從過(guò)程來說基本上大同小異，但至關重要的是，每一次網站設計會根據客戶不同的業務需求而産生不同的設計目标，當你心中一旦有了這(zhè)個目标，就應該時刻提醒自己，你的設計無論多麼(me)花哨或是簡單，都(dōu)必須把這(zhè)一目标完完整整的體現出來。

　　唯品會在目标的體現上還(hái)是比較明顯的，把自家主營的商品欄目種(zhǒng)類，包括近期的活動用最清楚的方式展現出來，很有效的減少了用戶思考的時間，讓用戶在最短的時間内爲自己的點擊做出決定。

　　3、遵從用戶使用習慣

　　根據用戶的使用體驗和感受來設計網站是必然的，但往往有很多設計師會用周圍同事(shì)的意見代替大部分用戶的意見，這(zhè)一點是非常不可取的。在做導航設計的時候，設計師應該把使用對(duì)象都(dōu)看成(chéng)是新用戶或是沒(méi)有耐心的用戶，尤其是電商網站，在第一時間就要滿足用戶的需求，盡量削弱導航的學(xué)習性，比如鼠标懸停的分類打開(kāi)方式就可以很大程度上的降低用戶的學(xué)習成(chéng)本。

　　用戶在頁面(miàn)停留的時間都(dōu)是按秒來計算的，因此，導航必須一目了然，讓用戶産生依賴感。這(zhè)裡(lǐ)還(hái)要說一點，當網站決定改版的時候，導航盡量不要做很大的改變，因爲導航是整個網站中比較重要的組成(chéng)部分，也是用戶相對(duì)比較依賴的一個模塊，一旦導航有了很大的變化，會讓用戶在無形中産生一種(zhǒng)陌生感和距離感，新的技術隻用在無關痛癢的地方。

　　關于用戶體驗，這(zhè)裡(lǐ)還(hái)有小細節可以和大家分享。當用戶的鼠标從一級導航移動到二級導航的瞬間，有時會因爲移動角度和時間上的偏差，無意懸停到下面(miàn)的一級分類中。雖然隻是一個不經(jīng)意的小細節，但這(zhè)會讓一些不耐心的用戶非常惱火。根據我們的初步調查，目前市面(miàn)上比較主流的電商網站在這(zhè)一點上都(dōu)做得比較合格。

　　4、避免重複的分類

　　上文中已經(jīng)提到，在導航的設計過(guò)程中首先要對(duì)網站的整體運營内容有一個全面(miàn)的了解，了解之後(hòu)才能(néng)拟定出具體的闆塊，而首頁導航的作用就是將(jiāng)這(zhè)些闆塊做出詳細的分類，在清楚導航的目的和重要性之後(hòu)，把類似的闆塊拼湊在一起(qǐ)，形成(chéng)一個整體，這(zhè)也就是主導航了。

　　在主導航的左下或右下方會有一個比較全面(miàn)完整的分類導航，我們稱之爲局部導航。在一些較爲知名的電商網站中，局部導航的使用率可能(néng)更高于主導航，這(zhè)兩(liǎng)者之間其實有一種(zhǒng)微妙的遞進(jìn)關系，要盡量避免内容重複。

　　無論是文字還(hái)是圖片，重複性的内容會很容易讓用戶産生倦怠感。如天貓案例所示，“醫藥保健”和“醫藥館”在字意上很相近，而且點擊後(hòu)的确進(jìn)入了同一個頁面(miàn)，這(zhè)樣(yàng)的重複性内容會明顯降低有針對(duì)性需求用戶的購物體驗。

　　5、使用合适的文案

　　爲了迎合用戶在導航上隻願意停留短短的幾秒鍾，導航文字内容的可用性就變得至關重要。文字标簽是傳達信息最有力的途徑，因此，導航中出現的文案應該避免使用一些用戶很難理解的詞彙，比如專業術語、縮寫和個性化語言等。其中最常見的就是縮寫，很多電商網站會由于排版美觀，或是文字長(cháng)度上的限制而選用縮寫，從而犧牲用戶體驗，增加了用戶對(duì)導航的理解難度。

　　在電商網站導航中，文案的首要任務就是讓每個用戶都(dōu)能(néng)準确快速的理解相關信息。而作爲設計師，我們理所當然的花費許多時間一味的專注于視覺美學(xué)，這(zhè)是幾乎所有設計師的通病，但這(zhè)一通病在導航設計中卻成(chéng)了緻命傷。清晰明了的表達是美觀的前提，任何交互項目的最佳狀态就是實現透明化。

　　6、清晰的視覺體驗

　　從視覺角度上來說，用戶隻用幾秒鍾的時間掃視網站，所以導航的視覺設計必須符合邏輯，用色彩給用戶提供一種(zhǒng)指引，成(chéng)爲用戶點擊的向(xiàng)導。可點擊的部分盡可能(néng)的明顯一些，減少用戶對(duì)其的猜測。在色彩的使用上應避免大片亮色，這(zhè)會間接地降低導航文字的可識别度，與此同時，電商網站面(miàn)向(xiàng)的是所有的消費者，因此，在導航與導航文字内容的色彩搭配上也要考慮到一些色彩障礙者。

　　京東的網站在這(zhè)一點上做的還(hái)是比較好(hǎo)的，每一個層級的導航顔色由深及淺，讓用戶有一種(zhǒng)循序漸進(jìn)的感覺。整個導航區域的色彩搭配也很恰當，無論鼠标懸停在任何地方，所在的位置都(dōu)能(néng)反應出一個比較舒适的頁面(miàn)。

　　7、爲用戶提供反饋

　　當用戶對(duì)導航中的某一個元素有了動作之後(hòu)，導航項都(dōu)應該對(duì)此做出相應的回饋，比如當用戶在分類導航上懸停或是點擊某些文字内容後(hòu)，文字應該做出一些改變，可以是字體的大小、顔色的變化，或是任何其他合适的效果。關于這(zhè)一點，國(guó)内的大部分電商網站都(dōu)做的比較到位。

　　8、導航符合網站整體風格

　　導航要符合網站整體的風格可以細節到每一個小細節，甚至于任何的線框字體。這(zhè)樣(yàng)做的目的主要是減少用戶的頁面(miàn)跳躍感，盡量避免用戶因爲頁面(miàn)跳轉的原因而産生的思考和反應。同時，對(duì)網站的整體美觀程度也有一定的好(hǎo)處。

　　9、利于搜索引擎優化

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

　　10、趨于專業化的導航

　　商業化和專業化對(duì)B2B電子商務網站尤爲重要。時下有很多電商網站的導航看起(qǐ)來比較淩亂，在色調和布局上也過(guò)于幼稚，這(zhè)樣(yàng)的導航會讓用戶對(duì)整個網站的風格基調産生截然不同的看法。如果電商網站需要體現出嚴肅簡潔的特點，就應該盡量避免過(guò)多的運動效果。作爲導航欄，比其他标題欄更高的高度，更大的加粗字體是個不錯的選擇，但一旦過(guò)度反而會看起(qǐ)來不夠精緻。

　　總結：

　　AnyForWeb認爲，電子商務網站的導航設計也不能(néng)一概而論，不同的網站類型有不同的設計側重點。比如，亞馬遜等綜合類電商網站的商品數量衆多，那麼(me)4000萬商品和4000個商品的導航設計一定會有很大的區别。我們可以看到，淘寶由最初一級導航是按照用戶人群區分，到如今，不僅擴大了搜索框，一級導航也以功能(néng)作爲劃分點。

　　而垂直類電商的用戶對(duì)商品更有目标性，所以在導航的設計上往往需要按照自己的業務邏輯來進(jìn)行科學(xué)分類索引，比如京東和一号店的商品種(zhǒng)類劃分。

　　還(hái)有一種(zhǒng)類型就是由傳統企業轉型而來的電子商務，這(zhè)類電商網站的營銷通常以單個品牌爲主，例如案例中的優衣庫。由于分類和數量都(dōu)很少，因此除了傳統的科學(xué)分類索引以外，首頁的單品推薦也對(duì)單個商品的營銷非常有效。

　　電子商務網站的導航設計還(hái)是應該本著(zhe)用戶體驗爲佳的原則，既要將(jiāng)網站中的所有信息都(dōu)在有限的導航欄中體現，又要爲用戶反饋出重要的幫助信息。