有嚼頭的干貨！電商網站面包屑導航設計技巧全科普（四）

編者按：來點實實在在能給設計師幫上忙的！面包屑是有效提升購物體驗的一大殺器，很多電商網站（亞馬遜也中槍）這方面都不夠細心，今天@AnyForWeb_UDC?的同學總結了8個特別實用的面包屑導航設計技巧，有對比有案例，嚼勁十足，來一頓設計大餐吧！

什么是面包屑導航？一篇好文幫你get起來！《漲姿勢！從頭帶你認識面包屑導航的前世今生！》

電商網站設計技巧全系列合集

• 《一網打盡！電商網站導航設計超全面指南（一）》
• 《幫你提升幫你贏！電商網站導航設計超全面指南（二）》
• 《給你一個好心情！電商網站注冊界面設計超全面指南（三）》

@AnyForWeb_UDC ：網站中的面包屑導航（Breadcrumb Navigation）是一種作為輔助和補充的導航方式，它能幫助用戶明確當下所在的網站內位置，并快捷返回之前的路徑。

面包屑的由來出自一個童話，兩個孩子為了不在森林里迷路，于是沿途灑下了面包屑作為標記，幫助自己能夠原路返回。通過這個故事我們可以看出，之所以被稱為面包屑導航，正是因為它在網站中也起了相同的作用，讓用戶既能看清自己在網站中所處的位置，也能快速的找到其他同類型產品。

一個小小的面包屑是最能體現網站用戶體驗的部分之一。電商網站的子頁面數不勝數，而面包屑是指引用戶的一盞明燈，由此可見面包屑導航對于用戶瀏覽的重要性。

一、關鍵詞統一，避免用詞重復

面包屑導航的存在就是為了讓用戶能最直觀的了解自己所處的位置，因此，用詞精簡直接并且唯一，是面包屑必須遵守的原則。也就是說，每一個產品頁面都有屬于它的唯一導航，這樣能減少用戶在購物時產生的疑問。在用詞方面也要盡量避免有歧義的用詞，京東的面包屑導航在這方面做的就不夠好（如下圖）。

一級分類和二級分類分別為“家用電器”和“生活電器”，這兩個含義相近的詞匯增加了用戶的思考時間。因此，近義詞和平級詞匯應該在面包屑中盡量避免。

淘寶網中的面包屑就相對直觀。從“所有分類”到“女裝”再到“羽絨服”，每一個大分類都沒有重復性，讓用戶能在第一時間做出反應。

二、顯示層級頁面的產品數量

用戶使用面包屑的目的主要有兩種，一種是想要返回上級，第二種就是查看頁面中展示產品的類型。在用戶的實際操作中，這兩種需求的重要程度不分上下，但是大多數電商網站都忽略了后者。其實，這方面的改善并不困難，只要在層級頁面的分類中展現出商品的數量，用戶就能很清晰的看到所需商品的種類數量，便于用戶挑選。

優購時尚商城的面包屑導航就注意到了這方面的小細節。系統會根據用戶對條件的篩選自動抓取商品種類的數量，讓用戶根據商品的實際情況進行選擇。

三、分類少也能使用面包屑

傳統意義上都建議當網站的層級分類很多的時候可以使用面包屑，如果網站分類較少就可以省去這個部分。但我們認為，面包屑還能有助于用戶明確產品定位。當用戶對產品沒有目標性時，定位式面包屑就能讓用戶擁有更加順暢的購物體驗。

聚美優品的商品分類其實并不算少，但他們仍然選擇使用定位式的面包屑設計。設計師將產品大分類和用戶容易更改的部分做了一些小間隔，便于用戶對條件進行修改。

四、使用具有指向性的符號

面包屑的從用戶體驗上來說是一個“重要的小角色”，既要讓用戶看得清楚，又不能太醒目，因此，在色彩上主要以黑、灰為主，形狀上可以采用單獨連接符號，多考慮關鍵字之間的包含關系，并且具有指示性。

亞馬遜網站的面包屑在符號上用戶體驗很不令人滿意，“：”既不能明確的顯示出字詞之間的概括性，指示性也遠不如箭頭那么直接。

而魅力惠的面包屑符號就滿足了所有的標準，符號顏色和字詞相同，大小也很適中，讓用戶在有需要的時候能馬上找到它，但又毫不耀眼。

細節的微妙差別，受眾的感覺可能就會大不一樣，看看這篇你就知道原理了！《設計師必看！為什么英文要比中文在設計中顯得高大上》

五、降低干擾

面包屑導航的設計應該始終遵循這樣一個經驗法則：它不應該抓住用戶的注意力。一個稱職的面包屑一定不能起到主宰頁面的作用，低調的扮演著協助主導航的角色，讓用戶在購物時完全不受到它的干擾。

銀泰的面包屑設計不像大多數網站選擇全透明背景，而是使用了與周圍背景色很相近的灰色。這種做法很容易讓面包屑就此融入全局中，不產生用戶使用時的任何困擾。

最近很火的幽靈按鈕，也是降低用戶困擾的有效方法喲，推薦學習！《網頁設計新趨勢！你聽說過“幽靈按鈕”嗎？》

六、避免重復主導航的形式

現在的電商網站都很熱衷于在小細節上做文章，他們的出發點是希望在細節中體現出優良的用戶體驗，就比如在原本簡單的面包屑中添加下拉菜單。網站方認為這樣做能讓用戶在更短的時間內找到自己需要的商品，但其實意義并不大。

以一號店為例，電子商務網站的主導航基本都有下拉擴展分類的功能，所以，面包屑導航如果也采用相同的形式就會變得很重復，而在實際功能上其實差異也不大。

京東的網站就避免了這一點，主導航是常規的下拉菜單形式，面包屑的設計也比較簡單明了，沒有過多的功能。

七、盡量精簡層級

精簡面包屑導航層級原因不僅僅為了提升用戶體驗，也為了利于搜索引擎的抓取。盡量把面包屑控制在4個層級以內，對用戶視覺和SEO都有很大的好處。

唯品會的面包屑就顯得過于拖沓繁瑣了。雖然從分類上來說比較精細，分門別類十分清晰，但是“傻瓜式”的面包屑更適合實際使用。

蘇寧易購的面包屑與唯品會的風格就完全不一樣，蘇寧易購的面包屑默認控制在4層以內，其他的多元化選項在另外一個區域中存在，降低了用戶在使用時的受干擾程度。

八、在面包屑中使用關鍵字

面包屑對于網站的SEO有著很大的影響作用，因此把握關鍵字的設置也許能為網站帶來更多的流量。

正如天貓的案例所示，在面包屑導航的第四層級中，用戶可以根據自己的時機需求篩選關鍵字，讓呈現出的產品更加準確。

總結：

我們認為，面包屑是每個電子商務網站的一個必備模塊，用戶體驗是否過關在這里可以有很好的體現。所有的網站元素可能都講究創新改變，但是面包屑卻始終如一，用最簡單的方式來滿足用戶的瀏覽需求。

【創意字體設計教程三部曲】

Step 1：了解字體的性格，再來跟它談朋友！
《不會挑選字體？來看看字體的7種類型及特點》

Step 2：現在可以學習創意字體的設計方法了！
《經驗分享：超詳細的字體設計方法+案例分析》

Step 3：實戰模式！手把手教你創意字體設計！
《字體變形記！手把手教你用AI繪制Q版的萌萌噠字體》

原文地址：anyforweb
作者：@AnyForWeb_UDC

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量87萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：