編輯導(dǎo)語(yǔ)：面包屑導(dǎo)航這個(gè)概念來(lái)自童話(huà)故事“漢賽爾和格萊特”，當(dāng)漢賽爾和格萊特穿過(guò)森林時(shí)，不小心迷路了，但是他們發(fā)現(xiàn)在沿途走過(guò)的地方都撒下了面包屑，讓這些面包屑來(lái)幫助他們找到回家的路。面包屑是作為輔助和補(bǔ)充的導(dǎo)航方式（secondary navigation scheme），它能讓用戶(hù)知道在網(wǎng)站或應(yīng)用中所處的位置并能方便地回到原先的地點(diǎn)。本文主要講面包屑導(dǎo)航是如何設(shè)計(jì)的。

一、摘要

通過(guò)反映您網(wǎng)站信息層次結(jié)構(gòu)的面包屑來(lái)支持尋路功能。在移動(dòng)設(shè)備上，請(qǐng)避免使用太小的面包屑或?qū)⑵渫ㄟ^(guò)多行來(lái)顯示。

面包屑是一個(gè)重要的導(dǎo)航元素，它支持尋路——讓用戶(hù)知道自己在網(wǎng)站的層次結(jié)構(gòu)中的當(dāng)前位置。

它是表示當(dāng)前頁(yè)面及其“祖先”（父頁(yè)面、祖父母頁(yè)面等）的鏈接列表，通常可以一直返回到網(wǎng)站主頁(yè)。NN/g從1995年就開(kāi)始推薦使用面包屑，因?yàn)樗鼈優(yōu)橛脩?hù)提供了很多好處，而在用戶(hù)界面上幾乎沒(méi)有任何成本。

面包屑通常在頁(yè)面頂部，全局導(dǎo)航的正下方，以一系列鏈接的形式來(lái)指示軌跡。

主頁(yè)（或?qū)哟谓Y(jié)構(gòu)的根節(jié)點(diǎn)）是第一個(gè)鏈接，鏈接之間通常用符號(hào)“>”或“/”隔開(kāi)；盡管沒(méi)有功能上的區(qū)別，兩者都可以接受，但仍推薦使用“>”字符。

REI.com：“1??”–顯示在頁(yè)面頂部的典型位置，即全局導(dǎo)航欄的下方。路徑顯示了當(dāng)前頁(yè)面在網(wǎng)站層次結(jié)構(gòu)中的位置。路徑中的每個(gè)項(xiàng)目都是指向父頁(yè)面的鏈接；“>”字符分隔面包屑。當(dāng)然，在此示例中，面包屑路徑中忽略了主頁(yè)和當(dāng)前頁(yè)面，不建議這樣做。

如果用戶(hù)在瀏覽完該路徑的所有父頁(yè)面后訪(fǎng)問(wèn)了一個(gè)深層次頁(yè)面，那么他們將非常清楚地了解自己在網(wǎng)站的信息層次結(jié)構(gòu)中的位置。但是當(dāng)他們跳過(guò)其中的一些級(jí)別時(shí)（例如，他們是通過(guò)單擊外部鏈接–如搜索引擎結(jié)果，到達(dá)網(wǎng)站的），面包屑導(dǎo)航也會(huì)幫助他們找到其他可能更相關(guān)的頁(yè)面。

深層次的頁(yè)面通常顯示相對(duì)狹窄的特定主題的內(nèi)容，但是面包屑軌跡可以引導(dǎo)用戶(hù)找到當(dāng)前頁(yè)面的多個(gè)父頁(yè)面中的更多內(nèi)容。

二、PC端使用面包屑的準(zhǔn)則

1. 面包屑不應(yīng)取代區(qū)域內(nèi)的全局導(dǎo)航欄或本地導(dǎo)航

