網頁設計-導航條

1、頂部水平欄導航頂部水平欄導航是當前兩種最流行地網站導航菜單設計模式之一。它最常用于網站的主導航菜單，且最通常地放在網站所有頁面的網站頭的直接上方或直接下方。頂部水平欄導航設計模式有時伴隨著下拉菜單，當鼠標移到某個項上時彈出它下面的二級子導航項。頂部水平欄導航一般特征導航項是文字鏈接，按鈕形狀，或者選項卡形狀水平欄導航通常直接放在鄰近網站logo的地方它通常位于折疊之上頂部水平欄導航的缺點頂部水平欄導航最大的缺點就是它限制了你在不采用子級導航的情況下可以包含的鏈接數。對于只有幾個頁面或類別的網站來說，這不是什么問題，但是對于有非常復雜的信息結構且有很多模塊組成的網站來說，如果沒有子導航的話，這并

2、不是一個完美的主導航菜單選擇。何時使用頂部水平欄導航頂部水平欄導航對于只需要在主要導航中顯示5-12個導航項的網站來說是非常好的。這也是單列布局的網站的主導航的唯一選擇(除了通常用于二級導航系統(tǒng)的底部導航。當它與下拉子導航結合時，這種設計模式可以支持更多的鏈接。豎直/側邊欄導航側邊欄導航的導航項被排列在一個單列，一項在一項的上面。它經常在左上角的列上，在主內容區(qū)之前根據一份針對從左到右習慣讀者的導航模式的可用性研究，左邊的豎直導航欄比右邊的豎直導航表現要好。側邊欄導航設計模式隨處可見，幾乎存在于各類網站上。這有可能是因為豎直導航是當前最通用的模式之一，可以適應數量很多的鏈接。它可以與子導航菜單

3、一起使用，也可以單獨使用。它很容易用于包含很多鏈接的網站主導航。側邊欄導航可以集成在幾乎任何種類的多列布局中。側邊欄導航的一般特征文字鏈接作為導航項很普遍(包含或不包含圖標很少使用選項卡(除了堆疊標簽導航模式豎直導航菜單經常含有很多鏈接豎直/側邊欄導航缺點因為可以處理很多鏈接，當豎直菜單太長時有時可能將用戶淹沒。嘗試限制你引入的鏈接數，取而代之可以使用飛出式子導航菜單以提供網站的更多信息。同時考慮將鏈接分放在直觀的類別當中，以幫助用戶很快地找到感興趣的鏈接。何時使用豎直/側邊欄導航豎直導航適用于幾乎所有種類的網站，尤其適合有一堆主導航鏈接的網站。選項卡導航選項卡導航可以隨意設計成任何你想要的樣

4、式，從逼真的，有手感的標簽到圓滑的標簽，以及簡單地方邊的標簽等。它存在于各種各樣的網站里，并且可以納入任何視覺效果。選項卡比起其它類別的導航有一個明顯的優(yōu)勢：它們對用戶有積極的心理效應。人們通常把導航與選項卡關聯在一起，因為他們曾經在筆記本或資料夾里看見選項卡，并且把它們與切換到一個新的章節(jié)聯系在一起。這個真實世界的暗喻使得選項卡導航非常直觀。選項卡導航的一般特征樣子和功能都類似真實世界的選項卡(就像在文件夾，筆記本等中看到的一樣一般是水平方向的但也有時是豎直的(堆疊標簽選項卡導航的缺點選項卡最大的缺點是它比簡單的頂部水平欄更難設計。它們通常需要更多的標簽，圖片資源以及CSS，具體根據標簽的視

5、覺復雜度而定。選項卡的另一個缺點是它們也不太適用于鏈接很多的情況，除非它們豎直地排列(即使這樣，如果太多的話它們還是看起來很不合適。何時使用選項卡導航選項卡也適合幾乎任何主導航，雖然它們在可以顯示的鏈接上有限制，尤其在水平方向的情況下。將它們用于擁有不同風格子導航的主導航的較大型網站是個不錯的選項。面包屑導航面包屑的名字來源于Hansel和Gretel的故事，他們在沿途播撒面包屑以用來找到加家的路，這可以告訴你在網站的當前位置。這是二級導航的一種形式，輔助網站的主導航系統(tǒng)。面包屑對于多級別具有層次結構的網站特別有用。它們可以幫助訪客了解到當前自己在整站中所處的位置。如果訪客希望返回到某一級，它

6、們只需要點擊相應的面包屑導航項。面包屑的一般特征一般格式是水平文字鏈接列表，通常在兩項中間伴隨著左箭頭以指示層及關系從不用于主導航面包屑導航的缺點面包屑不適于淺導航網站。當網站沒有清晰的層次和分類的時候，使用它也可能產生混亂。何時使用面包屑導航。面包屑導航最適用于具有清晰章節(jié)和多層次分類內容的網站。沒有明顯的章節(jié)，使用面包屑是得不償失。標簽導航標簽經常被用于博客和新聞網站。它們常常被組織成一個標簽云，導航項可能按字母順序排列(通常用不同大小的鏈接來表示這個標簽下有多少內容，或者按流行程度排列。標簽是出色的二級導航而很少用于主導航。他可以提高網站的可發(fā)現性和探索性。標簽云通常出現在邊欄或底部。如

7、果沒有標簽云，標簽則通常包括于文章頂部或底部的元信息中，這種設計讓用戶更容易找到相似的內容。標簽導航的一般特征標簽是以內容為中心的網(博客和新聞站站的一般特性僅有文字鏈接當處于標簽云中時，鏈接通常大小各異以標識流行度經常被包含在文章的元信息中標簽導航的缺點人們通常把標簽和博客和新聞網站聯系在一起(有時候也可能是電子商務網站，所以如果你的網站與這些網站有本質的不同，它可能對你就沒有幫助。標簽也會給內容創(chuàng)作者帶來一定量的工作量，因為為了使標簽系統(tǒng)有效，每篇文章都需要打上準確的標簽。何時使用標簽如果你擁有很多主題，為內容打上關鍵詞標記是很有利的。如果你僅有幾個頁面(可能你的網站是一個公司網站，可能就

8、不需要給內容打標簽了。是否結合標簽云或只是將標簽包含在元信息中得取決于你的設計。搜索導航近些年來網站檢索已成為流行的導航方式。它非常適合擁有無限內容的網站(像維基百科，這種網站很難使用其它的導航。搜索也常見于博客和新聞網站，以及電子商務網站。搜索對于清楚知道自己想要找什么的訪客非常有用。但是有了搜索并不代表著就可以忽略好的信息結構。它對于保證那些不完全知道自己要找什么或是想發(fā)現潛在的感興趣內容的瀏覽者可以查找到內容依然非常重要。搜索導航的一般特征搜索欄通常位于頭部或在側邊欄靠近頂部的地方搜索欄經常會出現在頁面布局中的輔助部分，如底部搜索導航的缺點搜索最大的缺點是并非所有搜索引擎都是平等的。取決

9、于你選擇的方案，你網站的搜索特性可能不能返回精確的結果或者缺失一些東西如文章元數據。搜索導航，對于大部分網站來說，應該作為次要的導航形式。搜索是用戶在無法被導航到他們想找的東西的地方時的可靠選擇。何時使用搜索導航對于具有無數頁面并且有復雜信息結構的網站來說，肯定必須引入搜索功能。沒有它用戶可能很難通過遍歷鏈接和多層的導航來找到他們想要的信息。搜索對于電子商務網站也非常重要，而關鍵的一點是電子商務網站的搜索結果要根據網站存貨的多少具有相應的篩選和排序功能。出式菜單和下拉菜單導航出式菜單(與豎直/側邊欄導航一起使用和下拉菜單(一般與頂部水平欄導航一起使用是構建健壯的導航系統(tǒng)的好方法。它使得你的網站

10、整體上看起來很整潔，而且使得深層章節(jié)很容易被訪問。他們通常結合水平，豎直或是選項卡導航一起使用，作為網站主導航系統(tǒng)的一部分。出式菜單和下拉菜單導航的一般特征用于多級信息結構使用JavaScript和CSS來隱藏和顯示菜單顯示在菜單中的鏈接是主菜單項的子項菜單通常在鼠標懸停在上面時被激活，而有時候也可能是鼠標點擊時激活出式菜單和下拉菜單導航缺點除非你在主導航鏈接邊上放置一些標識(通常是箭頭圖標，不然訪客可能不知道那有包含子導航項的下拉或出式菜單，因此使這些標識很明顯是非常重要的。同時出式菜單和下拉可能使得導航在移動設備上非常難用，所以要確保你的移動樣式表處理了這種情況。何時使用出式菜單和下拉菜單

11、導航如果你想在視覺上隱藏很大的或很復雜的導航層次，出式菜單和下拉是很好的選擇，因為它讓用戶決定他們想看見什么，以及什么時候可以看見它們。它們可以用來在不弄亂網頁的情況下按需顯示很大數量的鏈接。它們還可以用來顯示子頁面和局部導航，并且不需要用戶首先點擊打開新的頁面。分面/引導導航分面/引導導航(也叫做分面檢索或引導檢索最常見于電子商務網站。基本上來說引導導航給你提供額外的內容屬性篩選。假設你在瀏覽一個新的LCD顯示器，引導導航可能會列出大小，價格，品牌等選頂?；谶@些內容屬性，你可以導航到匹配你的條件的項。引導導航在擁有巨大數量貨物的大型電子商務網站中是非常寶貴的。用戶通過直接搜索通常很難找到他

12、們想要的東西，并且增加了用戶漏掉一個產品的或能性。例如他們可能搜索一個灰褐色的產品，但你可能將它標記了灰色或褐色，雖然它可能就是用戶想要的東西。分面/引導導航的一般特征最常見于電子商務網站通常讓用戶對不同的特征做多次篩選幾乎總是使用文字鏈接，分解在不同的類別下或是下拉菜單下常常與面包屑導航一起使用分面/引導導航的缺點引導導航可能會引起一些用戶的迷惑。另外不能保證用戶會在你預先定義的類別中查找。何時使用分面/引導導航分面導航對于大型電子商務網站非常有用。它方便了用戶購物，提升了購物體驗，并更容易找到它們真正想要的東西。它也可以用于其它目錄風格的網站。頁腳導航頁腳導航通常用于次要導航，并且可能包含了主導航中沒有的鏈接，或是包含簡化的網站地圖鏈接。訪客通常在主導航找不到他們要找的東西時會去查看頁腳導航。頁腳導航的一般特征頁腳導航通常用于放置其它地方都沒有的導航項通常使用文字鏈接，偶爾帶有圖標通常鏈接指向不是那么關鍵的頁面頁腳導航的缺點如果你的頁面很長，沒有人愿意僅僅為了導航而滾動到頁面底部。對于較長的頁面，頁腳導航最好作為重復鏈接和簡要的網站地圖的地方。它不適合作為主導般形式。何時使用頁腳導航絕大多數網站都有這樣那樣