移動端面包屑導航路徑怎么設計？

面包屑作為一種輔助和補充的導航方式，能讓用戶知道在網站或應用中所處的位置并允許用戶快速訪問要查找的路徑。

相較于桌面端網頁，今天移動端網頁的尺寸都變得很小，面包屑導航需要怎樣設計才能更好的滿足手機端用戶的需求呢？ 一起來看看這份研究體驗吧～

面包屑導航不完整的原因

將完整的面包屑路徑放到移動端界面中有一定的挑戰性，但應該避免的一種情況是不提供任何面包屑導航。 例如L.L.Bean的產品頁上沒有任何面包屑，移動端和桌面站點都應該免這種情況。

移動端和桌面端的測試都表明面包屑導航幫助用戶了解所處的位置，為他們提供清晰的內容層級導向。 在測試期間觀察到的另一個問題是為了縮短面包屑路徑，從導航中刪除一些內容層級。

當面包屑導航路徑不完整時，會增加用戶做出錯誤決策的風險，因為他們不知道呈現的導航并不代表完整的站點結構。

避免面包屑路徑過長的兩種方法

許多站點由于層級太多導致無法在產品頁面上顯示完整的面包屑導航，經過測試有兩種方法可以避免路徑過長。

避免過度分類

過于細致或重復的分類會額外增加面包屑導航的長度。 比如H&M的產品頁將衣服的類別劃分的過于繁瑣，甚至在導航中出現了重復的內容，超過50%的電商網站都存在過度分類的問題。

取消顯示主頁和產品頁的導航路徑

在移動端取消顯示面包屑的主頁和產品頁是縮短導航路徑的合理方法，因為在大多數網站中，我們點擊網站logo就可以跳轉到主頁。產品頁往往展示的內容比較多，取消顯示可以顯著縮短導航路徑并減少頁面頂部的混亂。

例如在惠普的產品頁中，主頁和產品頁的標題都出現在面包屑中，造成頁面上的導航路徑非常長。

而American Eagle取消顯示了主頁和當前頁，整個導航簡潔明了，使用過程中也沒有受到任何影響。

如何實現長面包屑路徑？

考慮到移動端界面的尺寸較小，如果經過必要的調整和刪減，面包屑的路徑仍然很長怎么辦?有沒有什么方法能實現長路徑導航的顯示？

左右滑動

將面包屑導航設計成水平滑動的形式，既節省了空間，同時能讓用戶訪問完整的導航結構。

需要注意的是，如果支持滑動要確保用戶很清晰這種交互方式。 例如在Hayneedle頁面中，面包屑導航未完全顯示，而是顯示一半來引導用戶滑動。

雙行顯示

對于層級結構較淺的站點，將面包屑導航分成兩行顯示也是一個可行的選擇。但是這種方法需要謹慎使用，要確保各個面包屑元素的尺寸和間距足夠大。

如果面包屑的尺寸太小，會增加用戶誤操作的風險。此外，將面包屑分兩行顯示會增加頁面頂部的壓力從而導致頁面混亂，增大被忽略的可能性。

省略中間級

在面包屑導航中使用省略號來代替中間級可以有效節省屏幕的空間。在REI頁面中，左圖用省略號代替中間層級，點擊后隱藏的層級會顯示出來(右圖)。

這種形式會將大量工作轉移到用戶身上，如果沒有合理的交互引導，可能會導致用戶忽略點擊面包屑導航。

總結

實現長路徑導航后，為了讓面包屑導航易于識別，它的設計形式應該與頁面上其他元素做出區分：

導航周圍要留有足夠的空間;

默認情況下導航會有分隔符或者下劃線。

最后為了大家方便，幫大家整理了50+優秀的面包屑導航案例。

后臺回復：面包屑即可獲取!

— The End —

原文：baymard.com/blog/implementing-mobile-hierarchy-breadcrumb

作者：Edward Scott

譯者：Clippp(文章翻譯已獲得作者的正式授權)