複製鏈接
請複製以下鏈接發送給好友

麪包屑導航

鎖定
麪包屑導航(BreadcrumbNavigation)這個概念來自童話故事“漢賽爾格萊特”,當漢賽爾和格萊特穿過森林時,不小心迷路了,但是他們發現沿途走過的地方都撒下了麪包屑,讓這些麪包屑來幫助他們找到回家的路。所以,麪包屑導航的作用是告訴訪問者他們在網站中的位置以及如何返回。
中文名
麪包屑導航
外文名
BreadcrumbNavigation
概念來源
童話故事漢賽爾和格萊特”
作    用
告訴訪問者的位置及如何返回

麪包屑導航來源

很久很久以前,在大森林的邊上住着一個貧窮的樵夫,他與妻子和兩個孩子相依為命。他的兒子名叫漢賽爾,女兒名叫格萊特。後來樵夫的妻子去世了,他又給孩子們娶了一個後母。後母計劃把兩個孩子帶到森林的深處,然後趁他們睡着的時候跑掉。漢賽爾無意中知道了後母的計劃,於是偷偷地把一塊麪包藏在了口袋裏。在去森林的路上,漢賽爾悄悄地捏碎了他的麪包,並不時地停下腳步,把碎麪包屑撒在路上。後母順利地趁孩子們睡着的時候溜掉了,漢賽爾和格萊特醒來已是一片漆黑。漢賽爾安慰他的妹妹説:“等太陽一出來,我們就看得見我撒在地上的麪包屑了,它一定會指給我們回家的路。”但是當太陽昇起來時,他們在地上卻怎麼也找不到一點麪包屑了,原來它們都被那些在樹林裏、田野上飛來飛去的鳥兒一點點地啄食了,兄妹倆在森林中迷了路。不停的尋路,讓他們飢餓難忍,腿腳無力,來到了一個用麪包做屋頂,糖果做窗户的小屋。飢餓讓他們忘記了疲憊,及潛在的危險,啃起了屋子。結果在巫婆的誘騙下,哥哥被鎖屋中,妹妹被迫做勞力,就在巫婆要吃掉哥哥之時,妹妹借向巫婆學習添柴之機。將巫婆推入爐中,兄妹倆帶着巫婆的財寶,回到了家中。後母己經去世,兄妹倆和父親一起過上了幸福的生活。

麪包屑導航原理

在童話裏,麪包屑是漢賽爾在進入森林的路中偷偷撒下的,這是一種“歷史記錄”的應用方式,目的是幫助你追溯來路,因而它應該是一種線性的導航方式。不過在網頁的應用中,“追溯來路”這件事瀏覽器已經做得足夠好了,所以“麪包屑”慢慢地就變成用來表達內容歸屬關係的界面元素,也就是我們經常看到的“主分類>一級分類>二級分類>三級分類>……>最終內容頁面”這樣的方式。但是一般正常的來講目錄結構由3層結構組成。分別是首頁>欄目頁>內容頁。合理的構建目錄結構可以讓用户隨時隨地的找到自己所在的位置又能保證欄目分類後的各個欄目的權重不至於太分散。同時在許多關於網站用户使用體驗的調查報告中也得出超過3次點擊訪客還沒有找到需要的信息,訪客就很大的可能性會離開網站。所以,3層目錄結構也是瀏覽體驗的需要。

麪包屑導航作用

