2024-09-14
在網(wǎng)站設(shè)計(jì)中,面包屑設(shè)計(jì)是一種非常實(shí)用且重要的導(dǎo)航方式。What? 什么是面包屑
面包屑是作為輔佐和補(bǔ)充的導(dǎo)航方式(secondary navigation scheme),它能讓用戶知道在網(wǎng)站或運(yùn)用中地點(diǎn)的方位并能方便地回到原先的地點(diǎn)。 常見的面包屑的款式是:橫向的文字鏈接,由大于號“>”分隔,這個(gè)符號也暗示了它們的層級聯(lián)系。
【 面包屑的分類】
1.根據(jù)用戶地點(diǎn)的層級方位。(Location-based)
根據(jù)方位的面包屑用于告知用戶在當(dāng)時(shí)網(wǎng)站中地點(diǎn)的結(jié)構(gòu)層級。用在具有多級導(dǎo)航(一般具有2級以上導(dǎo)航)的網(wǎng)站中。
2.根據(jù)產(chǎn)品的屬性。(Attribute-based)
這種類型的面包屑常出現(xiàn)在具有很多類別產(chǎn)品和服務(wù)的網(wǎng)站中,如電子商務(wù)網(wǎng)站,網(wǎng)上教育服務(wù)等。
3.根據(jù)用戶的足跡。(Path-based)
顯示用戶閱讀的軌跡,面包屑之間沒有明顯的層級聯(lián)系。
Why? 為什么運(yùn)用面包屑(面包屑的優(yōu)點(diǎn))
1.面包屑作為用戶尋找路徑的一種輔佐手法,能方便他們定位和導(dǎo)航。
2.面包屑能夠削減的用戶回來上一級頁面的所需的操作次數(shù)。
3.臨時(shí)性,動態(tài)性,占用屏幕空間小,攪擾性小。
4.降低網(wǎng)站訪問者的整體跳出率。(當(dāng)用戶從別處鏈接到網(wǎng)頁,或者從搜索引擎查找到網(wǎng)頁,則面包屑的存在能協(xié)助用戶快速了解當(dāng)時(shí)的層級方位,并引導(dǎo)用戶查看網(wǎng)站的其余部分。削減了看完直接跳走的用戶數(shù)量。)
When? 何時(shí)運(yùn)用面包屑
1. 存在很多的分級內(nèi)容的網(wǎng)站中。
大型的電子商務(wù)網(wǎng)站是典型的比如,里面有很多的產(chǎn)品分別歸屬于不同的大類別及細(xì)分類別。
2. 在一些引導(dǎo)性的網(wǎng)絡(luò)運(yùn)用或者軟件裝置進(jìn)程中,面包屑也常被用來指示當(dāng)時(shí)以及剩余的操作步驟。類似于進(jìn)程條的變種。
3. 層次簡單的頁面中一般不運(yùn)用面包屑,可是當(dāng)面包屑能顯著協(xié)助到閱讀并提高他們定位能力時(shí),也主張選用面包屑。
相冊閱讀就是一個(gè)典型的比如,結(jié)構(gòu)層次并不復(fù)雜,但用戶在特定幾個(gè)頁面之間跳轉(zhuǎn)的頻率會比較高(如相冊首頁,相片縮略圖頁,相片閱讀頁等),所以面包屑的存在對提高此處的閱讀效率是很有協(xié)助的。
留意點(diǎn):面包屑不能替代有效的主導(dǎo)航,它是一個(gè)輔佐功用;一個(gè)答應(yīng)用戶定位他們在哪里的輔佐導(dǎo)航方案。
How? 怎么設(shè)計(jì)面包屑
【面包屑的方位】
一般出現(xiàn)在頁面的左上或者右上部分,而且主要是在導(dǎo)航下面或者內(nèi)容區(qū)的上面。
【面包屑的巨細(xì)】
面包屑是一種輔佐導(dǎo)航,在頁面中不該該起分配效果。面包屑和主導(dǎo)航比較至少要比較小、或不太杰出。在確定面包屑巨細(xì)的時(shí)候,一個(gè)較很好的方法是,當(dāng)訪問這個(gè)頁面的時(shí)候,它不該該是頁面中奪目的元素。如果第一眼就留意到了面包屑,可能就需要再弱化一點(diǎn)。
【帶下拉列表的面包屑】
香港yahoo,淘寶網(wǎng)等網(wǎng)站的面包屑中有下拉列表,能夠方便用戶快速跳轉(zhuǎn)到同類或其他類別的新聞和產(chǎn)品。
交互式面包屑】
Delicious中的tag分組已面包屑的形式出現(xiàn)在網(wǎng)頁頭部,按前文提到的面包屑分類此處屬于一種“根據(jù)用戶足跡”(Path-based)的面包屑。記錄了用戶閱讀tag分組的次序。一起這些面包屑還能夠被及時(shí)“干掉”,方便了對內(nèi)容的管理,真是別出心裁的設(shè)計(jì)。
【回顧總結(jié)】
是否還記得關(guān)于面包屑的3W+H+E?通過合理的設(shè)計(jì)和運(yùn)用,可以提高網(wǎng)站的用戶體驗(yàn),增強(qiáng)用戶對網(wǎng)站的信任感和滿意度。