一、面包屑導航是什么意思
面包屑導航（英文：Breadcrumb Navigation）是用戶一個在程序或文件中確定和轉(zhuǎn)移他們位置的一種方法，是用戶界面中的一種輔助導航。它指明了網(wǎng)頁在網(wǎng)站層次結(jié)構(gòu)中的位置，用戶可以從面包屑導航中的最低層級開始，一次一個層級地導航到網(wǎng)站層次結(jié)構(gòu)中的最高層級，有助于用戶有效地了解和探索網(wǎng)站。
二、面包屑導航的類型
1、位置型（location）
位置型面包屑是固定的，顯示了頁面在網(wǎng)站結(jié)構(gòu)中的位置，通常在頁面頂部水平出現(xiàn)，位于標題或頁眉的下方。它提供給用戶返回之前任何一個頁面的鏈接（這些鏈接也是能到達當前頁面的路徑），在層級架構(gòu)中通常是這個頁面的父級頁面。
位置型面包導航示例
*位置型面包導航示例
2、屬性型（attribute）
屬性型面包屑給出當前頁面的分類信息。例如，在電商網(wǎng)站上搜索產(chǎn)品時，根據(jù)商品屬性做面包屑導航。這種面包屑導航可以幫助用戶了解產(chǎn)品之間的聯(lián)系，同時提供了不同的訪問方式。
屬性型面包屑示例
*屬性型面包屑示例
3、路徑型（path）
也叫歷史型面包導航，路徑型面包屑是一個動態(tài)顯示用戶到達頁面的完整軌跡。有時候它們會有幫助，但是多數(shù)情況下它們會讓用戶感到困惑。用戶通常會在各個頁面之間跳來跳去，這時候記錄下來的路徑就會非常復雜，還不如瀏覽器的"返回"按鈕更加實用。
路徑型面包屑示例
*路徑型面包屑示例
三、面包屑導航的設計原則
面包屑導航中最簡潔明了的分隔符便是大于號">"，通常大于號用于基于位置的面包屑導航，以"父類>子類"的形式表示導航項目之間的層級關(guān)系。除了大于號以外還可以用向右箭頭"→"，雙大于號">>"和斜線"/"。到底使用哪個取決于導航的類別和視覺效果。
1、PC 端面包屑導航設計指南
- 面包屑不應取代全局導航欄或部分本地導航。面包屑可以作為導航的有效補充，但是不能取代主要導航?？梢圆捎孟吕讲藛?。更好的設計是為本地導航提供單獨的 Ul，以使用戶能夠訪問站點當前部分的橫向?qū)蛹夗撁妗?
- 面包屑應該顯示站點層次結(jié)構(gòu)中的當前位置，而不是瀏覽歷史記錄。面包屑并不用于顯示用戶在網(wǎng)站的頁面瀏覽歷史記錄（例如瀏覽器的本機后退按鈕）；它們旨在顯示站點的層次結(jié)構(gòu)。
- 對于多層次站點，面包屑應顯示站點多層次結(jié)構(gòu)中的單一路徑。面包屑與多層次站點（其中一個頁面有享個父級） 之間存在固有的緊張關(guān)系。在這種情況下，我們不建議兩個或更多反映多層次結(jié)構(gòu)中不同路徑的面包屑路徑，因為它們會混淆用戶并在頁面頂部占用大量空間。如果一個頁面有多個不同的父級，請在站點層次結(jié)構(gòu)中標識到它的規(guī)范路徑，并在面包屑路徑中顯示該路徑。
- 包括當首頁面作為面包屑路徑中的最后一頂。
- 在面包屑路徑中，當前頁面對應的面包屑不應該是鏈接。最后一個面包屑（表示當前頁面） 不應該是鏈接。為避免混淆用戶，請在視覺上區(qū)分當前頁面和前面鍵接的面包屑，最好使用下劃線或藍色文本。
- 面包屑應送只包含網(wǎng)站頁面，而不是 IA 中的邏輯類別。面包屑路徑中的每個節(jié)點都應該是一個指向主頁的鏈接。如果全局導航中的某些子類別標簽沒有專門的單獨頁面，請不要在面包屑路徑中包含這些子類別。"點擊即走"能力是用戶理解面包屑的關(guān)鍵部分，因此所有項目(當前頁面除外)都應該代表用戶可以去的地方。
- 對于具有僅 1 - 2 層深的扁平結(jié)構(gòu)站點或結(jié)構(gòu)呈線性的站點，面包屑導航是非必需的。
- 面包屑路徑應該以指向主頁的鏈接開頭。
2、在移動端面包屑設計指南
需要提出的是，在移動設備上，使用面包屑的成本很快就會超過收益。
- 不要使用包含多行的面包屑。在移動網(wǎng)站上，面包屑可以快速換成多行，并在已經(jīng)擁擠的移動顯示器上占用寶貴的空間。多行面包屑路徑不能很好地說明鏈的結(jié)構(gòu)。
- 不要使用太小或太擁擠的面包屑。一些網(wǎng)站試圖通過使鏈接更小或更靠近來減少面包屑占用的屏幕空間。不幸的是，此解決方案不適用手觸摸屏：點擊目標至少需要 1cm x 1cm。
- 考慮縮短面包屑路徑以僅包含最后一個級別。在某些頁面上，指向一個級別的單個面包屑可能是支持主要用戶目標所必需的。此解決方案避免了占用寶貴的移動空間的冗長、擁擠的面包屑路徑。
四、面包屑導航出現(xiàn)位置
通常在頁面主要內(nèi)容區(qū)域的上方，緊靠在主標題（H1）之下。水平排列，鏈接之間用符號分隔（常見的有 >、/、» 等）。
一個簡單的例子：想象你在一個電商網(wǎng)站瀏覽一款具體的手機（如 iPhone 15）。面包屑導航可能看起來像這樣：首頁 > 電子產(chǎn)品 > 手機 > 智能手機 > Apple iPhone
“首頁”: 可點擊，帶你回到網(wǎng)站主頁。“電子產(chǎn)品”: 可點擊，帶你到電子產(chǎn)品大類頁面?！笆謾C”: 可點擊，帶你到手機分類頁面?！爸悄苁謾C”: 可點擊，帶你到智能手機子分類頁面。“Apple iPhone”: 通常是當前頁面名稱，不可點擊或僅作文本顯示（表示你就在這里）。
五、面包屑導航的作用
在網(wǎng)站應用中，面包屑導航的作用就是幫助訪問者確定自己處在網(wǎng)站中的什么位置以及如何返回到原來的位置。對于用戶而言，這個導航輔助工具可以更輕松地在網(wǎng)站上查找內(nèi)容，幫助用戶定位在你網(wǎng)站上的位置，并在需要時幫助用戶回到之前頁面。對于搜索引擎來講，面包屑導航會讓蜘蛛了解你的網(wǎng)站結(jié)構(gòu)，方便搜索蜘蛛爬取索引。
1、利于用戶確認當前位置
讓用戶了解目前所處位置，以及當前頁面在整個網(wǎng)站中的位置，體現(xiàn)了網(wǎng)站的架構(gòu)層級，能夠幫助用戶快速學習和了解網(wǎng)站內(nèi)容和組織方式。
2、方便用戶操作
為用戶提供返回各個層級的快速入口，提供一個瀏覽網(wǎng)站的次要方法，尤其是比較大型的網(wǎng)站，設計一個面包屑導航后，訪客就能更容易的定位到所在的欄目中，方便用戶操作。
3、增強了用戶體驗
面包屑導航目前在網(wǎng)站的應用十分廣泛，可以提升網(wǎng)站的用戶體驗，因為它是一個眾所周知的界面元素，用戶瀏覽操作網(wǎng)頁的時候已經(jīng)形成習慣。
4、降低了跳出率
用戶進入到網(wǎng)站的渠道是多樣化的，這意味著您網(wǎng)站的每個部分都可以成為網(wǎng)站的入口，如果所選頁面內(nèi)容不符合用戶的期望值，通過面包屑導航可以引導用戶訪問其他鏈接，從而降低網(wǎng)站的跳出率。
5、增加網(wǎng)站內(nèi)鏈
在網(wǎng)頁中使用面包屑導航，可以增加網(wǎng)站的內(nèi)鏈，有助于內(nèi)鏈的建設，如果網(wǎng)站層級關(guān)鍵詞使用恰當，可以起到提升關(guān)鍵詞權(quán)重的作用。
6、利于搜索蜘蛛抓取
百度搜索、谷歌搜索已經(jīng)將面包屑導航整合到搜索結(jié)果里面，面包屑導航可以讓搜索蜘蛛順著面包屑導航進行頁面抓取，利于提高搜索蜘蛛爬行效率，同時面包屑導航每個層級的名稱，盡量使用關(guān)鍵字，可以達到 SEO 優(yōu)化的效果。
六、面包屑導航的注意事項
- 面包屑是一種輔助導航，在頁面中不應該起支配作用。面包屑和主導航相比至少要比較小、或不太突出。
- 面包屑導航，所謂導航就是可以讓用戶點擊的鏈接，不要做僅是網(wǎng)站設計擺設，一定要在非當前頁面的指引中加入鏈接。
- 不要給當前頁面的導航文字添加鏈接，因為用戶已經(jīng)處于這個頁面了，再添加指向當前頁面的鏈接是沒有任何意義的。
- 面包屑導航使用文字鏈接，不要使用圖片或 JS，搜索引擎對文字的識別度是最好的，不易識別出圖片或 JS。
- 面包屑導航應盡可能包括關(guān)鍵字，例如，在主頁 > 部分頁面，可以將文中的"主頁"替換為核心關(guān)鍵字，提升相關(guān)關(guān)鍵詞的鏈接權(quán)重。
- 在"主頁 > 列頁 > 文本的正文"，可以改成文章的標題，正文的標題往往會包含長尾關(guān)鍵詞，這樣將有利于長尾關(guān)鍵詞的搜索排名。
- 面包屑導航的最后層級不要加鏈接，即當前頁面標識層級不能加鏈接，不利于搜索引擎對層級關(guān)系的識別。
- 面包屑導航在移動端的體驗并不好，尤其是在層級比較復雜的網(wǎng)站中。因手機屏幕比較窄小，在移動端上設計面包屑導航會遇到很多問題，因此，在移動端需要盡可能地簡化網(wǎng)站內(nèi)容與結(jié)構(gòu)。
用戶1
2024/8/13 15:31:11seo轉(zhuǎn)化率是什么