原文：http://www.qianduan.net/?p=6351
譯自：http://www.smashingmagazine.com

一般的網(wǎng)站會有很多頁面，面包屑導(dǎo)航可以大大改善用戶尋找他們的路徑的方法。就可用性而言，面包屑可以減少一個網(wǎng)站的用戶返回上一級頁面的操作次數(shù)，而且他們可以提高網(wǎng)站部分和頁面的可查找性。他們還是在網(wǎng)站層次中指示用戶所在位置的有效的視覺助手，這使之成為承接頁面上下文信息的很棒的根源。

什么是面包屑？

面包屑（或稱為面包屑路徑）是一種顯示用戶在網(wǎng)站或網(wǎng)絡(luò)應(yīng)用中的位置的二級導(dǎo)航方案。這個術(shù)語來自于神話故事《奇幻森林歷險記》，故事的兩個小主人公丟下一條面包屑路徑，然后順著這條路徑回到了家中。就像這個故事一樣，在現(xiàn)實世界的應(yīng)用程序中，面包屑為用戶提供一種追蹤返回最初訪問頁面的方式。

Delicious.com網(wǎng)站的面包屑

你通?？梢栽谟写罅康陌匆欢ǖ燃壗M織的內(nèi)容的網(wǎng)站上找到面包屑。你也可以在有多于一個步驟的網(wǎng)絡(luò)應(yīng)用上見到它們，這個時候他們的功能類似于進度條。最簡化的方式是，面包屑就是水平排列的被大于號" > " 隔開的文本鏈接；這個符號指示該頁面相對于鏈接到它的頁面的深度（級別）。

在本文中，我們將探索面包屑在網(wǎng)站上的用法，并討論在你自己的網(wǎng)站中應(yīng)用面包屑路徑的一些最佳實踐方法。

什么時候使用面包屑？

面包屑導(dǎo)航用于大型網(wǎng)站和按分級排列頁面的網(wǎng)站。一個典型的案例就是電子商務(wù)網(wǎng)站，在這類網(wǎng)站中，大量的產(chǎn)品被按照邏輯分類分組。

你不必在沒有邏輯等級或分組的單級網(wǎng)站上使用面包屑。一個決定是否使用面包屑導(dǎo)航的方法是建立一個網(wǎng)站地圖或結(jié)構(gòu)圖來描述網(wǎng)站的導(dǎo)航結(jié)構(gòu)，然后分析面包屑是否能提高用戶在類別內(nèi)和類別之間的定位能力。

面包屑導(dǎo)航應(yīng)該作為擴展的額外的功能，而不能替代有效的主要導(dǎo)航菜單。它是一個方便的功能；一個允許用戶定位他們在哪里的二級導(dǎo)航方案；一個定位你的網(wǎng)站的可選擇的方法。

面包屑的種類

面包屑主要分為三類。

基于位置

基于位置(Location-based)的面包屑向用戶顯示他們在網(wǎng)站的哪一個級別頁面。它們一般典型的用于有多個級別（一般是多于兩級）的導(dǎo)航方案。在下面的例子中(來自于SitePoint)，每一個頁面的文本鏈接表示它比它右邊的文本鏈接高一級。

基于特性

基于特性(Attribute-based)的面包屑路徑顯示一個特定頁面的特性。例如，在Newegg，面包屑路徑表示在一個特定頁面顯示的特性內(nèi)容。

這個頁面顯示所有擁有由Lian Li制造并有MicroATX微塔式因素的電腦機箱。

基于路徑

基于路徑(Path-based)的面包屑路徑顯示用戶到達特定頁面的操作步驟?；诼窂降拿姘际莿討B(tài)的，它們顯示用戶在到達當(dāng)前頁面之前訪問過的頁面。

使用面包屑的優(yōu)勢

這里是一些使用面包屑路徑的優(yōu)勢。

方便用戶
面包屑主要用于為用戶提供導(dǎo)航一個網(wǎng)站的次要方法。通過為一個大型多級網(wǎng)站的所有頁面提供面包屑路徑，用戶可以更容易的定位到上一次目錄。

