最近的項目中，糾結(jié)了一下面包屑的使用。于是研究了一下這個“古老”的控件

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

• 網(wǎng)頁上讓用戶感知，當(dāng)前頁面所在的層級位置，或者是產(chǎn)品的屬性之間的關(guān)系的控件

• 面包屑的一般樣式是用鏈接文字加上“>”,橫向排布 。也有一些其他的樣式

  
  
  
  
  
  

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

面包屑的分類

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

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

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

面包屑的作用

1.表明當(dāng)前頁面所處的位置，感知產(chǎn)品屬性之間的所屬關(guān)系
2.方便跳轉(zhuǎn)到之前的頁面
3.總體上是作為主導(dǎo)航的補充

面包屑的使用

• 不是所有網(wǎng)站都需要使用的
  1.信息層級很扁平的可能不需要。這也是面包屑在移動產(chǎn)品中被廢棄了的原因之一
  2.不存在線性的頁面關(guān)系
  3.有其他替代面包屑功能的東西 比如：進度指示條

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

  
  

面包屑的“變種”

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

  
  

• 帶有導(dǎo)航，篩選項（facets search）和搜索框的復(fù)合性面包屑
  這種“變種”面包屑的優(yōu)點是
  方便在上一個層級的頁面中跳轉(zhuǎn)
  方便在當(dāng)前的層級下進行篩選和搜索

  
  

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

• 移動產(chǎn)品和社交產(chǎn)品幾乎看不到面包屑，
  原因1：當(dāng)前的產(chǎn)品設(shè)計趨勢都是將信息的層次結(jié)構(gòu)扁平化，盡可能將各種模塊平鋪，使信息結(jié)構(gòu)的廣度增加，減少縱向的深度
  原因2：社交類站，相對于大型電商類和內(nèi)容類網(wǎng)站，其層級的復(fù)雜度相對較低
  原因3：移動設(shè)備屏幕小了，寸土寸金，它的作用價值較低，就把它剔除了

• 電商類和內(nèi)容類網(wǎng)站也只有在部分頁面會出現(xiàn)
  當(dāng)然它不會出現(xiàn)在首頁，一般它會出現(xiàn)在二級頻道頁的下一個層次的頁面
  比如，在京東首頁，點擊進入了【生活家電】頻道頁，在頻道頁點擊了凈化器后，你就能看到面包屑了

比如，在愛奇藝，點擊進入了【動漫】頻道頁，在頻道頁點擊了《貓和老鼠》后，你就能看到面包屑了

面包屑的猜想

• 移動端不用面包屑用的好好的，較復(fù)雜的網(wǎng)站是否也可以完全不使用面包屑？
• 面包屑和頁面標題里的內(nèi)容有重復(fù)，是否可以消除這里的信息冗余，讓信息得到完美的利用？