面包屑是用來(lái)補(bǔ)充其他導(dǎo)航組件的，比如一個(gè)橫跨每個(gè)頁(yè)面頂部的全局導(dǎo)航欄，或者一個(gè)通常位于左側(cè)的本地導(dǎo)航欄；面包屑會(huì)補(bǔ)充但不會(huì)取代那些主要的導(dǎo)航形式。

Travelsouthdakota.com顯示了面包屑路徑，該路徑也用作部分導(dǎo)航。與傳統(tǒng)的面包屑路徑（將是：Home/Explore/Rineries/Cultural Immersion）不同，該面包屑軌跡包含一個(gè)第1層項(xiàng)目（Explore）和其他父頁(yè)面（More Interneries）。導(dǎo)向父頁(yè)面的鏈接是一個(gè)下拉菜單，包含當(dāng)前頁(yè)面的同級(jí)（圖下）。而一個(gè)更好的設(shè)計(jì)應(yīng)該是有一個(gè)單獨(dú)的UI模塊用于本地導(dǎo)航，使用戶(hù)能夠訪(fǎng)問(wèn)網(wǎng)站當(dāng)前部分的平行頁(yè)面。

2. 面包屑應(yīng)顯示網(wǎng)站層次結(jié)構(gòu)中的當(dāng)前位置，而不是歷史記錄

面包屑不應(yīng)該顯示在網(wǎng)站訪(fǎng)問(wèn)期間所瀏覽的頁(yè)面的歷史記錄（歷史記錄可以通過(guò)瀏覽器本身的后退按鈕返回）；

它們旨在顯示網(wǎng)站內(nèi)的層次結(jié)構(gòu)。我們已經(jīng)注意到這一點(diǎn)很多年了，但它仍然需要反復(fù)強(qiáng)調(diào)；

試圖按順序顯示用戶(hù)訪(fǎng)問(wèn)過(guò)的頁(yè)面列表，很快就會(huì)變得冗長(zhǎng)和令人困惑，并且重復(fù)很多，同時(shí)，對(duì)于直接從外部鏈接進(jìn)入深度頁(yè)面的用戶(hù)來(lái)說(shuō)，這是面包屑的主要用途之一。

3. 對(duì)于多層次網(wǎng)站，面包屑應(yīng)在網(wǎng)站的多層次結(jié)構(gòu)中顯示一條路徑

面包屑對(duì)多層次網(wǎng)站（其中一個(gè)頁(yè)面有多個(gè)父級(jí)）形成了固有的張力。在這種情況下，我們不建議顯示兩個(gè)或多個(gè)面包屑路徑，來(lái)反映多層次結(jié)構(gòu)中的不同路徑，因?yàn)樗鼈儠?huì)混淆用戶(hù)并在頁(yè)面頂部占用大量空間。

如果一個(gè)頁(yè)面有多個(gè)不同的父級(jí)，請(qǐng)?jiān)诰W(wǎng)站層次結(jié)構(gòu)中標(biāo)識(shí)該頁(yè)面的規(guī)范路徑，并在面包屑中顯示該路徑。

不要試圖對(duì)面包屑路徑進(jìn)行個(gè)性化設(shè)置，這樣它就可以在網(wǎng)站層次結(jié)構(gòu)中反映每個(gè)用戶(hù)的個(gè)人路徑，因?yàn)檫@會(huì)和搜索引擎本身功能相混淆。您仍然需要在層次結(jié)構(gòu)中指定一條路徑作為來(lái)自外部鏈接的訪(fǎng)問(wèn)者的主要路徑。

4. 將當(dāng)前頁(yè)面作為面包屑路徑中的最后一項(xiàng)包含在內(nèi)

5. 在面包屑路徑中，與當(dāng)前頁(yè)面相對(duì)應(yīng)的面包屑不應(yīng)是鏈接

