一、面包屑是什么
A “breadcrumb” (or “breadcrumb trail”) is a type of secondary navigation scheme that reveals the user’s location in a website or Web application. The term comes from the Hansel and Gretel fairy tale in which the two title children drop breadcrumbs to form a trail back to their home. Just like in the tale, breadcrumbs in real-world applications offer users a way to trace the path back to their original landing point.

——《Breadcrumbs In Web Design: Examples And Best Practices》

咱們來(lái)看一下google翻譯的結果.[gogole譯]一個(gè)“面包屑”（或“面包線(xiàn)索”）是一個(gè)類(lèi)型為二級導航方案[1]，揭示了網(wǎng)站或網(wǎng)頁(yè)應用程序中用戶(hù)的所在位置。這個(gè)詞來(lái)自漢賽爾與格萊特童話(huà)故事[2]中，兩個(gè)孩子丟下面包屑，形成一條小徑回到自己的家。就像在童話(huà)，應用面包屑在現實(shí)世界的用戶(hù)提供一種方法來(lái)跟蹤路徑返回到原來(lái)的著(zhù)陸點(diǎn)。

——《在網(wǎng)頁(yè)設計面包屑：實(shí)例和佳做法》

面包屑是作為輔助和補充的導航方式（secondary navigation scheme）[3]，它能讓用戶(hù)知道在網(wǎng)站或應用中所處的位置并能方便地回到原先的地點(diǎn)。

二、 面包屑在實(shí)際中的應用
很多的互聯(lián)網(wǎng)公司在建站之初就采用了面包屑導航做為網(wǎng)站產(chǎn)品線(xiàn)的“標準配置”，現在被越來(lái)越多的行業(yè)網(wǎng)站所認可及采用。（面包屑導航不僅僅能夠增加一個(gè)網(wǎng)站的用戶(hù)體驗度,并且就搜索引擎網(wǎng)站的各個(gè)頁(yè)面和欄目之間的權重傳遞也是比較友好的.）

1.基于用戶(hù)所在的層級位置（Location-based）
基于位置的面包屑用于告知用戶(hù)在當前網(wǎng)站中所在的結構層級。用在具有多級導航中。(咱們鄭州啟凡軟件建議一般使用3層面包屑導航.多層次不利于網(wǎng)站的頁(yè)面收錄和權重傳遞.)

3.基于用戶(hù)的足跡(Path-based)
顯示用戶(hù)瀏覽的軌跡，面包屑之間沒(méi)有明顯的層級關(guān)系，只是展示用戶(hù)從那個(gè)級別過(guò)來(lái)的。這種面包屑在一級導航方案不明確的網(wǎng)站適合，其他情況不建議采用。

三、 面包屑技術(shù)的優(yōu)點(diǎn)
通過(guò)上面的案例研究以及面包屑的分類(lèi)，我們可以看到采用面包屑功能的好處：

1.面包屑可以有效的指引用戶(hù)所在當前位置.方便用戶(hù)瀏覽網(wǎng)站和位置定位，不至于在查看一個(gè)大型網(wǎng)站的時(shí)候迷失了方向.

2.面包屑可以減少的用戶(hù)返回上一級頁(yè)面的所需的操作次數。

3.臨時(shí)性，動(dòng)態(tài)性，占用屏幕空間小，干擾性小。

4.降低網(wǎng)站訪(fǎng)問(wèn)者的總體跳出率。

當用戶(hù)從別處鏈接到網(wǎng)頁(yè)，或者從搜索引擎查找到網(wǎng)頁(yè)，則面包屑的存在能幫助用戶(hù)快速了解當前的層級位置，并引導用戶(hù)查看網(wǎng)站的其余部分，減少了看完直接跳走的用戶(hù)數量。

四、面包屑的設計規范
1 面包屑的使用前提
(1)存在大量的分類(lèi)目錄
例如：購物類(lèi)網(wǎng)站、分類(lèi)信息網(wǎng)站。

(2)在一些引導性的流程操作或者軟件安裝進(jìn)程中，面包屑也常被用來(lái)指示當前以及剩余的操作步驟。

(3)層次簡(jiǎn)單的頁(yè)面中一般不使用面包屑，但是當面包屑能顯著(zhù)幫助到瀏覽并提高他們定位能力時(shí)，也建議采用面包屑。

相冊瀏覽就是一個(gè)典型的例子，結構層次并不復雜，但用戶(hù)在特定幾個(gè)頁(yè)面之間跳轉的頻率會(huì )比較高（如相冊首頁(yè)，相片縮略圖頁(yè)，相片瀏覽頁(yè)等），所以面包屑的存在對提高此處的瀏覽效率是很有幫助的。人人網(wǎng)在2010年9月份之前還保留這一面包屑，但是現在無(wú)緣無(wú)故取消了，不知道PM們取消的原因是什么，這一點(diǎn)讓我很上火。

需要提醒的是面包屑不能替代有效的主導航，它是一個(gè)輔助功能[5]。

