伴隨著互聯(lián)網(wǎng)的成長，通過電子商務網(wǎng)站實現(xiàn)商品交易越來越頻繁，而訪客在面對越來越龐大的信息量時會感到迷茫，因此，優(yōu)秀的導航設計能夠提高網(wǎng)站的易用性，對實現(xiàn)電子商務網(wǎng)站的高效運作具有實際意義。
另外，電子商務網(wǎng)站的首頁導航設計必須本著用戶體驗為佳的原則，既要將網(wǎng)站中的所有信息都在有限的導航欄中體現(xiàn)，又要為用戶反饋出重要的幫助信息。網(wǎng)站因其獨特的重要性和不可替代性，在電子商務網(wǎng)站設計中日漸凸顯出舉足輕重的地位。
1、符合網(wǎng)站內(nèi)容結(jié)構(gòu)
在設計電商網(wǎng)站的導航之前，事先應該對網(wǎng)站整體的內(nèi)容有一個全面的了解，并且將網(wǎng)站內(nèi)容進行歸類。這里涉及到的一個問題就是，無需把所有的板塊都在導航上一五一十的展現(xiàn)出來。電商網(wǎng)站普遍有兩個導航，分別是網(wǎng)站頭部的總導航和側(cè)邊的分類導航。一般來說，總導航會比較籠統(tǒng)的展示網(wǎng)站商品，而分類導航則會比較詳細。總導航的內(nèi)容過多無論在體驗還是視覺上，都會有拖泥帶水的感覺。如下圖案例，當當網(wǎng)的總導航分類就顯得比較復雜瑣碎。
另一方面，導航中顯示的內(nèi)容應該與網(wǎng)站內(nèi)容是緊密相關的，這也體現(xiàn)了導航與內(nèi)容的匹配度。
這其中牽涉到了導航中或?qū)Ш街車霈F(xiàn)的廣告，正如當當網(wǎng)案例所示，導航周邊融入一些廣告無可厚非，運用的恰當不僅不會遭到用戶的反感，相反還能提升 用戶的滿意度，但需要注意的是應該盡量避免與本站內(nèi)容無關，并且廣告成分過于明顯的一些內(nèi)容，過量的無關內(nèi)容勢必會讓用戶感覺在購物時受到干擾。
2、結(jié)合網(wǎng)站業(yè)務目標
首頁中的導航就是網(wǎng)站當下情況的一個縮影，用戶通過導航就能大概的了解到網(wǎng)站銷售哪些商品。
因此，導航很有必要隨著網(wǎng)站主營商品的變更，或是根據(jù)商品銷量而變化，讓呈現(xiàn)在用戶面前的導航始終與網(wǎng)站本身內(nèi)容以及時下熱門很貼合。（例如優(yōu)設網(wǎng) 的頂部導航，就挑選了最實用的設計師網(wǎng)址導航以及大牛云集的設計講座，強烈推薦同學們收藏起來）在電商網(wǎng)站的運營過程中，許多問題會逐漸的浮現(xiàn)出來，所以 網(wǎng)站改版也是無法避免的過程之一，但在改版之前，應該先列出所有的問題，再思考這些改動能否真正解決問題。
改版前：
改版后：
設計師在不同項目的設計過程中，單從過程來說基本上大同小異，但至關重要的是，每一次網(wǎng)站設計會根據(jù)客戶不同的業(yè)務需求而產(chǎn)生不同的設計目標，當你心中一旦有了這個目標，就應該時刻提醒自己，你的設計無論多么花哨或是簡單，都必須把這一目標完完整整的體現(xiàn)出來。
唯品會在目標的體現(xiàn)上還是比較明顯的，把自家主營的商品欄目種類，包括近期的活動用最清楚的方式展現(xiàn)出來，很有效的減少了用戶思考的時間，讓用戶在最短的時間內(nèi)為自己的點擊做出決定。
3、遵從用戶使用習慣
根據(jù)用戶的使用體驗和感受來設計網(wǎng)站是必然的，但往往有很多設計師會用周圍同事的意見代替大部分用戶的意見，這一點是非常不可取的。在做導航設計的 時候，設計師應該把使用對象都看成是新用戶或是沒有耐心的用戶，尤其是電商網(wǎng)站，在第一時間就要滿足用戶的需求，盡量削弱導航的學習性，比如鼠標懸停的分 類打開方式就可以很大程度上的降低用戶的學習成本。
用戶在頁面停留的時間都是按秒來計算的，因此，導航必須一目了然，讓用戶產(chǎn)生依賴感。這里還要說一點，當網(wǎng)站決定改版的時候，導航盡量不要做很大的 改變，因為導航是整個網(wǎng)站中比較重要的組成部分，也是用戶相對比較依賴的一個模塊，一旦導航有了很大的變化，會讓用戶在無形中產(chǎn)生一種陌生感和距離感，新 的技術只用在無關痛癢的地方。
關于用戶體驗，這里還有小細節(jié)可以和大家分享。當用戶的鼠標從一級導航移動到二級導航的瞬間，有時會因為移動角度和時間上的偏差，無意懸停到下面的 一級分類中。雖然只是一個不經(jīng)意的小細節(jié)，但這會讓一些不耐心的用戶非常惱火。根據(jù)我們的初步調(diào)查，目前市面上比較主流的電商網(wǎng)站在這一點上都做得比較合 格。
另外，亞馬遜的網(wǎng)站過于“簡潔”，導航的底色與網(wǎng)頁底色，以及導航的字體與網(wǎng)頁的字體都過于相近，這在查看的某一瞬間會造成用戶的視覺混淆。（如下圖）
4、避免重復的分類
上文中已經(jīng)提到，在導航的設計過程中首先要對網(wǎng)站的整體運營內(nèi)容有一個全面的了解，了解之后才能擬定出具體的板塊，而首頁導航的作用就是將這些板塊做出詳細的分類，在清楚導航的目的和重要性之后，把類似的板塊拼湊在一起，形成一個整體，這也就是主導航了。
在主導航的左下或右下方會有一個比較全面完整的分類導航，我們稱之為局部導航。在一些較為知名的電商網(wǎng)站中，局部導航的使用率可能更高于主導航，這兩者之間其實有一種微妙的遞進關系，要盡量避免內(nèi)容重復。
無論是文字還是圖片，重復性的內(nèi)容會很容易讓用戶產(chǎn)生倦怠感。如天貓案例所示，“醫(yī)藥保健”和“醫(yī)藥館”在字意上很相近，而且點擊后的確進入了同一個頁面，這樣的重復性內(nèi)容會明顯降低有針對性需求用戶的購物體驗。
5、使用合適的文案
為了迎合用戶在導航上只愿意停留短短的幾秒鐘，導航文字內(nèi)容的可用性就變得至關重要。文字標簽是傳達信息最有力的途徑，因此，導航中出現(xiàn)的文案應該 避免使用一些用戶很難理解的詞匯，比如專業(yè)術語、縮寫和個性化語言等。其中最常見的就是縮寫，很多電商網(wǎng)站會由于排版美觀，或是文字長度上的限制而選用縮 寫，從而犧牲用戶體驗，增加了用戶對導航的理解難度。
在電商網(wǎng)站導航中，文案的首要任務就是讓每個用戶都能準確快速的理解相關信息。而作為設計師，我們理所當然的花費許多時間一味的專注于視覺美學，這 是幾乎所有設計師的通病，但這一通病在導航設計中卻成了致命傷。清晰明了的表達是美觀的前提，任何交互項目的最佳狀態(tài)就是實現(xiàn)透明化。
6、清晰的視覺體驗
從視覺角度上來說，用戶只用幾秒鐘的時間掃視網(wǎng)站，所以導航的視覺設計必須符合邏輯，用色彩給用戶提供一種指引，成為用戶點擊的向?qū)??？牲c擊的部分 盡可能的明顯一些，減少用戶對其的猜測。在色彩的使用上應避免大片亮色，這會間接地降低導航文字的可識別度，與此同時，電商網(wǎng)站面向的是所有的消費者，因 此，在導航與導航文字內(nèi)容的色彩搭配上也要考慮到一些色彩障礙者。
京東的網(wǎng)站在這一點上做的還是比較好的，每一個層級的導航顏色由深及淺，讓用戶有一種循序漸進的感覺。整個導航區(qū)域的色彩搭配也很恰當，無論鼠標懸停在任何地方，所在的位置都能反應出一個比較舒適的頁面。
7、為用戶提供反饋
當用戶對導航中的某一個元素有了動作之后，導航項都應該對此做出相應的回饋，比如當用戶在分類導航上懸?；蚴屈c擊某些文字內(nèi)容后，文字應該做出一些改變，可以是字體的大小、顏色的變化，或是任何其他合適的效果。關于這一點，國內(nèi)的大部分電商網(wǎng)站都做的比較到位。
一號店的二級導航就有很恰當?shù)姆答佇畔?，一整個選中的板塊都被不刺眼的色彩所填充了，讓用戶很清楚的知道自己目前所在的位置。而展開的三級導航選中后的顏色就與其原本標出的熱門商品的字體顏色有些重復，比較容易混淆。
8、導航符合網(wǎng)站整體風格
導航與網(wǎng)站整體風格的搭配要區(qū)分為視覺和內(nèi)容兩個部分。
在視覺上，大多數(shù)網(wǎng)站基本不會出現(xiàn)大問題，因為所有的設計師都懂得導航基本上占據(jù)了整個頁面的主視覺這個道理，電商首頁中只有導航既需要迎合網(wǎng)站的整體又同時主導著網(wǎng)站風格。
從內(nèi)容上來說，導航的內(nèi)容與網(wǎng)站的點擊量，甚至商品銷量都有著密切的關系。一旦用戶無法通過導航找到自己想要的商品，就意味著商家丟失了一位客戶。而如果能在導航中推薦一些商品給用戶，也許能促進網(wǎng)站商品的銷售。
導航要符合網(wǎng)站整體的風格可以細節(jié)到每一個小細節(jié)，甚至于任何的線框字體。這樣做的目的主要是減少用戶的頁面跳躍感，盡量避免用戶因為頁面跳轉(zhuǎn)的原因而產(chǎn)生的思考和反應。同時，對網(wǎng)站的整體美觀程度也有一定的好處。
9、利于搜索引擎優(yōu)化
搜索引擎的優(yōu)化是幾乎所有初創(chuàng)電商都會選擇的推廣方式，而電商導航是電商網(wǎng)站最主要的入口，基于此，有很多欄目的導航并不利于搜索引擎的抓取。在內(nèi) 容的設置上，應該將主要內(nèi)容一目了然的展現(xiàn)出來，這樣的設計不僅利于用戶查看，也讓搜索引擎蜘蛛能順著導航目錄層層深入。所以，在導航欄中盡量使用文本， 減少用戶思考時間的同時利于搜索引擎的優(yōu)化，按鈕和圖片會阻礙到搜索引擎的訪問和抓取。
拍拍的導航相對于種類網(wǎng)站就顯得特別簡潔。主導航上只有幾個主要的模塊，既讓用戶能快速的了解到網(wǎng)站的主營項目，也實力利于搜索引擎的優(yōu)化。
10、趨于專業(yè)化的導航
商業(yè)化和專業(yè)化對B2B電子商務網(wǎng)站尤為重要。時下有很多電商網(wǎng)站的導航看起來比較凌亂，在色調(diào)和布局上也過于幼稚，這樣的導航會讓用戶對整個網(wǎng)站 的風格基調(diào)產(chǎn)生截然不同的看法。如果電商網(wǎng)站需要體現(xiàn)出嚴肅簡潔的特點，就應該盡量避免過多的運動效果。作為導航欄，比其他標題欄更高的高度，更大的加粗 字體是個不錯的選擇，但一旦過度反而會看起來不夠精致。
樂蜂網(wǎng)雖然是一個偏向女性化的網(wǎng)站，但單看導航還是比較專業(yè)的。沒有過多的色彩，使用的顏色和字體也都趨于商務化，分類也盡可能的減少，這樣的風格帶給用戶最直接的就是正規(guī)正統(tǒng)，能在一定程度上增加用戶對網(wǎng)站的信任感。
總結(jié)：
AnyForWeb認為，電子商務網(wǎng)站的導航設計也不能一概而論，不同的網(wǎng)站類型有不同的設計側(cè)重點。比如，亞馬遜等綜合類電商網(wǎng)站的商品數(shù)量眾 多，那么4000萬商品和4000個商品的導航設計一定會有很大的區(qū)別。我們可以看到，淘寶由最初一級導航是按照用戶人群區(qū)分，到如今，不僅擴大了搜索 框，一級導航也以功能作為劃分點。
而垂直類電商的用戶對商品更有目標性，所以在導航的設計上往往需要按照自己的業(yè)務邏輯來進行科學分類索引，比如京東和一號店的商品種類劃分。
還有一種類型就是由傳統(tǒng)企業(yè)轉(zhuǎn)型而來的電子商務，這類電商網(wǎng)站的營銷通常以單個品牌為主，例如案例中的優(yōu)衣庫。由于分類和數(shù)量都很少，因此除了傳統(tǒng)的科學分類索引以外，首頁的單品推薦也對單個商品的營銷非常有效。
電子商務網(wǎng)站的導航設計還是應該本著用戶體驗為佳的原則，既要將網(wǎng)站中的所有信息都在有限的導航欄中體現(xiàn)，又要為用戶反饋出重要的幫助信息。謝謝閱讀，希望能幫到大家，請繼續(xù)關注腳本之家，我們會努力分享更多優(yōu)秀的文章。
樂發(fā)網(wǎng)超市批發(fā)網(wǎng)提供超市貨源信息,超市采購進貨渠道。超市進貨網(wǎng)提供成都食品批發(fā),日用百貨批發(fā)信息、微信淘寶網(wǎng)店超市采購信息和超市加盟信息.打造國內(nèi)超市采購商與批發(fā)市場供應廠商搭建網(wǎng)上批發(fā)市場平臺,是全國批發(fā)市場行業(yè)中電子商務權(quán)威性網(wǎng)站。
本文內(nèi)容整合網(wǎng)站：百度百科、知乎、淘寶平臺規(guī)則
本文來源： 店鋪裝修之電商網(wǎng)站導航設計超全面指南