1、讓用户瞭解當前所處位置,以及當前頁面在整個網站中的位置。
2、體現了網站的架構層級,能夠幫助用户快速學習和了解網站內容和組織方式,從而形成很好的位置感。
3、提供返回各個層級的快速入口,方便用户操作。
4、Google已經將麪包屑導航整合到搜索結果裏面,因此優化麪包屑導航每個層級的名稱,多使用關鍵字,都可以實現SEO優化。麪包屑路徑,對於提高用户體驗來説,是很有幫助的。
5、方便用户,麪包屑主要用於為用户提供導航一個網站的次要方法,通過為一個大型多級網站的所有頁面提供麪包屑路徑,用户可以更容易的定位到上一次目錄,引導用户通行;
6、減少返回到上一級頁面的點擊或操作,不用使用瀏覽器的“返回”按鈕或網站的主要導航來返回到上一級頁面;
7、不用常常佔用屏幕空間,因為它們通常是水平排列以及簡單的樣式,麪包屑路徑不會佔用頁面太多的空間。這樣的好處是,從內容過載方面來説,他們幾乎沒有任何負面影響
8、降低跳出率,麪包屑路徑會是一個誘惑首次訪問者在進入一個頁面後去瀏覽這個網站的非常好的方法。比如説,一個用户通過谷歌搜索到一個頁面,然後看到一個麪包屑路徑,這將會誘使用户點擊上一級頁面去瀏覽感興趣的相關主題。這樣,從而,可以降低網站的總體跳出率。
9、有利於百度蜘蛛對網站的抓取,蜘蛛直接沿着那個鏈走就可以了,很方便。
10、麪包屑有利於網站內鏈的建設,用麪包屑大大增加了網站的內部連接,提高用户體驗。

麪包屑導航分類

一、基於位置的麪包屑導航
這種類型是最常見的。這種類型的麪包屑導航可以很好的指出當前頁面與整個站點的層次結構。這種麪包屑導航可以顯示當前頁面的前一個頁面或者目錄的鏈接。可以使訪客瞭解自己的位置,以及可以更快的找到自己想要到達的頁面。可以很好的提高用户的友好體驗。
二、基於屬性的麪包屑導航
這種麪包屑導航最常出現電子商務站點。這種麪包屑導航可以很好的指出當前頁面內產品的其他屬性或者類別。對於一個產品來説,所具有的屬性往往不只有一種,而通過這種麪包屑導航可以給消費者一個更加直觀的瞭解。
三、基於路徑的麪包屑導航
這種麪包屑導航是最不常見到的。這種麪包屑導航和上文所説的童話故事類型很像。他們可以顯示訪客在到達頁面前所訪問過的網頁的鏈接。這種麪包屑導航不是很受歡迎,因為他們的功能基本上是和前進和後退的按鈕是一樣的。

麪包屑導航適用條件

雖然眼下很多網站都流行使用麪包屑導航,但是並不是所有的網站都適用。符合下面兩個條件的網站才適合使用麪包屑導航。
1、層級較深的網站,麪包屑導航適合層級較深的網站,如果只有一級分類的話,通過主導航就可以起到快速定位的作用。比如“豆瓣網”類型扁平構架的網站就沒有使用麪包屑導航。
2、獨立不交叉的網站結構,由於麪包屑網站導航路徑是線性結構的,因此網站內容必須劃分的非常清晰,且不存在交叉;否則,麪包屑導航的路徑就不是唯一的,同一分類可能出現不同的路徑中,讓用户感到困惑。

麪包屑導航示例

麪包屑導航網站導航

麪包屑導航 麪包屑導航
基於位置(Location-based)的麪包屑向用户顯示他們在網站的哪一個級別頁面。它們一般典型的用於有多個級別(一般是多於兩級)的導航方案。在下面的例子中(來自於SitePoint),每一個頁面的文本鏈接表示它比它右邊的文本鏈接高一級。
A 表明當前在網站內的位置。
B 提供指向先前訪問過的頁面(或網站)和其他區域的捷徑。
本質上,它是網站結構線性表示。Web上的定位麪包屑路徑所展示的不是導航的歷史,而是在整個網站中某個固定的位置。就是説,不管用户是如何到達location頁面,麪包屑路徑都是一樣的。

麪包屑導航操作系統

現代的文件管理器如Windows Explorer(在Windows Vista/7中)Nautilus、Dolphin、Finder等都採用了麪包屑導航,替代或者擴展了地址欄