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