關(guān)于網(wǎng)站上的面包屑導(dǎo)航很多朋友不知道為什么這么叫。顧名思義，面包屑挺巧就是瑣碎的意思，一點(diǎn)點(diǎn)的形狀，這就代表我們的網(wǎng)站導(dǎo)航中，那些不在主導(dǎo)航上，其他輔助性瑣碎的導(dǎo)航就叫面包屑導(dǎo)航了。

首先我們來(lái)看看面包屑導(dǎo)航的作用：

1、讓用戶了解當(dāng)前所處位置，以及當(dāng)前頁(yè)面在整個(gè)網(wǎng)站中的位置。

2、體現(xiàn)了網(wǎng)站的架構(gòu)層級(jí)，能夠幫助用戶快速學(xué)習(xí)和了解網(wǎng)站內(nèi)容和組織方式，從而形成很好的位置感

3、提供返回各個(gè)層級(jí)的快速入口，方便用戶操作。

4、Google已經(jīng)將面包屑導(dǎo)航整合到搜索結(jié)果里面，因此優(yōu)化面包屑導(dǎo)航每個(gè)層級(jí)的名稱，多使用關(guān)鍵字，都可以實(shí)現(xiàn)SEO優(yōu)化。面包屑路徑，對(duì)于提高用戶體驗(yàn)來(lái)說(shuō)，是很有幫助的。

5、方便用戶，面包屑主要用于為用戶提供導(dǎo)航一個(gè)網(wǎng)站的次要方法，通過(guò)為一個(gè)大型多級(jí)網(wǎng)站的所有頁(yè)面提供面包屑路徑，用戶可以更容易的定位到上一次目錄，引導(dǎo)用戶通行;

6、減少返回到上一級(jí)頁(yè)面的點(diǎn)擊或操作，不用使用瀏覽器的“返回”按鈕或網(wǎng)站的主要導(dǎo)航來(lái)返回到上一級(jí)頁(yè)面;

7、不用常常占用屏幕空間，因?yàn)樗鼈兺ǔＪ撬脚帕幸约昂?jiǎn)單的樣式，面包屑路徑不會(huì)占用頁(yè)面太多的空間。這樣的好處是，從內(nèi)容過(guò)載方面來(lái)說(shuō)，他們幾乎沒(méi)有任何負(fù)面影響;

8、降低跳出率，面包屑路徑會(huì)是一個(gè)誘惑首次訪問(wèn)者在進(jìn)入一個(gè)頁(yè)面后去瀏覽這個(gè)網(wǎng)站的非常好的方法。比如說(shuō)，一個(gè)用戶通過(guò)谷歌搜索到一個(gè)頁(yè)面，然后看到一個(gè)面包屑路徑，這將會(huì)誘使用戶點(diǎn)擊上一級(jí)頁(yè)面去瀏覽感興趣的相關(guān)主題。這樣，從而，可以降低網(wǎng)站的總體跳出率。

9、有利于百度蜘蛛對(duì)網(wǎng)站的抓取，蜘蛛直接沿著那個(gè)鏈走就可以了，很方便。

10、面包屑有利于網(wǎng)站內(nèi)鏈的建設(shè)，用面包屑大大增加了網(wǎng)站的內(nèi)部連接，提高用戶體驗(yàn)。

什么時(shí)候應(yīng)該用面包屑導(dǎo)航？

評(píng)價(jià)一個(gè)網(wǎng)站是否適合于使用面包屑導(dǎo)航的最好方法便是將網(wǎng)站的結(jié)構(gòu)畫出來(lái)或者以圖表的形式呈現(xiàn)出來(lái)，然后分析使用面包屑導(dǎo)航是否會(huì)幫助用戶更方便地切換到不同類的網(wǎng)頁(yè)。

什么時(shí)候用：你的網(wǎng)站結(jié)構(gòu)是嚴(yán)格的線性結(jié)構(gòu)或者是預(yù)先分好組（類）的層級(jí)結(jié)構(gòu)。比如電商網(wǎng)站的結(jié)構(gòu)就是層級(jí)結(jié)構(gòu)，包含了按類別分好組的大量商品頁(yè)面。

什么時(shí)候別用：你的網(wǎng)站結(jié)構(gòu)是單層或者不是分好組（類）的層級(jí)結(jié)構(gòu)。

面包屑導(dǎo)航正在變得越來(lái)越實(shí)用