減少返回到上一級頁面的點擊或操作
不用使用瀏覽器的“返回”按鈕或網(wǎng)站的主要導(dǎo)航來返回到上一級頁面 ，用戶現(xiàn)在可以使用用更少點擊數(shù)的面包屑來。

不用常常占用屏幕空間
因為它們通常是水平排列以及簡單的樣式，面包屑路徑不會占用頁面太多的空間。這樣的好處是，從內(nèi)容過載方面來說，他們幾乎沒有任何負面影響。

降低跳出率
面包屑路徑會是一個誘惑首次訪問者在進入一個頁面后去瀏覽這個網(wǎng)站的非常好的方法。比如說，一個用戶通過谷歌搜索到一個頁面，然后看到一個面包屑路徑，這將會誘使用戶點擊上一級頁面去瀏覽感興趣的相關(guān)主題。這樣，從而，可以降低網(wǎng)站的總體 跳出率。

面包屑路徑的錯誤使用

使用面包屑路徑是一件相當(dāng)簡單的事情，而且在決定使用它們之間只需要很少的指導(dǎo)性考慮。讓我們看一些可避免的常見錯誤。

在你不需要的時候使用面包屑
一個常見的使用的錯誤是在沒優(yōu)勢的時候使用面包屑。

在上面的例子中，Slicethepie 冒險迫使用戶使用太多的導(dǎo)航選擇。(1)主導(dǎo)航， (2) 面包屑路徑和(3) 次要導(dǎo)航太接近了。這個應(yīng)用中的面包屑路徑不能為用戶提供額外的便利，因為下一級頁面的次要導(dǎo)航正好在它下面。而且，當(dāng)點擊面包屑的二級鏈接“Music”時，它將帶你到第一個tab“Listen”，這會錯誤的暗示第一個tab在另外兩個tab(“Search”和“Artist hall of fame”)的較高級別。

使用面包屑作為主要導(dǎo)航
就像前面規(guī)定的，使用面包屑作為一個可選的輔助導(dǎo)航。

在上面的例子中，mefeedia 網(wǎng)站沒有提供一個瀏覽視頻的主要導(dǎo)航菜單，盡管在頁面底部有文字鏈接導(dǎo)航，在頁面的主體部分沒有導(dǎo)航菜單，這使得瀏覽網(wǎng)站的其它部分就比較困難。

如果你直接到達了一個頁面——比如說，通過谷歌搜索結(jié)果，你可以選擇的導(dǎo)航就只有面包屑。或者如果你已經(jīng)瀏覽過一個網(wǎng)站頁面，然后到達一個沒有顯示主要導(dǎo)航的頁面，你將不得不點擊瀏覽器的“返回”按鈕來獲取主菜單。

在頁面有多級目錄的時候使用面包屑
面包屑路徑有一個線性結(jié)構(gòu)，因此如果你的頁面不能分類到整潔的目錄，使用面包屑時間比較困難的事情。決定是否使用面包屑很大程度上取決于你如何設(shè)計你的網(wǎng)站分級。當(dāng)一個低一級的頁面在（或能放入到）多于一個上級目錄下時，面包屑路徑將會是無效、不正確和讓用戶困惑的。

面包屑導(dǎo)航設(shè)計注意事項

當(dāng)設(shè)計一個面包屑導(dǎo)航方案時，記住幾件事情。讓我們看看在你處理面包屑的時候可能發(fā)生的幾個問題。

什么時候應(yīng)該使用分割鏈接條目？
一般接受和最被認可的分割面包屑路徑的超級連接的符號是“大于號”。一般來說，> 符號用于指示級別，就像父目錄 > 子目錄的格式一樣.

其它常用的符號有指向右邊的箭頭、右直角引號(?) 和反斜線(/).

使用哪種符號取決于網(wǎng)站的審美和使用的面包屑類型。比如，對于基于路徑的面包屑，鏈接不必相互之間有等級關(guān)系，那么使用“大于”號可能不能正確的傳達它們之間的關(guān)系。

