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