面包屑導航設計
- 發(fā)布時間: 2015-04-18 13:10:09
- 瀏覽次數(shù): 9283
面包屑導航實施的誤區(qū)
使用面包屑導航是一個相當簡單的事情，讓我們一起來看看一些常見的錯誤以避免今后使用中再次發(fā)生。
1、當你不需要使用面包屑
實施面包屑的一個常見的錯誤是：使用它們的時候沒有意義。
在上面的例子，SLICETHEPIE 網(wǎng)站讓用戶有太多的導航選項。 （1）（2）面包屑導航（3）輔助導航主導航，非常接近。在此應用程序的痕跡線索，因為坐在下方的較低級別的頁面的二級導航，沒有使用戶更加方便。此外，在面包屑導航（"音樂"）第二級鏈接上點擊帶您回到第一個選項卡（"聽"），錯誤地認為，第一個選項卡上一個更高的水平比其他兩個是（"搜索"和"成名的藝術家 "）。
2、作為主要的導航使用面包屑
如前所述，使用面包屑導航是作為一個可選的協(xié)助方式。
范例
在上面的例子，MEFEEDIA不提供一個觀看影片的主導航菜單。雖然有文本頁腳部分中的鏈接導航，但沒有導航菜單在頁面的內(nèi)容部分，使得它難以瀏覽到網(wǎng)站的其他部分。
范例
如果直接到達一個視頻網(wǎng)頁上 – 也就是說，通過谷歌搜索結果，例如 – 唯一的導航選項，你可能有痕跡線索?；蛘呷绻阋呀?jīng)在瀏覽一個網(wǎng)站的網(wǎng)頁，并達到一個頁面不顯示主導航菜單，你會點擊你的瀏覽器"返回"按鈕，進入主菜單。
3、當頁面有多個類別的使用面包屑
面包屑導航有線性結構，因此，如果您的網(wǎng)頁不能被整齊的類別劃分，將很難使用它們。決定是否使用面包屑，在很大程度上取決于你如何設計你的網(wǎng)站層級。當較低級別的頁面（或可放）在多個父目錄，面包屑路徑無效的、不準確，會給用戶造成混淆。
面包屑導航設計注意事項
當設計一個面包屑導航時，記住幾件事情。讓我們看看一些可能出現(xiàn)的問題：
1、什么應該使用單獨的鏈接項目？
普遍接受的和最知名的分離痕跡徑路勁超鏈接的象征符號（》）"大于"。通常情況下，》符號是用來表示層級結構，在父目錄的格式》子目類。
范例
使用其他符號，箭頭指向正確的，正確的角度引號（"）和斜線（/）。
范例
不同符號的選擇取決于該網(wǎng)站的美學設計和使用的痕跡。例如，面包屑過于醒目，干擾到了主導航，反而減弱了主導航
2、應該有多大？
不讓你的面包屑主宰頁面。面包屑導航的功能，只是作為一個用戶（方便）的協(xié)助，其大小應傳達給用戶。因此，比起主導航菜單至少應較小或者不太突出。
范例
您的面包屑導航設計大小時要遵循的一個好的經(jīng)驗法則是：它不應該抓住用戶的注意力。
3、應該在哪里設面包屑？
面包屑路徑通常顯示在頁面的上半部分，而在主導航菜單的下面。
面包屑展示
現(xiàn)在，我們已經(jīng)討論了面包屑是什么，什么時候，什么地方使用，為什么和面包屑路徑展示，我們應該看看一些活生生的實例。在下面的章節(jié)中，你會發(fā)現(xiàn)偉大的網(wǎng)站，使用路徑創(chuàng)新的幾個例子。
1、經(jīng)典頁面的面包屑
2、用其他符號代替">"
TechRadar UK 和 BP 使用指向右邊的三角形。
PSDTUTS和 Martique使用其他層級結構分隔的符號。
Mouse to Minx使用一個直角引號表示頁面層級結構。
Jakob Nielsen's Alertbox使用右箭頭。
3、超越了簡單的文字鏈接
面包屑設計目前的趨勢來看，基本上說，"面包屑沒有簡單的"。在這些設計中，你會看到精美風格與整體設計以及集成的面包屑。
4、為多步過程的面包屑
Statement Tracker使用一個面包屑的痕跡，表明在注冊帳戶所涉及的步驟，以及一個進度指示器。
5、分導航與面包屑
這里有一些例子的鏈接，點擊時或劃過的面包屑路徑，打開一個子導航面板中列出的附加屬性或地點。
劃過分導航菜單時，會出現(xiàn)一個面包屑鏈接懸停。
Profoto有獨特的面包屑導航：面包屑鏈接，打開它下面的區(qū)域，為用戶提供了額外的屬性來選擇。
Cranfield University已經(jīng)出了類似的路徑方案，具有雙重功能：作為一個為用戶的位置指標，作為一個強大的和互動的輔助導航。
Lonely Planet也有一個彈出的面包屑導航，您可以在其中更改屬性。
面包屑鏈接點擊該項目的頁面，同時點擊向下箭頭，打開額外的選項。
MSDN的面包屑導航。 打開一個可滾動的子導航，列表的用戶將鼠標懸停在鏈接。
6、互動式面包屑
Delicious.com讓您刪除項目中的關鍵字標簽的痕跡線索，以幫助您快速找到書簽。
范例
7、實驗例子
Booreiland使用它的主菜單面包屑式導航，讓游客迅速了解他們目前正在觀看。
