你在網站里不會迷路，要感謝這個導航設計 #003

俊鐵導讀：

現在網路世界繽紛多彩，大家的注意力也更加短，如何讓用戶更久地留在你的網頁里？「麵包屑導航欄」就是其中一個關鍵。這篇文章，分享網頁設計「麵包屑導航欄」的 3 個 W，讓你給用戶提供更好的網頁體驗。

麵包屑導航（或麵包屑痕迹）作為輔助的導航系統，它能告訴用戶其在網站或網頁 app 中的位置。這個詞語來自漢賽爾與格萊特（又譯糖果屋）童話故事中，主人公沿路丟下麵包屑，形成一條小徑，從而指引其回到自己的家中。

和童話故事主人公一樣，網站用戶也需要知道其在網站層次結構中的位置，以使其在需要的情況下能直接瀏覽上一級頁面。

本文，我們將會來討論麵包屑導航應用及其最佳實踐：什麼是麵包屑導航（What）、什麼時候使用麵包屑導航（When）和如何設計麵包屑導航（How）。

一、麵包屑導航有什麼用？

麵包屑導航作為有效的視覺輔助，能告訴用戶其在網站層次結構中的位置。這種特性對用戶來說是上下文信息的重要來源，可以幫助用戶找到以下問題的答案：

• 我在哪裡？告訴用戶其在整個網站層次結構中的位置。
• 我能去哪裡？用戶更能找到相關網站欄目和頁面。相比菜單欄，用戶通過清晰直觀的麵包屑導航，更容易熟悉和了解網站結構。
• 我該去那裡嗎？麵包屑導航體現了網站的內容價值，能鼓勵用戶繼續瀏覽網站。比如，用戶打開電商網站某產品頁面時，該產品可能不是他想要的產品，但用戶也許想瀏覽其他同類產品。通過麵包屑導航，就能相應地減少網站的總體跳出率。

1. 減少用戶行為次數

就適用性而言，麵包屑導航減少了用戶訪問上一級頁面本應產生的行為次數。除了使用瀏覽器「後退」按鈕或網站主導航回到上一級頁面，用戶也可以使用麵包屑導航。

2. 佔用最少頁面空間

緊湊的結構，不佔用過多頁面空間，麵包屑導航是一條橫向文字連接。好處在於，如有內容過載的情況，其帶來的負面影響微乎其微。

3. 麵包屑導航為用戶帶來零煩惱

人們可能沒有在意這個小小的設計元素，但沒人不明白麵包屑導航，也沒人不會使用麵包屑導航。

二、什麼時候該用麵包屑導航？

測試網站是否會得益於麵包屑導航，有種好方法是構建網站導航結構的網站地圖或圖表，再分析麵包屑導航是否能幫助用戶，提高其在同類或不同目錄下的導航能力。

• 你應該使用麵包屑導航的前提是，有大量內容存在於有線性或層次結構的網站分類目錄中。所謂分類目錄，是指網站內容可以分類呈現，這些類別還可以繼續分為更多細分類別。典型例子正如將大量產品合理地進行分類的電商網站。
• 對於層次單一、沒有合理架構或分類的網站，則不推薦使用麵包屑導航。

三、麵包屑導航的分類

麵包屑導航可以按位置、路徑和屬性分為 3 類。

1. 位置麵包屑

位置麵包屑導航體現的是網站結構。其能輔助用戶了解網站層次結構，並在有多層級（通常大於兩級）網站中導航。若用戶從別處鏈接（比如搜索引擎結果）進入網站深層次頁面，這對用戶來說非常有用。

下圖百思買（BestBuy）的案例中，每個文本鏈接都可以指向一個頁面，從右到左依次是網站當前頁面到上一級頁面。

2. 路徑麵包屑

路徑麵包屑（也稱「歷史痕迹」）顯示用戶瀏覽至某特定頁面的所有頁面路徑。這類麵包屑導航鏈接通常是動態產生的。

