電子商務網站設計分析:麵包屑導航

　　AnyForWeb正式推出電子商務網站設計分析的系列文章，每月更新，本次主題為電商網站的麵包屑導航設計，歡迎關注!

　　網站中的麵包屑導航(Breadcrumb Navigation)導航是一種作為輔助和補充的導航方式，它能協助使用者明確當下所在的網站內位置，並快捷返回之前的路徑。

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

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

　　1.關鍵詞統一，避免用詞重複

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

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

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

　　2.顯示層級頁面的產品數量

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

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

　　3.分類少也能使用麵包屑

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

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

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

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

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

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

　　5.降低幹擾

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

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

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

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

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

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

　　7.盡量精簡層級

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

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

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

　　8.在麵包屑中使用關鍵字

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

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

　　總結：

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