139-1008-4168

首頁 > SEO建站 > SEO百科面包屑導(dǎo)航是什么？詳解面包屑導(dǎo)航的類型、設(shè)計、作用及注意事項

面包屑導(dǎo)航是什么？詳解面包屑導(dǎo)航的類型、設(shè)計、作用及注意事項

2023-06-01 08:48:40

推薦訪問：SEO百科 SEO資料建站百科營銷百科

面包屑導(dǎo)航是什么意思

一、面包屑導(dǎo)航是什么意思

面包屑導(dǎo)航（英文：Breadcrumb Navigation）是用戶一個在程序或文件中確定和轉(zhuǎn)移他們位置的一種方法，是用戶界面中的一種輔助導(dǎo)航。面包屑導(dǎo)航指明了網(wǎng)頁在網(wǎng)站層次結(jié)構(gòu)中的位置，用戶可以從面包屑導(dǎo)航中的最低層級開始，一次一個層級地導(dǎo)航到網(wǎng)站層次結(jié)構(gòu)中的最高層級，有助于用戶有效地了解和探索網(wǎng)站。

二、面包屑導(dǎo)航的類型

1、位置型（location）：位置型面包屑是固定的，顯示了頁面在網(wǎng)站結(jié)構(gòu)中的位置，位置型面包導(dǎo)航通常在頁面頂部水平出現(xiàn)，一般會位于標題或頁眉的下方。它們提供給用戶返回之前任何一個頁面的鏈接（這些鏈接也是能到達當前頁面的路徑），在層級架構(gòu)中通常是這個頁面的父級頁面。

位置型面包導(dǎo)航示例

*位置型面包導(dǎo)航示例

2、屬性型（attribute）：屬性型面包屑給出的當前頁面的分類信息。例如，在電商網(wǎng)站上搜索產(chǎn)品時，根據(jù)商品屬性做面包屑導(dǎo)航。這種面包屑導(dǎo)航可以幫助用戶了解產(chǎn)品之間的聯(lián)系，同時提供了不同的訪問方式。

屬性型面包屑示例

*屬性型面包屑示例

3、路徑型（path）：也叫歷史型面包導(dǎo)航，路徑型面包屑是一個動態(tài)顯示用戶到達頁面的完整軌跡。有時候它們會有幫助，但是多數(shù)情況下它們會讓用戶感到困惑。用戶通常會在各個頁面之間跳來跳去，這時候記錄下來的路徑就會非常復(fù)雜，還不如瀏覽器的"返回"按鈕更加實用。

路徑型面包屑示例

*路徑型面包屑示例

三、面包屑導(dǎo)航的設(shè)計

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

1、PC端面包屑導(dǎo)航設(shè)計指南

（1）、面包屑不應(yīng)取代全局導(dǎo)航欄或部分本地導(dǎo)航。

面包屑可以作為導(dǎo)航的有效補充，但是不能取代主要導(dǎo)航。可以采用下拉式菜單。更好的設(shè)計是為本地導(dǎo)航提供單獨的Ul，以使用戶能夠訪問站點當前部分的橫向?qū)蛹夗撁妗?/p>

（2）、面包屑應(yīng)該顯示站點層次結(jié)構(gòu)中的當前位置，而不是瀏覽歷史記錄。

面包屑并不用于顯示用戶在網(wǎng)站的頁面瀏覽歷史記錄（例如瀏覽器的本機后退按鈕）；它們旨在顯示站點的層次結(jié)構(gòu)。

（3）、對于多層次站點，面包屑應(yīng)顯示站點多層次結(jié)構(gòu)中的單一路徑。

面包屑與多層次站點（其中一個頁面有享個父級）之間存在固有的緊張關(guān)系。在這種情況下，我們不建議兩個或更多反映多層次結(jié)構(gòu)中不同路徑的面包屑路徑，因為它們會混淆用戶并在頁面頂部占用大量空間。

如果一個頁面有多個不同的父級，請在站點層次結(jié)構(gòu)中標識到它的規(guī)范路徑，并在面包屑路徑中顯示該路徑。

（4）、包括當首頁面作為面包屑路徑中的最后一頂。

（5）、在面包屑路徑中，當前頁面對應(yīng)的面包屑不應(yīng)該是鏈接。

最后一個面包屑（表示當前頁面）不應(yīng)該是鏈接。為避免混淆用戶，請在視覺上區(qū)分當前頁面和前面鍵接的面包屑，最好使用下劃線或藍色文本。

