你在網(wǎng)站里不會迷路，要感謝這個(gè)導(dǎo)航設(shè)計(jì) #001

時(shí)間：2023-05-23 08:39:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-05-23 08:39:01 來源：網(wǎng)站運(yùn)營

你在網(wǎng)站里不會迷路，要感謝這個(gè)導(dǎo)航設(shè)計(jì) #001：

俊鐵導(dǎo)讀：

現(xiàn)在網(wǎng)絡(luò)世界繽紛多彩，大家的注意力也更加短，如何讓用戶更久地留在你的網(wǎng)頁里？「面包屑導(dǎo)航欄」就是其中一個(gè)關(guān)鍵。這篇文章，分享網(wǎng)頁設(shè)計(jì)「面包屑導(dǎo)航欄」的 3 個(gè) W，讓你給用戶提供更好的網(wǎng)頁體驗(yàn)。

面包屑導(dǎo)航（或面包屑痕跡）作為輔助的導(dǎo)航系統(tǒng)，它能告訴用戶其在網(wǎng)站或網(wǎng)頁 app 中的位置。這個(gè)詞語來自漢賽爾與格萊特（又譯糖果屋）童話故事中，主人公沿路丟下面包屑，形成一條小徑，從而指引其回到自己的家中。


和童話故事主人公一樣，網(wǎng)站用戶也需要知道其在網(wǎng)站層次結(jié)構(gòu)中的位置，以使其在需要的情況下能直接瀏覽上一級頁面。

本文，我們將會來討論面包屑導(dǎo)航應(yīng)用及其最佳實(shí)踐：什么是面包屑導(dǎo)航（What）、什么時(shí)候使用面包屑導(dǎo)航（When）和如何設(shè)計(jì)面包屑導(dǎo)航（How）。

一、面包屑導(dǎo)航有什么用？

面包屑導(dǎo)航作為有效的視覺輔助，能告訴用戶其在網(wǎng)站層次結(jié)構(gòu)中的位置。這種特性對用戶來說是上下文信息的重要來源，可以幫助用戶找到以下問題的答案：

我在哪里？告訴用戶其在整個(gè)網(wǎng)站層次結(jié)構(gòu)中的位置。

• 我能去哪里？用戶更能找到相關(guān)網(wǎng)站欄目和頁面。相比菜單欄，用戶通過清晰直觀的面包屑導(dǎo)航，更容易熟悉和了解網(wǎng)站結(jié)構(gòu)。
• 我該去那里嗎？面包屑導(dǎo)航體現(xiàn)了網(wǎng)站的內(nèi)容價(jià)值，能鼓勵(lì)用戶繼續(xù)瀏覽網(wǎng)站。比如，用戶打開電商網(wǎng)站某產(chǎn)品頁面時(shí)，該產(chǎn)品可能不是他想要的產(chǎn)品，但用戶也許想瀏覽其他同類產(chǎn)品。通過面包屑導(dǎo)航，就能相應(yīng)地減少網(wǎng)站的總體跳出率。

1. 減少用戶行為次數(shù)

就適用性而言，面包屑導(dǎo)航減少了用戶訪問上一級頁面本應(yīng)產(chǎn)生的行為次數(shù)。除了使用瀏覽器「后退」按鈕或網(wǎng)站主導(dǎo)航回到上一級頁面，用戶也可以使用面包屑導(dǎo)航。

2. 占用最少頁面空間

緊湊的結(jié)構(gòu)，不占用過多頁面空間，面包屑導(dǎo)航是一條橫向文字連接。好處在于，如有內(nèi)容過載的情況，其帶來的負(fù)面影響微乎其微。

3. 面包屑導(dǎo)航為用戶帶來零煩惱

人們可能沒有在意這個(gè)小小的設(shè)計(jì)元素，但沒人不明白面包屑導(dǎo)航，也沒人不會使用面包屑導(dǎo)航。

二、什么時(shí)候該用面包屑導(dǎo)航？

