?面包屑導航來(lái)源很久很久以前，在大森林的邊上住著(zhù)一個(gè)貧窮的樵夫，他與妻子和兩個(gè)孩子相依為命

他的兒子名叫漢賽爾，女兒名叫格萊特

后來(lái)樵夫的妻子去世了，他又給孩子們娶了一個(gè)后母

后母計劃把兩個(gè)孩子帶到森林的深處，然后趁他們睡著(zhù)的時(shí)候跑掉

漢賽爾無(wú)意中知道了后母的計劃，于是偷偷地把一塊面包藏在了口袋里

在去森林的路上，漢賽爾悄悄地捏碎了他的面包，并不時(shí)地停下腳步，把碎面包屑撒在路上

后母順利地趁孩子們睡著(zhù)的時(shí)候溜掉了，漢賽爾和格萊特醒來(lái)已是一片漆黑

漢賽爾安慰他的妹妹說(shuō)

“等太陽(yáng)一出來(lái)，我們就看得見(jiàn)我撒在地上的面包屑了，它一定會(huì )指給我們回家的路

”但是當太陽(yáng)升起來(lái)時(shí)，他們在地上卻怎么也找不到一點(diǎn)面包屑了，原來(lái)它們都被那些在樹(shù)林里、田野上飛來(lái)飛去的鳥(niǎo)兒一點(diǎn)點(diǎn)地啄食了，兄妹倆在森林中迷了路

不停的尋路，讓他們饑餓難忍，腿腳無(wú)力，來(lái)到了一個(gè)用面包做屋頂，糖果做窗戶(hù)的小屋

饑餓讓他們忘記了疲憊，及潛在的危險，啃起了屋子

結果在巫婆的誘騙下，哥哥被鎖屋中，妹妹被迫做勞力，就在巫婆要吃掉哥哥之時(shí)，妹妹借向巫婆學(xué)習添柴之機

將巫婆推入爐中，兄妹倆帶著(zhù)巫婆的財寶，回到了家中

后母己經(jīng)去世，兄妹倆和父親一起過(guò)上了幸福的生活

面包屑導航原理在童話(huà)里，面包屑是漢賽爾在進(jìn)入森林的路中偷偷撒下的，這是一種“歷史記錄”的應用方式，目的是幫助你追溯來(lái)路，因而它應該是一種線(xiàn)性的導航方式

不過(guò)在網(wǎng)頁(yè)的應用中，“追溯來(lái)路”這件事瀏覽器已經(jīng)做得足夠好了，所以“面包屑”慢慢地就變成用來(lái)表達內容歸屬關(guān)系的界面元素，也就是我們經(jīng)?？吹降摹爸鞣诸?lèi)>一級分類(lèi)>二級分類(lèi)>三級分類(lèi)>……>最終內容頁(yè)面”這樣的方式

但是一般正常的來(lái)講目錄結構由3層結構組成

分別是首頁(yè)>欄目頁(yè)>內容頁(yè)

合理的構建目錄結構可以讓用戶(hù)隨時(shí)隨地的找到自己所在的位置又能保證欄目分類(lèi)后的各個(gè)欄目的權重不至于太分散

同時(shí)在許多關(guān)于網(wǎng)站用戶(hù)使用體驗的調查報告中也得出超過(guò)3次點(diǎn)擊訪(fǎng)客還沒(méi)有找到需要的信息，訪(fǎng)客就很大的可能性會(huì )離開(kāi)網(wǎng)站

所以，3層目錄結構也是瀏覽體驗的需要

面包屑導航作用1、讓用戶(hù)了解當前所處位置，以及當前頁(yè)面在整個(gè)網(wǎng)站中的位置

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

3、提供返回各個(gè)層級的快速入口，方便用戶(hù)操作

4、Google已經(jīng)將面包屑導航整合到搜索結果里面，因此優(yōu)化面包屑導航每個(gè)層級的名稱(chēng)，多使用關(guān)鍵字，都可以實(shí)現seo優(yōu)化

面包屑路徑，對于提高用戶(hù)體驗來(lái)說(shuō)，是很有幫助的

5、方便用戶(hù)，面包屑主要用于為用戶(hù)提供導航一個(gè)網(wǎng)站的次要方法，通過(guò)為一個(gè)大型多級網(wǎng)站的所有頁(yè)面提供面包屑路徑，用戶(hù)可以更容易的定位到上一次目錄，引導用戶(hù)通行；6、減少返回到上一級頁(yè)面的點(diǎn)擊或操作，不用使用瀏覽器的“返回”按鈕或網(wǎng)站的主要導航來(lái)返回到上一級頁(yè)面；7、不用常常占用屏幕空間，因為它們通常是水平排列以及簡(jiǎn)單的樣式，面包屑路徑不會(huì )占用頁(yè)面太多的空間

