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

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

什么是面包屑？

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

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

你通常可以在有大量的按一定等級(jí)組織的內(nèi)容的網(wǎng)站上找到面包屑。你也可以在有多于一個(gè)步驟的網(wǎng)絡(luò)應(yīng)用上見到它們，這個(gè)時(shí)候他們的功能類似于進(jìn)度條。最簡化的方式是，面包屑就是水平排列的被大于號(hào)" > " 隔開的文本鏈接；這個(gè)符號(hào)指示該頁面相對(duì)于鏈接到它的頁面的深度（級(jí)別）。

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

什么時(shí)候使用面包屑？

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

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

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

面包屑的種類

面包屑主要分為三類。

基于位置

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

基于特性

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

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

#p#

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

基于路徑

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

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

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

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

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

不用常常占用屏幕空間
因?yàn)樗鼈兺ǔＪ撬脚帕幸约昂唵蔚臉邮剑姘悸窂讲粫?huì)占用頁面太多的空間。這樣的好處是，從內(nèi)容過載方面來說，他們幾乎沒有任何負(fù)面影響。

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

面包屑路徑的錯(cuò)誤使用

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

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

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

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

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

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

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

#p#

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

面包屑導(dǎo)航設(shè)計(jì)注意事項(xiàng)

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

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

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

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

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

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

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

#p#

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

面包屑展示

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

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

TypePad Design Assistant

NASA

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

Marchand de Trucs

Bridge 55

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

#p#

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

2. 用其他符號(hào)取代“>”

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

PSDTUTS 和 Martique 使用反斜杠。

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

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

Target 使用冒號(hào)來分割。

#p#

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

3. 超越簡單的文字鏈接

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

Grooveshark

Yahoo! TV

IDEO

Apple Store

Coolspotters

Devlounge

LottaNZB

Pixelpoodle

guardian.co.uk

#p#

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

4. 多步驟處理面包屑

Statement Tracker 使用一個(gè)面包屑來指示注冊帳號(hào)的步驟，就像一個(gè)進(jìn)程指示器一樣。

Flickr 使用面包屑來指示Flickr之旅中的部分?jǐn)?shù)量。

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

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

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

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

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

#p#

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

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

點(diǎn)擊一個(gè)面包屑鏈接帶你到相關(guān)頁面，而點(diǎn)擊向下的箭頭就會(huì)打開而外的選項(xiàng)。

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

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

6. 交互式面包屑

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

7. 實(shí)驗(yàn)性示例

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

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

最新評(píng)論