導航在網站設計的成功中起著至關重要的作用，它會影響訪問者找到他們正在尋找的信息的難易程度以及整體易用性。如今，有許多類型的網站導航可以滿足您網站的審美和實際需求——從傳統的水平和垂直菜單到漢堡包圖標（這是移動導航的最愛）、燈箱菜單、錨鏈接等等。

今天我們不打算談論導航菜單，而是許多品牌、企業和個人網站所有者正在他們的網站上實施的一種獨特且方便的 UX 設計元素：面包屑。

痕跡導航與有序且具有視覺吸引力的網站菜單配對時，可以通過引導訪問者瀏覽您的在線內容來提高設計的有效性。在本文中，我們將討論什么是面包屑導航，在什么情況下它會使網站受益，以及將它們添加到您自己的設計中的最佳實踐。

什么是痕跡導航？

痕跡導航是位于網頁頂部標題正下方的輔助導航。文本鏈接的數字跟蹤可幫助用戶找到他們的方位、回溯他們的步驟并識別快捷方式。

何時應向網站添加痕跡導航？

創建 Web 站點時，應始終包含頂級頁面和類別的主要導航，通常在頁眉中。

即使您構建了一個單頁網站，主導航鏈接和網站菜單也會讓訪問者熟悉您網站的內容，使他們能夠找到部分。您并不總是需要痕跡導航，但它可以使您的用戶體驗受益。

您可以出于以下常見原因向您的網站添加痕跡導航：

• 您的導航比兩層更深

• 如果您可以將所有類別和子類別放入主導航中而不會過度擁擠，那么您就不需要面包屑導航。將痕跡導航視為處理更深層次導航層（如子類別、產品篩選器等）的空間。

• 您啟動了一個具有重大增長潛力的網站

• 即使您沒有啟動包含太多內容的網站，隨著時間的推移，您也可能會添加更多內容。如果創建這些站點之一，您應該從頭開始構建 breadcrumbs：

• 電子商務

• 內容（例如博客、雜志、報紙）

• 軟件即服務

• 任何站點，包括支持中心或知識庫

• 您的頁面沒有側邊欄鏈接或內部鏈接系統

• 如果您在內部頁面上共享相關鏈接或類別，那么您可能不想通過痕跡導航占用額外的空間。例如，您的博客讀者可能會發現在側邊欄下拉菜單上找到頂級類別很有價值。他們也可能只是希望在文章末尾看到相關鏈接。
  
  

痕跡導航的類型

網站在 UX 設計中通常使用兩種類型的痕跡導航：

01. 基于位置的面包屑

• 基于位置的痕跡導航也稱為基于層次結構的痕跡導航，它顯示鏈接軌跡，從主頁開始，到當前位置結束。

• 痕跡導航讓訪客知道他們正在查看對應搜索結果頁面，并包含結果數量。

• 最后一項在這兩個結構之間有所不同： Target 顯示搜索結果頁面類別，而 IKEA 顯示當前頁面名稱：

• 首頁 > 靈感

• 一般結構或多或少相同。當用戶從左向右查看時，類別會縮小。這種痕跡導航樣式使用戶能夠導航或回溯到上級類別，而不是從頭開始搜索。

• 訪客可能會發現以這種方式布局的類別和相關子類別很有幫助。這種面包屑導航還讓他們更好地了解網站的產品，如果最初的搜索沒有結果，他們會走上不同的道路。
  
  

02. 基于屬性的面包屑導航

• 基于屬性的痕跡導航跟蹤使用戶能夠在當前結果沒有提供正確的產品時刪除篩選條件。此導航仍提供有關用戶站點位置及其當前頁面視圖的上下文，但通常不設計為一系列分層鏈接。

• 基于歷史記錄的痕跡導航

• 從技術上講，還有第三種基于用戶當前會話路徑的痕跡導航類型：基于歷史記錄的痕跡導航。

• 網站通常不使用它們，因為它們很少實用。客戶在零售商的電子商務商店購物時可能會比較各種產品。首先，他們查看一個品牌的產品，然后查看不同尺寸或顏色的同一品牌的產品。然后他們會探索其他品牌。

• 在該會話中，他們可能會查看單個商品的 10 種或更多類型。

使用痕跡導航的好處

使用數字面包屑，網站的訪問者和品牌從中受益：

增強的網站可用性

即使您使用熟悉的模式和直觀的交互構建網站，內容量和網站復雜性仍然可能給一些用戶帶來障礙。因此，如今您通常可以在網站上找到面包屑導航。

痕跡導航使您能夠設計精簡的網站菜單，將額外的導航詳細信息移動到每個網頁的頂部。這個小型網站組件在很大程度上改善了您的用戶體驗：

讓回溯更容易

防止用戶迷路或不知所措

向用戶介紹新的子類別

幫助他們更清楚地了解您的品牌所做的一切

由于受限空間會影響用戶體驗，因此痕跡導航還可以提高移動設備的易用性。

降低跳出率

痕跡導航創造了一種無痛的導航體驗，因為訪問者不必依賴主導航和瀏覽器的 “Back” 按鈕。它還為用戶提供了輕松發現更多內容的工具。如果做得好，它應該會改善訪問者的頁面停留時間指標并降低跳出率。

提高搜索排名

痕跡導航有助于組織具有大量內容或庫存的網站。該組織使搜索引擎更容易了解網站的用途、為其內容編制索引并將其推薦用于相關搜索。

Google 甚至在搜索結果中展示了網站的面包屑導航。

使用痕跡導航的提示

除了遵循網站導航提示外，還要牢記這些其他痕跡導航創建提示：

 
1. 將面包屑放在左上角

• 雖然這不是一個硬性規定，但設計師通常會將面包屑導航放在網站的左上角，因為熟悉的用戶會本能地在那里尋找它們。此外，這個地方自然會吸引新用戶的眼球。

2. 表示可點擊的文本

• 當您為網頁設計超鏈接時，不要將它們設置為看起來像純文本，因為這會使訪問者幾乎不可能識別可點擊的文本。

3. 在面包屑之間使用分隔符

• 由于痕跡導航軌跡很小，因此不能依賴空格來明確一個痕跡導航的開始位置和結束位置。因此，請在每個鏈接之間放置一個符號.
  

• 網站通常使用以下兩種類型：

• Dollar Shave Club 使用的  大于符號 （>）

• Chewy 使用的  正斜杠 （/）

• 雖然您通常會在網站上找到這兩種樣式，但任何表示層次結構或關系的符號（如箭頭）都可以使用。您還可以添加特定于品牌的符號（如果有）。

4. 注意大小

• 痕跡導航不應在您的網頁上占用太多空間。事實上，大多數設計人員都會將他們的面包屑導航設置為比頁面文本的其余部分小一兩個像素，這樣它就不會分散對主要內容的注意力。

• 也就是說，請注意大小。您需要一個足夠大的字體，以便每個訪問者都能閱讀，但又不能太大，以免使痕跡導航軌跡太長。它應該只占用頁面上的一行。

5. 在移動設備上以不同的方式處理面包屑

• 長長的面包屑痕跡不適合智能手機屏幕。而且您不想強制您的移動面包屑包裝，因為它會將主要內容進一步推到頁面上并使用戶感到沮喪。

• 通過限制移動網站上默認痕跡導航鏈接的數量，并調整您的設計以適應較小的屏幕，您可以擁有一個保持整潔的用戶界面，即使在為訪問者提供有用的輔助導航系統時也是如此。

創建您自己的電子商務網站并在此處查找有關網頁設計教程的更多信息。