從頭帶你認識面包屑導航的前世今生!
面包屑導航,一個曾經風靡武林,不經意間已默默無聞的古老控件。很多交互設計師在剛聽聞它大名的時候,它就隱退江湖了。不過,在某些類型的網站上,它還是必不可少的導航方式。今天美團網的交互設計師@德川亮?特意重新梳理資料,從頭開始帶你認識面包屑導航的前世今生。
什么是面包屑導航
網頁上讓用戶感知當前頁面所在的層級位置,或者是產品的屬性之間的關系的控件。面包屑的一般樣式是用鏈接文字加上“>”,橫向排布 ,也有一些其他的樣式。
這里用到了“感知”,就是說面包屑導航不會是頁面中最顯眼的地方,它只是一定程度上幫助用戶理解網站的結構和屬性的從屬關系。
面包屑的分類
1. 用于表明頁面之間的層次關系和當前頁所在的位置。這種頁面之間的層級關系可以是沒有所屬和包含關系的,只要這幾個頁面本身存在線性跳轉關系。
2. 用于表明產品屬性之間的所屬關系和當前頁所在的位置,這些屬性是存在所屬和包含關系的
3. 用于顯示用戶的操作路徑和歷史(國外的一些文章有這么說的,但我沒有找到對應的網站……)
面包屑的作用
1. 表明當前頁面所處的位置,感知產品屬性之間的所屬關系
2. 方便跳轉到之前的頁面
3. 總體上是作為主導航的補充
面包屑的使用
不是所有網站都需要使用的:
1. 信息層級很扁平的。這也是面包屑在移動產品中被廢棄了的原因之一;
2. 不存在線性的頁面關系;
3. 有其他替代面包屑功能的東西 比如:進度指示條;
主要出現在頁面的左上方,主導航的下方
面包屑的“變種”
進度指示條。用于表明頁面處于任務步驟中的位置,并且一般頭部的區域是不可點擊進行跳轉的,只是用于指示作用。
帶有導航,篩選項(facets search)和搜索框的復合性面包屑。
這種“變種”面包屑的優點是方便在上一個層級的頁面中跳轉,方便在當前的層級下進行篩選和搜索。
面包屑的應用現狀
移動產品和社交產品幾乎看不到面包屑
- 原因1:當前的產品設計趨勢都是將信息的層次結構扁平化,盡可能將各種模塊平鋪,使信息結構的廣度增加,減少縱向的深度
- 原因2:社交類站,相對于大型電商類和內容類網站,其層級的復雜度相對較低
- 原因3:移動設備屏幕小了,寸土寸金,它的作用價值較低,就把它剔除了
電商類和內容類網站也只有在部分頁面會出現
- 當然它不會出現在首頁,一般它會出現在二級頻道頁的下一個層次的頁面
- 比如,在京東首頁,點擊進入了【生活家電】頻道頁,在頻道頁點擊了凈化器后,你就能看到面包屑了
比如,在愛奇藝,點擊進入了【動漫】頻道頁,在頻道頁點擊了《貓和老鼠》后,你就能看到面包屑了。
面包屑的猜想
移動端不用面包屑,較復雜的網站是否也可以完全不使用面包屑?
面包屑和頁面標題里的內容有重復,是否可以消除這里的信息冗余,讓信息得到完美的利用?
原文地址:jianshu
作者:@德川亮
原文來自:優設
請問什么叫線性的頁面關系?
首頁-列表 ——詳情
剛接觸交互的時候最早就是知道這個面包屑 ??