它應(yīng)該多大？
你應(yīng)該不希望你的面包屑支配頁面。一個面包屑僅僅擔(dān)任對用戶的一種輔助（便利）作用。它的大小應(yīng)該向用戶傳達這個理念，然后相對于主要導(dǎo)航菜單至少要比較小、或不太突出。

在確定你的面包屑的大小的時候，一個服從的很好的憑感覺的方法是，當(dāng)訪問這個頁面的時候，它不應(yīng)該是頁面中最醒目的元素。

面包屑放在哪里？
面包屑通常出現(xiàn)在頁面的上半部分，而且在主要導(dǎo)航的下面（如果使用了水平導(dǎo)航布局）。

面包屑展示

現(xiàn)在我們來討論一下“誰、什么、什么時候、那個地方、為什么和如何”使用面包屑路徑，我們可以看一些實例。在下面的內(nèi)容中，你會發(fā)現(xiàn)一些使用面包屑路徑的很棒的網(wǎng)站設(shè)計。

1. 典型的基于文本的面包屑

TypePad Design Assistant

NASA

Nestle 使用了一個文字明顯比頁面其它部分小的面包屑路徑，很有效的讓它不太顯眼。

Marchand de Trucs

Bridge 55

Overstock.com 為它的基于特性的面包屑路徑使用了標準的“大于”號。為產(chǎn)品特性使用了復(fù)選框，這樣用戶可以通過取消選擇它們來過濾它們。

2. 用其他符號取代“>”

TechRadar UK 和 BP 使用向右的小三角。

PSDTUTS 和 Martique 使用反斜杠。

Mouse to Minx 使用向右的引號來展現(xiàn)頁面等級。

Jakob Nielsen’s Alertbox 使用向右的箭頭。

Target 使用冒號來分割。

3. 超越簡單的文字鏈接

面包屑設(shè)計的一個當(dāng)前的趨勢是說，“面包屑不用必須是簡單的”。在這些設(shè)計中，你將看到與總體設(shè)計相融合的樣式漂亮的面包屑。

Grooveshark

Yahoo! TV

IDEO

Apple Store

Coolspotters

Devlounge

LottaNZB

Pixelpoodle

guardian.co.uk

4. 多步驟處理面包屑

Statement Tracker 使用一個面包屑來指示注冊帳號的步驟，就像一個進程指示器一樣。

Flickr 使用面包屑來指示Flickr之旅中的部分數(shù)量。

5. 有子導(dǎo)航的面包屑

這里有一些面包屑路徑的例子，當(dāng)點擊或鼠標經(jīng)過它們的鏈接時，打開一個列出附加屬性或位置的子導(dǎo)航面板。

MarketWatch 在你鼠標懸停在一個面包屑鏈接的時候有一個彈出的子導(dǎo)航。

Profoto 有一個獨特的面包屑路徑：點擊面包屑鏈接時在它下面打開一個區(qū)域，從而為用戶提供附加的屬性來選擇。

Cranfield University 有一個簡單的彈出面包屑，它提供多種功能：為用戶指示位置，并作為一種健壯和交互的二級導(dǎo)航。

Lonely Planet 也有一個彈出面包屑，你可以從中改變特性選擇。

點擊一個面包屑鏈接帶你到相關(guān)頁面，而點擊向下的箭頭就會打開而外的選項。

MSDN 有一個當(dāng)用戶用鼠標滑過一個鏈接時就打開一個可滾動的子導(dǎo)航列表的面包屑路徑。

Wowhead 有一個多級子導(dǎo)航系統(tǒng)。

6. 交互式面包屑

Delicious 讓你移除關(guān)鍵詞標簽的面包屑路線中的條目來幫助你快速尋找書簽。

7. 實驗性示例

Booreiland 使用一種面包屑樣式(breadcrumb-style)的導(dǎo)航方案作為它的主要菜單，這樣就允許用戶快速理解他們當(dāng)前在瀏覽的內(nèi)容。

AEN UI的用戶界面設(shè)計師Aen Tan 討論一種被稱為 Tabcrumbs的設(shè)計模式，一種整合面包屑和tabs的導(dǎo)航方案。