大家好,今天AAA教育郭老師為大家?guī)?lái)的文章是面包屑導(dǎo)航。面包屑實(shí)用的地方在于可以讓用戶更快地訪問(wèn)上級(jí)頁(yè)面,無(wú)需借助瀏覽器的返回按鈕或頂級(jí)導(dǎo)航欄。
面包屑作為一種輔助和補(bǔ)充的導(dǎo)航方式,能讓用戶知道在網(wǎng)站或應(yīng)用中所處的位置并允許用戶快速訪問(wèn)要查找的路徑,
相較于桌面端網(wǎng)頁(yè),今天移動(dòng)端網(wǎng)頁(yè)的尺寸都變得很小,面包屑導(dǎo)航需要怎樣設(shè)計(jì)才能更好的滿足手機(jī)端用戶的需求呢?一起來(lái)看看這份研究體驗(yàn)吧~
面包屑導(dǎo)航不完整的原因
將完整的面包屑路徑放到移動(dòng)端界面中有一定的挑戰(zhàn)性,但應(yīng)該避免的一種情況是不提供任何面包屑導(dǎo)航。例如L.L.Bean的產(chǎn)品頁(yè)上沒(méi)有任何面包屑,移動(dòng)端和桌面站點(diǎn)都應(yīng)該免這種情況。
移動(dòng)端和桌面端的測(cè)試都表明面包屑導(dǎo)航幫助用戶了解所處的位置,為他們提供清晰的內(nèi)容層級(jí)導(dǎo)向。在測(cè)試期間觀察到的另一個(gè)問(wèn)題是為了縮短面包屑路徑,從導(dǎo)航中刪除一些內(nèi)容層級(jí)。
當(dāng)面包屑導(dǎo)航路徑不完整時(shí),會(huì)增加用戶做出錯(cuò)誤決策的風(fēng)險(xiǎn),因?yàn)樗麄儾恢莱尸F(xiàn)的導(dǎo)航并不代表完整的站點(diǎn)結(jié)構(gòu)。
避免面包屑路徑過(guò)長(zhǎng)的兩種方法
許多站點(diǎn)由于層級(jí)太多導(dǎo)致無(wú)法在產(chǎn)品頁(yè)面上顯示完整的面包屑導(dǎo)航,經(jīng)過(guò)測(cè)試有兩種方法可以避免路徑過(guò)長(zhǎng)。
避免過(guò)度分類
過(guò)于細(xì)致或重復(fù)的分類會(huì)額外增加面包屑導(dǎo)航的長(zhǎng)度。
比如H&M的產(chǎn)品頁(yè)將衣服的類別劃分的過(guò)于繁瑣,甚至在導(dǎo)航中出現(xiàn)了重復(fù)的內(nèi)容,超過(guò)50%的電商網(wǎng)站都存在過(guò)度分類的問(wèn)題。
取消顯示主頁(yè)和產(chǎn)品頁(yè)的導(dǎo)航路徑 在移動(dòng)端取消顯示面包屑的主頁(yè)和產(chǎn)品頁(yè)是縮短導(dǎo)航路徑的合理方法,因?yàn)樵诖蠖鄶?shù)網(wǎng)站中,我們點(diǎn)擊網(wǎng)站logo就可以跳轉(zhuǎn)到主頁(yè)。產(chǎn)品頁(yè)往往展示的內(nèi)容比較多,取消顯示可以顯著縮短導(dǎo)航路徑并減少頁(yè)面頂部的混亂。例如在惠普的產(chǎn)品頁(yè)中,主頁(yè)和產(chǎn)品頁(yè)的標(biāo)題都出現(xiàn)在面包屑中,造成頁(yè)面上的導(dǎo)航路徑非常長(zhǎng)。
而American Eagle取消顯示了主頁(yè)和當(dāng)前頁(yè),整個(gè)導(dǎo)航簡(jiǎn)潔明了,使用過(guò)程中也沒(méi)有受到任何影響。
如何實(shí)現(xiàn)長(zhǎng)面包屑路徑?
考慮到移動(dòng)端界面的尺寸較小,如果經(jīng)過(guò)必要的調(diào)整和刪減,面包屑的路徑仍然很長(zhǎng)怎么辦?有沒(méi)有什么方法能實(shí)現(xiàn)長(zhǎng)路徑導(dǎo)航的顯示? 左右滑動(dòng) 將面包屑導(dǎo)航設(shè)計(jì)成水平滑動(dòng)的形式,既節(jié)省了空間,同時(shí)能讓用戶訪問(wèn)完整的導(dǎo)航結(jié)構(gòu)。需要注意的是,如果支持滑動(dòng)要確保用戶很清晰這種交互方式。例如在Hayneedle頁(yè)面中,面包屑導(dǎo)航未完全顯示,而是顯示一半來(lái)引導(dǎo)用戶滑動(dòng)。
雙行顯示 對(duì)于層級(jí)結(jié)構(gòu)較淺的站點(diǎn),將面包屑導(dǎo)航分成兩行顯示也是一個(gè)可行的選擇。但是這種方法需要謹(jǐn)慎使用,要確保各個(gè)面包屑元素的尺寸和間距足夠大。
如果面包屑的尺寸太小,會(huì)增加用戶誤操作的風(fēng)險(xiǎn)。此外,將面包屑分兩行顯示會(huì)增加頁(yè)面頂部的壓力從而導(dǎo)致頁(yè)面混亂,增大被忽略的可能性。
省略中間級(jí)
在面包屑導(dǎo)航中使用省略號(hào)來(lái)代替中間級(jí)可以有效節(jié)省屏幕的空間。在REI頁(yè)面中,左圖用省略號(hào)代替中間層級(jí),點(diǎn)擊后隱藏的層級(jí)會(huì)顯示出來(lái)(右圖)。
這種形式會(huì)將大量工作轉(zhuǎn)移到用戶身上,如果沒(méi)有合理的交互引導(dǎo),可能會(huì)導(dǎo)致用戶忽略點(diǎn)擊面包屑導(dǎo)航。
總結(jié)
實(shí)現(xiàn)長(zhǎng)路徑導(dǎo)航后,為了讓面包屑導(dǎo)航易于識(shí)別,它的設(shè)計(jì)形式應(yīng)該與頁(yè)面上其他元素做出區(qū)分:
1.導(dǎo)航周?chē)粲凶銐虻目臻g;
2.默認(rèn)情況下導(dǎo)航會(huì)有分隔符或者下劃線。
3. 因此,您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息,請(qǐng)?jiān)L問(wèn)AAA教育,包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。
填寫(xiě)下面表單即可預(yù)約申請(qǐng)免費(fèi)試聽(tīng)!怕錢(qián)不夠?可先就業(yè)掙錢(qián)后再付學(xué)費(fèi)! 怕學(xué)不會(huì)?助教全程陪讀,隨時(shí)解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!
?2007-2022/ m.5wd995.cn 北京漫動(dòng)者數(shù)字科技有限公司 備案號(hào): 京ICP備12034770號(hào) 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc