網頁設計中的麵包屑breadcrumb-範例與實際操作

Home >> Blog >> 網頁設計中的麵包屑breadcrumb

在有很多頁面的網站上，麵包屑breadcrumb導航可以極大地增強用戶查找路徑的方式。在可用性方面，麵包屑減少了網站訪問者為進入更高級別頁面而需要採取的操作數量，並且它們提高了網站部分和頁面的可查找性。它們也是一種有效的視覺輔助工具，可以指示用戶在網站層次結構中的位置，使其成為登錄頁面上下文訊息的重要來源。

“breadcrumb”（或“breadcrumb trail”）是一種二級導航方案，它揭示了用戶在網站或 Web 應用程式中的位置。這個詞來自漢塞爾和格萊特的童話故事，其中兩個有頭銜的孩子丟下麵包屑，形成一條回家的路。就像在故事中一樣，現實世界應用程式中的麵包屑為用戶提供了一種追踪路徑回到其原始著陸點的方法。

您通常可以在以分層方式組織大量內容的網站中找到麵包屑。您還可以在具有多個步驟的 Web 應用程式中看到它們，它們的功能類似於進度條。在最簡單的形式中，麵包屑是水平排列的文本鏈接，由“大於”符號 (>) 分隔；該符號表示該頁面相對於其旁邊的頁面鏈接的級別。

什麼時候應該使用麵包屑？

對大型網站和具有分層排列頁面的網站使用麵包屑導航。一個很好的場景是電子商務網站，其中大量的產品被分組到邏輯類別中。

您不應將麵包屑用於沒有邏輯層次結構或分組的單級網站。確定網站是否會從麵包屑導航中受益的一個好方法是構建站點地圖或表示網站導航架構的圖表，然後分析麵包屑是否會提高用戶在類別內和類別之間導航的能力。

麵包屑導航應被視為一項額外功能，不應取代有效的主導航菜單。這是一個方便的功能；輔助導航方案，允許用戶確定他們的位置；以及瀏覽您的網站的另一種方式。

3 種類型的麵包屑

1. 基於位置 基於 位置的麵包屑向用戶顯示他們在網站層次結構中的位置。它們通常用於具有多個級別（通常超過兩個級別）的導航方案。在下面的示例中（來自 SitePoint），每個文本鏈接都指向比其右側高一級的頁面。

2. 基於屬性 - 基於 屬性的麵包屑路徑顯示特定頁面的屬性。例如，在 Newegg 中，麵包屑路徑顯示特定頁面上顯示的項目的屬性：

3. 基於路徑 - 基於 路徑的麵包屑路徑向用戶顯示他們為到達特定頁面所採取的步驟。基於路徑的麵包屑是動態的，因為它們顯示用戶在到達當前頁面之前訪問過的頁面。

使用麵包屑的好處

方便用戶 麵包屑主要用於為用戶提供導航網站的輔助方式。通過為大型多級網站上的所有頁面提供麵包屑路徑，用戶可以更輕鬆地導航到更高級別的類別。

減少返回更高級別頁面的點擊或操作 用戶現在可以使用更少點擊次數的麵包屑導航而不是使用瀏覽器的“後退”按鈕或網站的主導航返回更高級別頁面。

通常不會佔用屏幕空間 因為它們通常是水平方向且樣式簡單，所以麵包屑路徑不會佔用頁面上的大量空間。好處是它們在內容過載方面幾乎沒有負面影響，如果使用得當，它們會超過任何負面影響。

降低跳出率 - 麵包屑路徑是吸引首次訪問者在查看著陸頁後細讀網站的好方法，降低跳出率也對SEO優化有加分效果。例如，假設用戶通過 Google 搜索到達某個頁面，看到麵包屑路徑可能會誘使該用戶單擊更高級別的頁面以查看相關的興趣主題。這反過來又降低了網站的整體跳出率。

Breadcrumb Trail 實施中的錯誤

使用麵包屑路徑是一件相當簡單的事情，在決定在網站上實施它們之前只需要考慮一些指導方針。讓我們來看看一些需要避免的常見錯誤。

在不需要時使用麵包屑 實現麵包屑時的一個常見錯誤是在沒有任何好處的情況下使用它們。

在上面的例子中，有太多導航選項讓用戶不知所措的風險。(1) 主導航、(2) 麵包屑路徑和 (3) 輔助導航非常接近。此應用程式中的麵包屑路徑沒有為用戶提供額外的便利，因為較低級別頁面的輔助導航位於它的正下方。此外，單擊麵包屑路徑中的第二級鏈接（“音樂”）會帶您回到第一個選項卡（“聆聽”），這會錯誤地暗示第一個選項卡的級別高於其他兩個選項卡。

使用麵包屑路徑作為主要導航 如前所述，使用麵包屑作為導航的可選輔助工具。

在上面的示例中，不提供用於觀看視頻的主導航菜單。雖然頁腳部分有文本鏈接導航，但頁面正文中沒有導航菜單，因此很難導航到網站的其他部分。

如果您直接到達視頻頁面（例如，通過 Google 搜索結果），您可能擁有的唯一導航選項就是麵包屑路徑。或者，如果您已經瀏覽了一個網站的頁面並到達一個不顯示主導航菜單的頁面，您將必須點擊瀏覽器中的“返回”按鈕才能訪問主菜單。

當頁面有多個類別時使用麵包屑 麵包 屑路徑具有線性結構，因此如果您的頁面無法分類為整齊的類別，則使用它們將很困難。決定是否使用麵包屑很大程度上取決於您如何設計網站層次結構。當較低級別的頁面（或可以放入）多個父類別時，麵包屑路徑無效、不准確且使用戶感到困惑。