（6）、面包屑應(yīng)送只包含網(wǎng)站頁面，而不是IA中的邏輯類別。

面包屑路徑中的每個節(jié)點都應(yīng)該是一個指向主頁的鏈接。如果全局導(dǎo)航中的某些子類別標簽沒有專門的單獨頁面，請不要在面包屑路徑中包含這些子類別。"點擊即走"能力是用戶理解面包屑的關(guān)鍵部分，因此所有項目(當前頁面除外)都應(yīng)該代表用戶可以去的地方。

（7）、對于具有僅 1-2層深的扁平結(jié)構(gòu)站點或結(jié)構(gòu)呈線性的站點，面包屑導(dǎo)航是非必需的。

（8）、面包屑路徑應(yīng)該以指向主頁的鏈接開頭。

2、在移動端面包屑設(shè)計指南

需要提出的是，在移動設(shè)備上，使用面包屑的成本很快就會超過收益。

（1）、不要使用包含多行的面包屑。

在移動網(wǎng)站上，面包屑可以快速換成多行，并在已經(jīng)擁擠的移動顯示器上占用寶貴的空間。多行面包屑路徑不能很好地說明鏈的結(jié)構(gòu)。

（2）、不要使用太小或太擁擠的面包屑。

一些網(wǎng)站試圖通過使鏈接更小或更靠近來減少面包屑占用的屏幕空間。不幸的是，此解決方案不適用手觸摸屏：點擊目標至少需要 1cm x 1cm。

（3）、考慮縮短面包屑路徑以僅包含最后一個級別。

在某些頁面上，指向一個級別的單個面包屑可能是支持主要用戶目標所必需的。此解決方案避免了占用寶貴的移動空間的冗長、擁擠的面包屑路徑。

四、面包屑導(dǎo)航的作用

在網(wǎng)站應(yīng)用中，面包屑導(dǎo)航的作用就是幫助訪問者確定自己處在網(wǎng)站中的什么位置以及如何返回到原來的位置。對于用戶而言，這個導(dǎo)航輔助工具可以更輕松地在網(wǎng)站上查找內(nèi)容，幫助用戶定位在你網(wǎng)站上的位置，并在需要時幫助用戶回到之前頁面。對于搜索引擎來講，面包屑導(dǎo)航會讓蜘蛛了解你的網(wǎng)站結(jié)構(gòu)，方便搜索蜘蛛爬取索引。

1、利于用戶確認當前位置

讓用戶了解目前所處位置，以及當前頁面在整個網(wǎng)站中的位置，體現(xiàn)了網(wǎng)站的架構(gòu)層級，能夠幫助用戶快速學(xué)習(xí)和了解網(wǎng)站內(nèi)容和組織方式。

2、方便用戶操作

為用戶提供返回各個層級的快速入口，提供一個瀏覽網(wǎng)站的次要方法，尤其是比較大型的網(wǎng)站，設(shè)計一個面包屑導(dǎo)航后，訪客就能更容易的定位到所在的欄目中，方便用戶操作。

3、增強了用戶體驗

面包屑導(dǎo)航目前在網(wǎng)站的應(yīng)用十分廣泛，可以提升網(wǎng)站的用戶體驗，因為它是一個眾所周知的界面元素，用戶瀏覽操作網(wǎng)頁的時候已經(jīng)形成習(xí)慣。

4、降低了跳出率

用戶進入到網(wǎng)站的渠道是多樣化的，這意味著您網(wǎng)站的每個部分都可以成為網(wǎng)站的入口，如果所選頁面內(nèi)容不符合用戶的期望值，通過面包屑導(dǎo)航可以引導(dǎo)用戶訪問其他鏈接，從而降低網(wǎng)站的跳出率。

5、增加網(wǎng)站內(nèi)鏈

在網(wǎng)頁中使用面包屑導(dǎo)航，可以增加網(wǎng)站的內(nèi)鏈，有助于內(nèi)鏈的建設(shè)，如果網(wǎng)站層級關(guān)鍵詞使用恰當，可以起到提升關(guān)鍵詞權(quán)重的作用。

6、利于搜索蜘蛛抓取

百度搜索、谷歌搜索已經(jīng)將面包屑導(dǎo)航整合到搜索結(jié)果里面，面包屑導(dǎo)航可以讓搜索蜘蛛順著面包屑導(dǎo)航進行頁面抓取，利于提高搜索蜘蛛爬行效率，同時面包屑導(dǎo)航每個層級的名稱，盡量使用關(guān)鍵字，可以達到SEO優(yōu)化的效果。