面包屑導航還能怎么設計?試試這幾個新思路
  • 更新時間:2024-10-30 13:26:48
  • 建站經(jīng)驗
  • 發(fā)布時間:1年前
  • 279

大家好,我是Clippp。今天為大家?guī)淼奈恼率?strong>「面包屑」 導航。面包屑實用的地方在于可以讓用戶更快地訪問上級頁面,無需借助瀏覽器的返回按鈕或頂級導航欄。


2020年的第34篇分享

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


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



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


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


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



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


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



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


例如在惠普的產(chǎn)品頁中,主頁和產(chǎn)品頁的標題都出現(xiàn)在面包屑中,造成頁面上的導航路徑非常長。


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



考慮到移動端界面的尺寸較小,如果經(jīng)過必要的調(diào)整和刪減,面包屑的路徑仍然很長怎么辦?有沒有什么方法能實現(xiàn)長路徑導航的顯示?


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


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



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


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


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


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


總結

實現(xiàn)長路徑導航后,為了讓面包屑導航易于識別,它的設計形式應該與頁面上其他元素做出區(qū)分:

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

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

最后為了大家方便,幫大家整理了50+優(yōu)秀的面包屑導航案例。

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

我們專注高端建站,小程序開發(fā)、軟件系統(tǒng)定制開發(fā)、BUG修復、物聯(lián)網(wǎng)開發(fā)、各類API接口對接開發(fā)等。十余年開發(fā)經(jīng)驗,每一個項目承諾做到滿意為止,多一次對比,一定讓您多一份收獲!

本文章出于推來客官網(wǎng),轉載請表明原文地址:https://www.tlkjt.com/experience/8192.html
推薦文章

在線客服

掃碼聯(lián)系客服

3985758

回到頂部