不應(yīng)該把對(duì)應(yīng)當(dāng)前頁(yè)面的路徑（最后一個(gè)面包屑）做成鏈接形式，因?yàn)辄c(diǎn)擊它不會(huì)有任何情況出現(xiàn)。為了避免混淆用戶(hù)，在視覺(jué)上區(qū)分當(dāng)前頁(yè)面和前面鏈接的面包屑，最好使用下劃線(xiàn)或藍(lán)色文本。

在英國(guó)紅十字會(huì)的網(wǎng)站上，并沒(méi)有在視覺(jué)上區(qū)分“Volunteer in emergencies”和其他面包屑，它本身不是一個(gè)鏈接。

信息架構(gòu)（information architecture）

6. 面包屑應(yīng)僅包含網(wǎng)站頁(yè)面，而不應(yīng)包含IA中的邏輯類(lèi)別

面包屑軌跡中的每個(gè)節(jié)點(diǎn)都應(yīng)該是指向父頁(yè)面的鏈接（與當(dāng)前頁(yè)面相對(duì)應(yīng)的鏈接除外）。

如果全局導(dǎo)航中的某些子類(lèi)別標(biāo)簽沒(méi)有專(zhuān)用于它們的單獨(dú)頁(yè)面，則不要在面包屑軌跡中包含這些子類(lèi)別。

“單擊并跳轉(zhuǎn)”的能力是用戶(hù)理解面包屑的關(guān)鍵部分，因此所有項(xiàng)目（除了當(dāng)前頁(yè)面）都應(yīng)該代表用戶(hù)可以訪(fǎng)問(wèn)的地方。

Newegg.com：全局導(dǎo)航（上）的子類(lèi)別沒(méi)有自己特定的頁(yè)面，例如，Commercial Networking? 1??。在“Wired Networking”頁(yè)面（下）上，2??不包括“Commercial Networking”?，因?yàn)樵撟宇?lèi)別沒(méi)有相關(guān)聯(lián)的頁(yè)面。

7. 對(duì)于層級(jí)結(jié)構(gòu)僅有1或2層的網(wǎng)站，或結(jié)構(gòu)呈線(xiàn)性的網(wǎng)站，面包屑不是必需的（或是無(wú)用的）

對(duì)于只有1級(jí)或2級(jí)類(lèi)別的平行層次結(jié)構(gòu)的站點(diǎn)，不需要面包屑作為路徑引導(dǎo)。在這種情況下，請(qǐng)考慮清楚地指明頁(yè)面所在的頂級(jí)菜單或類(lèi)別。

麻省理工學(xué)院的主網(wǎng)站具有統(tǒng)一的層次結(jié)構(gòu)，每個(gè)模塊只有一頁(yè)。盡管它在頁(yè)面頂部具有面包屑，但此面包屑不是必需的。在主導(dǎo)航中，頁(yè)面的位置已經(jīng)突出顯示了。

NPR設(shè)有一個(gè)有關(guān)顏色歷史的微型站點(diǎn)，該站點(diǎn)被設(shè)計(jì)為線(xiàn)性體驗(yàn)，用戶(hù)可以按順序依次瀏覽每個(gè)頁(yè)面。該站點(diǎn)的結(jié)構(gòu)是非分層的，因此不需要包含面包屑路徑（也沒(méi)有價(jià)值）。

8. 面包屑路徑應(yīng)該以指向主頁(yè)的鏈接開(kāi)始

就像我們的全局導(dǎo)航一樣，仍然需要鏈接到首頁(yè)（Home）。但是，請(qǐng)注意，不建議在全局導(dǎo)航和面包屑路徑中同時(shí)存在Home鏈接–兩者存一就可以。

俄勒岡州政府網(wǎng)站上有一個(gè)面包屑軌跡，省略了指向主頁(yè)（Home）的鏈接。

但是，在這種情況下，這是可以接受的，因?yàn)樵撜军c(diǎn)還在全局導(dǎo)航中包含一個(gè)“Home”鏈接–不必同時(shí)存在該主頁(yè)鏈接，但需要在兩個(gè)地方之一中顯示它。

