來點實實在在能(néng)給設計師幫上忙的！面(miàn)包屑是有效提升購物體驗的一大殺器，很多電商網站（亞馬遜也中槍）這(zhè)方面(miàn)都(dōu)不夠細心，今天@AnyForWeb_UDC 的同學(xué)總結了8個特别實用的面(miàn)包屑導航設計技巧，有對(duì)比有案例，嚼勁十足，來一頓設計大餐吧！

　　@AnyForWeb_UDC ：網站中的面(miàn)包屑導航（Breadcrumb Navigation）是一種(zhǒng)作爲輔助和補充的導航方式，它能(néng)幫助用戶明确當下所在的網站内位置，并快捷返回之前的路徑。

　　面(miàn)包屑的由來出自一個童話，兩(liǎng)個孩子爲了不在森林裡(lǐ)迷路，于是沿途灑下了面(miàn)包屑作爲标記，幫助自己能(néng)夠原路返回。通過(guò)這(zhè)個故事(shì)我們可以看出，之所以被(bèi)稱爲面(miàn)包屑導航，正是因爲它在網站中也起(qǐ)了相同的作用，讓用戶既能(néng)看清自己在網站中所處的位置，也能(néng)快速的找到其他同類型産品。

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

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

　　面(miàn)包屑導航的存在就是爲了讓用戶能(néng)最直觀的了解自己所處的位置，因此，用詞精簡直接并且唯一，是面(miàn)包屑必須遵守的原則。也就是說，每一個産品頁面(miàn)都(dōu)有屬于它的唯一導航，這(zhè)樣(yàng)能(néng)減少用戶在購物時産生的疑問。在用詞方面(miàn)也要盡量避免有歧義的用詞，京東的面(miàn)包屑導航在這(zhè)方面(miàn)做的就不夠好(hǎo)。一級分類和二級分類分别爲“家用電器”和“生活電器”，這(zhè)兩(liǎng)個含義相近的詞彙增加了用戶的思考時間。因此，近義詞和平級詞彙應該在面(miàn)包屑中盡量避免。

　　淘寶網中的面(miàn)包屑就相對(duì)直觀。從“所有分類”到“女裝”再到“羽絨服”，每一個大分類都(dōu)沒(méi)有重複性，讓用戶能(néng)在第一時間做出反應。

　　二、顯示層級頁面(miàn)的産品數量

　　用戶使用面(miàn)包屑的目的主要有兩(liǎng)種(zhǒng)，一種(zhǒng)是想要返回上級，第二種(zhǒng)就是查看頁面(miàn)中展示産品的類型。在用戶的實際操作中，這(zhè)兩(liǎng)種(zhǒng)需求的重要程度不分上下，但是大多數電商網站都(dōu)忽略了後(hòu)者。其實，這(zhè)方面(miàn)的改善并不困難，隻要在層級頁面(miàn)的分類中展現出商品的數量，用戶就能(néng)很清晰的看到所需商品的種(zhǒng)類數量，便于用戶挑選。

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

　　三、分類少也能(néng)使用面(miàn)包屑

　　傳統意義上都(dōu)建議當網站的層級分類很多的時候可以使用面(miàn)包屑，如果網站分類較少就可以省去這(zhè)個部分。但我們認爲，面(miàn)包屑還(hái)能(néng)有助于用戶明确産品定位。當用戶對(duì)産品沒(méi)有目标性時，定位式面(miàn)包屑就能(néng)讓用戶擁有更加順暢的購物體驗。

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

　　四、使用具有指向(xiàng)性的符号

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

　　亞馬遜網站的面(miàn)包屑在符号上用戶體驗很不令人滿意，“：”既不能(néng)明确的顯示出字詞之間的概括性，指示性也遠不如箭頭那麼(me)直接。

　　而魅力惠的面(miàn)包屑符号就滿足了所有的标準，符号顔色和字詞相同，大小也很适中，讓用戶在有需要的時候能(néng)馬上找到它，但又毫不耀眼。

　　五、降低幹擾

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

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

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

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

　　以一号店爲例，電子商務網站的主導航基本都(dōu)有下拉擴展分類的功能(néng)，所以，面(miàn)包屑導航如果也采用相同的形式就會變得很重複，而在實際功能(néng)上其實差異也不大。

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

　　七、盡量精簡層級

　　精簡面(miàn)包屑導航層級原因不僅僅爲了提升用戶體驗，也爲了利于搜索引擎的抓取。盡量把面(miàn)包屑控制在4個層級以内，對(duì)用戶視覺和SEO都(dōu)有很大的好(hǎo)處。

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

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

　　八、在面(miàn)包屑中使用關鍵字

　　面(miàn)包屑對(duì)于網站的SEO有著(zhe)很大的影響作用，因此把握關鍵字的設置也許能(néng)爲網站帶來更多的流量。

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

　　總結：

　　我們認爲，面(miàn)包屑是每個電子商務網站的一個必備模塊，用戶體驗是否過(guò)關在這(zhè)裡(lǐ)可以有很好(hǎo)的體現。所有的網站元素可能(néng)都(dōu)講究創新改變，但是面(miàn)包屑卻始終如一，用最簡單的方式來滿足用戶的浏覽需求。