網頁設計中如何正確使用麪包屑導航

麪包屑帶我們回到你可能讀過的老童話幼稚園的歲月。Hansel和Gretel的兩個孩子被迫離開自己的家園，當Hansel決定放下一道麪包屑跟蹤他們回家的路。雖然麪包屑被森林裏的怪鳥吃掉，但在故事寫完之後，他們設計了許多年的印象。歡迎大家閲讀!更多相關信息請關注相關欄目!

在網頁設計中，麪包屑類似於Hansel想到的目的。麪包屑作為您的網站導航中的輔助導航，以幫助訪客放心，從一個頁面到另一個頁面後失去他們的方式。像老童話一樣，它有助於向用户展示他們登陸的位置以及他們最後的位置。

一旦麪包屑被集成到網站的層次結構中，用户可以深入到產品類別中，並返回到他們開始的地方，而不會出現“Back”按鈕的瘋狂。

麪包屑還可以作為圖形控制元素，幫助經驗較少的遊客在電子商務網站上瀏覽。對於這樣的網站，內部結構必須被智能地設計。使用麪包屑，網上購物平台不僅要為訪客提供便利，而且還可以防止潛在客户因丟失而放棄網頁。

麪包屑導航

麪包屑是通過確定他們當前的位置和他們在途中訪問的地方來引導遊客的有效手段。它們作為網站層次結構中的視覺輔助。但是，在客户使用體驗方面，麪包屑可幫助他們回答這3個問題。

我在哪裏?

麪包屑讓用户知道他們在網站上的行蹤，開始他們的旅程。

我去哪裏

它通過建議他們下一步去向用户提供幫助。由於結構已經放在它們的前面，用户不再需要搜索和查找類別或網站部分。

我應該去那裏嗎

麪包屑有助於促進更好的瀏覽和向用户展示內容價值。例如，如果客户登陸網頁尋找產品，他可能會發現其他可能證明是符合他需求的產品。這有助於減少網站的跳出率。

削減動作

為了達到更高級別的頁面，麪包屑幫助減少了不。網站訪問者到達那裏所需的操作。訪問者可以簡單地使用麪包屑來導航，而不是不斷地使用“後退”按鈕或網站的主要導航。

需要最小空間

它只需要一條橫線填充文本鏈接。這通過佔用最小的空間並允許網站上的其他元素呼吸來促進健康的網頁設計結構。這也有助於提高網站的加載速度。

每個用户都知道如何操作麪包屑

它易於理解，不需要任何技術知識與他們互動。該文本解釋了用户在哪裏，可以去。這是一個自我説明的導航系統，通用於每個用户的理解。

構建站點地圖以顯示您的網站的導航結構是確定您的網站是否可以受益於麪包屑的最佳方式之一。然後，您可以通過試用來分析，並測試麪包屑導航是否幫助用户通過您的網站內容。

當需要在類別和乾淨的線性結構中進行組織時，最好使用麪包屑。在大多數電子商務網站中，使用相同的標準將大量各種產品分類為邏輯類別。不得將麪包屑用於沒有用於分組內容或產品的任何邏輯層次結構的網站。

何時避免使用它們

如果麪包屑對網站的結構至關重要，那麼還有一些情況應該避免。當有一個網站是單層結構，沒有任何明確的分組指示，那麼它的網站的最大利益，以避免添加麪包屑。像我們上面提到的那樣，圖表或站點地圖在確定網站的導航架構方面是非常有幫助的。

麪包屑只有在主導航支持的情況下才有用。麪包屑作為肌肉，而主導航是把它們放在一起的骨架。沒有他們的完整的運動，網站層次結構不能有效地發揮作用。

麪包屑類型

你應該知道三種類型的麪包屑，位置，路徑和屬性。

基於位置

基於位置的麪包屑用於展示網站的基本結構。它們允許用户瀏覽具有多個級別和全面內容跟蹤的網站。這種類型的麪包屑對於訪問網站和外部來源的訪問者是非常有用的，並且進入更深層次的內容。例如，如果您正在搜索特定類型的產品，並點擊Google顯示的搜索結果，那麼進入網頁後，您會發現自己在許多類別之間。麪包屑將幫助您確定您的位置，並瀏覽層次結構中的可能性。那些含有深層次內容的網站非常適合基於位置的麪包屑。一個理想的例子是eBay。

基於路徑

