UI設(shè)計中面包屑導(dǎo)航怎么設(shè)計

　　大家好，今天AAA教育郭老師為大家?guī)淼奈恼率?a href="http://5wd995.cn/ui/2772.html" target="_blank">面包屑導(dǎo)航。面包屑實(shí)用的地方在于可以讓用戶更快地訪問上級頁面，無需借助瀏覽器的返回按鈕或頂級導(dǎo)航欄。
 

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

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

　　面包屑導(dǎo)航不完整的原因
 

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

 

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

 

　　當(dāng)面包屑導(dǎo)航路徑不完整時，會增加用戶做出錯誤決策的風(fēng)險，因?yàn)樗麄儾恢莱尸F(xiàn)的導(dǎo)航并不代表完整的站點(diǎn)結(jié)構(gòu)。
 

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

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

　　避免過度分類
 

　　過于細(xì)致或重復(fù)的分類會額外增加面包屑導(dǎo)航的長度。
 

　　比如H&M的產(chǎn)品頁將衣服的類別劃分的過于繁瑣，甚至在導(dǎo)航中出現(xiàn)了重復(fù)的內(nèi)容，超過50%的電商網(wǎng)站都存在過度分類的問題。

 

　　取消顯示主頁和產(chǎn)品頁的導(dǎo)航路徑 在移動端取消顯示面包屑的主頁和產(chǎn)品頁是縮短導(dǎo)航路徑的合理方法，因?yàn)樵诖蠖鄶?shù)網(wǎng)站中，我們點(diǎn)擊網(wǎng)站logo就可以跳轉(zhuǎn)到主頁。產(chǎn)品頁往往展示的內(nèi)容比較多，取消顯示可以顯著縮短導(dǎo)航路徑并減少頁面頂部的混亂。例如在惠普的產(chǎn)品頁中，主頁和產(chǎn)品頁的標(biāo)題都出現(xiàn)在面包屑中，造成頁面上的導(dǎo)航路徑非常長。

 

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

 

　　如何實(shí)現(xiàn)長面包屑路徑?
 

　　考慮到移動端界面的尺寸較小，如果經(jīng)過必要的調(diào)整和刪減，面包屑的路徑仍然很長怎么辦?有沒有什么方法能實(shí)現(xiàn)長路徑導(dǎo)航的顯示? 左右滑動 將面包屑導(dǎo)航設(shè)計成水平滑動的形式，既節(jié)省了空間，同時能讓用戶訪問完整的導(dǎo)航結(jié)構(gòu)。需要注意的是，如果支持滑動要確保用戶很清晰這種交互方式。例如在Hayneedle頁面中，面包屑導(dǎo)航未完全顯示，而是顯示一半來引導(dǎo)用戶滑動。

 

　　雙行顯示 對于層級結(jié)構(gòu)較淺的站點(diǎn)，將面包屑導(dǎo)航分成兩行顯示也是一個可行的選擇。但是這種方法需要謹(jǐn)慎使用，要確保各個面包屑元素的尺寸和間距足夠大。

 

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

　　省略中間級
 

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

 

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

　　總結(jié)
 

　　實(shí)現(xiàn)長路徑導(dǎo)航后，為了讓面包屑導(dǎo)航易于識別，它的設(shè)計形式應(yīng)該與頁面上其他元素做出區(qū)分：
 

　　1.導(dǎo)航周圍要留有足夠的空間;
 

　　2.默認(rèn)情況下導(dǎo)航會有分隔符或者下劃線。
 

　　3. 因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計師的工作相關(guān)的主要技能。如果您想了解更多信息，請訪問AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。