面包屑導(dǎo)航如何設(shè)計才合理

What? 什么是面包屑導(dǎo)航

面包屑是作為輔助和補充的導(dǎo)航方式（secondary navigation scheme），它能讓用戶知道在網(wǎng)站或應(yīng)用中所處的位置并能方便地回到原先的地點。 最常見的面包屑的樣式是：橫向的文字鏈接，由大于號“>”分開，這個符號也暗示了它們的層級關(guān)系。

面包屑的分類

1、基于用戶所在的層級位置。（Location-based）
基于位置的面包屑用于告知用戶在當(dāng)前網(wǎng)站中所在的結(jié)構(gòu)層級。用在具有多級導(dǎo)航（通常具有2級以上導(dǎo)航）的網(wǎng)站中。

2、基于產(chǎn)品的屬性。(Attribute-based)
這種類型的面包屑常出現(xiàn)在具有大量類別產(chǎn)品和服務(wù)的網(wǎng)站中，如電子商務(wù)網(wǎng)站，網(wǎng)上教學(xué)服務(wù)等。

3、基于用戶的足跡。(Path-based)
顯示用戶瀏覽的軌跡，面包屑之間沒有明顯的層級關(guān)系。

Why? 為什么使用面包屑導(dǎo)航（面包屑導(dǎo)航的好處）

1、面包屑作為用戶尋找路徑的一種輔助手段，能方便他們定位和導(dǎo)航。
2、面包屑可以減少的用戶返回上一級頁面的所需的操作次數(shù)。
3、臨時性，動態(tài)性，占用屏幕空間小，干擾性小。
4、降低網(wǎng)站訪問者的總體跳出率。（當(dāng)用戶從別處鏈接到網(wǎng)頁，或者從搜索引擎查找到網(wǎng)頁，則面包屑的存在能幫助用戶快速了解當(dāng)前的層級位置，并引導(dǎo)用戶查看網(wǎng)站的其余部分。減少了看完直接跳走的用戶數(shù)量。）

When? 何時使用面包屑導(dǎo)航

1、存在大量的分級內(nèi)容的網(wǎng)站中。
大型的電子商務(wù)網(wǎng)站是典型的例子，里面有大量的產(chǎn)品分別歸屬于不同的大類別及細分類別。

2、在一些引導(dǎo)性的網(wǎng)絡(luò)應(yīng)用或者軟件安裝進程中，面包屑也常被用來指示當(dāng)前以及剩余的操作步驟。類似于進程條的變種。

3、層次簡單的頁面中一般不使用面包屑，但是當(dāng)面包屑能顯著幫助到瀏覽并提高他們定位能力時，也建議采用面包屑。
相冊瀏覽就是一個典型的例子，結(jié)構(gòu)層次并不復(fù)雜，但用戶在特定幾個頁面之間跳轉(zhuǎn)的頻率會比較高（如相冊首頁，相片縮略圖頁，相片瀏覽頁等），所以面包屑的存在對提高此處的瀏覽效率是很有幫助的。

注意點：面包屑不能替代有效的主導(dǎo)航，它是一個輔助功能；一個允許用戶定位他們在哪里的輔助導(dǎo)航方案。

How? 如何設(shè)計面包屑導(dǎo)航

面包屑連接符的主要樣式

綜合評估以上樣式，并考慮到面包屑的包含關(guān)系和指示性，建議使用以下兩種連接符：

面包屑的位置

通常出現(xiàn)在頁面的左上或者右上部分，而且主要是在導(dǎo)航下面或者內(nèi)容區(qū)的上面。

面包屑的大小

面包屑是一種輔助導(dǎo)航，在頁面中不應(yīng)該起支配作用。面包屑和主導(dǎo)航相比至少要比較小、或不太突出。在確定面包屑大小的時候，一個較很好的方法是，當(dāng)訪問這個頁面的時候，它不應(yīng)該是頁面中最醒目的元素。如果第一眼就注意到了面包屑，可能就需要再弱化一點。

上圖中的面包屑過于醒目，干擾到了主導(dǎo)航，甚至喧賓奪主。

Extension 面包屑設(shè)計擴展

帶下拉列表的面包屑

香港雅虎，淘寶網(wǎng)等網(wǎng)站的面包屑中有下拉列表，可以方便用戶快速跳轉(zhuǎn)到同類或其他類別的新聞和產(chǎn)品。

交互式面包屑

Delicious中的tag分組已面包屑的形式出現(xiàn)在網(wǎng)頁頭部，按前文提到的面包屑分類此處屬于一種“基于用戶足跡”(Path-based)的面包屑。記錄了用戶瀏覽tag分組的順序。同時這些面包屑還可以被及時“干掉”，方便了對內(nèi)容的管理，真是別出心裁的設(shè)計。

回顧總結(jié)

是否還記得關(guān)于面包屑的3W+H+E？

參考文獻：
《Breadcrumbs In Web Design: Examples And Best Practices》
http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/