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

一、什么是面包屑

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

什么是面包屑(breadcrumbs)?

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

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

1. 面包屑的樣式

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

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

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

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

2. 面包屑的位置

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

顯示在頁面頂部的典型位置，就在全局導(dǎo)航欄的下方。軌跡顯示當(dāng)前頁面在站點(diǎn)層次結(jié)構(gòu)中的位置。

將面包屑直接放在頁面標(biāo)題上方或旁邊；直接放置在頁面標(biāo)題附近的面包屑獲得了高達(dá) 82% 的所有面包屑點(diǎn)擊量。

3. 面包屑的分類

當(dāng)前設(shè)計中主要使用了 2 種面包屑類型，1 是基于位置，2 是基于屬性。

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

面包屑的另一種思考

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

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

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

4. 面包屑的作用

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

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

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

三、面包屑如何使用

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

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

最后的總結(jié)

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

設(shè)計建議：

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

參考文獻(xiàn)

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