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

3 評論 33356 瀏覽 34 收藏 6 分鐘

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

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

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

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

這里用到了“感知”,就是說面包屑導(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)系的

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

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

面包屑的作用

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

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

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

面包屑的使用

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

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

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

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

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

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

面包屑的“變種”

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

漲姿勢!從頭帶你認(rèn)識面包屑導(dǎo)航的前世今生!
帶有導(dǎo)航,篩選項(facets search)和搜索框的復(fù)合性面包屑。

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

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

面包屑的應(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)在二級頻道頁的下一個層次的頁面
  • 比如,在京東首頁,點(diǎn)擊進(jìn)入了【生活家電】頻道頁,在頻道頁點(diǎn)擊了凈化器后,你就能看到面包屑了

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

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

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

面包屑的猜想

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

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

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

 

原文地址:jianshu

作者:@德川亮

原文來自:優(yōu)設(shè)

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 請問什么叫線性的頁面關(guān)系?

    來自安徽 回復(fù)
    1. 首頁-列表 ——詳情

      回復(fù)
  2. 剛接觸交互的時候最早就是知道這個面包屑 ??

    來自本機(jī)地址 回復(fù)