網(wǎng)頁(yè)中為你指路的面包屑到底應(yīng)當(dāng)怎么使用?

編者按:面包屑是我們熟知的一種導(dǎo)航工具,它們往往出現(xiàn)在頁(yè)面內(nèi)容的上方,告知你所處的位置。它小巧,方便,常見,且簡(jiǎn)單。可是即便是這樣的UI控件,在設(shè)計(jì)上同樣是有講究的,今天咱們就來聊聊面包屑吧
作為一種輔助導(dǎo)航系統(tǒng),面包屑能夠幫助用戶清晰的定位到自己所在網(wǎng)站的位置。這個(gè)詞源自于童話中跟著面包屑回到自己家的孩子,而網(wǎng)頁(yè)中的面包屑也是幫助用戶找到自己位置的UI控件。
面包屑通過路徑展示告知用戶他們所處的位置,而今天的這篇文章將會(huì)探討一個(gè)可用的網(wǎng)頁(yè)面包屑應(yīng)當(dāng)如何設(shè)計(jì),通過最佳實(shí)踐展示面包屑的正確用法。
面包屑導(dǎo)航提供可用性作為一種視覺指引,面包屑為用戶揭示出網(wǎng)頁(yè)的層次結(jié)構(gòu),也正是因此,面包屑成為了用戶了解網(wǎng)站背景信息的重要途徑,幫助用戶了解下列問題的答案:
我在哪里?根據(jù)整個(gè)網(wǎng)站的層次,面包屑能讓用戶知道他們所處的位置。·我還能去哪里?面包屑提升了整個(gè)網(wǎng)站的可查找性,面包屑的存在揭示了整個(gè)網(wǎng)站的結(jié)構(gòu),用戶也隨之明白網(wǎng)站還有哪些其他的部分。·是否應(yīng)當(dāng)瀏覽更多?面包屑揭示出網(wǎng)站有更多值得探索的內(nèi)容,鼓勵(lì)用戶瀏覽更多。反過來,面包屑的出現(xiàn)降低了網(wǎng)站的跳出率。
減少操作次數(shù)從可用性的角度上來看,面包屑減少了用戶跳轉(zhuǎn)到高層級(jí)頁(yè)面的操作數(shù),這樣避免了用戶使用瀏覽器的返回按鈕和翻找導(dǎo)航尋找上級(jí)頁(yè)面的復(fù)雜交互。
占用空間小面包屑這種設(shè)計(jì)元素在頁(yè)面上占用的空間相當(dāng)小,它基本都是以帶鏈接的文本的形式存在的,并且通常只有一行。
面包屑不會(huì)給用戶帶來困擾這個(gè)小小的設(shè)計(jì)元素占據(jù)的空間不大,但是給用戶帶來的便捷遠(yuǎn)遠(yuǎn)大于可能帶來的問題和困擾。
什么時(shí)候使用面包屑?是否要在網(wǎng)站中使用面包屑,主要取決于網(wǎng)站的結(jié)構(gòu)??纯茨愕木W(wǎng)站地圖或者整體的結(jié)構(gòu)圖,分析使用面包屑能否提高用戶在網(wǎng)站內(nèi)部不同類別、目錄下導(dǎo)航是否方便:
·當(dāng)你的網(wǎng)站內(nèi)擁有分類明晰、組織明確的多層次線性結(jié)構(gòu)的時(shí)候,你應(yīng)當(dāng)使用面包屑。比如一個(gè)擁有種類繁多產(chǎn)品的電子商務(wù)網(wǎng)站,面包屑就相當(dāng)有用。·當(dāng)網(wǎng)站不具備邏輯清晰的層次結(jié)構(gòu)的時(shí)候,就不要使用面包屑。
面包屑的類型面包屑是基于網(wǎng)站的邏輯結(jié)構(gòu)而存在的導(dǎo)航組件,它可以基于位置、路徑來展示,也可以基于屬性而存在。
基于位置的面包屑基于位置的面包屑設(shè)計(jì)通常都能很好的反映網(wǎng)站的結(jié)構(gòu)特征。它們直接將網(wǎng)站的層次結(jié)構(gòu)展現(xiàn)在訪客面前,其中包含多個(gè)層級(jí)(級(jí)別通常超過2層)。這種層級(jí)展示性的面包屑對(duì)于從外部來源(比如搜索引擎)進(jìn)入網(wǎng)站的用戶而言,具有明顯的指引性作用。
在下面 BestBuy 的頁(yè)面中,面包屑將產(chǎn)品所在頁(yè)面的層級(jí)關(guān)系展現(xiàn)了出來。
基于路徑的面包屑通常也被稱為“歷史足跡”,它展現(xiàn)出來的并非是網(wǎng)站結(jié)構(gòu),而是訪客抵達(dá)特定頁(yè)面的完整路徑。這種面包屑路徑并非是靜態(tài)的,而是動(dòng)態(tài)生成的?;诼窂降拿姘加袝r(shí)候會(huì)對(duì)用戶有所幫助,但是有的時(shí)候還是會(huì)讓用戶感到迷惑——有的用戶瀏覽網(wǎng)站的時(shí)候?yàn)g覽路徑過于天馬行空,這種基于路徑的面包屑會(huì)幫助他們記錄,無需翻看歷史,也不無需使用瀏覽器的返回按鈕來返回特定位置。另外,這種基于路徑的面包屑對(duì)于一次就抵達(dá)特定位置的用戶而言毫無用處。
下面就是使用基于路徑面包屑來導(dǎo)航的案例和原理說明:
這類基于屬性的面包屑常見于電子商務(wù)類網(wǎng)站,產(chǎn)品常?;陬悇e和屬性而組織到不同的子目錄中,基于屬性的分類讓用戶更容易理解產(chǎn)品和產(chǎn)品之間的關(guān)系,提供了更多不同的瀏覽路徑。
就像 TM Lewin 的這個(gè)頁(yè)面,面包屑展現(xiàn)出的是特定頁(yè)面對(duì)應(yīng)產(chǎn)品,而產(chǎn)品是按照某個(gè)屬性來組織的:
根據(jù)實(shí)際經(jīng)驗(yàn),絕大多數(shù)的情況下,面包屑還是適合展現(xiàn)層級(jí)機(jī)構(gòu)而非瀏覽歷史。因此,基于位置和屬性的面包屑應(yīng)用更加廣泛,基于路徑的面包屑相對(duì)少見的多。
面包屑導(dǎo)航最佳實(shí)踐當(dāng)你開始設(shè)計(jì)面包屑導(dǎo)航的時(shí)候,應(yīng)當(dāng)謹(jǐn)記下面的事情:
1、不要使用面包屑來替代網(wǎng)頁(yè)主要的導(dǎo)航系統(tǒng)面包屑只是一個(gè)輔助導(dǎo)航系統(tǒng),它無法替代主要的導(dǎo)航系統(tǒng)。請(qǐng)記住,它是僅僅是為了用戶方便的次要選項(xiàng),用來抵達(dá)其他層級(jí)的快速定位鏈接系統(tǒng)。
面包屑的最后一個(gè)層級(jí)是當(dāng)前的頁(yè)面,而這一項(xiàng)在面包屑中是不應(yīng)該加上鏈接的,因?yàn)樗黄鸬秸故径ㄎ坏淖饔茫瑳]有任何意義。
3、使用分隔符在面包屑中,用來分隔不同層級(jí)最常見的是大于符號(hào)(>),常見的使用方法是“父類別 > 子類別”。當(dāng)然,分隔符的使用并不拘泥于這一種,有使用箭頭(→)的,還有使用書名號(hào)(»)的,也有使用斜杠(//)的。使用哪種分隔符通常取決于整體風(fēng)格和設(shè)計(jì)師的喜好。
在設(shè)計(jì)的時(shí)候應(yīng)當(dāng)仔細(xì)考慮尺寸和間隔大小,不同的面包屑層級(jí)之間應(yīng)當(dāng)有足夠的間距,確保用戶能夠識(shí)別。當(dāng)然你也不希望面包屑占據(jù)頁(yè)面太多的空間,如果面包屑比頂部導(dǎo)航還要大,看起來就非常尷尬了。
5、不要讓它成為視覺焦點(diǎn)面包屑本身是一個(gè)輔助導(dǎo)航,如果使用過于花哨的字體和醒目的色彩,會(huì)使得它顯得喧賓奪主,過于抓人眼球。它不應(yīng)該是瀏覽過程中用戶的視覺焦點(diǎn)。下面的面包屑設(shè)計(jì)并不差,但是它太過于醒目,甚至比頂部導(dǎo)航還能引起用戶注意力。
Google 的面包屑設(shè)計(jì)并不搶眼,但是用戶依然能夠很好的使用它。
如果你覺得自己的移動(dòng)端頁(yè)面上要使用面包屑的話,那就意味著你的移動(dòng)端網(wǎng)頁(yè)設(shè)計(jì)出現(xiàn)問題了:可能是網(wǎng)站太復(fù)雜(嵌套層級(jí)過深),而這樣一來,就不符合移動(dòng)端的使用場(chǎng)景了。為了解決問題,你應(yīng)當(dāng)試圖簡(jiǎn)化整個(gè)體系,確保面包屑不會(huì)出現(xiàn)在手機(jī)上。
結(jié)語面包屑讓用戶可更加便捷地瀏覽整個(gè)網(wǎng)站,回溯到上級(jí)頁(yè)面,尋找相關(guān)的產(chǎn)品,它對(duì)于整個(gè)網(wǎng)站結(jié)構(gòu)是有意義的。它的功能并不復(fù)雜,增加易用性是它的主要作用,所以千萬不要將面包屑復(fù)雜化。
相關(guān)文章
- Cloudfront 是 Amazon 提供的 CDN 服務(wù),有每月免費(fèi) 1T 的流量,該流量不可累計(jì),個(gè)人小站的話,這個(gè) CDN 是足夠用的了,而且主要是國(guó)內(nèi)訪問的速度還不錯(cuò),但是需要注意不要2023-10-19
免費(fèi)為你的網(wǎng)站加速,全球訪問加速還可以防御ddos攻擊的cloudflare
CDN加速通俗來講就是把網(wǎng)站在全國(guó)各地的服務(wù)器上復(fù)制一份(即鏡像服務(wù)器),用戶在訪問的時(shí)候,路由自動(dòng)分配到最近的服務(wù)器,提升訪問速度,大家在訪問軟件下載站的時(shí)候,經(jīng)2023-10-09什么是AMP(加速移動(dòng)頁(yè)面)Web開發(fā)?AMP的好處以及它與響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的
AMP技術(shù)是一項(xiàng)用于加速移動(dòng)Web頁(yè)面加載速度的技術(shù),它通過限制頁(yè)面的HTML、CSS和JavaScript的使用,從而提高頁(yè)面加載速度和性能,下面我們將從以下幾個(gè)方面對(duì)AMP技術(shù)進(jìn)行拓展2023-10-09谷歌站長(zhǎng)(Search Console)工具的注冊(cè)安裝及功能介紹
Google Search Console 是一項(xiàng)由 Google 提供的免費(fèi)服務(wù),可幫助您監(jiān)控和維護(hù)您的網(wǎng)站在 Google 搜索結(jié)果中的展示情況以及排查問題,Search Console 可幫助您了解并改善 Go2023-05-13打開網(wǎng)站出現(xiàn)Internal Server Error的原因和解決方法
這篇文章主要介紹了打開網(wǎng)站出現(xiàn)Internal Server Error的原因和解決方法的相關(guān)資料,需要的朋友可以參考下,解決方法:登陸FTP或文件管理器,檢查站點(diǎn)目錄文件權(quán)限設(shè)置,將2022-01-08inxy:超低價(jià)“綜合型”國(guó)外CDN提供商,專業(yè)POP節(jié)點(diǎn)覆蓋亞洲\歐洲\美洲
inxy,這個(gè)2005年成立運(yùn)作至今的商家不但提供11個(gè)機(jī)房的VPS、24個(gè)機(jī)房獨(dú)立服務(wù)器,更重要的核心業(yè)務(wù)還有CDN,之所以要來推薦inxy的CDN是因?yàn)樵谛詢r(jià)比上面有著獨(dú)到的優(yōu)勢(shì)2020-11-16分享盤點(diǎn)10個(gè)可免費(fèi)使用的網(wǎng)站CDN加速服務(wù)
大部分服務(wù)商(如阿里云,網(wǎng)易蜂巢,京東云等)的CDN服務(wù)是按使用量收費(fèi)的,也有一些服務(wù)商提供免費(fèi)的CDN服務(wù),這篇文章主要介紹了分享盤點(diǎn)10個(gè)可免費(fèi)使用的網(wǎng)站CDN加速服2020-08-17INXY:運(yùn)作全球26個(gè)國(guó)家和地區(qū)的 獨(dú)立服務(wù)器、VPS、CDN業(yè)務(wù),價(jià)格超便
INXY主要運(yùn)作獨(dú)立服務(wù)器、VPS、CDN、DNS四大類業(yè)務(wù)。inxy有自己的機(jī)房,也賣全球其他國(guó)家和地區(qū)的相關(guān)業(yè)務(wù),可以說是一個(gè)超大型的reseller2019-09-29- 這篇文章主要介紹了新手干貨之網(wǎng)站建設(shè)中常見的一些問題,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-09-18
給我三分鐘還你一個(gè)不買視頻會(huì)員的理由,手把手教搭建電影網(wǎng)站
本篇文章主要介紹了手把手教搭建電影網(wǎng)站,今天我們就來搭建一個(gè)VIP電影網(wǎng)站,本文主旨在于,從基礎(chǔ)的搭建一個(gè)簡(jiǎn)單的解析網(wǎng)站來引入一些思路,手把手什么的最貼心了。2019-08-22