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

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

一個(gè)小小的面包屑是最能體現網(wǎng)站用戶(hù)體驗的部分之一。電商網(wǎng)站的子頁(yè)面數不勝數，而面包屑是指引用戶(hù)的一盞明燈，由此可見(jiàn)面包屑導航對于用戶(hù)瀏覽的重要性。

1.關(guān)鍵詞統一，避免用詞重復

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

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

淘寶網(wǎng)中的面包屑就相對直觀(guān)。從“所有分類(lèi)”到“女裝”再到“羽絨服”，每一個(gè)大分類(lèi)都沒(méi)有重復性，讓用戶(hù)能在第一時(shí)間做出反應。

2.顯示層級頁(yè)面的產(chǎn)品數量

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

優(yōu)購時(shí)尚商城的面包屑導航就注意到了這方面的小細節。系統會(huì )根據用戶(hù)對條件的篩選自動(dòng)抓取商品種類(lèi)的數量，讓用戶(hù)根據商品的實(shí)際情況進(jìn)行選擇。

3.分類(lèi)少也能使用面包屑

傳統意義上都建議當網(wǎng)站的層級分類(lèi)很多的時(shí)候可以使用面包屑，如果網(wǎng)站分類(lèi)較少就可以省去這個(gè)部分。但筆者認為，面包屑還能有助于用戶(hù)明確產(chǎn)品定位。當用戶(hù)對產(chǎn)品沒(méi)有目標性時(shí)，定位式面包屑就能讓用戶(hù)擁有更加順暢的購物體驗。

聚美優(yōu)品的商品分類(lèi)其實(shí)并不算少，但他們仍然選擇使用定位式的面包屑設計。設計師將產(chǎn)品大分類(lèi)和用戶(hù)容易更改的部分做了一些小間隔，便于用戶(hù)對條件進(jìn)行修改。

4.使用具有指向性的符號

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

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

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

5.降低干擾

面包屑導航的設計應該始終遵循這樣一個(gè)經(jīng)驗法則：它不應該抓住用戶(hù)的注意力。一個(gè)稱(chēng)職的面包屑一定不能起到主宰頁(yè)面的作用，低調的扮演著(zhù)協(xié)助主導航的角色，讓用戶(hù)在購物時(shí)完全不受到它的干擾。

銀泰的面包屑設計不像大多數網(wǎng)站選擇全透明背景，而是使用了與周?chē)尘吧芟嘟幕疑?。這種做法很容易讓面包屑就此融入全局中，不產(chǎn)生用戶(hù)使用時(shí)的任何困擾。

6.避免重復主導航的形式

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

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

京東的網(wǎng)站就避免了這一點(diǎn)，主導航是常規的下拉菜單形式，面包屑的設計也比較簡(jiǎn)單明了，沒(méi)有過(guò)多的功能。

7.盡量精簡(jiǎn)層級

精簡(jiǎn)面包屑導航層級原因不僅僅為了提升用戶(hù)體驗，也為了利于搜索引擎的抓取。盡量把面包屑控制在4個(gè)層級以?xún)?，對用?hù)視覺(jué)和SEO都有很大的好處。

唯品會(huì )的面包屑就顯得過(guò)于拖沓繁瑣了。雖然從分類(lèi)上來(lái)說(shuō)比較精細，分門(mén)別類(lèi)十分清晰，但是“傻瓜式”的面包屑更適合實(shí)際使用。

蘇寧易購的面包屑與唯品會(huì )的風(fēng)格就完全不一樣，蘇寧易購的面包屑默認控制在4層以?xún)?，其他的多元化選項在另外一個(gè)區域中存在，降低了用戶(hù)在使用時(shí)的受干擾程度。

8.在面包屑中使用關(guān)鍵字

面包屑對于網(wǎng)站的SEO有著(zhù)很大的影響作用，因此把握關(guān)鍵字的設置也許能為網(wǎng)站帶來(lái)更多的流量。

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

總結：

筆者認為，面包屑是每個(gè)電子商務(wù)網(wǎng)站的一個(gè)必備模塊，用戶(hù)體驗是否過(guò)關(guān)在這里可以有很好的體現。所有的網(wǎng)站元素可能都講究創(chuàng )新改變，但是面包屑卻始終如一，用最簡(jiǎn)單的方式來(lái)滿(mǎn)足用戶(hù)的瀏覽需求。