網頁設計中的面包屑路徑：樣例及最佳實踐
翻譯：cocowool http://www.360doc.com/mailto:cocowool@gmail.com
原文：Jacob Gube
在我們的站點中都有很多的頁面，利用面包屑路徑能夠極大的增強用戶尋找路徑的能力。從易用性上來講，面包屑路徑減少了用戶回到更高級目錄時所需要的操作，并且增強了網站各個單元的可尋性。面包屑路徑還可以提供有效地視覺幫助來知道用戶了解自己目前所處與網站中的等級，讓他們能夠更容易的找到他們的開始頁。
什么是面包屑路徑？
Breadcrumb (Breadcrumb trail)，中文成為“面包屑路徑”是應用于網站或者網絡程序上的，幫助用戶找到自身位置的二級導航標記。他起源于 Hansel and Gretel 的傳說，孩子們為了能夠找到回家的路，將面包屑撒在路上，并順著找到了家。和傳說中一致，面包屑路徑在現實中也幫助我們找到自己的起始頁。
Delicious的路徑。
在存在大量的分級內容的網站上我們經常能夠看到面包屑路徑的使用，在一些引導性的網絡應用上也能夠見到，他們的作用就像一個進度條，指引著用戶當前的進度。面包屑路徑最簡單的形式是水平排列的文字鏈接，之間用大于號隔開，每個鏈接表示與這個級別相關的頁面鏈接。
何時使用面包屑路徑？
大型網站，特別是那種頁面按照層級結構組織的網站比較適合使用面包屑路徑。一個最好的例子就是商務網站，擁有大量的商品分門別類的存放著。
在那種沒有邏輯的層級關系或者分組的單級網站上不適合使用面包屑路徑。一個決定是否使用面包屑路徑的很好的辦法是規劃一個站點地圖或者表示網站導航結構的圖表，然后再來決定面包屑路徑是否能夠改善用戶在欄目內和不同欄目間的導航體驗。
面包屑路徑往往是一個網站的額外的特點，他不應該取代菜單導航，而且往往應該作為菜單導航的一種輔助和補充。它是一種次級的、很舒服的特性，幫助用戶確定自己的位置，并且作為菜單導航的一個有效補充。
面包屑路徑的類型：
面包屑路徑主要有三種形式。
基于位置的面包屑：
位置面包屑是靜態的，顯示了當前頁面在網站中所處的等級。鏈接中的每一項都能夠導向一個更高一級的頁面，這種形勢特別適合有很多級別的網站（大于2級）；
基于屬性的面包屑：
屬性面包屑給出了當前頁面所屬類別的信息，下圖的面包屑更接近與一個混合形式的面包屑，路徑中包含了對結果的篩選條件描述；
路徑：路徑形式的面包屑是動態的路徑，經常用來指引用戶進行某種操作，比如“注冊”流程，他動態的顯示用戶完成注冊所需要的過程；
使用面包屑路徑的好處
方便用戶：面包屑路徑的目的就是為用戶提供一種輔助的導航方式，在具有多層級的網站上瀏覽時，面包屑路徑可以幫助用戶更容易的找到想要的位置；
減少返回高級別頁面的點擊次數：用戶不需要通過多次點擊“返回”來到自己之前的位置，而只需要在面包屑路徑上點擊一次；
不會占用過多的空間（hog screen space）：面包屑路徑多數采用普通的水平排布的文字鏈接，所以不會占用過多的頁面空間，恰當的運用，能夠帶來足夠的好處。
減少跳出率（bounce rates）：面包屑路徑能夠誘初次訪問頁面的用戶在完成初始頁的瀏覽后瀏覽其他頁面。例如，通過搜索引擎來到的用戶，看完文章后，很容易點擊上一級頁面的導航來了解更多的相關內容，這樣就減少了站點整體的跳出率。
使用中的錯誤
在不必要的地方使用：
上圖的導航就會讓用戶感到迷惑，太多的導航了而且排布的非常集中，有點重復；
用面包屑路徑作為主導航：
面包屑路徑只是一種導航的輔助手段，任何時候都不應該取代導航菜單。上圖中就是一個例子，由于只使用了面包屑路徑，當用戶想跳轉到站點的其他欄目時，很難容易的到達。
當頁面含有多重欄目時，使用面包屑路徑：面包屑路徑具有線性的結構，如果你的頁面不能夠很清楚的分類，那就很難用面包屑路徑來表示，這其實是在網站設計初期，要為站點制定明確的組織結構。
在設計中應該考慮的問題
使用什么符號來分隔？最常用的分隔符是大于號（>），表示“父目錄 > 子目錄”，其他的符號還包括：箭頭、右引號(>>)、斜線(/)。
應該設計成多大？
面包屑路徑只是一個輔助的導航工具，所以誰都不希望他占據巨大的頁面空間，他應該盡量的小，但是要能夠方便訪問，向用戶傳達出這種輔助的設計意圖。一個原則就是，用戶瀏覽頁面時，不能第一眼就被面包屑路徑所吸引。
應該放在什么地方？面包屑路徑通常放置在頁面的中上部，如果是水平導航，一般放在主菜單的下邊。
