What? 什么是面包屑
面包屑是作為輔助和補充的導航方式（secondary navigation scheme），它能讓用戶(hù)知道在網(wǎng)站或應用中所處的位置并能方便地回到原先的地點(diǎn)。 最常見(jiàn)的面包屑的樣式是：橫向的文字鏈接，由大于號“>”分開(kāi)，這個(gè)符號也暗示了它們的層級關(guān)系。
【 面包屑的分類(lèi)】
1.基于用戶(hù)所在的層級位置。（Location-based）
基于位置的面包屑用于告知用戶(hù)在當前網(wǎng)站中所在的結構層級。用在具有多級導航（通常具有2級以上導航）的網(wǎng)站中。
2.基于產(chǎn)品的屬性。(Attribute-based)
這種類(lèi)型的面包屑常出現在具有大量類(lèi)別產(chǎn)品和服務(wù)的網(wǎng)站中，如電子商務(wù)網(wǎng)站，網(wǎng)上教學(xué)服務(wù)等。
3.基于用戶(hù)的足跡。(Path-based)
顯示用戶(hù)瀏覽的軌跡，面包屑之間沒(méi)有明顯的層級關(guān)系。
Why? 為什么使用面包屑（面包屑的好處）
1.面包屑作為用戶(hù)尋找路徑的一種輔助手段，能方便他們定位和導航。
2.面包屑可以減少的用戶(hù)返回上一級頁(yè)面的所需的操作次數。
3.臨時(shí)性，動(dòng)態(tài)性，占用屏幕空間小，干擾性小。
4.降低網(wǎng)站訪(fǎng)問(wèn)者的總體跳出率。（當用戶(hù)從別處鏈接到網(wǎng)頁(yè)，或者從搜索引擎查找到網(wǎng)頁(yè)，則面包屑的存在能幫助用戶(hù)快速了解當前的層級位置，并引導用戶(hù)查看網(wǎng)站的其余部分。減少了看完直接跳走的用戶(hù)數量。）
When? 何時(shí)使用面包屑
1. 存在大量的分級內容的網(wǎng)站中。
大型的電子商務(wù)網(wǎng)站是典型的例子，里面有大量的產(chǎn)品分別歸屬于不同的大類(lèi)別及細分類(lèi)別。
2. 在一些引導性的網(wǎng)絡(luò )應用或者軟件安裝進(jìn)程中，面包屑也常被用來(lái)指示當前以及剩余的操作步驟。類(lèi)似于進(jìn)程條的變種。
3. 層次簡(jiǎn)單的頁(yè)面中一般不使用面包屑，但是當面包屑能顯著(zhù)幫助到瀏覽并提高他們定位能力時(shí)，也建議采用面包屑。
相冊瀏覽就是一個(gè)典型的例子，結構層次并不復雜，但用戶(hù)在特定幾個(gè)頁(yè)面之間跳轉的頻率會(huì )比較高（如相冊首頁(yè)，相片縮略圖頁(yè)，相片瀏覽頁(yè)等），所以面包屑的存在對提高此處的瀏覽效率是很有幫助的。
注意點(diǎn)：面包屑不能替代有效的主導航，它是一個(gè)輔助功能；一個(gè)允許用戶(hù)定位他們在哪里的輔助導航方案。
How? 如何設計面包屑
【面包屑連接符的主要樣式】
綜合評估以上樣式，并考慮到面包屑的包含關(guān)系和指示性，建議使用以下兩種連接符：
【面包屑的位置】
通常出現在頁(yè)面的左上或者右上部分，而且主要是在導航下面或者內容區的上面。
【面包屑的大小】
面包屑是一種輔助導航，在頁(yè)面中不應該起支配作用。面包屑和主導航相比至少要比較小、或不太突出。在確定面包屑大小的時(shí)候，一個(gè)較很好的方法是，當訪(fǎng)問(wèn)這個(gè)頁(yè)面的時(shí)候，它不應該是頁(yè)面中最醒目的元素。如果第一眼就注意到了面包屑，可能就需要再弱化一點(diǎn)。
上圖中的面包屑過(guò)于醒目，干擾到了主導航，甚至喧賓奪主。
Extension 面包屑設計擴展
【帶下拉列表的面包屑】
香港雅虎，淘寶網(wǎng)等網(wǎng)站的面包屑中有下拉列表，可以方便用戶(hù)快速跳轉到同類(lèi)或其他類(lèi)別的新聞和產(chǎn)品。
【交互式面包屑】
Delicious中的tag分組已面包屑的形式出現在網(wǎng)頁(yè)頭部，按前文提到的面包屑分類(lèi)此處屬于一種“基于用戶(hù)足跡”(Path-based)的面包屑。記錄了用戶(hù)瀏覽tag分組的順序。同時(shí)這些面包屑還可以被及時(shí)“干掉”，方便了對內容的管理，真是別出心裁的設計。
【回顧總結】
是否還記得關(guān)于面包屑的3W+H+E？
聯(lián)系客服
