麪包屑設計

What? 什麼是麪包屑

　　麪包屑是做爲輔助和補充的導航方式（secondary navigation scheme），它能讓用戶知道在網站或應用中所處的位置並能方便地回到原先的地點。 最多見的麪包屑的樣式是：橫向的文字連接，由大於號「>」分開，這個符號也暗示了它們的層級關係。

【 麪包屑的分類】

　　1.基於用戶所在的層級位置。（Location-based）
　　基於位置的麪包屑用於告知用戶在當前網站中所在的結構層級。用在具備多級導航（一般具備2級以上導航）的網站中。

　　

　　2.基於產品的屬性。(Attribute-based)
　　這種類型的麪包屑常出如今具備大量類別產品和服務的網站中，如電子商務網站，網上教學服務等。

　　

　　3.基於用戶的足跡。(Path-based)
　　顯示用戶瀏覽的軌跡，麪包屑之間沒有明顯的層級關係。

　

Why? 爲何使用麪包屑（麪包屑的好處）

　　1.麪包屑做爲用戶尋找路徑的一種輔助手段，能方便他們定位和導航。
　　2.麪包屑能夠減小的用戶返回上一級頁面的所需的操做次數。
　　3.臨時性，動態性，佔用屏幕空間小，干擾性小。
　　4.下降網站訪問者的整體跳出率。（當用戶從別處連接到網頁，或者從搜索引擎查找到網頁，則麪包屑的存在能幫助用戶快速瞭解當前的層級位置，並引導用戶查看網站的其他部分。減小了看完直接跳走的用戶數量。）

　

When? 什麼時候使用麪包屑

　　1. 存在大量的分級內容的網站中。
　　大型的電子商務網站是典型的例子，裏面有大量的產品分別歸屬於不一樣的大類別及細分類別。

　　

　　2. 在一些引導性的網絡應用或者軟件安裝進程中，麪包屑也常被用來指示當前以及剩餘的操做步驟。相似於進程條的變種。

　　3. 層次簡單的頁面中通常不使用麪包屑，可是當面包屑能顯著幫助到瀏覽並提升他們定位能力時，也建議採用麪包屑。
　　相冊瀏覽就是一個典型的例子，結構層次並不複雜，但用戶在特定幾個頁面之間跳轉的頻率會比較高（如相冊首頁，相片縮略圖頁，相片瀏覽頁等），因此麪包屑的存在對提升此處的瀏覽效率是頗有幫助的。

　　

　　注意點：麪包屑不能替代有效的主導航，它是一個輔助功能；一個容許用戶定位他們在哪裏的輔助導航方案。

　

How? 如何設計麪包屑

【麪包屑鏈接符的主要樣式】

　　

　　綜合評估以上樣式，並考慮到麪包屑的包含關係和指示性，建議使用如下兩種鏈接符：

　　

【麪包屑的位置】

　　一般出如今頁面的左上或者右上部分，並且主要是在導航下面或者內容區的上面。

【麪包屑的大小】

　　麪包屑是一種輔助導航，在頁面中不該該起支配做用。麪包屑和主導航相比至少要比較小、或不太突出。在肯定麪包屑大小的時候，一個較很好的方法是，當訪問這個頁面的時候，它不該該是頁面中最醒目的元素。若是第一眼就注意到了麪包屑，可能就須要再弱化一點。

　　

　　上圖中的麪包屑過於醒目，干擾到了主導航，甚至喧賓奪主。

　

Extension 麪包屑設計擴展

【帶下拉列表的麪包屑】

　　香港雅虎，淘寶網等網站的麪包屑中有下拉列表，能夠方便用戶快速跳轉到同類或其餘類別的新聞和產品。

　　

【交互式麪包屑】

　　Delicious中的tag分組已麪包屑的形式出如今網頁頭部，按前文提到的麪包屑分類此處屬於一種「基於用戶足跡」(Path-based)的麪包屑。記錄了用戶瀏覽tag分組的順序。同時這些麪包屑還能夠被及時「幹掉」，方便了對內容的管理，真是別出心裁的設計。

　　

【回顧總結】

　　是否還記得關於麪包屑的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/