導(dǎo)語：我們在設(shè)計(jì)網(wǎng)站的過程中，一開始的設(shè)計(jì)便會遇到導(dǎo)航設(shè)計(jì)，比如面包屑導(dǎo)航；然而對許多設(shè)計(jì)師來說，面包屑導(dǎo)航往往都是直接照搬，也很少會去注意甚至忽視它的存在。在產(chǎn)品設(shè)計(jì)多樣化的今天，什么樣的網(wǎng)站適合用面包屑導(dǎo)航？本文將對此進(jìn)行探討，希望對你有幫助哦。

說到面包屑導(dǎo)航，我先跟你分享一個(gè)童話故事：兩個(gè)孩子為了不在森林里迷路，于是沿途灑下了面包屑作為標(biāo)記，幫助自己能夠原路返回。

面包屑導(dǎo)航（下文統(tǒng)一統(tǒng)一用“面包屑”來表述）的概念便來自這個(gè)童話故事；面包屑導(dǎo)航的作用和面包屑一樣，可以幫助用戶能看清自己在網(wǎng)站中所處的路徑，也能夠快速的找到其他相同類型的網(wǎng)站和功能。

一、什么是面包屑？

通俗來說，面包屑是作為輔助和補(bǔ)充的導(dǎo)航方式，它能讓用戶知道在網(wǎng)站或應(yīng)用中所處的位置并能方便地回到原先的站點(diǎn)。

它們絕大部分看起來就像這樣：一級頁面 > 二級頁面 > 三級頁面或者一級頁面 / 二級頁面 /三級頁面。

二、面包屑的類型有哪些？

通常來說，面包屑分為以下三種類型：基于位置的面包屑、基于屬性的面包屑、基于路徑的面包屑。

1. 基于位置的面包屑

這種面包屑是面包屑導(dǎo)航中最常見的一種，這種類型的面包屑導(dǎo)航可以很好地指出當(dāng)前頁面與整個(gè)網(wǎng)站的層次結(jié)構(gòu)；可以是用戶了解自己所在的位置，以及可以更快地找到自己想要到達(dá)的頁面，此類面包屑導(dǎo)航主要用在具有多級導(dǎo)航（通常具有二級以上導(dǎo)航）的網(wǎng)站中。

2. 基于屬性的面包屑

基于屬性的面包屑導(dǎo)航會將特定頁面的類別列出來。

這種面包屑導(dǎo)航可以很好地指出當(dāng)前頁面內(nèi)產(chǎn)品的其他屬性或者類別，這種面包屑導(dǎo)航可以幫助用戶了解產(chǎn)品之間的聯(lián)系，通過各種不同的屬性對搜索結(jié)果進(jìn)行篩選；這種類型的面包屑常出現(xiàn)在具有大量類別產(chǎn)品和服務(wù)的網(wǎng)站中，比如我們常見的電子商務(wù)網(wǎng)站、網(wǎng)上教學(xué)服務(wù)等，亞馬遜、騰訊課堂就是典型的示例。

對于一個(gè)產(chǎn)品來講，往往不止一個(gè)屬性，有大屬性，有小屬性；像這種從屬關(guān)系的路徑，通過這種面包屑導(dǎo)航就可以給用戶一個(gè)更加直觀的了解。

3. 基于路徑的面包屑

此類面包屑導(dǎo)航是最不常見到的，這種面包屑導(dǎo)航和上文所說的童話故事類型很想，他們可以顯示訪客在到達(dá)頁面前所訪問過的網(wǎng)頁的鏈接。

面包屑之間沒有明顯的層級關(guān)系，他們的功能與前進(jìn)、后退的按鈕有些類似。

三、什么情況下適合使用面包屑？

我們先來看下面包屑的作用，表現(xiàn)在以下方面：

• 表面當(dāng)前頁面所處的位置，方便定位和導(dǎo)航，輔助用戶尋找路徑；
• 方便跳轉(zhuǎn)到之前的頁面，告知用戶「你在哪里」，減少操作次數(shù)；
• 總體上為主導(dǎo)航做補(bǔ)充，占用屏幕空間小，干擾性性小，具有臨時(shí)性。

