從頭帶你認(rèn)識(shí)面包屑導(dǎo)航的前世今生

面包屑導(dǎo)航，一個(gè)曾經(jīng)風(fēng)靡武林，不經(jīng)意間已默默無聞的古老控件。很多交互設(shè)計(jì)師在剛聽聞它大名的時(shí)候，它就隱退江湖了。不過，在某些類型的網(wǎng)站上，它還是必不可少的導(dǎo)航方式。今天美團(tuán)網(wǎng)的交互設(shè)計(jì)師@德川亮 特意重新梳理資料，從頭開始帶你認(rèn)識(shí)面包屑導(dǎo)航的前世今生。

　　什么是面包屑導(dǎo)航

　　網(wǎng)頁上讓用戶感知當(dāng)前頁面所在的層級(jí)位置，或者是產(chǎn)品的屬性之間的關(guān)系的控件。面包屑的一般樣式是用鏈接文字加上“>”，橫向排布 ，也有一些其他的樣式。

　　這里用到了“感知”，就是說面包屑導(dǎo)航不會(huì)是頁面中最顯眼的地方，它只是一定程度上幫助用戶理解網(wǎng)站的結(jié)構(gòu)和屬性的從屬關(guān)系。

　　面包屑的分類

　　1. 用于表明頁面之間的層次關(guān)系和當(dāng)前頁所在的位置。這種頁面之間的層級(jí)關(guān)系可以是沒有所屬和包含關(guān)系的，只要這幾個(gè)頁面本身存在線性跳轉(zhuǎn)關(guān)系。

　　2. 用于表明產(chǎn)品屬性之間的所屬關(guān)系和當(dāng)前頁所在的位置，這些屬性是存在所屬和包含關(guān)系的

　　3. 用于顯示用戶的操作路徑和歷史(國外的一些文章有這么說的，但我沒有找到對(duì)應(yīng)的網(wǎng)站……)

　　面包屑的作用

　　1. 表明當(dāng)前頁面所處的位置，感知產(chǎn)品屬性之間的所屬關(guān)系

　　2. 方便跳轉(zhuǎn)到之前的頁面

　　3. 總體上是作為主導(dǎo)航的補(bǔ)充

　　面包屑的使用

　　不是所有網(wǎng)站都需要使用的：

　　1. 信息層級(jí)很扁平的。這也是面包屑在移動(dòng)產(chǎn)品中被廢棄了的原因之一;

　　2. 不存在線性的頁面關(guān)系;

　　3. 有其他替代面包屑功能的東西 比如：進(jìn)度指示條;

　　主要出現(xiàn)在頁面的左上方，主導(dǎo)航的下方

　　面包屑的“變種”

　　進(jìn)度指示條。用于表明頁面處于任務(wù)步驟中的位置，并且一般頭部的區(qū)域是不可點(diǎn)擊進(jìn)行跳轉(zhuǎn)的，只是用于指示作用。

　　帶有導(dǎo)航，篩選項(xiàng)(facets search)和搜索框的復(fù)合性面包屑。

　　這種“變種”面包屑的優(yōu)點(diǎn)是方便在上一個(gè)層級(jí)的頁面中跳轉(zhuǎn)，方便在當(dāng)前的層級(jí)下進(jìn)行篩選和搜索。

　　面包屑的應(yīng)用現(xiàn)狀

　　移動(dòng)產(chǎn)品和社交產(chǎn)品幾乎看不到面包屑

　　原因1：當(dāng)前的產(chǎn)品設(shè)計(jì)趨勢都是將信息的層次結(jié)構(gòu)扁平化，盡可能將各種模塊平鋪，使信息結(jié)構(gòu)的廣度增加，減少縱向的深度

　　原因2：社交類站，相對(duì)于大型電商類和內(nèi)容類網(wǎng)站，其層級(jí)的復(fù)雜度相對(duì)較低

　　原因3：移動(dòng)設(shè)備屏幕小了，寸土寸金，它的作用價(jià)值較低，就把它剔除了

　　電商類和內(nèi)容類網(wǎng)站也只有在部分頁面會(huì)出現(xiàn)

　　當(dāng)然它不會(huì)出現(xiàn)在首頁，一般它會(huì)出現(xiàn)在二級(jí)頻道頁的下一個(gè)層次的頁面

　　比如，在京東首頁，點(diǎn)擊進(jìn)入了【生活家電】頻道頁，在頻道頁點(diǎn)擊了凈化器后，你就能看到面包屑了

　　比如，在愛奇藝，點(diǎn)擊進(jìn)入了【動(dòng)漫】頻道頁，在頻道頁點(diǎn)擊了《貓和老鼠》后，你就能看到面包屑了。

　　面包屑的猜想

　　移動(dòng)端不用面包屑，較復(fù)雜的網(wǎng)站是否也可以完全不使用面包屑?

　　面包屑和頁面標(biāo)題里的內(nèi)容有重復(fù)，是否可以消除這里的信息冗余，讓信息得到完美的利用?

　　這些技術(shù)+方法都可以從頭開始學(xué)!