有時，路徑麵包屑很有用，但大多時候會令人困惑——因為用戶瀏覽網站可能會從一個頁面突然跳到另一個頁面，非常地隨意。

這類無規律的瀏覽路徑並不能為用戶提供太大幫助，但倒可以用瀏覽器「後退」按鈕來輕鬆取代。此外，若用戶直接進入某網站深層次頁面，那路徑麵包屑也毫無用處。

下圖是路徑麵包屑示例，其展示了兩條到達目標頁面的路徑。

3. 屬性麵包屑

屬性麵包屑對電商網站非常有用，其通過特定頁面或更常見的按產品類別將大量頁面進行分類。這類麵包屑導航可以幫助用戶了解各類產品之間的關係，也提供了另外一種導航方式。

例如，在TM Lewin（一個紳士襯衫品牌）官網上，麵包屑導航展示了某特定網頁產品的屬性。

4. 層次結構還是瀏覽記錄？

麵包屑導航的經驗法則是要展示網站層次結構，而不是用戶瀏覽記錄。因此，推薦使用位置麵包屑導航或屬性麵包屑導航，而不用路徑麵包屑導航。

四、麵包屑導航設計的最佳實踐

當設計麵包屑導航時，要切記以下幾點：

1. 不要用麵包屑導航替換主導航

麵包屑導航應作為一項額外功能，其不能直接替換原本有用的主導航菜單。要切記，麵包屑導航是一項便捷功能，是輔助導航手段，是網站導航的另一種方法。

蘋果通過麵包屑導航來支持主導航

2. 當前頁面的麵包屑導航無須添加鏈接

麵包屑導航（用戶當前位置）最後一項不一定要顯示——如果你想讓它顯示，務必保證其無法點擊或操作。由於用戶已經在當前頁面，在麵包屑導航中再添加鏈接就顯得多此一舉了。

3. 使用分隔符

分隔麵包屑導航各級文字鏈接最醒目的符號是「大於號（>）」。

通常，大於號（>）用來指代層次結構，就像父目錄>子目錄這類格式。其他可以使用的符號有右箭頭（→）、雙書名號（?）以及斜杠（/）。具體選擇哪個符號取決於網站設計美學和已使用的麵包屑導航類型。

4. 選擇恰當的尺寸和內邊距

在設計時要仔細考慮目標尺寸和內邊距。麵包屑導航各級文字間應該留有足夠空間，否則用戶可能會覺得不好用。同時，麵包屑導航不能在頁面中起支配作用，因此其不能比主導航菜單更顯著。

5. 不要讓其成為設計焦點

不要使用花哨的字體或絢麗的顏色，因為這樣會喧賓奪主，畢竟麵包屑導航其主要目的不在於此。

當確定麵包屑導航的大小和風格時，經驗法則是要保證用戶進入頁面後的第一關注點不是麵包屑導航。

下圖中的麵包屑導航設計不算太差，但有點花哨，可能會分散用戶注意力，使其無法注意主導航和頁面主要內容。

Google 的麵包屑導航一點也不花哨，但用戶能輕鬆地使用和定位。

6. 手機設備上不要使用麵包屑導航

若你在手機設備上需要通過麵包屑導航，也許你會發現會出現故障。就手機上使用麵包屑導航和相應運行環境而言，其可能的原因在於網站的過度複雜（網站層次結構太深）。為解決這個問題，應該先思考如何簡化，然後你就不需要麵包屑導航了。

結束語

麵包屑導航能幫助用戶更便捷地瀏覽整個網站，但前提是網站內容和整體結構構建合理。它是少數的能提高適用性和用戶舒適度的幾個簡單功能之一。就設計而言，其在頁面中只佔據一行的位置，但帶來的貢獻卻足夠大。

作者 | Nick Babich 軟體工程師，關注 UI 和 UX。

譯者 | 俊鐵

題圖 | Pexels

本文譯自 Breadcrumbs For Web Sites: What, When and How，已獲原作者授權翻譯。

本文首發於愛范兒。商業轉載請聯繫獲得授權，非商業轉載請註明出處。

推薦閱讀：