旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實(shí)習(xí)/?A計(jì)劃
全國(guó)統(tǒng)一咨詢熱線:010-5367 2995
首頁(yè) > 熱門文章 > 產(chǎn)品經(jīng)理 > 產(chǎn)品經(jīng)理應(yīng)該如何設(shè)計(jì)面包屑原理

產(chǎn)品經(jīng)理應(yīng)該如何設(shè)計(jì)面包屑原理

時(shí)間:2019-02-13來(lái)源:m.lb577.com點(diǎn)擊量:作者:fubowen
時(shí)間:2019-02-13點(diǎn)擊量:作者:fubowen

不論是手機(jī)還是 PC端,面包屑都是用來(lái)尋找路徑的重要組件,可以讓用戶了解當(dāng)前頁(yè)面在整個(gè)網(wǎng)站結(jié)構(gòu)的所處位置。它能在對(duì)界面設(shè)計(jì)產(chǎn)生極少影響的前提下,為用戶提供很多便利。今天,AAA教育的小編來(lái)告訴大家一下,應(yīng)該如何設(shè)計(jì)面包屑原理。

如果一個(gè)用戶從首頁(yè)一層一層抵達(dá)最終頁(yè)面,也許 TA 對(duì)自己身處何處還算有概念。但是如果用戶從外部鏈接或者快捷入口進(jìn)來(lái),可能對(duì)當(dāng)前的頁(yè)面層級(jí)一無(wú)所知,此時(shí)面包屑就能引導(dǎo)他們快速了解網(wǎng)站架構(gòu)。一個(gè)底層頁(yè)面所展示出來(lái)的信息也許是非常精準(zhǔn)片面的,而面包屑則能展示更大門類的信息,從而將用戶引向上層頁(yè)面。下文會(huì)按照 PC端到手機(jī)端的順序,介紹十一條面包屑的設(shè)計(jì)指南。

PC端

1. 不要用面包屑代替導(dǎo)航頁(yè)簽

網(wǎng)站導(dǎo)航和面包屑也許看起來(lái)有些相似,但是功能與使用場(chǎng)景完全不同,不應(yīng)該以簡(jiǎn)化頁(yè)面為目的只保留其中一個(gè)。

2. 面包屑應(yīng)該用來(lái)展示系統(tǒng)層級(jí),而不是歷史記錄

如果用戶是從首頁(yè)層層深入,系統(tǒng)層級(jí)與歷史記錄是沒有區(qū)別的,但是如果用戶從外部鏈接進(jìn)入,這兩個(gè)差別就大了。為了給用戶提供真正有用的信息,面包屑展示的不應(yīng)該是歷史記錄,而應(yīng)該是系統(tǒng)層級(jí)。

3. 如果網(wǎng)站有兩個(gè)父層級(jí)(如兩個(gè)同級(jí)首頁(yè)),應(yīng)該只展示一個(gè)

有的網(wǎng)站可能有兩個(gè)平級(jí)的首頁(yè),這種情況下一定要選擇其中一個(gè)作為面包屑的第一項(xiàng),同時(shí)列出兩個(gè)是不可取的。

4. 當(dāng)前頁(yè)一定是面包屑的最后一項(xiàng)

不要覺得在面包屑上再寫一遍當(dāng)前頁(yè)的標(biāo)題就重復(fù)了信息,面包屑的最后一項(xiàng)如果不是當(dāng)前頁(yè),是會(huì)讓用戶產(chǎn)生困惑的。

5. 面包屑中最后一項(xiàng)(當(dāng)前頁(yè))不需要鏈接到自身

面包屑的每一項(xiàng)都要放鏈接的,除了最后一項(xiàng),因?yàn)榉乓粋€(gè)指向當(dāng)前頁(yè)的鏈接不但沒有必要,還會(huì)讓用戶懷疑最后一項(xiàng)到底和當(dāng)前頁(yè)是不是同一頁(yè)。

6. 面包屑的層級(jí)應(yīng)該是網(wǎng)站的頁(yè)面層級(jí),而不是分類層級(jí),也不應(yīng)該包括無(wú)內(nèi)容的導(dǎo)航頁(yè)

邏輯上的父級(jí)(如商品上級(jí)分類),除非有真實(shí)的頁(yè)面存在,否則不需要放在面包屑里。此外,諸如網(wǎng)站地圖一類可有可無(wú)的層級(jí),也最好不要加到面包屑里。

7. 如果網(wǎng)站層級(jí)不多或沒有分支,就不需要面包屑了

如果面包屑只有兩級(jí),或者根本沒有分支,那么它存在的必要性就很小了。再考慮到網(wǎng)站簡(jiǎn)潔美觀性,這時(shí)還不如不要面包屑。

 

8. 面包屑的第一項(xiàng)應(yīng)該鏈接首頁(yè)

面包屑的第一項(xiàng)如果不是首頁(yè),用戶可能會(huì)有疑問這個(gè)面包屑不可信或者該網(wǎng)站根本沒有首頁(yè)。

 

手機(jī)端

1. 不要把面包屑分行

就算面包屑有點(diǎn)長(zhǎng),分行也絕對(duì)不是一個(gè)好的主意。

 


2. 不要用太小的文字

縮小文字也許能夠展示更長(zhǎng)的信息,但是用戶如果點(diǎn)擊不到或者看不清,面包屑存在的意義就沒有了。

 


3. 可以考慮只保留上一級(jí)面包屑

考慮到手機(jī)用戶的使用習(xí)慣和使用需求,可以不用把面包屑完整列出。

 

總結(jié)

面包屑是用戶尋找相關(guān)內(nèi)容的輔助工具,對(duì)于從外部鏈接進(jìn)入的場(chǎng)景十分有用。確保面包屑里每一項(xiàng)都可以點(diǎn)擊,并且可以查看同一層級(jí)的其它內(nèi)容。在手機(jī)端,面包屑可能難以展示完全,可以根據(jù)用戶使用方式縮短其長(zhǎng)度。

更多信息,也可以關(guān)注AAA教育的公眾賬號(hào)。AAA教育,"全能+"人才孵化品牌,陪你每天成長(zhǎng)一點(diǎn)點(diǎn)。

預(yù)約申請(qǐng)免費(fèi)試聽課

填寫下面表單即可預(yù)約申請(qǐng)免費(fèi)試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費(fèi)! 怕學(xué)不會(huì)?助教全程陪讀,隨時(shí)解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!

?2007-2021/北京漫動(dòng)者教育科技有限公司版權(quán)所有
備案號(hào):京ICP備12034770號(hào)

?2007-2022/ m.lb577.com 北京漫動(dòng)者數(shù)字科技有限公司 備案號(hào): 京ICP備12034770號(hào) 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc

京公網(wǎng)安備 11010802035704號(hào)

網(wǎng)站地圖