導(dǎo)航在網(wǎng)站設(shè)計的成功中起著至關(guān)重要的作用，它會影響訪問者找到他們正在尋找的信息的難易程度以及整體易用性。如今，有許多類型的網(wǎng)站導(dǎo)航可以滿足您網(wǎng)站的審美和實際需求——從傳統(tǒng)的水平和垂直菜單到漢堡包圖標（這是移動導(dǎo)航的最愛）、燈箱菜單、錨鏈接等等。
今天我們不打算談?wù)搶?dǎo)航菜單，而是許多品牌、企業(yè)和個人網(wǎng)站所有者正在他們的網(wǎng)站上實施的一種獨特且方便的 UX 設(shè)計元素：面包屑。
痕跡導(dǎo)航與有序且具有視覺吸引力的網(wǎng)站菜單配對時，可以通過引導(dǎo)訪問者瀏覽您的在線內(nèi)容來提高設(shè)計的有效性。在本文中，我們將討論什么是面包屑導(dǎo)航，在什么情況下它會使網(wǎng)站受益，以及將它們添加到您自己的設(shè)計中的最佳實踐。
什么是痕跡導(dǎo)航？
痕跡導(dǎo)航是位于網(wǎng)頁頂部標題正下方的輔助導(dǎo)航。文本鏈接的數(shù)字跟蹤可幫助用戶找到他們的方位、回溯他們的步驟并識別快捷方式。
何時應(yīng)向網(wǎng)站添加痕跡導(dǎo)航？
創(chuàng)建 Web 站點時，應(yīng)始終包含頂級頁面和類別的主要導(dǎo)航，通常在頁眉中。
即使您構(gòu)建了一個單頁網(wǎng)站，主導(dǎo)航鏈接和網(wǎng)站菜單也會讓訪問者熟悉您網(wǎng)站的內(nèi)容，使他們能夠找到部分。您并不總是需要痕跡導(dǎo)航，但它可以使您的用戶體驗受益。
您可以出于以下常見原因向您的網(wǎng)站添加痕跡導(dǎo)航：
您的導(dǎo)航比兩層更深
如果您可以將所有類別和子類別放入主導(dǎo)航中而不會過度擁擠，那么您就不需要面包屑導(dǎo)航。將痕跡導(dǎo)航視為處理更深層次導(dǎo)航層（如子類別、產(chǎn)品篩選器等）的空間。
您啟動了一個具有重大增長潛力的網(wǎng)站
即使您沒有啟動包含太多內(nèi)容的網(wǎng)站，隨著時間的推移，您也可能會添加更多內(nèi)容。如果創(chuàng)建這些站點之一，您應(yīng)該從頭開始構(gòu)建 breadcrumbs：
電子商務(wù)
內(nèi)容（例如博客、雜志、報紙）
軟件即服務(wù)
任何站點，包括支持中心或知識庫
您的頁面沒有側(cè)邊欄鏈接或內(nèi)部鏈接系統(tǒng)
如果您在內(nèi)部頁面上共享相關(guān)鏈接或類別，那么您可能不想通過痕跡導(dǎo)航占用額外的空間。例如，您的博客讀者可能會發(fā)現(xiàn)在側(cè)邊欄下拉菜單上找到頂級類別很有價值。他們也可能只是希望在文章末尾看到相關(guān)鏈接。
痕跡導(dǎo)航的類型
網(wǎng)站在 UX 設(shè)計中通常使用兩種類型的痕跡導(dǎo)航：
01. 基于位置的面包屑
基于位置的痕跡導(dǎo)航也稱為基于層次結(jié)構(gòu)的痕跡導(dǎo)航，它顯示鏈接軌跡，從主頁開始，到當前位置結(jié)束。
痕跡導(dǎo)航讓訪客知道他們正在查看對應(yīng)搜索結(jié)果頁面，并包含結(jié)果數(shù)量。
最后一項在這兩個結(jié)構(gòu)之間有所不同： Target 顯示搜索結(jié)果頁面類別，而 IKEA 顯示當前頁面名稱：
首頁 > 靈感
一般結(jié)構(gòu)或多或少相同。當用戶從左向右查看時，類別會縮小。這種痕跡導(dǎo)航樣式使用戶能夠?qū)Ш交蚧厮莸缴霞夘悇e，而不是從頭開始搜索。
訪客可能會發(fā)現(xiàn)以這種方式布局的類別和相關(guān)子類別很有幫助。這種面包屑導(dǎo)航還讓他們更好地了解網(wǎng)站的產(chǎn)品，如果最初的搜索沒有結(jié)果，他們會走上不同的道路。
02. 基于屬性的面包屑導(dǎo)航
基于屬性的痕跡導(dǎo)航跟蹤使用戶能夠在當前結(jié)果沒有提供正確的產(chǎn)品時刪除篩選條件。此導(dǎo)航仍提供有關(guān)用戶站點位置及其當前頁面視圖的上下文，但通常不設(shè)計為一系列分層鏈接。
基于歷史記錄的痕跡導(dǎo)航
從技術(shù)上講，還有第三種基于用戶當前會話路徑的痕跡導(dǎo)航類型：基于歷史記錄的痕跡導(dǎo)航。
網(wǎng)站通常不使用它們，因為它們很少實用。客戶在零售商的電子商務(wù)商店購物時可能會比較各種產(chǎn)品。首先，他們查看一個品牌的產(chǎn)品，然后查看不同尺寸或顏色的同一品牌的產(chǎn)品。然后他們會探索其他品牌。
在該會話中，他們可能會查看單個商品的 10 種或更多類型。
使用痕跡導(dǎo)航的好處
使用數(shù)字面包屑，網(wǎng)站的訪問者和品牌從中受益：
增強的網(wǎng)站可用性
即使您使用熟悉的模式和直觀的交互構(gòu)建網(wǎng)站，內(nèi)容量和網(wǎng)站復(fù)雜性仍然可能給一些用戶帶來障礙。因此，如今您通?？梢栽诰W(wǎng)站上找到面包屑導(dǎo)航。
痕跡導(dǎo)航使您能夠設(shè)計精簡的網(wǎng)站菜單，將額外的導(dǎo)航詳細信息移動到每個網(wǎng)頁的頂部。這個小型網(wǎng)站組件在很大程度上改善了您的用戶體驗：
讓回溯更容易
防止用戶迷路或不知所措
向用戶介紹新的子類別
幫助他們更清楚地了解您的品牌所做的一切
由于受限空間會影響用戶體驗，因此痕跡導(dǎo)航還可以提高移動設(shè)備的易用性。
降低跳出率
痕跡導(dǎo)航創(chuàng)造了一種無痛的導(dǎo)航體驗，因為訪問者不必依賴主導(dǎo)航和瀏覽器的 “Back” 按鈕。它還為用戶提供了輕松發(fā)現(xiàn)更多內(nèi)容的工具。如果做得好，它應(yīng)該會改善訪問者的頁面停留時間指標并降低跳出率。
提高搜索排名
痕跡導(dǎo)航有助于組織具有大量內(nèi)容或庫存的網(wǎng)站。該組織使搜索引擎更容易了解網(wǎng)站的用途、為其內(nèi)容編制索引并將其推薦用于相關(guān)搜索。
Google 甚至在搜索結(jié)果中展示了網(wǎng)站的面包屑導(dǎo)航。
使用痕跡導(dǎo)航的提示
除了遵循網(wǎng)站導(dǎo)航提示外，還要牢記這些其他痕跡導(dǎo)航創(chuàng)建提示：
1. 將面包屑放在左上角
雖然這不是一個硬性規(guī)定，但設(shè)計師通常會將面包屑導(dǎo)航放在網(wǎng)站的左上角，因為熟悉的用戶會本能地在那里尋找它們。此外，這個地方自然會吸引新用戶的眼球。
2. 表示可點擊的文本
當您為網(wǎng)頁設(shè)計超鏈接時，不要將它們設(shè)置為看起來像純文本，因為這會使訪問者幾乎不可能識別可點擊的文本。
3. 在面包屑之間使用分隔符
由于痕跡導(dǎo)航軌跡很小，因此不能依賴空格來明確一個痕跡導(dǎo)航的開始位置和結(jié)束位置。因此，請在每個鏈接之間放置一個符號.
網(wǎng)站通常使用以下兩種類型：
Dollar Shave Club 使用的 大于符號 （>）
Chewy 使用的 正斜杠 （/）
雖然您通常會在網(wǎng)站上找到這兩種樣式，但任何表示層次結(jié)構(gòu)或關(guān)系的符號（如箭頭）都可以使用。您還可以添加特定于品牌的符號（如果有）。
4. 注意大小
痕跡導(dǎo)航不應(yīng)在您的網(wǎng)頁上占用太多空間。事實上，大多數(shù)設(shè)計人員都會將他們的面包屑導(dǎo)航設(shè)置為比頁面文本的其余部分小一兩個像素，這樣它就不會分散對主要內(nèi)容的注意力。
也就是說，請注意大小。您需要一個足夠大的字體，以便每個訪問者都能閱讀，但又不能太大，以免使痕跡導(dǎo)航軌跡太長。它應(yīng)該只占用頁面上的一行。
5. 在移動設(shè)備上以不同的方式處理面包屑
長長的面包屑痕跡不適合智能手機屏幕。而且您不想強制您的移動面包屑包裝，因為它會將主要內(nèi)容進一步推到頁面上并使用戶感到沮喪。
通過限制移動網(wǎng)站上默認痕跡導(dǎo)航鏈接的數(shù)量，并調(diào)整您的設(shè)計以適應(yīng)較小的屏幕，您可以擁有一個保持整潔的用戶界面，即使在為訪問者提供有用的輔助導(dǎo)航系統(tǒng)時也是如此。
創(chuàng)建您自己的電子商務(wù)網(wǎng)站并在此處查找有關(guān)網(wǎng)頁設(shè)計教程的更多信息。