作為一個(gè)高效的視覺(jué)輔助工具，面包屑導(dǎo)航暗示了用戶在網(wǎng)站層級(jí)結(jié)構(gòu)中的位置。對(duì)用戶來(lái)說(shuō)，面包屑導(dǎo)航包含了大量的信息，可以幫助他們解答以下問(wèn)題：

1、我在哪？ 面包屑導(dǎo)航明確地告訴用戶他們的位置。

2、我接下來(lái)可以去哪？ 面包屑可以使用戶更加方便地查找網(wǎng)頁(yè)。比起放在菜單里，放在面包屑導(dǎo)航中的網(wǎng)站結(jié)構(gòu)更容易被用戶所理解。

3、我應(yīng)該去這里嗎？面包屑導(dǎo)航可以暗示用戶網(wǎng)頁(yè)內(nèi)容的價(jià)值從而引起他們繼續(xù)瀏覽的興趣。比如在一個(gè)電商網(wǎng)站中，用戶可能對(duì)當(dāng)前訪問(wèn)的這個(gè)商品不滿意，但是他還想看看同類的其他商品，這時(shí)候面包屑導(dǎo)航就可以告訴用戶同類產(chǎn)品的鏈接。這樣可以很好地降低用戶的流失率。

面包屑導(dǎo)航具有以下優(yōu)點(diǎn)：

減少不必要的步驟

面包屑導(dǎo)航最實(shí)用的一點(diǎn)便是可以幫助用戶更快地訪問(wèn)上級(jí)網(wǎng)頁(yè)，無(wú)需借助瀏覽器的“返回”按鈕和頂級(jí)導(dǎo)航欄。

占用空間少

面包屑導(dǎo)航僅由文本和鏈接組成的一行內(nèi)容構(gòu)成，因此占用的頁(yè)面空間非常小。這樣的好處是當(dāng)內(nèi)容過(guò)載時(shí)它的功能也不會(huì)受到影響。

用戶體驗(yàn)很好

用戶可能會(huì)忽略這個(gè)小控件，但是他們從來(lái)不會(huì)誤解或在使用上遇到問(wèn)題。

面包屑導(dǎo)航的分類

面包屑導(dǎo)航分為基于位置的面包屑導(dǎo)航、基于路徑的面包屑導(dǎo)航和基于屬性的面包屑導(dǎo)航。

基于位置的面包屑導(dǎo)航

基于位置的面包屑導(dǎo)航可以表示網(wǎng)站的結(jié)構(gòu)。它可以幫助用戶理解并訪問(wèn)你的網(wǎng)站各個(gè)層級(jí)的內(nèi)容。這種面包屑導(dǎo)航對(duì)于那些從外部（如搜索引擎）直接訪問(wèn)深層位置的用戶來(lái)說(shuō)尤為重要。

在下面這個(gè)例子（BestBuy網(wǎng)站）中，每一個(gè)鏈接都代表一個(gè)頁(yè)面，從左至右逐級(jí)深入。

基于路徑的面包屑導(dǎo)航

基于路徑的面包屑導(dǎo)航展示了用戶訪問(wèn)的完整軌跡。這種面包屑導(dǎo)航通常是動(dòng)態(tài)生成的。有時(shí)候它們會(huì)有幫助，但是多數(shù)情況下它們會(huì)讓用戶感到困惑。用戶通常會(huì)在各個(gè)頁(yè)面之間跳來(lái)跳去，這時(shí)候記錄下來(lái)的路徑就會(huì)非常復(fù)雜，還不如瀏覽器的“返回”按鈕更加實(shí)用。而且，對(duì)于從外部直接訪問(wèn)的用戶來(lái)說(shuō)基于路徑的面包屑導(dǎo)航就完全沒(méi)用了。

下圖是一個(gè)基于路徑的面包屑導(dǎo)航，展示了到達(dá)相同頁(yè)面的不同路徑。

基于屬性的面包屑導(dǎo)航

基于屬性的面包屑導(dǎo)航會(huì)將特定頁(yè)面的類別列出來(lái)。比如電商網(wǎng)站就會(huì)列出來(lái)常用商品分類。這種面包屑導(dǎo)航可以幫助用戶了解產(chǎn)品之間的聯(lián)系，同時(shí)提供了不同的訪問(wèn)方式。

如下圖所示，在TM Lewin網(wǎng)站中，面包屑導(dǎo)航展示了商品的不同屬性

我應(yīng)該用哪個(gè)？

