不論是手機(jī)還是 PC端，面包屑都是用來尋找路徑的重要組件，可以讓用戶了解當(dāng)前頁面在整個(gè)網(wǎng)站結(jié)構(gòu)的所處位置。NN/g 從1995年就開始推薦大家使用面包屑，因?yàn)樗茉趯缑嬖O(shè)計(jì)產(chǎn)生極少影響的前提下，為用戶提供很多便利。

如果一個(gè)用戶從首頁一層一層抵達(dá)最終頁面，也許 TA 對自己身處何處還算有概念。但是如果用戶從外部鏈接或者快捷入口進(jìn)來，可能對當(dāng)前的頁面層級一無所知，此時(shí)面包屑就能引導(dǎo)他們快速了解網(wǎng)站架構(gòu)。一個(gè)底層頁面所展示出來的信息也許是非常精準(zhǔn)片面的，而面包屑則能展示更大門類的信息，從而將用戶引向上層頁面。下文會按照 PC端到手機(jī)端的順序，介紹十一條面包屑的設(shè)計(jì)指南。

PC端

1. 不要用面包屑代替導(dǎo)航頁簽

網(wǎng)站導(dǎo)航和面包屑也許看起來有些相似，但是功能與使用場景完全不同，不應(yīng)該以簡化頁面為目的只保留其中一個(gè)。

2. 面包屑應(yīng)該用來展示系統(tǒng)層級，而不是歷史記錄

如果用戶是從首頁層層深入，系統(tǒng)層級與歷史記錄是沒有區(qū)別的，但是如果用戶從外部鏈接進(jìn)入，這兩個(gè)差別就大了。為了給用戶提供真正有用的信息，面包屑展示的不應(yīng)該是歷史記錄，而應(yīng)該是系統(tǒng)層級。

3. 如果網(wǎng)站有兩個(gè)父層級（如兩個(gè)同級首頁），應(yīng)該只展示一個(gè)

有的網(wǎng)站可能有兩個(gè)平級的首頁，這種情況下一定要選擇其中一個(gè)作為面包屑的第一項(xiàng)，同時(shí)列出兩個(gè)是不可取的。

4. 當(dāng)前頁一定是面包屑的最后一項(xiàng)

不要覺得在面包屑上再寫一遍當(dāng)前頁的標(biāo)題就重復(fù)了信息，面包屑的最后一項(xiàng)如果不是當(dāng)前頁，是會讓用戶產(chǎn)生困惑的。

5. 面包屑中最后一項(xiàng)（當(dāng)前頁）不需要鏈接到自身

面包屑的每一項(xiàng)都要放鏈接的，除了最后一項(xiàng)，因?yàn)榉乓粋€(gè)指向當(dāng)前頁的鏈接不但沒有必要，還會讓用戶懷疑最后一項(xiàng)到底和當(dāng)前頁是不是同一頁。

6. 面包屑的層級應(yīng)該是網(wǎng)站的頁面層級，而不是分類層級，也不應(yīng)該包括無內(nèi)容的導(dǎo)航頁

邏輯上的父級（如商品上級分類），除非有真實(shí)的頁面存在，否則不需要放在面包屑里。此外，諸如網(wǎng)站地圖一類可有可無的層級，也最好不要加到面包屑里。

7. 如果網(wǎng)站層級不多或沒有分支，就不需要面包屑了

如果面包屑只有兩級，或者根本沒有分支，那么它存在的必要性就很小了。再考慮到網(wǎng)站簡潔美觀性，這時(shí)還不如不要面包屑。

8. 面包屑的第一項(xiàng)應(yīng)該鏈接首頁

面包屑的第一項(xiàng)如果不是首頁，用戶可能會有疑問這個(gè)面包屑不可信或者該網(wǎng)站根本沒有首頁。

手機(jī)端

1. 不要把面包屑分行

就算面包屑有點(diǎn)長，分行也絕對不是一個(gè)好的主意。

2. 不要用太小的文字

縮小文字也許能夠展示更長的信息，但是用戶如果點(diǎn)擊不到或者看不清，面包屑存在的意義就沒有了。

3. 可以考慮只保留上一級面包屑

考慮到手機(jī)用戶的使用習(xí)慣和使用需求，可以不用把面包屑完整列出。

總結(jié)

面包屑是用戶尋找相關(guān)內(nèi)容的輔助工具，對于從外部鏈接進(jìn)入的場景十分有用。確保面包屑里每一項(xiàng)都可以點(diǎn)擊，并且可以查看同一層級的其它內(nèi)容。在手機(jī)端，面包屑可能難以展示完全，可以根據(jù)用戶使用方式縮短其長度。

本文翻譯整理自 NN/g（尼爾森諾曼團(tuán)隊(duì)）的研究《Breadcrumbs：11 Design Guidelines for Desktop and Mobile》

交互進(jìn)階:Z Yuhan