設(shè)計(jì)5443949.jpg)
化9068065.png)
化1754442.png)
化白色2686469.png)
TEL：
面包屑導(dǎo)航(BreadcrumbNavigation)這個(gè)概念來自童話故事"漢賽爾和格萊特"，當(dāng)漢賽爾和格萊特穿過森林時(shí)，不小心迷路了，但是他們發(fā)現(xiàn)在沿途走過的地方都撒下了面包屑，讓這些面包屑來幫助他們找到回家的路。所以，面包屑導(dǎo)航的作用是告訴訪問者他們目前在網(wǎng)站中的位置以及如何返回。
面包屑導(dǎo)航來源
很久很久以前，在大森林的邊上住著一個(gè)貧窮的樵夫，他與妻子和兩個(gè)孩子相依為命。他的兒子名叫漢賽爾，女兒名叫格萊特。后來樵夫的妻子去世了，他又給孩子們?nèi)⒘艘粋€(gè)后母。后母計(jì)劃把兩個(gè)孩子帶到森林的深處，然后趁他們睡著的時(shí)候跑掉。漢賽爾無意中知道了后母的計(jì)劃，于是偷偷地把一塊面包藏在了口袋里。在去森林的路上，漢賽爾悄悄地捏碎了他的面包，并不時(shí)地停下腳步，把碎面包屑撒在路上。后母順利地趁孩子們睡著的時(shí)候溜掉了，漢賽爾和格萊特醒來已是一片漆黑。漢賽爾安慰他的妹妹說：“等太陽一出來，我們就看得見我撒在地上的面包屑了，它一定會(huì)指給我們回家的路?！钡钱?dāng)太陽升起來時(shí)，他們?cè)诘厣蠀s怎么也找不到一點(diǎn)面包屑了，原來它們都被那些在樹林里、田野上飛來飛去的鳥兒一點(diǎn)點(diǎn)地啄食了，兄妹倆在森林中迷了路。不天的尋路，讓他們饑餓難忍，腿腳無力，來到了一個(gè)用面包做屋頂，糖果做窗戶的小屋。饑餓讓他們忘記了疲憊，及潛在的危險(xiǎn)，啃起了屋子。結(jié)果在巫婆的誘騙下，哥哥被鎖屋中，妹妹被迫做勞力，就在巫婆要吃掉哥哥之時(shí)，妹妹借向巫婆學(xué)習(xí)添柴之機(jī)。將巫婆推入爐中，兄妹倆帶著巫婆的財(cái)寶，回到了家中。后母己經(jīng)去世，兄妹倆和父親一起過上了幸福的生活。
面包屑導(dǎo)航原理
在童話里，面包屑是漢賽爾在進(jìn)入森林的路中偷偷撒下的，這是一種“歷史記錄”的應(yīng)用方式，目的是幫助你追溯來路，因而它應(yīng)該是一種線性的導(dǎo)航方式。不過在網(wǎng)頁(yè)的應(yīng)用中，“追溯來路”這件事瀏覽器已經(jīng)做得足夠好了，所以“面包屑”慢慢地就變成用來表達(dá)內(nèi)容歸屬關(guān)系的界面元素，也就是我們經(jīng)?？吹降摹爸鞣诸?gt;一級(jí)分類>二級(jí)分類>三級(jí)分類>……>最終內(nèi)容頁(yè)面”這樣的方式。但是一般正常的來講目錄結(jié)構(gòu)由3層結(jié)構(gòu)組成。分別是首頁(yè)>欄目頁(yè)>內(nèi)容頁(yè)。合理的構(gòu)建目錄結(jié)構(gòu)可以讓用戶隨時(shí)隨地的找到自己所在的位置又能保證欄目分類后的各個(gè)欄目的權(quán)重不至于太分散。同時(shí)在許多關(guān)于網(wǎng)站用戶使用體驗(yàn)的調(diào)查報(bào)告中也得出超過3次點(diǎn)擊訪客還沒有找到需要的信息，訪客就很大的可能性會(huì)離開網(wǎng)站。所以，3層目錄結(jié)構(gòu)也是瀏覽體驗(yàn)的需要。
面包屑導(dǎo)航作用
1、讓用戶了解當(dāng)前所處位置，以及當(dāng)前頁(yè)面在整個(gè)網(wǎng)站中的位置。
2、體現(xiàn)了網(wǎng)站的架構(gòu)層級(jí)，能夠幫助用戶快速學(xué)習(xí)和了解網(wǎng)站內(nèi)容和組織方式，從而形成很好的位置感。
3、提供返回各個(gè)層級(jí)的快速入口，方便用戶操作。
4、Google已經(jīng)將面包屑導(dǎo)航整合到搜索結(jié)果里面，因此優(yōu)化面包屑導(dǎo)航每個(gè)層級(jí)的名稱，多使用關(guān)鍵字，都可以實(shí)現(xiàn)SEO優(yōu)化。面包屑路徑，對(duì)于提高用戶體驗(yàn)來說，是很有幫助的。
5、方便用戶，面包屑主要用于為用戶提供導(dǎo)航一個(gè)網(wǎng)站的次要方法，通過為一個(gè)大型多級(jí)網(wǎng)站的所有頁(yè)面提供面包屑路徑，用戶可以更容易的定位到上一次目錄，引導(dǎo)用戶通行；
6、減少返回到上一級(jí)頁(yè)面的點(diǎn)擊或操作，不用使用瀏覽器的“返回”按鈕或網(wǎng)站的主要導(dǎo)航來返回到上一級(jí)頁(yè)面；
7、不用常常占用屏幕空間，因?yàn)樗鼈兺ǔＪ撬脚帕幸约昂?jiǎn)單的樣式，面包屑路徑不會(huì)占用頁(yè)面太多的空間。這樣的好處是，從內(nèi)容過載方面來說，他們幾乎沒有任何負(fù)面影響；
8、降低跳出率，面包屑路徑會(huì)是一個(gè)誘惑首次訪問者在進(jìn)入一個(gè)頁(yè)面后去瀏覽這個(gè)網(wǎng)站的非常好的方法。比如說，一個(gè)用戶通過谷歌搜索到一個(gè)頁(yè)面，然后看到一個(gè)面包屑路徑，這將會(huì)誘使用戶點(diǎn)擊上一級(jí)頁(yè)面去瀏覽感興趣的相關(guān)主題。這樣，從而，可以降低網(wǎng)站的總體跳出率。
9、有利于百度蜘蛛對(duì)網(wǎng)站的抓取，蜘蛛直接沿著那個(gè)鏈走就可以了，很方便。
10、面包屑有利于網(wǎng)站內(nèi)鏈的建設(shè)，用面包屑大大增加了網(wǎng)站的內(nèi)部連接，提高用戶體驗(yàn)。
面包屑導(dǎo)航適用條件
雖然眼下很多網(wǎng)站都流行使用面包屑導(dǎo)航，但是并不是所有的網(wǎng)站都適用。符合下面兩個(gè)條件的網(wǎng)站才適合使用面包屑導(dǎo)航。1、層級(jí)較深的網(wǎng)站，面包屑導(dǎo)航適合層級(jí)較深的網(wǎng)站，如果只有一級(jí)分類的話，通過主導(dǎo)航就可以起到快速定位的作用。比如“豆瓣網(wǎng)”類型扁平構(gòu)架的網(wǎng)站就沒有使用面包屑導(dǎo)航。2、獨(dú)立不交叉的網(wǎng)站結(jié)構(gòu)，由于面包屑網(wǎng)站導(dǎo)航路徑是線性結(jié)構(gòu)的，因此網(wǎng)站內(nèi)容必須劃分的非常清晰，且不存在交叉；否則，面包屑導(dǎo)航的路徑就不是唯一的，同一分類可能出現(xiàn)在不同的路徑中，讓用戶感到困惑。
面包屑導(dǎo)航示范
基于位置(網(wǎng)桿基礎(chǔ)工程)的面包屑向用戶顯示他們?cè)诰W(wǎng)站的哪一個(gè)級(jí)別頁(yè)面。
它們一般典型的用于有多個(gè)級(jí)別（一般是多于兩級(jí)）的導(dǎo)航方案。在下面的例子中，每一個(gè)頁(yè)面的文本鏈接表示它比它右邊的文本鏈接高一級(jí)。
A 表明當(dāng)前在網(wǎng)站內(nèi)的位置。
B 提供指向先前訪問過的頁(yè)面（或網(wǎng)站）和其他區(qū)域的捷徑。
本質(zhì)上，它是網(wǎng)站結(jié)構(gòu)的線性表示。Web上的定位面包屑路徑所展示的不是導(dǎo)航的歷史，而是在整個(gè)網(wǎng)站中某個(gè)固定的位置。就是說，不管用戶是如何到達(dá)網(wǎng)桿基礎(chǔ)工程頁(yè)面，面包屑路徑都是一樣的。
面包屑導(dǎo)航分類
一、基于位置的面包屑導(dǎo)航
這種類型是最常見的。這種類型的面包屑導(dǎo)航可以很好的指出當(dāng)前頁(yè)面與整個(gè)站點(diǎn)的層次結(jié)構(gòu)。這種面包屑導(dǎo)航可以顯示當(dāng)前頁(yè)面的前一個(gè)頁(yè)面或者目錄的鏈接?？梢允乖L客了解自己的位置，以及可以更快的找到自己想要到達(dá)的頁(yè)面?？梢院芎玫奶岣哂脩舻挠押皿w驗(yàn)。
二、基于屬性的面包屑導(dǎo)航
這種面包屑導(dǎo)航最常出現(xiàn)在電子商務(wù)站點(diǎn)。這種面包屑導(dǎo)航可以很好的指出當(dāng)前頁(yè)面內(nèi)產(chǎn)品的其他屬性或者類別。對(duì)于一個(gè)產(chǎn)品來說，所具有的屬性往往不只有一種，而通過這種面包屑導(dǎo)航可以給消費(fèi)者一個(gè)更加直觀的了解。
三、基于路徑的面包屑導(dǎo)航
這種面包屑導(dǎo)航是最不常見到的。這種面包屑導(dǎo)航和上文所說的童話故事類型很像。他們可以顯示訪客在到達(dá)頁(yè)面前所訪問過的網(wǎng)頁(yè)的鏈接。這種面包屑導(dǎo)航不是很受歡迎，因?yàn)樗麄兊墓δ芑旧鲜呛颓斑M(jìn)和后退的按鈕是一樣的。