三、在移動(dòng)端使用面包屑的準(zhǔn)則

不幸的是，在移動(dòng)設(shè)備上，使用面包屑的成本遠(yuǎn)超所獲得的收益。

1. 不要使用多行面包屑

在移動(dòng)端，面包屑可能是以多行的形式存在，并在已經(jīng)擁擠的移動(dòng)顯示屏上占用寶貴的空間。

多行面包屑路徑無(wú)法很好地說(shuō)明鏈路的結(jié)構(gòu)（尤其是某個(gè)標(biāo)簽單獨(dú)占據(jù)了一行，而其他標(biāo)簽可能在一行中有兩個(gè)或更多）。

REI.com的移動(dòng)網(wǎng)站使用多行面包屑，它使路徑名稱(chēng)折行，甚至在其他移動(dòng)設(shè)備（圖為iPhone X）上會(huì)顯示不全（隱藏）。

2. 不要使用太小或太擁擠的面包屑

一些網(wǎng)站試圖通過(guò)使面包屑鏈接更小或更靠近，來(lái)節(jié)省屏幕空間占用。

不幸的是，該解決方案在觸摸屏上不起作用：觸摸屏點(diǎn)擊目標(biāo)的熱區(qū)至少為1cm X 1cm。

3. 考慮縮短面包屑路徑，使其僅包括最后一個(gè)級(jí)別

在某些頁(yè)面上，指向某個(gè)級(jí)別的單個(gè)面包屑可能是主要用戶(hù)目標(biāo)所必需的所有內(nèi)容。

例如：在電子商務(wù)網(wǎng)站上，如果用戶(hù)登陸產(chǎn)品詳細(xì)信息頁(yè)面（例如：通過(guò)Google搜索），則她可能希望查看該類(lèi)別中的其他產(chǎn)品選項(xiàng)以進(jìn)行比較，因此將面包屑鏈接到層次結(jié)構(gòu)中的父級(jí)可以支持此常見(jiàn)任務(wù)。該解決方案避免了過(guò)長(zhǎng)而擁擠的面包屑軌跡，也節(jié)省了寶貴的移動(dòng)觸摸屏空間。

請(qǐng)注意，此建議與第8條（面包屑路徑應(yīng)該以指向主頁(yè)的鏈接開(kāi)始）不沖突，這條準(zhǔn)則只能在移動(dòng)設(shè)備上執(zhí)行。在桌面上（有更多空間），始終顯示完整記錄，依然遵循第8條準(zhǔn)則。

Bestbuy.com：移動(dòng)網(wǎng)站（上）顯示出一條截?cái)嗟拿姘架壽E1??，允許訪(fǎng)問(wèn)直接父頁(yè)面。

桌面網(wǎng)站（下）顯示了完整的痕跡2??。移動(dòng)設(shè)備上的這種方案支持路徑找尋，也可避免占用寶貴的空間。

四、總結(jié)

面包屑是導(dǎo)航的輔助形式，可幫助用戶(hù)訪(fǎng)問(wèn)層次結(jié)構(gòu)中其他路徑的內(nèi)容。

當(dāng)用戶(hù)通過(guò)外部鏈接到達(dá)網(wǎng)站而不是從首頁(yè)開(kāi)始時(shí)，它們特別有用。確保面包屑路徑中的所有標(biāo)簽都是鏈接，并且隨著您逐步深入網(wǎng)站，每個(gè)節(jié)點(diǎn)都變得更加具體。

在移動(dòng)設(shè)備上，面包屑可能會(huì)占用過(guò)多空間或難以點(diǎn)擊。在您的用戶(hù)任務(wù)允許的情況下，請(qǐng)考慮縮短面包屑路徑。

原文地址：https://www.nngroup.com/articles/breadcrumbs/

原文作者：佩奇·勞布海默

本文由 @Henry-Lee 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議