乾貨 麵包屑的故事

每天讀一篇一線開發者原創好文

▍作者簡介

作者李慶是一名UCD工程師，致力於中興通訊OES網管系統的用戶體驗設計。本文主要分享了網頁設計中的一個重要元素「麵包屑」的設計。介紹了麵包屑的來源、總結了設計中遇到的一些問題以及麵包屑的一些擴展應用。

▍什麼是麵包屑？

麵包屑導航(BreadcrumbNavigation)這個概念來自童話故事《格林童話》中的一則寓言故事，當漢賽爾和格萊特穿過森林時，不小心迷路了，但是他們發現在沿途走過的地方都撒下了麵包屑，讓這些麵包屑來幫助他們找到回家的路。

所以，當我們把麵包屑的概念應用到網頁設計中，它的作用是幫助用戶在系統或網站中定位當前的位置，起到一定的導航作用，方便用戶對周邊（或父子）位置等進行鏈接跳轉以及返回原來的位置。

▍麵包屑的分類

基於層級位置

基於層級位置的麵包屑是最常用的，它一般是按照網站系統的架構來顯示的，用戶會很清晰的看出自己在網站的哪個位置，可以通過點擊其他層級的鏈接來切換自己的位置。如果通過A業務模塊頁面中的鏈接跳轉到了B業務模塊的頁面，此時麵包屑也會跟著轉變為B業務模塊相關的層級位置。

如下圖，用戶在看體育新聞的時候通過鏈接轉到另外一條財經新聞，這時麵包屑也會跟著轉到國內財經的位置，而不會再在體育的位置下顯示財經。

基於產品屬性

基於產品屬性的麵包屑適用於在大量分門別類的展示平台里，例如電商平台之類的網站應用較多，可以根據屬性將商品進行分類。

基於用戶路徑

基於用戶路徑的麵包屑就是按照童話故事中漢賽爾和格萊特走過的每個位置留下一個印記來設計的，這種麵包屑可以顯示用戶所有在網頁中點擊過的頁面，可以隨時返回之前的路徑。這種麵包屑的用處並不是太大，所以現在使用的相對較少。

▍什麼樣的系統適合適用麵包屑？

麵包屑的應用很廣泛，移動app、信息網頁、後台系統等，當我們停留在系統中迷茫，找不到方向的時候，這時候你肯定需要一個麵包屑告訴你: 」你在這裡「。這個聲音很重要！

很多網站用戶使用體驗的調查報告中也得出超過3次點擊訪客還沒有找到需要的信息，訪客很大的可能性就會離開網站。所以，麵包屑可以做這件事，為訪客做一個優秀的導遊。

▍哪些系統不需要麵包屑？

系統的設計足夠扁平化，通過其他方式完全能表達用戶的位置，系統層級關係簡單的時候是沒有必要使用麵包屑的。

現在很多系統使用的左側導航或者頂部導航就能完全明確的展示用戶的位置，如下圖：

▍怎樣設計麵包屑?

麵包屑的樣式

現在網頁的設計很多樣化，麵包屑的樣式也很多，Steve Krug的《點石成金》一書中曾對麵包屑的設計提到幾項最佳實踐：

1.把它們放在最頂層

麵包屑能幫助迷途的孩子找到家，它的重要性不言而喻。所以我們要把麵包屑置於內容區的頂層。

2.使用「>」號對層級進行間隔

當前網頁的設計千變萬化，麵包屑的設計也出現了很多種樣式，常見的有以下幾種：

使用向右的箭頭從視覺上似乎更能表達層級這個概念，暗示著用戶是沿著層級向前移動的動作。 「>」 相對於其他兩種向右的箭頭，更簡潔，因為麵包屑只是頁面的一種輔助導航，設計可以偏輕量化一些，不宜喧賓奪主。

加粗最後一個元素

最後一個元素是當前頁面的標題，應該跟其他元素有所區別，至於是否使用加粗，這個可以根據頁面的設計風格來定。

▍ 是否都需要一個完整的麵包屑？

麵包屑做為系統的一個輔助導航，是可以搭配系統的其他導航一起使用的，例如系統中已經有明確的一級、二級導航菜單時，麵包屑也可以只展示除去一級、二級導航菜單剩餘的路徑，這樣麵包屑也會更簡單。

▍麵包屑的發展

麵包屑由原來的只表示瀏覽路徑發展到現在大多數作為根據網站層級結構來幫助用戶進行導航的工具，當然還有更多的擴展應用：

將麵包屑應用於已篩選選項的展示

麵包屑中加入下拉菜單等，方便用戶選擇路徑的兄弟路徑，幫助提升網站在用戶體驗。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！