作者：Nick Babich ?? 翻譯：ITsCrystal??? 編輯：風(fēng)口上的豬毛
面包屑是一個(gè)網(wǎng)站或者app中為用戶指引其所處位置的第二導(dǎo)航系統(tǒng)漱受。它來源格林童話中的一個(gè)著名的故事情節(jié)变勇，里面說到的面包屑是用來指引故事主人翁回家的。
和童話故事里的一樣蔓肯，瀏覽者能夠了解這個(gè)網(wǎng)站的層級(jí)結(jié)構(gòu)，并且便于瀏覽高層級(jí)的內(nèi)容振乏。
在本文中蔗包，我們將對(duì)網(wǎng)站中面包屑導(dǎo)航的運(yùn)用進(jìn)行探索，并對(duì)一些好的實(shí)例進(jìn)行討論慧邮，以便將來能運(yùn)用在你的網(wǎng)站中调限。
面包屑導(dǎo)航越來越廣泛的應(yīng)用
它也被當(dāng)作一種有效的視覺救援，指引用戶在網(wǎng)站層級(jí)中所處的位置误澳。以上這些特性使得用戶通過面包屑導(dǎo)航獲取到一大部分承上啟下的信息資源耻矮，并且?guī)椭脩粽业揭韵聠栴}的答案：
- 我在哪兒？面包屑導(dǎo)航提醒瀏覽者他當(dāng)前處于整個(gè)網(wǎng)站層級(jí)中具體位置忆谓，
- 我能去到哪里淘钟？面包屑導(dǎo)航能夠提高用戶對(duì)網(wǎng)站的章節(jié)和頁面的搜尋能力，比起只是放置一個(gè)菜單陪毡，放置一排面包屑導(dǎo)航更容易讓人理解網(wǎng)站的結(jié)構(gòu)。
- 我將去哪里勾扭？面包屑導(dǎo)航能將內(nèi)容進(jìn)行關(guān)聯(lián)毡琉，并且促進(jìn)瀏覽（比如電商網(wǎng)站的用戶可能進(jìn)到一個(gè)商品詳情頁之后，發(fā)現(xiàn)這個(gè)商品并不是自己想要的妙色，這個(gè)時(shí)候用戶可能有意愿瀏覽同類的商品）桅滋，同時(shí)，又反過來降低了整個(gè)網(wǎng)站的跳出率身辨。
減少操作次數(shù)
就可用性而言丐谋，面包屑可以減少用戶為達(dá)到一個(gè)更高的層級(jí)頁面所必經(jīng)的操作步驟。用戶可用面包屑替代使用瀏覽器的“返回”按鈕或網(wǎng)站的初始化導(dǎo)航煌珊。
占用最少空間
這是一種不需要占用多大空間的緊湊機(jī)制号俐，因?yàn)樗皇且恍较聞澗€的文本鏈接。其好處是不會(huì)造成負(fù)面的頁面過載定庵。
沒有用戶受面包屑的困擾
人們會(huì)忽視這個(gè)小設(shè)計(jì)元素,但他們從來沒有覺得面包屑難以理解或難以操作吏饿。
什么時(shí)候你應(yīng)該運(yùn)用面包屑導(dǎo)航？
一個(gè)很好的方法來確定一個(gè)網(wǎng)站是否受益于面包屑導(dǎo)航蔬浙，就是構(gòu)造一個(gè)站點(diǎn)地圖或圖表來代表網(wǎng)站的導(dǎo)航結(jié)構(gòu)猪落，然后分析面包屑是否提高了用戶類別與類別之間及類別中的引導(dǎo)：
- 當(dāng)你有大量的內(nèi)容需要組織成一個(gè)嚴(yán)謹(jǐn)?shù)木€性結(jié)構(gòu)，或者層級(jí)結(jié)構(gòu)有明確類別劃分的時(shí)候（比如可拆分為很多子項(xiàng)的需要?jiǎng)澐譃閹讉€(gè)部分）一個(gè)經(jīng)典的例子就是電商網(wǎng)站畴博，就是將大量的產(chǎn)品以不同的邏輯劃分笨忌；
- 而不應(yīng)該將面包屑運(yùn)用與沒有邏輯層級(jí)或組合的單層級(jí)網(wǎng)站
面包屑導(dǎo)航的類型
面包屑導(dǎo)航一般基于以下三種：位置、路徑和屬性
基于位置
基于位置的面包屑導(dǎo)航是網(wǎng)站結(jié)構(gòu)的表現(xiàn)俱病。它們幫助用戶理解兩層以上的網(wǎng)站結(jié)構(gòu)官疲，起到導(dǎo)航的作用袱结，這種面包屑導(dǎo)航非常支持從外部資源進(jìn)入網(wǎng)站且處于較深層級(jí)的用戶（例如從搜索引擎的結(jié)果頁進(jìn)入）
在下例中（取自bestbuy）袁余，每個(gè)文本鏈接都是指向一個(gè)頁面擎勘，并且左邊的層級(jí)高于右邊。
基于路徑
基于路徑的面包屑導(dǎo)航（被稱為“歷史路徑”）展示用戶到達(dá)特定頁面的所瀏覽過的路徑颖榜。這種面包屑導(dǎo)航鏈接是一種典型的動(dòng)態(tài)生成棚饵。有時(shí)基于路徑面包屑非常有用，但是大多數(shù)時(shí)候又容易讓人疑惑——用戶經(jīng)常瀏覽非常寬泛掩完，從一個(gè)頁面跳到另外一個(gè)頁面噪漾。
如此曲折的路徑并不能給用戶提供幫助，但是能很好地替代瀏覽器的“返回”按鈕且蓬，另外欣硼，當(dāng)用戶直接到達(dá)網(wǎng)站深處頁面時(shí)，這種歷史路徑并不能給用戶提供幫助恶阴。
以下是一個(gè)路徑面包屑導(dǎo)航鏈接诈胜，它展示了到達(dá)目標(biāo)頁面的兩種路徑。
基于屬性
基于屬性的面包屑列舉出了特殊頁面或大多數(shù)電商網(wǎng)站常見的面包屑導(dǎo)航類型焦匈。這種類型的面包屑幫助用戶理解產(chǎn)品與產(chǎn)品之間的關(guān)系，并且提供一種不同的方法昵仅。
例如缓熟，在TM Lewin，面包屑導(dǎo)航在特定頁面上體現(xiàn)了不同項(xiàng)目之間的屬性關(guān)系
層級(jí)還是歷史够滑？
面包屑的經(jīng)典作用是在于體現(xiàn)網(wǎng)站的層級(jí)，而不是用戶的歷史吕世。因此,應(yīng)當(dāng)使用基于位置/屬性的面包屑,而不是基于路徑的彰触。
面包屑導(dǎo)航的最佳實(shí)例
當(dāng)你在設(shè)計(jì)面包屑導(dǎo)航時(shí)，記住以下幾點(diǎn)：
1寞冯、不要把面包屑用來替代網(wǎng)站的原始導(dǎo)航
面包屑導(dǎo)航應(yīng)當(dāng)被當(dāng)作一種附加功能渴析，而不應(yīng)該用來替代有效的主導(dǎo)航菜單。記住它只是一個(gè)方便的功能吮龄；一種次級(jí)導(dǎo)航策略俭茧；一種可供選擇的網(wǎng)站導(dǎo)航方式
2、別在面包屑導(dǎo)航的當(dāng)前頁面加鏈接
面包屑導(dǎo)航的最后一項(xiàng)（當(dāng)前用戶位置）是可顯示也可不顯示的漓帚，但是需要確定的是它不可點(diǎn)擊母债。因?yàn)楫?dāng)用戶已經(jīng)處于這個(gè)頁面時(shí)，就沒有理由給面包屑導(dǎo)航中的當(dāng)前頁面加上跳轉(zhuǎn)鏈接。
3毡们、使用分隔符
大多數(shù)面包屑導(dǎo)航都是用大于號(hào)“>”來作為鏈接與鏈接之間的分隔符迅皇。尤其是當(dāng)“>”符號(hào)被用作表示層級(jí)分隔時(shí)，它表示 父級(jí)類別>子級(jí)類別衙熔。另外還有一些符號(hào)也可以表征排序從左至右登颓，比如(→)、(?)红氯、(/)框咙。可以根據(jù)網(wǎng)站的視覺風(fēng)格和面包屑道行的類型來進(jìn)行選擇
4痢甘、選擇合適的尺寸和邊距
在設(shè)計(jì)時(shí)認(rèn)真思考一下目標(biāo)尺寸和邊距喇嘱。在不同面包屑之間應(yīng)當(dāng)留有足夠的間隙，否則用戶體驗(yàn)會(huì)很不好塞栅，覺得不好用者铜，并且你并不希望你的面包屑在頁面中占主導(dǎo)地位，因?yàn)樗鼘?huì)相對(duì)減弱你主導(dǎo)航菜單放椰。
5作烟、別讓它稱為設(shè)計(jì)的焦點(diǎn)
你不應(yīng)該使用花哨的字體或明亮的顏色,因?yàn)檫@些會(huì)破壞你使用面包屑導(dǎo)航的初衷。在設(shè)計(jì)面包屑導(dǎo)航大小尺寸和風(fēng)格時(shí)應(yīng)當(dāng)遵循的一個(gè)原則是：它不應(yīng)當(dāng)成為頁面上用戶一眼就關(guān)注到的東西砾医。
在下例中的面包屑導(dǎo)航不能說特別差俗壹，但是它太多人眼球了，以至于可能分散用戶在主內(nèi)容和主導(dǎo)航上的注意力藻烤。
google就不會(huì)將面包屑導(dǎo)航做得很花哨，但是用戶很容易找到它去用它头滔。
6怖亭、別將面包屑導(dǎo)航運(yùn)用在手機(jī)網(wǎng)站上
如果你在手機(jī)上瀏覽，你會(huì)發(fā)現(xiàn)你試圖在手機(jī)網(wǎng)站上運(yùn)用面包屑導(dǎo)航這個(gè)想法是錯(cuò)的坤检。如果需要在手機(jī)環(huán)境中提供這種特定的類型兴猩，很可能是你的網(wǎng)站結(jié)構(gòu)太過復(fù)雜，或者嵌套太深早歇。解決這個(gè)問題的根本倾芝，你應(yīng)該首先想想如何把網(wǎng)站設(shè)計(jì)得更簡單，而不是把面包屑的運(yùn)用提上日程箭跳。
總結(jié)
在網(wǎng)站內(nèi)容和整體結(jié)構(gòu)有意義的前提下晨另，所有的面包屑的作用都應(yīng)當(dāng)是為了讓瀏覽者更容易在網(wǎng)站中穿梭瀏覽。這只是一種加強(qiáng)可用性谱姓，帶給用戶良好體驗(yàn)的簡單方法借尿。只是整個(gè)網(wǎng)站中一行充分發(fā)揮作用的設(shè)計(jì)項(xiàng)。
