原標題：麵包屑：11個針對PC端和移動端的設計準則
編輯導語：麵包屑導航這個概念來自童話故事「漢賽爾和格萊特」，當漢賽爾和格萊特穿過森林時，不小心迷路了，但是他們發現在沿途走過的地方都撒下了麵包屑，讓這些麵包屑來幫助他們找到回家的路。麵包屑是作為輔助和補充的導航方式（secondarynavigationscheme），它能讓用戶知道在網站或應用中所處的位置並能方便地回到原先的地點。本文主要講麵包屑導航是如何設計的。
一、摘要
通過反映您網站信息層次結構的麵包屑來支持尋路功能。在行動裝置上，請避免使用太小的麵包屑或將其通過多行來顯示。
麵包屑是一個重要的導航元素，它支持尋路——讓用戶知道自己在網站的層次結構中的當前位置。
它是表示當前頁面及其「祖先」（父頁面、祖父母頁面等）的連結列表，通常可以一直返回到網站主頁。NN/g從1995年就開始推薦使用麵包屑，因為它們為用戶提供了很多好處，而在用戶界面上幾乎沒有任何成本。
麵包屑通常在頁面頂部，全局導航的正下方，以一系列連結的形式來指示軌跡。
主頁（或層次結構的根節點）是第一個連結，連結之間通常用符號「>」或「/」隔開；儘管沒有功能上的區別，兩者都可以接受，但仍推薦使用「>」字符。
REI.com：「1⃣️」–顯示在頁面頂部的典型位置，即全局導航欄的下方。路徑顯示了當前頁面在網站層次結構中的位置。路徑中的每個項目都是指向父頁面的連結；「>」字符分隔麵包屑。當然，在此示例中，麵包屑路徑中忽略了主頁和當前頁面，不建議這樣做。
如果用戶在瀏覽完該路徑的所有父頁面後訪問了一個深層次頁面，那麼他們將非常清楚地了解自己在網站的信息層次結構中的位置。但是當他們跳過其中的一些級別時（例如，他們是通過單擊外部連結–如搜尋引擎結果，到達網站的），麵包屑導航也會幫助他們找到其他可能更相關的頁面。
深層次的頁面通常顯示相對狹窄的特定主題的內容，但是麵包屑軌跡可以引導用戶找到當前頁面的多個父頁面中的更多內容。
二、PC端使用麵包屑的準則1.麵包屑不應取代區域內的全局導航欄或本地導航
麵包屑是用來補充其他導航組件的，比如一個橫跨每個頁面頂部的全局導航欄，或者一個通常位於左側的本地導航欄；麵包屑會補充但不會取代那些主要的導航形式。
Travelsouthdakota.com顯示了麵包屑路徑，該路徑也用作部分導航。與傳統的麵包屑路徑（將是：Home/Explore/Rineries/CulturalImmersion）不同，該麵包屑軌跡包含一個第1層項目（Explore）和其他父頁面（MoreInterneries）。導向父頁面的連結是一個下拉菜單，包含當前頁面的同級（圖下）。而一個更好的設計應該是有一個單獨的UI模塊用於本地導航，使用戶能夠訪問網站當前部分的平行頁面。
2.麵包屑應顯示網站層次結構中的當前位置，而不是歷史記錄
麵包屑不應該顯示在網站訪問期間所瀏覽的頁面的歷史記錄（歷史記錄可以通過瀏覽器本身的後退按鈕返回）；
它們旨在顯示網站內的層次結構。我們已經注意到這一點很多年了，但它仍然需要反覆強調；
試圖按順序顯示用戶訪問過的頁面列表，很快就會變得冗長和令人困惑，並且重複很多，同時，對於直接從外部連結進入深度頁面的用戶來說，這是麵包屑的主要用途之一。
3.對於多層次網站，麵包屑應在網站的多層次結構中顯示一條路徑
麵包屑對多層次網站（其中一個頁面有多個父級）形成了固有的張力。在這種情況下，我們不建議顯示兩個或多個麵包屑路徑，來反映多層次結構中的不同路徑，因為它們會混淆用戶並在頁面頂部佔用大量空間。
如果一個頁面有多個不同的父級，請在網站層次結構中標識該頁面的規範路徑，並在麵包屑中顯示該路徑。
不要試圖對麵包屑路徑進行個性化設置，這樣它就可以在網站層次結構中反映每個用戶的個人路徑，因為這會和搜尋引擎本身功能相混淆。您仍然需要在層次結構中指定一條路徑作為來自外部連結的訪問者的主要路徑。
4.將當前頁面作為麵包屑路徑中的最後一項包含在內5.在麵包屑路徑中，與當前頁面相對應的麵包屑不應是連結
不應該把對應當前頁面的路徑（最後一個麵包屑）做成連結形式，因為點擊它不會有任何情況出現。為了避免混淆用戶，在視覺上區分當前頁面和前面連結的麵包屑，最好使用下劃線或藍色文本。
在英國紅十字會的網站上，並沒有在視覺上區分「Volunteerinemergencies」和其他麵包屑，它本身不是一個連結。
信息架構（informationarchitecture）
6.麵包屑應僅包含網站頁面，而不應包含IA中的邏輯類別
麵包屑軌跡中的每個節點都應該是指向父頁面的連結（與當前頁面相對應的連結除外）。
如果全局導航中的某些子類別標籤沒有專用於它們的單獨頁面，則不要在麵包屑軌跡中包含這些子類別。
「單擊並跳轉」的能力是用戶理解麵包屑的關鍵部分，因此所有項目（除了當前頁面）都應該代表用戶可以訪問的地方。
Newegg.com：全局導航（上）的子類別沒有自己特定的頁面，例如，CommercialNetworking1⃣️。在「WiredNetworking」頁面（下）上，2⃣️不包括「CommercialNetworking」，因為該子類別沒有相關聯的頁面。
7.對於層級結構僅有1或2層的網站，或結構呈線性的網站，麵包屑不是必需的（或是無用的）
對於只有1級或2級類別的平行層次結構的站點，不需要麵包屑作為路徑引導。在這種情況下，請考慮清楚地指明頁面所在的頂級菜單或類別。
麻省理工學院的主網站具有統一的層次結構，每個模塊只有一頁。儘管它在頁面頂部具有麵包屑，但此麵包屑不是必需的。在主導航中，頁面的位置已經突出顯示了。
NPR設有一個有關顏色歷史的微型站點，該站點被設計為線性體驗，用戶可以按順序依次瀏覽每個頁面。該站點的結構是非分層的，因此不需要包含麵包屑路徑（也沒有價值）。
8.麵包屑路徑應該以指向主頁的連結開始
就像我們的全局導航一樣，仍然需要連結到首頁（Home）。但是，請注意，不建議在全局導航和麵包屑路徑中同時存在Home連結–兩者存一就可以。
俄勒岡州政府網站上有一個麵包屑軌跡，省略了指向主頁（Home）的連結。
但是，在這種情況下，這是可以接受的，因為該站點還在全局導航中包含一個「Home」連結–不必同時存在該主頁連結，但需要在兩個地方之一中顯示它。
三、在移動端使用麵包屑的準則
不幸的是，在行動裝置上，使用麵包屑的成本遠超所獲得的收益。
1.不要使用多行麵包屑
在移動端，麵包屑可能是以多行的形式存在，並在已經擁擠的移動顯示屏上佔用寶貴的空間。
多行麵包屑路徑無法很好地說明鏈路的結構（尤其是某個標籤單獨佔據了一行，而其他標籤可能在一行中有兩個或更多）。
REI.com的移動網站使用多行麵包屑，它使路徑名稱折行，甚至在其他行動裝置（圖為iPhoneX）上會顯示不全（隱藏）。
2.不要使用太小或太擁擠的麵包屑
一些網站試圖通過使麵包屑連結更小或更靠近，來節省屏幕空間佔用。
不幸的是，該解決方案在觸控螢幕上不起作用：觸控螢幕點擊目標的熱區至少為1cmX1cm。
3.考慮縮短麵包屑路徑，使其僅包括最後一個級別
在某些頁面上，指向某個級別的單個麵包屑可能是主要用戶目標所必需的所有內容。
例如：在電子商務網站上，如果用戶登陸產品詳細信息頁面（例如：通過Google搜索），則她可能希望查看該類別中的其他產品選項以進行比較，因此將麵包屑連結到層次結構中的父級可以支持此常見任務。該解決方案避免了過長而擁擠的麵包屑軌跡，也節省了寶貴的移動觸控螢幕空間。
請注意，此建議與第8條（麵包屑路徑應該以指向主頁的連結開始）不衝突，這條準則只能在行動裝置上執行。在桌面上（有更多空間），始終顯示完整記錄，依然遵循第8條準則。
Bestbuy.com：移動網站（上）顯示出一條截斷的麵包屑軌跡1⃣️，允許訪問直接父頁面。
桌面網站（下）顯示了完整的痕跡2⃣️。行動裝置上的這種方案支持路徑找尋，也可避免佔用寶貴的空間。
四、總結
麵包屑是導航的輔助形式，可幫助用戶訪問層次結構中其他路徑的內容。
當用戶通過外部連結到達網站而不是從首頁開始時，它們特別有用。確保麵包屑路徑中的所有標籤都是連結，並且隨著您逐步深入網站，每個節點都變得更加具體。
在行動裝置上，麵包屑可能會佔用過多空間或難以點擊。在您的用戶任務允許的情況下，請考慮縮短麵包屑路徑。
原文地址：https://www.nngroup.com/articles/breadcrumbs/
原文作者：佩奇·勞布海默
題圖來自Unsplash，基於CC0協議
來源：搜狐