測試網(wǎng)站是否會得益于面包屑導(dǎo)航，有種好方法是構(gòu)建網(wǎng)站導(dǎo)航結(jié)構(gòu)的網(wǎng)站地圖或圖表，再分析面包屑導(dǎo)航是否能幫助用戶，提高其在同類或不同目錄下的導(dǎo)航能力。

• 你應(yīng)該使用面包屑導(dǎo)航的前提是，有大量內(nèi)容存在于有線性或?qū)哟谓Y(jié)構(gòu)的網(wǎng)站分類目錄中。所謂分類目錄，是指網(wǎng)站內(nèi)容可以分類呈現(xiàn)，這些類別還可以繼續(xù)分為更多細(xì)分類別。典型例子正如將大量產(chǎn)品合理地進(jìn)行分類的電商網(wǎng)站。
• 對于層次單一、沒有合理架構(gòu)或分類的網(wǎng)站，則不推薦使用面包屑導(dǎo)航。

三、面包屑導(dǎo)航的分類

面包屑導(dǎo)航可以按位置、路徑和屬性分為 3 類。

1. 位置面包屑

位置面包屑導(dǎo)航體現(xiàn)的是網(wǎng)站結(jié)構(gòu)。其能輔助用戶了解網(wǎng)站層次結(jié)構(gòu)，并在有多層級（通常大于兩級）網(wǎng)站中導(dǎo)航。若用戶從別處鏈接（比如搜索引擎結(jié)果）進(jìn)入網(wǎng)站深層次頁面，這對用戶來說非常有用。


下圖百思買（BestBuy）的案例中，每個(gè)文本鏈接都可以指向一個(gè)頁面，從右到左依次是網(wǎng)站當(dāng)前頁面到上一級頁面。

2. 路徑面包屑

路徑面包屑（也稱「歷史痕跡」）顯示用戶瀏覽至某特定頁面的所有頁面路徑。這類面包屑導(dǎo)航鏈接通常是動態(tài)產(chǎn)生的。

有時(shí)，路徑面包屑很有用，但大多時(shí)候會令人困惑——因?yàn)橛脩魹g覽網(wǎng)站可能會從一個(gè)頁面突然跳到另一個(gè)頁面，非常地隨意。

這類無規(guī)律的瀏覽路徑并不能為用戶提供太大幫助，但倒可以用瀏覽器「后退」按鈕來輕松取代。此外，若用戶直接進(jìn)入某網(wǎng)站深層次頁面，那路徑面包屑也毫無用處。

下圖是路徑面包屑示例，其展示了兩條到達(dá)目標(biāo)頁面的路徑。

3. 屬性面包屑

屬性面包屑對電商網(wǎng)站非常有用，其通過特定頁面或更常見的按產(chǎn)品類別將大量頁面進(jìn)行分類。這類面包屑導(dǎo)航可以幫助用戶了解各類產(chǎn)品之間的關(guān)系，也提供了另外一種導(dǎo)航方式。


例如，在TM Lewin（一個(gè)紳士襯衫品牌）官網(wǎng)上，面包屑導(dǎo)航展示了某特定網(wǎng)頁產(chǎn)品的屬性。

4. 層次結(jié)構(gòu)還是瀏覽記錄？

面包屑導(dǎo)航的經(jīng)驗(yàn)法則是要展示網(wǎng)站層次結(jié)構(gòu)，而不是用戶瀏覽記錄。因此，推薦使用位置面包屑導(dǎo)航或?qū)傩悦姘紝?dǎo)航，而不用路徑面包屑導(dǎo)航。

四、面包屑導(dǎo)航設(shè)計(jì)的最佳實(shí)踐

當(dāng)設(shè)計(jì)面包屑導(dǎo)航時(shí)，要切記以下幾點(diǎn)：

1. 不要用面包屑導(dǎo)航替換主導(dǎo)航

