面包屑設(shè)計(jì)

-面包屑是什么?

對(duì)于面包屑這個(gè)說(shuō)法,相信有些人還是對(duì)于這個(gè)概念有點(diǎn)模糊;看以下幾個(gè)圖片,相信大家就知道何為面包屑


圖一


圖二


圖三

現(xiàn)在大家應(yīng)該能理解何為面包屑。面包屑導(dǎo)航(或稱(chēng)為面包屑路徑)是一種顯示用戶(hù)在網(wǎng)站或網(wǎng)絡(luò)應(yīng)用中的位置的一層層指引的導(dǎo)航。在互聯(lián)網(wǎng)中,面包屑為用戶(hù)提供一種追蹤返回最初訪(fǎng)問(wèn)頁(yè)面的方式,可以清晰的為客戶(hù)指引進(jìn)入網(wǎng)站內(nèi)部也和首頁(yè)之間的路線(xiàn)。最簡(jiǎn)化的方式是,面包屑就是水平排列的被大于號(hào)">"隔開(kāi)的文本鏈接;這個(gè)符號(hào)指示該頁(yè)面相對(duì)于鏈接到它的頁(yè)面的深度(級(jí)別)。


-面包屑的類(lèi)型
雖然我們?cè)谌粘:芙?jīng)??吹矫姘?,但是在交互設(shè)計(jì)過(guò)程中,對(duì)于面包屑控件的使用還是有一定的學(xué)問(wèn);而了解面包屑具體的類(lèi)型對(duì)于更好的使用面包屑是至關(guān)重要的。面包屑是基于網(wǎng)站的邏輯結(jié)構(gòu)而存在的導(dǎo)航組件,可以分為以下三類(lèi)

基于位置的面包屑


基于位置

通過(guò)位置面包屑通過(guò)層級(jí)展示性讓用戶(hù)很好理解網(wǎng)站的結(jié)構(gòu)特征。直接講網(wǎng)站的層次層級(jí)展現(xiàn)在用戶(hù)面前,引導(dǎo)用戶(hù)并減少用戶(hù)跳出率



基于路徑的面包屑

基于路徑的面包屑,面包屑路徑并非是靜態(tài)的,而是動(dòng)態(tài)的?;诼窂胶突谖恢媚撤N程度上是很相像的,其實(shí)在實(shí)際應(yīng)用過(guò)程中,基于路徑和基于位置的面包屑還是會(huì)經(jīng)常混淆。

例如:廈門(mén)軟件園二期;

基于位置:中國(guó)福建廈門(mén)思明區(qū)軟件園二期;

基于路徑:從杭州開(kāi)車(chē)來(lái)的,杭州到廈門(mén)就有千種萬(wàn)種的路徑可以行駛

基于路徑

雖然通過(guò)例子和圖片,我們?nèi)菀椎膮^(qū)分了基于位置和基于路徑的面包屑。但是在使用面包屑過(guò)程中,用戶(hù)并非能夠區(qū)分出這兩種面包屑的功能;用戶(hù)會(huì)認(rèn)為基于路徑的面包屑是基于位置的面包屑,這時(shí)候也會(huì)讓用戶(hù)感到疑惑,無(wú)法幫助到用戶(hù)。這就違背了面包屑最終的本意,引導(dǎo)并告知用戶(hù)。因此在用到基于位置和基于路徑面包屑的時(shí)候要慎重,當(dāng)然,在互聯(lián)網(wǎng)的時(shí)代中,慢慢的弱化這兩種面包屑的存在。


基于屬性的面包屑

基于屬性的面包屑,在電子商務(wù)是最常見(jiàn)了,用于表明產(chǎn)品屬性之間的所屬關(guān)系和當(dāng)前頁(yè)所在的位置,這些屬性是存在所屬和包含關(guān)系的。

唯品會(huì)


淘寶


-面包屑的引申

帶下拉列表的面包屑,在平時(shí)設(shè)計(jì)的項(xiàng)目中還是有遇到的;當(dāng)和基于路徑的面包屑混合一起用的時(shí)候,在設(shè)計(jì)過(guò)程中,對(duì)于我來(lái)說(shuō)還是比較困惑的;基于路徑帶下拉列表的面包屑也同時(shí)給予開(kāi)發(fā)一定的困惑;在實(shí)際產(chǎn)品使用過(guò)程中面向用戶(hù)給給予了迷惑。為了減少給用戶(hù)照成的疑惑,現(xiàn)在慢慢的開(kāi)始減少面包屑的設(shè)計(jì);


-面包屑的現(xiàn)狀

面包屑導(dǎo)航(或稱(chēng)為面包屑路徑)是一種顯示用戶(hù)在網(wǎng)站或網(wǎng)絡(luò)應(yīng)用中的位置的一層層指引的導(dǎo)航在,也就是適用于層級(jí)較深的網(wǎng)站。當(dāng)前的互聯(lián)網(wǎng)時(shí)代,我相信除了一些電商網(wǎng)站之外;大家會(huì)慢慢發(fā)現(xiàn),面包屑控件慢慢退出互聯(lián)網(wǎng)歷史舞臺(tái);對(duì)于推出舞臺(tái)主要有以下幾個(gè)原因

A、當(dāng)前的產(chǎn)品設(shè)計(jì)趨勢(shì)都是將信息的層次結(jié)構(gòu)扁平化,盡可能將各種模塊平鋪,使信息結(jié)構(gòu)的廣度增加,減少縱向的深度

B、網(wǎng)站層級(jí)越少越扁平,搜索引擎越容易訪(fǎng)問(wèn),網(wǎng)頁(yè)越容易被收錄;對(duì)于網(wǎng)站的推廣搜索更有利

C、層級(jí)越少,用戶(hù)思考點(diǎn)擊的次數(shù)越少;一定程度上提升的用戶(hù)體驗(yàn)

雖然面包屑慢慢退出歷史舞臺(tái),但是在一定的網(wǎng)站上還是會(huì)用到面包屑這個(gè)功能的,而我們要甄別面包屑帶來(lái)的到底是提升用戶(hù)體驗(yàn)還是給用戶(hù)帶來(lái)疑惑呢。


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容