這樣的好處是，從內容過(guò)載方面來(lái)說(shuō)，他們幾乎沒(méi)有任何負面影響；8、降低跳出率，面包屑路徑會(huì )是一個(gè)誘惑首次訪(fǎng)問(wèn)者在進(jìn)入一個(gè)頁(yè)面后去瀏覽這個(gè)網(wǎng)站的非常好的方法

比如說(shuō)，一個(gè)用戶(hù)通過(guò)谷歌搜索到一個(gè)頁(yè)面，然后看到一個(gè)面包屑路徑，這將會(huì )誘使用戶(hù)點(diǎn)擊上一級頁(yè)面去瀏覽感興趣的相關(guān)主題

這樣，從而，可以降低網(wǎng)站的總體跳出率

9、有利于百度蜘蛛對網(wǎng)站的抓取，蜘蛛直接沿著(zhù)那個(gè)鏈走就可以了，很方便

10、面包屑有利于網(wǎng)站內鏈的建設，用面包屑大大增加了網(wǎng)站的內部連接，提高用戶(hù)體驗

面包屑導航分類(lèi)一、基于位置的面包屑導航這種類(lèi)型是最常見(jiàn)的

這種類(lèi)型的面包屑導航可以很好的指出當前頁(yè)面與整個(gè)站點(diǎn)的層次結構

這種面包屑導航可以顯示當前頁(yè)面的前一個(gè)頁(yè)面或者目錄的鏈接

可以使訪(fǎng)客了解自己的位置，以及可以更快的找到自己想要到達的頁(yè)面

可以很好的提高用戶(hù)的友好體驗

二、基于屬性的面包屑導航這種面包屑導航最常出現電子商務(wù)站點(diǎn)

這種面包屑導航可以很好的指出當前頁(yè)面內產(chǎn)品的其他屬性或者類(lèi)別

對于一個(gè)產(chǎn)品來(lái)說(shuō)，所具有的屬性往往不只有一種，而通過(guò)這種面包屑導航可以給消費者一個(gè)更加直觀(guān)的了解

三、基于路徑的面包屑導航這種面包屑導航是最不常見(jiàn)到的

這種面包屑導航和上文所說(shuō)的童話(huà)故事類(lèi)型很像

他們可以顯示訪(fǎng)客在到達頁(yè)面前所訪(fǎng)問(wèn)過(guò)的網(wǎng)頁(yè)的鏈接

這種面包屑導航不是很受歡迎，因為他們的功能基本上是和前進(jìn)和后退的按鈕是一樣的

面包屑導航適用條件雖然眼下很多網(wǎng)站都流行使用面包屑導航，但是并不是所有的網(wǎng)站都適用

符合下面兩個(gè)條件的網(wǎng)站才適合使用面包屑導航

1、層級較深的網(wǎng)站，面包屑導航適合層級較深的網(wǎng)站，如果只有一級分類(lèi)的話(huà)，通過(guò)主導航就可以起到快速定位的作用

比如“豆瓣網(wǎng)”類(lèi)型扁平構架的網(wǎng)站就沒(méi)有使用面包屑導航

2、獨立不交叉的網(wǎng)站結構，由于面包屑網(wǎng)站導航路徑是線(xiàn)性結構的，因此網(wǎng)站內容必須劃分的非常清晰，且不存在交叉；否則，面包屑導航的路徑就不是唯一的，同一分類(lèi)可能出現不同的路徑中，讓用戶(hù)感到困惑

面包屑導航網(wǎng)站導航基于位置(Location-based)的面包屑向用戶(hù)顯示他們在網(wǎng)站的哪一個(gè)級別頁(yè)面

它們一般典型的用于有多個(gè)級別（一般是多于兩級）的導航方案

在下面的例子中(來(lái)自于SitePoint)，每一個(gè)頁(yè)面的文本鏈接表示它比它右邊的文本鏈接高一級

A 表明當前在網(wǎng)站內的位置

B 提供指向先前訪(fǎng)問(wèn)過(guò)的頁(yè)面（或網(wǎng)站）和其他區域的捷徑

本質(zhì)上，它是網(wǎng)站結構的線(xiàn)性表示

Web上的定位面包屑路徑所展示的不是導航的歷史，而是在整個(gè)網(wǎng)站中某個(gè)固定的位置

就是說(shuō)，不管用戶(hù)是如何到達location頁(yè)面，面包屑路徑都是一樣的