面包屑導(dǎo)航應(yīng)作為一項(xiàng)額外功能，其不能直接替換原本有用的主導(dǎo)航菜單。要切記，面包屑導(dǎo)航是一項(xiàng)便捷功能，是輔助導(dǎo)航手段，是網(wǎng)站導(dǎo)航的另一種方法。

2. 當(dāng)前頁面的面包屑導(dǎo)航無須添加鏈接

面包屑導(dǎo)航（用戶當(dāng)前位置）最后一項(xiàng)不一定要顯示——如果你想讓它顯示，務(wù)必保證其無法點(diǎn)擊或操作。由于用戶已經(jīng)在當(dāng)前頁面，在面包屑導(dǎo)航中再添加鏈接就顯得多此一舉了。

3. 使用分隔符

分隔面包屑導(dǎo)航各級文字鏈接最醒目的符號是「大于號（>）」。

通常，大于號（>）用來指代層次結(jié)構(gòu)，就像父目錄>子目錄這類格式。其他可以使用的符號有右箭頭（→）、雙書名號（?）以及斜杠（/）。

具體選擇哪個(gè)符號取決于網(wǎng)站設(shè)計(jì)美學(xué)和已使用的面包屑導(dǎo)航類型。

4. 選擇恰當(dāng)?shù)某叽绾蛢?nèi)邊距

在設(shè)計(jì)時(shí)要仔細(xì)考慮目標(biāo)尺寸和內(nèi)邊距。面包屑導(dǎo)航各級文字間應(yīng)該留有足夠空間，否則用戶可能會覺得不好用。同時(shí)，面包屑導(dǎo)航不能在頁面中起支配作用，因此其不能比主導(dǎo)航菜單更顯著。

5. 不要讓其成為設(shè)計(jì)焦點(diǎn)

不要使用花哨的字體或絢麗的顏色，因?yàn)檫@樣會喧賓奪主，畢竟面包屑導(dǎo)航其主要目的不在于此。

當(dāng)確定面包屑導(dǎo)航的大小和風(fēng)格時(shí)，經(jīng)驗(yàn)法則是要保證用戶進(jìn)入頁面后的第一關(guān)注點(diǎn)不是面包屑導(dǎo)航。

下圖中的面包屑導(dǎo)航設(shè)計(jì)不算太差，但有點(diǎn)花哨，可能會分散用戶注意力，使其無法注意主導(dǎo)航和頁面主要內(nèi)容。


Google 的面包屑導(dǎo)航一點(diǎn)也不花哨，但用戶能輕松地使用和定位。

6. 手機(jī)設(shè)備上不要使用面包屑導(dǎo)航

若你在手機(jī)設(shè)備上需要通過面包屑導(dǎo)航，也許你會發(fā)現(xiàn)會出現(xiàn)故障。就手機(jī)上使用面包屑導(dǎo)航和相應(yīng)運(yùn)行環(huán)境而言，其可能的原因在于網(wǎng)站的過度復(fù)雜（網(wǎng)站層次結(jié)構(gòu)太深）。為解決這個(gè)問題，應(yīng)該先思考如何簡化，然后你就不需要面包屑導(dǎo)航了。

結(jié)束語

面包屑導(dǎo)航能幫助用戶更便捷地瀏覽整個(gè)網(wǎng)站，但前提是網(wǎng)站內(nèi)容和整體結(jié)構(gòu)構(gòu)建合理。它是少數(shù)的能提高適用性和用戶舒適度的幾個(gè)簡單功能之一。就設(shè)計(jì)而言，其在頁面中只占據(jù)一行的位置，但帶來的貢獻(xiàn)卻足夠大。

作者 | Nick Babich 軟件工程師，關(guān)注 UI 和 UX。

譯者 | 俊鐵

題圖 | Pexels

本文譯自 Breadcrumbs For Web Sites: What, When and How，已獲原作者授權(quán)翻譯。

本文首發(fā)于愛范兒。商業(yè)轉(zhuǎn)載請聯(lián)系獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。