這些麪包屑對於網站的歷史軌跡導航很重要。基於路徑的麪包屑基本上顯示用户訪問的每個路徑，以達到其當前位置。通常，這樣的麪包屑鏈接是動態生成的。基於路徑的插件可以幫助用户在網站上瀏覽大量時間，但對於大多數用户來説，這些用户對於大部分用户來説都是令人困惑的。由於大多數訪問者自行瀏覽，從一頁到另一頁。瀏覽器中的“後退”按鈕可以解決大部分需求來更改路徑。這使得對於那些已經在網站內部深入網站頁面的訪問者來説，這樣做是無用的。

基於屬性

電子商務網站最受益於基於屬性的麪包屑。他們幫助根據具體頁面或產品列出類別。這種類型的麪包屑非常有助於鼓勵用户瞭解產品之間的關係。例如，如果網站正在銷售牛仔褲，他們將使用基於屬性的麪包屑來幫助客户從Regular fit，Slim fit或Skinny牛仔褲導航。

設計麪包屑導航時，請務必牢記以下事項。麪包屑導航是額外的幫助，以改善您的用户在您的網站的體驗。

避免重複的元素

如果您真的要在您的網站上添加麪包屑，那麼您也可以以正確的方式進行排除。首先，您需要消除麪包屑之間可能出現的任何重複元素。可悲的是，我已經在許多頂級網站中看到這些網頁，其中相同的頁面分為多個類別或顯示的內容級別。這不僅使訪問者感到困惑，而且還反映在您的網站上。

SEO兼容性

麪包屑不僅僅是您的訪問者的導航控件，也是您的SEO練習的重要資產。您可以使用麪包屑中的關鍵字來提升您在搜索引擎上的排名。建議您為您的網站類別選擇SEO友好名稱，以便搜索引擎可以輕鬆地在其結果中列出導航痕跡。

使用麪包屑作為替代導航

雖然麪包屑是幫助用户從一個點到另一個點的優秀來源，但重要的是應將其作為次要來源。麪包屑是增強訪客可用性的另一個特徵，在任何情況下都不能取代網站的主要導航結構。

無縫鏈接當前頁面在導航導航

雖然在導覽痕跡上顯示訪問者的當前位置是可選的，但您必須確保線性結構中顯示的鏈接不可展開或可點擊。只會讓訪問者感到困惑，向他們顯示他們當前所在頁面的鏈接。

添加分隔符

使用分隔符是一個很好的做法，給你一個乾淨，明亮的'外觀，你的導航痕跡。如果用户進入更深層次並創建易於理解和交互的動態結構，則可以防止文本太近。

您可以使用>符號表示層次結構，因為它通常用於類別格式，如衣服>襯衫>領子襯衫等。其他符號包括箭頭(→)，直角引號()和斜槓(/)。

介紹麪包屑的大小和填充

在設計麪包屑時，您必須考慮填充和目標尺寸。一個麪包屑到另一個的間距必須明顯，否則訪客可能無法有效地使用它們。同時，確保麪包屑的大小不會損害其周圍的其他元素，因此主導航不會受到影響。

不要把焦點放在麪包屑的設計上，而不是它所需要的

不要使用鮮豔的色彩或花哨的字體代表你的麪包屑。儘管在用户登陸頁面後，麪包痕跡對於用户來説非常重要，但不應該是他們注意到的第一件事。將痕跡添加到導航痕跡導航可能會導致用户忽略網站的主導航。這可能會使用户不必進入頁面的真正意圖，並導致商店潛在的轉換丟失。Google是最好的例子。擁有這麼多級別的搜索內容，它顯示了一個簡單的導航痕跡導航軌跡，沒有任何花哨的字體或顏色，以便用户可以輕鬆地定位和與麪包屑交互。

應避免哪種類型?

關於是否使用基於位置/屬性的麪包屑或基於路徑的麪包屑來顯示網站層次結構，這是一個有爭議的論據。這是一個經驗法則，麪包屑不能顯示用户的歷史，而是站點層次結構。在我們的評估和意見中，您可能不應該再打擾基於路徑的麪包屑了。一方面，它對於UX不起作用，因為它可能會導致訪問者混淆，因為不同級別之間缺少層次結構。這就是為什麼位置和屬性的麪包屑比基於路徑的麪包屑更喜歡。

最後的想法

麪包屑與網站上的任何其他元素一樣重要。現在，該技術已經允許存儲更多的數據，更快的互聯網速度，甚至更快的加載時間，導航可以在更高等級的層次上更全面地顯示，而不會打亂汗水。在麪包屑的幫助下，您的網站不僅可以產生更好的用户體驗，還可以從客户獲得更大的銷售。更平滑和不復雜的導航意味着更容易訪問產品頁面，並阻礙較少的結帳過程。