面包屑導航是從網(wǎng)站技術興起就伴隨出現(xiàn)的老組件了，至今還在使用，為用戶提供了許多好處，而對設計幾乎沒有任何成本，前輩們也做了大量的研究和實踐，證明是可行的。所以這次分析面包屑導航設計，希望大家閱讀過后有助于展開項目設計并對設計系統(tǒng)更深一步地了解。

一、什么是面包屑

面包屑，英文：Breadcrumbs 直譯過來，來源于格林童話中《漢賽爾與格萊特》，講述的是一對兄妹在繼母的慫恿下遭到父親的遺棄，通過石子或面包屑做標記，找回家的路，雖然面包屑被鳥吃掉了，沒找到回家的路，但面包屑的思路在網(wǎng)站的設計中沿用了下來，形成我們現(xiàn)在口中的面包屑組件。其中這個面包屑的作用是：留下返回路徑。

什么是面包屑(breadcrumbs)?

面包屑是一種導航組件，用于顯示用戶在網(wǎng)站或應用程序中的位置，并能向上返回。

二、面包屑的形態(tài)

1. 面包屑的樣式

以下是面包屑的常用樣式，當前正在查看的頁面的名稱不應該是可點擊的鏈接，因為重新加載活動頁面只會令人困惑。這 1 和 2 為面包屑的常用樣式，兩者都可以接受，功能是沒有差別的，推薦使用">"字符，箭頭指向，前進路徑更形象；3-7 為面包屑的樣式擴展，可根據(jù)實際的業(yè)務場景對應選擇。

面包屑不僅只存在于 PC 端，面包屑不是 PC 端的專利，移動端也是可以考慮加上面包屑的，值得探討的是，移動端加上面包屑的成本大于收益，不僅影響視覺/布局，交互上體驗也較差，所以導致現(xiàn)在移動端的基本看不到面包屑。

若任務允許，也是可以加入面包屑的。移動端設計面包屑需要注意：

1. 不要使用太小或太擁擠的面包屑；
2. 不要使用包含多行的面包屑；
3. 考慮縮短面包屑路徑以僅包含最后一個級別

2. 面包屑的位置

據(jù)國外的研究發(fā)現(xiàn)，面包屑的位置在它被點擊的頻率中所起到重要作用。

顯示在頁面頂部的典型位置，就在全局導航欄的下方。軌跡顯示當前頁面在站點層次結構中的位置。

將面包屑直接放在頁面標題上方或旁邊；直接放置在頁面標題附近的面包屑獲得了高達 82% 的所有面包屑點擊量。

3. 面包屑的分類

當前設計中主要使用了 2 種面包屑類型，1 是基于位置，2 是基于屬性。

還有一種是基于路徑的面包屑導航，這個很少見，這種類型的導航更像是歷史記錄，他們的功能基本上是和前進和后退的按鈕是一樣的，不推薦用于導航目的，因為它并沒有真正的幫助。對于登錄網(wǎng)站深處頁面的人來說，它甚至可能會感到困惑。

面包屑的另一種思考

面包屑的目的是幫助我們找到回去的路，箭頭方向指向左，不是更好嗎？

是的，指向左的箭頭效果更好，設計中可考慮：

1. 跟移動端保持一致，盡量減少用戶體驗的差異；
2. 冗余較少，可以減少當前頁的顯示，頁面少一個元素讓用戶處理，反過來提高頁面的可用性；
3. 跟面包屑的初衷設計是一樣的。

4. 面包屑的作用

研究表明面包屑在 6% 的情況下被用作導航工具。相比之下，40% 的用戶點擊了嵌入式鏈接，31% 的用戶點擊了瀏覽器后退按鈕，22% 的用戶點擊了導航欄。同一項研究表明，當沒有面包屑路徑存在時，導航欄和后退按鈕的使用頻率更高。

另一研究表明，在研究過程中，研究人員向參與者指出了面包屑路徑，并要求參與者在可行的情況下使用面包屑。接受面包屑使用指導的測試參與者完成任務的速度比沒有接受指導的參與者快得多。

在互聯(lián)網(wǎng)上搜索了這個問題的答案，可以確認，面包屑可以改善 SEO，但不要在這方面投入太多，只通過面包屑改善 SEO 效果很小。

三、面包屑如何使用

雖然眼下很多網(wǎng)站都流行使用面包屑導航，但是并不是所有的網(wǎng)站都適用。符合下面兩個條件的網(wǎng)站才適合使用面包屑導航。

1. 層級較深，層級達到三層或三層以上的網(wǎng)站；
2. 功能邏輯緊密，功能模塊之間有關聯(lián)，網(wǎng)站內(nèi)容結構上獨立不交叉結。

最后的總結

面包屑導航是一種輔助形式的導航，減少了用戶訪問特定頁面所需的點擊次數(shù)，這有助于防止用戶跳出。它甚至不會占用太多空間，因此沒有正當?shù)睦碛?，建議還是加上面包屑導航。

設計建議：

1. 面包屑不應取代全局導航欄或部分內(nèi)的本地導航。
2. 面包屑路徑應該以指向主頁的鏈接開頭，完整的鏈接，無點擊鏈接是不可取的（除當前頁面）。
3. 用于頁面分層排列的大型網(wǎng)站和復雜產(chǎn)品（在設計三層或三層以上的網(wǎng)站時使用面包屑），讓登陸頁面的用戶可以快速知道自己在哪里。
4. 在產(chǎn)品中，確保面包屑不會在視覺上壓倒頁面，面包屑可以通過較短的名稱或自動折疊來適應導航狀態(tài)。
5. 將面包屑放在屏幕左上角，頁面標題上方或旁邊。

參考文獻

1. https://www.nngroup.com/articles/breadcrumbs/
2. https://www.usability.gov/get-involved/blog/2006/11/breadcrumb-navigation.Html
3. https://arco.design/docs/spec/breadcrumb
4. https://ant.design/components/breadcrumb-cn/?theme=compact
5. https://element-plus.gitee.io/zh-CN/component/breadcrumb.html

作者：兆日 UCD