在網站設計中，面包屑設計是一種非常實用且重要的導航方式。What? 什么是面包屑

　　面包屑是作為輔佐和補充的導航方式（secondary navigation scheme），它能讓用戶知道在網站或運用中地點的方位并能方便地回到原先的地點。 常見的面包屑的款式是：橫向的文字鏈接，由大于號“>”分隔，這個符號也暗示了它們的層級聯系。

【 面包屑的分類】

　　1.根據用戶地點的層級方位。（Location-based）

　　根據方位的面包屑用于告知用戶在當時網站中地點的結構層級。用在具有多級導航（一般具有2級以上導航）的網站中。

2.根據產品的屬性。(Attribute-based)

　　這種類型的面包屑常出現在具有很多類別產品和服務的網站中，如電子商務網站，網上教育服務等。

3.根據用戶的足跡。(Path-based)

　　顯示用戶閱讀的軌跡，面包屑之間沒有明顯的層級聯系。

Why? 為什么運用面包屑（面包屑的優點）

　　1.面包屑作為用戶尋找路徑的一種輔佐手法，能方便他們定位和導航。

　　2.面包屑能夠削減的用戶回來上一級頁面的所需的操作次數。

　　3.臨時性，動態性，占用屏幕空間小，攪擾性小。

　　4.降低網站訪問者的整體跳出率。（當用戶從別處鏈接到網頁，或者從搜索引擎查找到網頁，則面包屑的存在能協助用戶快速了解當時的層級方位，并引導用戶查看網站的其余部分。削減了看完直接跳走的用戶數量。）

When? 何時運用面包屑

　　1. 存在很多的分級內容的網站中。

　　大型的電子商務網站是典型的比如，里面有很多的產品分別歸屬于不同的大類別及細分類別。

2. 在一些引導性的網絡運用或者軟件裝置進程中，面包屑也常被用來指示當時以及剩余的操作步驟。類似于進程條的變種。

　　3. 層次簡單的頁面中一般不運用面包屑，可是當面包屑能顯著協助到閱讀并提高他們定位能力時，也主張選用面包屑。

　　相冊閱讀就是一個典型的比如，結構層次并不復雜，但用戶在特定幾個頁面之間跳轉的頻率會比較高（如相冊首頁，相片縮略圖頁，相片閱讀頁等），所以面包屑的存在對提高此處的閱讀效率是很有協助的。

留意點：面包屑不能替代有效的主導航，它是一個輔佐功用；一個答應用戶定位他們在哪里的輔佐導航方案。

How? 怎么設計面包屑

【面包屑的方位】

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

【面包屑的巨細】

　　面包屑是一種輔佐導航，在頁面中不該該起分配效果。面包屑和主導航比較至少要比較小、或不太杰出。在確定面包屑巨細的時候，一個較很好的方法是，當訪問這個頁面的時候，它不該該是頁面中奪目的元素。如果第一眼就留意到了面包屑，可能就需要再弱化一點。

【帶下拉列表的面包屑】

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

交互式面包屑】

　　Delicious中的tag分組已面包屑的形式出現在網頁頭部，按前文提到的面包屑分類此處屬于一種“根據用戶足跡”(Path-based)的面包屑。記錄了用戶閱讀tag分組的次序。一起這些面包屑還能夠被及時“干掉”，方便了對內容的管理，真是別出心裁的設計。

【回顧總結】

　　是否還記得關于面包屑的3W+H+E？通過合理的設計和運用，可以提高網站的用戶體驗，增強用戶對網站的信任感和滿意度。