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