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