web開發如何實現面包屑導航

這篇文章給大家分享的是有關web開發如何實現面包屑導航的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

首先我們來看看面包屑導航的作用：

1、讓用戶了解當前所處位置，以及當前頁面在整個網站中的位置。

2、體現了網站的架構層級，能夠幫助用戶快速學習和了解網站內容和組織方式，從而形成很好的位置感

3、提供返回各個層級的快速入口，方便用戶操作。

4、Google已經將面包屑導航整合到搜索結果里面，因此優化面包屑導航每個層級的名稱，多使用關鍵字，都可以實現SEO優化。面包屑路徑，對于提高用戶體驗來說，是很有幫助的。

5、方便用戶，面包屑主要用于為用戶提供導航一個網站的次要方法，通過為一個大型多級網站的所有頁面提供面包屑路徑，用戶可以更容易的定位到上一次目錄，引導用戶通行;

6、減少返回到上一級頁面的點擊或操作，不用使用瀏覽器的“返回”按鈕或網站的主要導航來返回到上一級頁面;

7、不用常常占用屏幕空間，因為它們通常是水平排列以及簡單的樣式，面包屑路徑不會占用頁面太多的空間。這樣的好處是，從內容過載方面來說，他們幾乎沒有任何負面影響;

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

9、有利于百度蜘蛛對網站的抓取，蜘蛛直接沿著那個鏈走就可以了，很方便。

10、面包屑有利于網站內鏈的建設，用面包屑大大增加了網站的內部連接，提高用戶體驗。

什么時候應該用面包屑導航？

評價一個網站是否適合于使用面包屑導航的最好方法便是將網站的結構畫出來或者以圖表的形式呈現出來，然后分析使用面包屑導航是否會幫助用戶更方便地切換到不同類的網頁。

什么時候用：你的網站結構是嚴格的線性結構或者是預先分好組（類）的層級結構。比如電商網站的結構就是層級結構，包含了按類別分好組的大量商品頁面。

什么時候別用：你的網站結構是單層或者不是分好組（類）的層級結構。

面包屑導航正在變得越來越實用

作為一個高效的視覺輔助工具，面包屑導航暗示了用戶在網站層級結構中的位置。對用戶來說，面包屑導航包含了大量的信息，可以幫助他們解答以下問題：

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

2、我接下來可以去哪？ 面包屑可以使用戶更加方便地查找網頁。比起放在菜單里，放在面包屑導航中的網站結構更容易被用戶所理解。

3、我應該去這里嗎？面包屑導航可以暗示用戶網頁內容的價值從而引起他們繼續瀏覽的興趣。比如在一個電商網站中，用戶可能對當前訪問的這個商品不滿意，但是他還想看看同類的其他商品，這時候面包屑導航就可以告訴用戶同類產品的鏈接。這樣可以很好地降低用戶的流失率。

面包屑導航具有以下優點：

減少不必要的步驟

面包屑導航最實用的一點便是可以幫助用戶更快地訪問上級網頁，無需借助瀏覽器的“返回”按鈕和頂級導航欄。

占用空間少

面包屑導航僅由文本和鏈接組成的一行內容構成，因此占用的頁面空間非常小。這樣的好處是當內容過載時它的功能也不會受到影響。

用戶體驗很好

用戶可能會忽略這個小控件，但是他們從來不會誤解或在使用上遇到問題。

面包屑導航的分類

面包屑導航分為基于位置的面包屑導航、基于路徑的面包屑導航和基于屬性的面包屑導航。

基于位置的面包屑導航

基于位置的面包屑導航可以表示網站的結構。它可以幫助用戶理解并訪問你的網站各個層級的內容。這種面包屑導航對于那些從外部（如搜索引擎）直接訪問深層位置的用戶來說尤為重要。

在下面這個例子（BestBuy網站）中，每一個鏈接都代表一個頁面，從左至右逐級深入。

基于路徑的面包屑導航

基于路徑的面包屑導航展示了用戶訪問的完整軌跡。這種面包屑導航通常是動態生成的。有時候它們會有幫助，但是多數情況下它們會讓用戶感到困惑。用戶通常會在各個頁面之間跳來跳去，這時候記錄下來的路徑就會非常復雜，還不如瀏覽器的“返回”按鈕更加實用。而且，對于從外部直接訪問的用戶來說基于路徑的面包屑導航就完全沒用了。

下圖是一個基于路徑的面包屑導航，展示了到達相同頁面的不同路徑。

基于屬性的面包屑導航

基于屬性的面包屑導航會將特定頁面的類別列出來。比如電商網站就會列出來常用商品分類。這種面包屑導航可以幫助用戶了解產品之間的聯系，同時提供了不同的訪問方式。

如下圖所示，在TM Lewin網站中，面包屑導航展示了商品的不同屬性

我應該用哪個？

使用面包屑導航的原則是展示網站的結構而不是用戶的訪問歷史。因此，盡量使用基于位置和屬性的面包屑導航而不是基于路徑的。

最佳實踐

使用面包屑導航的時候需要注意以下幾點：

不要用面包屑導航來替代頂級導航

我們應該將面包屑導航視為一項附加功能，不能用它來替代高效的頂級導航菜單。它很方便，但是僅僅作為訪問網站的一個備選方式，而不是唯一方式。下圖的例子是蘋果的官網，在頁面底部添加的面包屑導航對頂級導航起到了輔助的效果

不要給當前頁面的導航文字添加鏈接

面包屑導航的最后一項可以表示當前頁面也可以表示當前頁面的上一級。如果你想用當前頁面的話，切記不要給這個項目添加鏈接，因為用戶已經處于這個頁面了，再添加指向當前頁面的鏈接是沒有任何意義的。

使用分隔符

面包屑導航中最簡潔明了的分隔符便是大于號“>”。通常大于號用于基于位置的面包屑導航，以“父類>子類”的形式表示導航項目之間的層級關系。除了大于號以外還可以用向右箭頭“→”，雙大于號”>>”和斜線”/”。到底使用哪個取決于導航的類別和視覺效果。

設置合適的大小和padding屬性

在設計的時候要謹慎考慮導航菜單的大小和padding屬性。在每一個項目之間必須有充足的間隔，否則用戶理解起來會有問題。同時你希望面包屑導航不會搶了其他主要部分的風頭，因此你需要讓它看起來比頂級導航要低等一些。

不要讓它們看起來很突出

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

谷歌就沒有讓面包屑導航很顯眼，但是用戶可以很方便地發現并使用它。

不要在移動端網站上使用

面包屑導航在移動端的體驗并不好，尤其是在層級比較復雜的網站中。而且，你會發現在在移動端上設計面包屑導航會遇到很多問題。因此，你需要盡可能地簡化你的網站結構，如果簡化之后仍較為復雜，那么最好就不要用面包屑導航，畢竟它不是主要功能。

感謝各位的閱讀！關于“web開發如何實現面包屑導航”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！