你真的了解面包屑導航嗎？設計師作為當下比較熱門的職業，對于各行各業來說，都是一個不可或缺的存在。設計師們將自己的思想轉化為現實，不斷的創新，來融合大眾的審美觀和消費觀。那么，今天和繪學霸小編一起了解下：你真的了解面包屑導航嗎？

你真的了解面包屑導航嗎？

　　一、什么是面包屑導航

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

　　這里用到了“感知”，就是說面包屑導航不會是頁面中最顯眼的地方，它只是一定程度上幫助用戶理解網站的結構和屬性的從屬關系。

　　二、面包屑的分類

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

　　2.用于表明產品屬性之間的所屬關系和當前頁所在的位置，這些屬性是存在所屬和包含關系的

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

　　面包屑的作用

　　1.表明當前頁面所處的位置，感知產品屬性之間的所屬關系

　　2.方便跳轉到之前的頁面

　　3.總體上是作為主導航的補充

　　三、面包屑的使用

　　不是所有網站都需要使用的：

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

　　2.不存在線性的頁面關系；

　　3.有其他替代面包屑功能的東西比如：進度指示條；

　　主要出現在頁面的左上方，主導航的下方

　　四、面包屑的“變種”

　　進度指示條。用于表明頁面處于任務步驟中的位置，并且一般頭部的區域是不可點擊進行跳轉的，只是用于指示作用。

　　帶有導航，篩選項（facets search）和搜索框的復合性面包屑。

　　這種“變種”面包屑的優點是方便在上一個層級的頁面中跳轉，方便在當前的層級下進行篩選和搜索。

　　五、面包屑的應用現狀

　　移動產品和社交產品幾乎看不到面包屑

　　原因1：當前的產品設計趨勢都是將信息的層次結構扁平化，盡可能將各種模塊平鋪，使信息結構的廣度增加，減少縱向的深度

　　原因2：社交類站，相對于大型電商類和內容類網站，其層級的復雜度相對較低

　　原因3：移動設備屏幕小了，寸土寸金，它的作用價值較低，就把它剔除了

　　電商類和內容類網站也只有在部分頁面會出現

　　當然它不會出現在首頁，一般它會出現在二級頻道頁的下一個層次的頁面

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

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

　　繪學霸除了課程內容全面，還有著豐富的實訓項目內容，讓你能夠接觸到行業前沿的影視素材，在學習中累積一定的工作經驗，讓你就業后就能夠直接參加項目，告別剛入行時的迷茫期，所以如果你有這強烈的就業意愿，繪學霸是個很不錯的選擇。

　　那本期關于你真的了解面包屑導航嗎？的分享就到這里結束了，也歡迎喜歡UI設計的小伙伴，關注我們的官網繪學霸，經常分享各類教程、資源、經驗，助你開啟UI設計提升之門。