網頁設計技巧之麵包屑設計

What? 什麼是麵包屑
麵包屑是作為輔助和補充的導航方式(secondary navigation scheme),它能讓用戶知道在網站或應用中所處的位置並能方便地回到原先的地點。 最常見的麵包屑的樣式是:橫向的文字鏈接,由大於號“ >”分開,這個符號也暗示了它們的層級關係。
【 麵包屑的分類】
1.基於用戶所在的層級位置。(Location-based) 基於位置的麵包屑用於告知用戶在當前網站中所在的結構層級。用在具有多級導航(通常具有2級以上導航)的網站中。

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

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

Why? 為什麼使用麵包屑(麵包屑的好處)
1.麵包屑作為用戶尋找路徑的一種輔助手段,能方便他們定位和導航。 2.麵包屑可以減少的用戶返回上一級頁面的所需的操作次數。 3.臨時性,動態性,佔用屏幕空間小,干擾性小。 4.降低網站訪問者的總體跳出率。(當用戶從別處鏈接到網頁,或者從搜索引擎查找到網頁,則麵包屑的存在能幫助網站設計用戶快速瞭解當前的層級位置,並引導用戶查看網站的其餘部分。減少了看完直接跳走的用戶數量。)

When? 何時使用麵包屑
1. 存在大量的分級內容的網站中。 大型的電子商務網站是典型的例子,裡面有大量的產品分別歸屬於不同的大類別及細分類別。

2. 在一些引導性的網絡應用或者軟件安裝進程中,麵包屑也常被用來指示當前以及剩餘的操作步驟。類似於進程條的變種。
3. 層次簡單的頁面中一般不使用麵包屑,但是當麵包屑能顯著幫助到瀏覽並提高他們定位能力時,也建議採用麵包屑。 相冊瀏覽就是一個典型的例子,結構層次並不複雜,但用戶在特定幾個頁面之間跳轉的頻率會比較高(如相冊首頁,相片縮略圖頁,相片瀏覽頁等),所以麵包屑的存在對提高此處的網頁寄存瀏覽效率是很有幫助的。

注意點:麵包屑不能替代有效的主導航,它是一個輔助功能;一個允許用戶定位他們在哪裡的輔助導航方案。
How? 如何設計麵包屑
【麵包屑連接符的主要樣式】

綜合評估以上樣式,並考慮到麵包屑的包含關係和指示性,建議使用以下兩種連接符:

【麵包屑的位置】
通常出現在頁面的左上或者右上部分,而且主要是在導航下面或者內容區的上面。
【麵包屑的大小】
麵包屑是一種輔助導航,在頁面中不應該起支配作用。麵包屑和主導航相比至少要比較小、或不太突出。在確定麵包屑大小的時候,一個較很好的方法是,當訪問這個頁面的時候,它不應該是頁面中最醒目的元素。如果第一眼就注意到了麵包屑,可能就需要再弱化一點。

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

Extension 麵包屑設計擴展
【帶下拉列表的麵包屑】
香港雅虎,淘寶網等網站的麵包屑中有下拉列表,可以方便用戶快速跳轉到同類或其他類別的新聞和產品。

【交互式麵包屑】
Delicious中的tag分組已麵包屑的形式出現在網頁頭部,按前文提到的麵包屑分類此處屬於一種“基於用戶足跡”(Path-based)的麵包屑。記錄了用戶瀏覽tag分組的順序。同時這些麵包屑還可以被及時“幹掉”,方便了對內容的管理,真是別出心裁的設計。

【回顧總結】
是否還記得關於麵包屑的3W+H+E?