那么在什么情況下是適合使用面包屑導(dǎo)航的呢？

我們再看一下面包屑的典型作用：信息定位和用戶路徑展示。

基于這兩個(gè)典型特點(diǎn)，那么面包屑就非常適合在以下兩種場景中使用：

1. 嚴(yán)格的線性結(jié)構(gòu)

由于面包屑導(dǎo)航路徑是線性結(jié)構(gòu)的，因此網(wǎng)站內(nèi)容必須劃分的非常清晰，保證獨(dú)立不交叉。

否則，面包屑導(dǎo)航的路徑就不是唯一的，同一分類可能出現(xiàn)在不同的路徑中，會讓用戶感到困惑，從而降低用戶體驗(yàn)。

2. 較深的層級結(jié)構(gòu)

面包屑導(dǎo)航適合層級較深的網(wǎng)站，如果只有一級分類的話，通過主導(dǎo)航就可以起到快速定位的作用；比如電商網(wǎng)站的結(jié)構(gòu)就是層級結(jié)構(gòu)，而且是包含了分好組的層級結(jié)構(gòu)，里面的頁面包含了按類別分好組的大量商品頁面。

判斷在設(shè)計(jì)網(wǎng)站時(shí)是否適合于使用面包屑導(dǎo)航的最好方法便是將網(wǎng)站的結(jié)構(gòu)畫出來或者以圖表的形式呈現(xiàn)出來，然后分析使用面包屑導(dǎo)航是否會幫助用戶更方便地切換到不同類的網(wǎng)頁。你學(xué)會了嗎？

四、使用面包屑時(shí)有哪些要注意的？

以上我們講了面包屑的定義、類型以及什么情況適合使用面包屑，接下來我們一起來看看使用面包屑時(shí)的注意點(diǎn)：

1. 不要用面包屑導(dǎo)航來替代頂級導(dǎo)航

面包屑總體上為主導(dǎo)航做補(bǔ)充，在頁面中不應(yīng)該起到支配的作用。面包屑和主導(dǎo)航視覺上相比要比較小或不太突出，頁面占用空間相當(dāng)??；在色彩上主要以黑、灰為主，它基本都是以帶鏈接的文本的形式存在的，并且通常只有一行。

通常水平地出現(xiàn)在頁面頂部，一般會位于標(biāo)題/頁頭的下方或內(nèi)容區(qū)的上方。

2. 不要給當(dāng)前頁面的導(dǎo)航文字添加鏈接

面包屑導(dǎo)航的最后一個(gè)層級，可以表示當(dāng)前頁面也可以表示當(dāng)前頁面的上一級。

但如果是表示當(dāng)前頁面的話，切記不要添加鏈接，因?yàn)橛脩粢呀?jīng)處于這個(gè)頁面了，再添加指向當(dāng)前頁面的鏈接，就相當(dāng)于兩個(gè)盤子裝一條魚——多余了哈。

3. 分隔符使用

分隔符：面包屑導(dǎo)航中最簡潔明了的分隔符便是大于號“>”。通常大于號用于基于位置的面包屑導(dǎo)航，以“父類>子類”的形式表示導(dǎo)航項(xiàng)目之間的層級關(guān)系。

除了大于號以外還可以用向右箭頭“→”，雙大于號“>>”和斜線“/”，到底使用哪個(gè)取決于導(dǎo)航的類型和視覺效果。

五、總結(jié)

面包屑導(dǎo)航的宗旨是讓用戶可以更方便地訪問你的網(wǎng)站。

從用戶體驗(yàn)上來說一個(gè)“重要的小角色”，既要讓用戶看得清楚，又不能醒目；它看似簡單，但卻可以很好地優(yōu)化用戶體驗(yàn)，增加用戶粘性。

作者：WOWdesign，研究設(shè)計(jì)價(jià)值最大化，涉及用戶體驗(yàn)、品牌體驗(yàn)、空間體驗(yàn)。

本文由 @WOWdesign 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于 CC0 協(xié)議