麵包屑帶我們回到你可能讀過的老童話幼稚園的歲月。Hansel和Gretel的兩個孩子被迫離開自己的家園，當Hansel決定放下一道麵包屑跟蹤他們回家的路。雖然麵包屑被森林裡的怪鳥吃掉，但在故事寫完之後，他們設計了許多年的印象。歡迎大家閱讀!更多相關資訊請關注相關欄目!
在網頁設計中，麵包屑類似於Hansel想到的目的。麵包屑作為您的網站導航中的輔助導航，以幫助訪客放心，從一個頁面到另一個頁面後失去他們的方式。像老童話一樣，它有助於向用戶展示他們登陸的位置以及他們最後的位置。
一旦麵包屑被整合到網站的層次結構中，使用者可以深入到產品類別中，並返回到他們開始的地方，而不會出現“Back”按鈕的瘋狂。
麵包屑還可以作為圖形控制元素，幫助經驗較少的遊客在電子商務網站上瀏覽。對於這樣的網站，內部結構必須被智慧地設計。使用麵包屑，網上購物平臺不僅要為訪客提供便利，而且還可以防止潛在客戶因丟失而放棄網頁。
麵包屑導航
麵包屑是通過確定他們當前的位置和他們在途中訪問的地方來引導遊客的有效手段。它們作為網站層次結構中的視覺輔助。但是，在客戶使用體驗方面，麵包屑可幫助他們回答這3個問題。
我在哪裡?
麵包屑讓使用者知道他們在網站上的行蹤，開始他們的旅程。
我去哪裡
它通過建議他們下一步去向使用者提供幫助。由於結構已經放在它們的前面，使用者不再需要搜尋和查詢類別或網站部分。
我應該去那裡嗎
麵包屑有助於促進更好的瀏覽和向用戶展示內容價值。例如，如果客戶登陸網頁尋找產品，他可能會發現其他可能證明是符合他需求的產品。這有助於減少網站的跳出率。
優點削減動作
為了達到更高級別的頁面，麵包屑幫助減少了不。網站訪問者到達那裡所需的操作。訪問者可以簡單地使用麵包屑來導航，而不是不斷地使用“後退”按鈕或網站的主要導航。
需要最小空間
它只需要一條橫線填充文字連結。這通過佔用最小的空間並允許網站上的其他元素呼吸來促進健康的網頁設計結構。這也有助於提高網站的載入速度。
每個使用者都知道如何操作麵包屑
它易於理解，不需要任何技術知識與他們互動。該文字解釋了使用者在哪裡，可以去。這是一個自我說明的導航系統，通用於每個使用者的理解。
何時使用麵包屑?構建站點地圖以顯示您的網站的導航結構是確定您的網站是否可以受益於麵包屑的最佳方式之一。然後，您可以通過試用來分析，並測試麵包屑導航是否幫助使用者通過您的網站內容。
當需要在類別和乾淨的線性結構中進行組織時，最好使用麵包屑。在大多數電子商務網站中，使用相同的標準將大量各種產品分類為邏輯類別。不得將麵包屑用於沒有用於分組內容或產品的任何邏輯層次結構的網站。
何時避免使用它們
如果麵包屑對網站的結構至關重要，那麼還有一些情況應該避免。當有一個網站是單層結構，沒有任何明確的分組指示，那麼它的網站的最大利益，以避免新增麵包屑。像我們上面提到的那樣，圖表或站點地圖在確定網站的導航架構方面是非常有幫助的。
麵包屑只有在主導航支援的情況下才有用。麵包屑作為肌肉，而主導航是把它們放在一起的骨架。沒有他們的完整的運動，網站層次結構不能有效地發揮作用。
麵包屑型別
你應該知道三種類型的麵包屑，位置，路徑和屬性。
基於位置
基於位置的麵包屑用於展示網站的基本結構。它們允許使用者瀏覽具有多個級別和全面內容跟蹤的網站。這種型別的麵包屑對於訪問網站和外部來源的訪問者是非常有用的，並且進入更深層次的內容。例如，如果您正在搜尋特定型別的產品，並點選Google顯示的搜尋結果，那麼進入網頁後，您會發現自己在許多類別之間。麵包屑將幫助您確定您的位置，並瀏覽層次結構中的可能性。那些含有深層次內容的網站非常適合基於位置的麵包屑。一個理想的例子是eBay。
基於路徑
這些麵包屑對於網站的歷史軌跡導航很重要。基於路徑的麵包屑基本上顯示使用者訪問的每個路徑，以達到其當前位置。通常，這樣的麵包屑連結是動態生成的。基於路徑的外掛可以幫助使用者在網站上瀏覽大量時間，但對於大多數使用者來說，這些使用者對於大部分使用者來說都是令人困惑的。由於大多數訪問者自行瀏覽，從一頁到另一頁。瀏覽器中的“後退”按鈕可以解決大部分需求來更改路徑。這使得對於那些已經在網站內部深入網站頁面的訪問者來說，這樣做是無用的。
基於屬性
電子商務網站最受益於基於屬性的麵包屑。他們幫助根據具體頁面或產品列出類別。這種型別的麵包屑非常有助於鼓勵使用者瞭解產品之間的關係。例如，如果網站正在銷售牛仔褲，他們將使用基於屬性的麵包屑來幫助客戶從Regular fit，Slim fit或Skinny牛仔褲導航。
麵包屑導航最佳實踐設計麵包屑導航時，請務必牢記以下事項。麵包屑導航是額外的幫助，以改善您的使用者在您的網站的體驗。
避免重複的元素
如果您真的要在您的網站上新增麵包屑，那麼您也可以以正確的方式進行排除。首先，您需要消除麵包屑之間可能出現的任何重複元素。可悲的是，我已經在許多頂級網站中看到這些網頁，其中相同的頁面分為多個類別或顯示的內容級別。這不僅使訪問者感到困惑，而且還反映在您的網站上。
SEO相容性
麵包屑不僅僅是您的訪問者的導航控制元件，也是您的SEO練習的重要資產。您可以使用麵包屑中的關鍵字來提升您在搜尋引擎上的排名。建議您為您的網站類別選擇SEO友好名稱，以便搜尋引擎可以輕鬆地在其結果中列出導航痕跡。
使用麵包屑作為替代導航
雖然麵包屑是幫助使用者從一個點到另一個點的優秀來源，但重要的是應將其作為次要來源。麵包屑是增強訪客可用性的另一個特徵，在任何情況下都不能取代網站的主要導航結構。
無縫連結當前頁面在導航導航
雖然在導覽痕跡上顯示訪問者的當前位置是可選的，但您必須確保線性結構中顯示的連結不可展開或可點選。只會讓訪問者感到困惑，向他們顯示他們當前所在頁面的連結。
新增分隔符
使用分隔符是一個很好的做法，給你一個乾淨，明亮的'外觀，你的導航痕跡。如果使用者進入更深層次並建立易於理解和互動的動態結構，則可以防止文字太近。
您可以使用>符號表示層次結構，因為它通常用於類別格式，如衣服>襯衫>領子襯衫等。其他符號包括箭頭(→)，直角引號()和斜槓(/)。
介紹麵包屑的大小和填充
在設計麵包屑時，您必須考慮填充和目標尺寸。一個麵包屑到另一個的間距必須明顯，否則訪客可能無法有效地使用它們。同時，確保麵包屑的大小不會損害其周圍的其他元素，因此主導航不會受到影響。
不要把焦點放在麵包屑的設計上，而不是它所需要的
不要使用鮮豔的色彩或花哨的字型代表你的麵包屑。儘管在使用者登陸頁面後，麵包痕跡對於使用者來說非常重要，但不應該是他們注意到的第一件事。將痕跡新增到導航痕跡導航可能會導致使用者忽略網站的主導航。這可能會使使用者不必進入頁面的真正意圖，並導致商店潛在的轉換丟失。Google是最好的例子。擁有這麼多級別的搜尋內容，它顯示了一個簡單的導航痕跡導航軌跡，沒有任何花哨的字型或顏色，以便使用者可以輕鬆地定位和與麵包屑互動。
應避免哪種型別?
關於是否使用基於位置/屬性的麵包屑或基於路徑的麵包屑來顯示網站層次結構，這是一個有爭議的論據。這是一個經驗法則，麵包屑不能顯示使用者的歷史，而是站點層次結構。在我們的評估和意見中，您可能不應該再打擾基於路徑的麵包屑了。一方面，它對於UX不起作用，因為它可能會導致訪問者混淆，因為不同級別之間缺少層次結構。這就是為什麼位置和屬性的麵包屑比基於路徑的麵包屑更喜歡。
最後的想法
麵包屑與網站上的任何其他元素一樣重要。現在，該技術已經允許儲存更多的資料，更快的網際網路速度，甚至更快的載入時間，導航可以在更高等級的層次上更全面地顯示，而不會打亂汗水。在麵包屑的幫助下，您的網站不僅可以產生更好的使用者體驗，還可以從客戶獲得更大的銷售。更平滑和不復雜的導航意味著更容易訪問產品頁面，並阻礙較少的結帳過程。