使用面包屑導(dǎo)航的原則是展示網(wǎng)站的結(jié)構(gòu)而不是用戶的訪問(wèn)歷史。因此，盡量使用基于位置和屬性的面包屑導(dǎo)航而不是基于路徑的。

最佳實(shí)踐

使用面包屑導(dǎo)航的時(shí)候需要注意以下幾點(diǎn)：

不要用面包屑導(dǎo)航來(lái)替代頂級(jí)導(dǎo)航

我們應(yīng)該將面包屑導(dǎo)航視為一項(xiàng)附加功能，不能用它來(lái)替代高效的頂級(jí)導(dǎo)航菜單。它很方便，但是僅僅作為訪問(wèn)網(wǎng)站的一個(gè)備選方式，而不是唯一方式。下圖的例子是蘋果的官網(wǎng)，在頁(yè)面底部添加的面包屑導(dǎo)航對(duì)頂級(jí)導(dǎo)航起到了輔助的效果

不要給當(dāng)前頁(yè)面的導(dǎo)航文字添加鏈接

面包屑導(dǎo)航的最后一項(xiàng)可以表示當(dāng)前頁(yè)面也可以表示當(dāng)前頁(yè)面的上一級(jí)。如果你想用當(dāng)前頁(yè)面的話，切記不要給這個(gè)項(xiàng)目添加鏈接，因?yàn)橛脩粢呀?jīng)處于這個(gè)頁(yè)面了，再添加指向當(dāng)前頁(yè)面的鏈接是沒(méi)有任何意義的。

使用分隔符

面包屑導(dǎo)航中最簡(jiǎn)潔明了的分隔符便是大于號(hào)“>”。通常大于號(hào)用于基于位置的面包屑導(dǎo)航，以“父類>子類”的形式表示導(dǎo)航項(xiàng)目之間的層級(jí)關(guān)系。除了大于號(hào)以外還可以用向右箭頭“→”，雙大于號(hào)”>>”和斜線”/”。到底使用哪個(gè)取決于導(dǎo)航的類別和視覺(jué)效果。

設(shè)置合適的大小和padding屬性

在設(shè)計(jì)的時(shí)候要謹(jǐn)慎考慮導(dǎo)航菜單的大小和padding屬性。在每一個(gè)項(xiàng)目之間必須有充足的間隔，否則用戶理解起來(lái)會(huì)有問(wèn)題。同時(shí)你希望面包屑導(dǎo)航不會(huì)搶了其他主要部分的風(fēng)頭，因此你需要讓它看起來(lái)比頂級(jí)導(dǎo)航要低等一些。

不要讓它們看起來(lái)很突出

不要使用花哨的字體和亮色，這樣會(huì)違背使用面包屑導(dǎo)航的初衷。設(shè)計(jì)面包屑導(dǎo)航的原則是它不能是頁(yè)面加載后最吸引用戶的內(nèi)容。下面這個(gè)例子中的面包屑導(dǎo)航雖然效果不差，但是太吸引用戶的目光，可能會(huì)分散用戶的注意力，使其更加關(guān)注面包屑導(dǎo)航而不是頂級(jí)導(dǎo)航和頁(yè)面的主要內(nèi)容。

谷歌就沒(méi)有讓面包屑導(dǎo)航很顯眼，但是用戶可以很方便地發(fā)現(xiàn)并使用它。

不要在移動(dòng)端網(wǎng)站上使用

面包屑導(dǎo)航在移動(dòng)端的體驗(yàn)并不好，尤其是在層級(jí)比較復(fù)雜的網(wǎng)站中。而且，你會(huì)發(fā)現(xiàn)在在移動(dòng)端上設(shè)計(jì)面包屑導(dǎo)航會(huì)遇到很多問(wèn)題。因此，你需要盡可能地簡(jiǎn)化你的網(wǎng)站結(jié)構(gòu)，如果簡(jiǎn)化之后仍較為復(fù)雜，那么最好就不要用面包屑導(dǎo)航，畢竟它不是主要功能。

結(jié)語(yǔ)

面包屑導(dǎo)航的宗旨是讓用戶可以更方便地訪問(wèn)你的網(wǎng)站。它看似簡(jiǎn)單，但卻可以很好地優(yōu)化用戶體驗(yàn)，增加用戶粘性。

 以上就是我們針對(duì)網(wǎng)站中面包屑導(dǎo)航做的詳細(xì)總結(jié)，如果大家還有任何不明白的地方可以在下方留言討論。

最新評(píng)論