這一可以稱(chēng)之為“小應用，大效應”的用戶(hù)體驗性設計，國外的資訊門(mén)戶(hù)網(wǎng)站似乎對此不怎么“感冒”，例如yahoo.com、CNN、華爾街日報等。都沒(méi)有在頁(yè)面中采用面包屑導航，也可能是由于他們的資訊分類(lèi)比較喜歡采用二級欄目導航的緣故吧。

2 面包屑的設計規范
(1)面包屑的樣式

常采用的面包屑的樣式：橫向的文字鏈接，由大于號“>”分開(kāi)[4]。這個(gè)符號也暗示了它們之間的層次關(guān)系。根據你的用戶(hù)的認知及專(zhuān)業(yè)水平，在有必要的情況下，可以在面包屑父子級之間增加“下劃線(xiàn)”以告訴用戶(hù)“這里是可以點(diǎn)擊的”。

當然，網(wǎng)頁(yè)設計師為了更好地在這個(gè)區域施展他們的才華，設計成下面的方式也未嘗不可，但是建議網(wǎng)站加載速度慢的產(chǎn)品經(jīng)理們要將這個(gè)意見(jiàn)及時(shí)匯報給相應設計人員，畢竟面包屑在一頁(yè)就加載了。

(2)面包屑的位置

通常出現在頁(yè)面的左上或者右上部分，而且主要是在導航下面或內容區的上面。

(3)面包屑大小

面包屑是一種輔助導航，在頁(yè)面中不應該起支配作用。面包屑和主導航相比至少要比較小、或不太突出。在確定面包屑大小的時(shí)候，一個(gè)較很好的方法是，當訪(fǎng)問(wèn)這個(gè)頁(yè)面的時(shí)候，它不應該是頁(yè)面中醒目的元素。如果一眼就注意到了面包屑，可能這個(gè)設計師做得有點(diǎn)失敗。

到這里面包屑基本告一段落了，但是如果你是一個(gè)嚴謹產(chǎn)品經(jīng)理的話(huà)，你會(huì )有四個(gè)疑問(wèn)在腦海出閃現：1.點(diǎn)擊導航后是“跳轉”頁(yè)面，還是當前頁(yè)面替換？2.面包屑導航的一隊列是網(wǎng)站首頁(yè)，還是該產(chǎn)品線(xiàn)首頁(yè)？3.面包屑導航要控制在多少個(gè)級別為佳？4.面包屑是終止于當前頁(yè)面，還是上一級別？

首先我不是這個(gè)行業(yè)的權威，僅代表我個(gè)人的觀(guān)點(diǎn)。一個(gè)問(wèn)題的答案應該是：面包屑區域是直接跳轉進(jìn)入要訪(fǎng)問(wèn)的頁(yè)面。因為他選擇面包屑進(jìn)行導航，已從另一角度告訴你他正在執行的操作是：“返回”、“離開(kāi)”的含義，類(lèi)似于網(wǎng)站逃生艙功能。二個(gè)問(wèn)題要看你當前頁(yè)面的header區域是否有一級導航方案了，如果有的話(huà)，這個(gè)地方再有首頁(yè)也是一個(gè)擺設，并且過(guò)多地展示首頁(yè)也無(wú)多大意義，因為人們都了解“www”去的就是你的首頁(yè)。如果在一梯隊增加返回“首頁(yè)”的導航，勢必會(huì )造成你的面包屑深度過(guò)大，這也到了三個(gè)問(wèn)題“面包屑導航要控制在多少個(gè)級別為佳”，面包屑導航不要超過(guò)4級，3級為佳，如果需要割舍的話(huà)，盡量割舍列表頁(yè)，保留頻道頁(yè)。4個(gè)問(wèn)題的答案是：如果你的導航?jīng)]有超過(guò)4級的情況下，建議添加一個(gè)“正文”、“詳細”做為面包屑導航的完美收工。(作者：遠航1860)

來(lái)源：以用戶(hù)為中心的產(chǎn)品設計

文中注釋

1為什么成為二級導航方案？因為產(chǎn)品線(xiàn)首頁(yè)不需要導航。例如：首頁(yè)、資訊首頁(yè)。

2漢賽爾與格萊特兩個(gè)人名來(lái)自童話(huà)小說(shuō)《格林童話(huà)》

3 一級導航方案在logo、header及 “逃生艙”區域會(huì )涉及。

4這個(gè)符號也暗示了它們的層級關(guān)系。

5面包屑只是一個(gè)允許用戶(hù)定位所處位置的輔助導航方案。

參考文獻
《Breadcrumbs In Web Design: Examples And Best Practices》
http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/

總結:鄭州啟凡軟件認為好的網(wǎng)站布局結構,都是從一些細節做出發(fā)點(diǎn)的.面包屑導航的設計就是初于為用戶(hù)提供佳體現減少用戶(hù)不必要的麻煩進(jìn)行設計制作的.本文地址:http://wap.nb7777.cn/websj/84.html