編輯導語：面包屑導航這個概念來自童話故事“漢賽爾和格萊特”，當漢賽爾和格萊特穿過森林時，不小心迷路了，但是他們發現在沿途走過的地方都撒下了面包屑，讓這些面包屑來幫助他們找到回家的路。面包屑是作為輔助和補充的導航方式（secondary navigation scheme），它能讓使用者知道在網站或應用中所處的位置并能友善地回到原先的地點。本文主要講面包屑導航是如何設計的。
通過反映您網站資訊層次結構的面包屑來支援尋路功能。在移動裝置上，請避免使用太小的面包屑或将其通過多行來顯示。
面包屑是一個重要的導航元素，它支援尋路——讓使用者知道自己在網站的層次結構中的目前位置。
它是表示目前頁面及其“祖先”（父頁面、祖父母頁面等）的連結清單，通常可以一直傳回到網站首頁。nn/g從1995年就開始推薦使用面包屑，因為它們為使用者提供了很多好處，而在使用者界面上幾乎沒有任何成本。
面包屑通常在頁面頂部，全局導航的正下方，以一系列連結的形式來訓示軌迹。
首頁（或層次結構的根節點）是第一個連結，連結之間通常用符号“>”或“/”隔開；盡管沒有功能上的差別，兩者都可以接受，但仍推薦使用“>”字元。
rei.com：“1⃣️”–顯示在頁面頂部的典型位置，即全局導航欄的下方。路徑顯示了目前頁面在網站層次結構中的位置。路徑中的每個項目都是指向父頁面的連結；“>”字元分隔面包屑。當然，在此示例中，面包屑路徑中忽略了首頁和目前頁面，不建議這樣做。
如果使用者在浏覽完該路徑的所有父頁面後通路了一個深層次頁面，那麼他們将非常清楚地了解自己在網站的資訊層次結構中的位置。但是當他們跳過其中的一些級别時（例如，他們是通過單擊外部連結–如搜尋引擎結果，到達網站的），面包屑導航也會幫助他們找到其他可能更相關的頁面。
深層次的頁面通常顯示相對狹窄的特定主題的内容，但是面包屑軌迹可以引導使用者找到目前頁面的多個父頁面中的更多内容。
面包屑是用來補充其他導航元件的，比如一個橫跨每個頁面頂部的全局導航欄，或者一個通常位于左側的本地導航欄；面包屑會補充但不會取代那些主要的導航形式。
travelsouthdakota.com顯示了面包屑路徑，該路徑也用作部分導航。與傳統的面包屑路徑（将是：home/explore/rineries/cultural immersion）不同，該面包屑軌迹包含一個第1層項目（explore）和其他父頁面（more interneries）。導向父頁面的連結是一個下拉菜單，包含目前頁面的同級（圖下）。而一個更好的設計應該是有一個單獨的ui子產品用于本地導航，使使用者能夠通路網站目前部分的平行頁面。
面包屑不應該顯示在網站通路期間所浏覽的頁面的曆史記錄（曆史記錄可以通過浏覽器本身的後退按鈕傳回）；
它們旨在顯示網站内的層次結構。我們已經注意到這一點很多年了，但它仍然需要反複強調；
試圖按順序顯示使用者通路過的頁面清單，很快就會變得冗長和令人困惑，并且重複很多，同時，對于直接從外部連結進入深度頁面的使用者來說，這是面包屑的主要用途之一。
面包屑對多層次網站（其中一個頁面有多個父級）形成了固有的張力。在這種情況下，我們不建議顯示兩個或多個面包屑路徑，來反映多層次結構中的不同路徑，因為它們會混淆使用者并在頁面頂部占用大量空間。
如果一個頁面有多個不同的父級，請在網站層次結構中辨別該頁面的規範路徑，并在面包屑中顯示該路徑。
不要試圖對面包屑路徑進行個性化設定，這樣它就可以在網站層次結構中反映每個使用者的個人路徑，因為這會和搜尋引擎本身功能相混淆。您仍然需要在層次結構中指定一條路徑作為來自外部連結的通路者的主要路徑。
不應該把對應目前頁面的路徑（最後一個面包屑）做成連結形式，因為點選它不會有任何情況出現。為了避免混淆使用者，在視覺上區分目前頁面和前面連結的面包屑，最好使用下劃線或藍色文本。
在英國紅十字會的網站上，并沒有在視覺上區分“volunteer in emergencies”和其他面包屑，它本身不是一個連結。
資訊架構（information architecture）
面包屑軌迹中的每個節點都應該是指向父頁面的連結（與目前頁面相對應的連結除外）。
如果全局導航中的某些子類别标簽沒有專用于它們的單獨頁面，則不要在面包屑軌迹中包含這些子類别。
“單擊并跳轉”的能力是使用者了解面包屑的關鍵部分，是以所有項目（除了目前頁面）都應該代表使用者可以通路的地方。
newegg.com：全局導航（上）的子類别沒有自己特定的頁面，例如，commercial networking 1⃣️。在“wired networking”頁面（下）上，2⃣️不包括“commercial networking” ，因為該子類别沒有相關聯的頁面。
7. 對于層級結構僅有1或2層的網站，或結構呈線性的網站，面包屑不是必需的（或是無用的）
對于隻有1級或2級類别的平行層次結構的站點，不需要面包屑作為路徑引導。在這種情況下，請考慮清楚地指明頁面所在的頂級菜單或類别。
麻省理工學院的主網站具有統一的層次結構，每個子產品隻有一頁。盡管它在頁面頂部具有面包屑，但此面包屑不是必需的。在主導航中，頁面的位置已經突出顯示了。
npr設有一個有關顔色曆史的微型站點，該站點被設計為線性體驗，使用者可以按順序依次浏覽每個頁面。該站點的結構是非分層的，是以不需要包含面包屑路徑（也沒有價值）。
就像我們的全局導航一樣，仍然需要連結到首頁（home）。但是，請注意，不建議在全局導航和面包屑路徑中同時存在home連結–兩者存一就可以。
俄勒岡州政府網站上有一個面包屑軌迹，省略了指向首頁（home）的連結。
但是，在這種情況下，這是可以接受的，因為該站點還在全局導航中包含一個“home”連結–不必同時存在該首頁連結，但需要在兩個地方之一中顯示它。
不幸的是，在移動裝置上，使用面包屑的成本遠超所獲得的收益。
在移動端，面包屑可能是以多行的形式存在，并在已經擁擠的移動顯示屏上占用寶貴的空間。
多行面包屑路徑無法很好地說明鍊路的結構（尤其是某個标簽單獨占據了一行，而其他标簽可能在一行中有兩個或更多）。
rei.com的移動網站使用多行面包屑，它使路徑名稱折行，甚至在其他移動裝置（圖為iphone x）上會顯示不全（隐藏）。
一些網站試圖通過使面包屑連結更小或更靠近，來節省螢幕空間占用。
不幸的是，該解決方案在觸摸屏上不起作用：觸摸屏點選目标的熱區至少為1cm x 1cm。
在某些頁面上，指向某個級别的單個面包屑可能是主要使用者目标所必需的所有内容。
例如：在電子商務網站上，如果使用者登陸産品詳細資訊頁面（例如：通過google搜尋），則她可能希望檢視該類别中的其他産品選項以進行比較，是以将面包屑連結到層次結構中的父級可以支援此常見任務。該解決方案避免了過長而擁擠的面包屑軌迹，也節省了寶貴的移動觸摸屏空間。
請注意，此建議與第8條（面包屑路徑應該以指向首頁的連結開始）不沖突，這條準則隻能在移動裝置上執行。在桌面上（有更多空間），始終顯示完整記錄，依然遵循第8條準則。
bestbuy.com：移動網站（上）顯示出一條截斷的面包屑軌迹1⃣️，允許通路直接父頁面。
桌面網站（下）顯示了完整的痕迹2⃣️。移動裝置上的這種方案支援路徑找尋，也可避免占用寶貴的空間。
面包屑是導航的輔助形式，可幫助使用者通路層次結構中其他路徑的内容。
當使用者通過外部連結到達網站而不是從首頁開始時，它們特别有用。確定面包屑路徑中的所有标簽都是連結，并且随着您逐漸深入網站，每個節點都變得更加具體。
在移動裝置上，面包屑可能會占用過多空間或難以點選。在您的使用者任務允許的情況下，請考慮縮短面包屑路徑。
原文位址：https://www.nngroup.com/articles/breadcrumbs/
原文作者：佩奇·勞布海默
本文由 @henry-lee 翻譯釋出于人人都是産品經理。未經許可，禁止轉載
題圖來自unsplash，基于cc0協定