網頁導航欄設計模式

在網頁設計中有一些通用的交互設計模式。網站導航各類各樣的通用和你們熟知的設計模式，能夠用來做爲爲網站建立有效地信息架構的基礎。這篇指南涵蓋了流行的站點導航設計模式。對於每一種網站導航欄設計模式，咱們將討論它的通常特徵，它的缺點，以及何時使用它最好。

頂部水平欄導航

頂部水平欄導航是當前兩種最流行地網站導航菜單設計模式之一。它最經常使用於網站的主導航菜單，且最一般地放在網站全部頁面的網站頭的直接上方或直接下方。

頂部水平欄導航設計模式有時伴隨着下拉菜單，當鼠標移到某個項上時彈出它下面的二級子導航項。

頂部水平欄導航通常特徵

導航項是文字連接，按鈕形狀，或者選項卡形狀

水平欄導航一般直接放在鄰近網站logo的地方

它一般位於摺疊之上

頂部水平欄導航的缺點

頂部水平欄導航最大的缺點就是它限制了你在不採用子級導航的狀況下能夠包含的連接數。對於只有幾個頁面或類別的網站來講，這不是什麼問題，可是對於有很是複雜的信息結構且有不少模塊組成的網站來講，若是沒有子導航的話，這並非一個完美的主導航菜單選擇。

什麼時候使用頂部水平欄導航

頂部水平欄導航對於只須要在主要導航中顯示5-12個導航項的網站來講是很是好的。這也是單列布局的網站的主導航的惟一選擇(除了一般用於二級導航系統的底部導航)。當它與下拉子導航結合時，這種設計模式能夠支持更多的連接。

豎直/側邊欄導航

側邊欄導航的導航項被排列在一個單列，一項在一項的上面。它常常在左上角的列上，在主內容區以前——根據一份針對從左到右習慣讀者的導航模式的可用性研究，左邊的豎直導航欄比右邊的豎直導航表現要好。

側邊欄導航設計模式隨處可見，幾乎存在於各種網站上。這有多是由於豎直導航是當前最通用的模式之一，能夠適應數量不少的連接。

它能夠與子導航菜單一塊兒使用，也能夠單獨使用。它很容易用於包含不少連接的網站主導航。側邊欄導航能夠集成在幾乎任何種類的多列布局中。

側邊欄導航的通常特徵

文字連接做爲導航項很廣泛(包含或不包含圖標)

不多使用選項卡(除了堆疊標籤導航模式)

豎直導航菜單常常含有不少連接

豎直/側邊欄導航缺點

由於能夠處理不少連接，當豎直菜單太長時有時可能將用戶淹沒。嘗試限制你引入的連接數，取而代之可使用飛出式子導航菜單以提供網站的更多信息。同時考慮將連接分放在直觀的類別當中，以幫助用戶很快地找到感興趣的連接。

什麼時候使用豎直/側邊欄導航

豎直導航適用於幾乎全部種類的網站，尤爲適合有一堆主導航連接的網站。

選項卡導航

選項卡導航能夠隨意設計成任何你想要的樣式，從逼真的，有手感的標籤到圓滑的標籤，以及簡單地方邊的標籤等。它存在於各類各樣的網站裏，而且能夠歸入任何視覺效果。

選項卡比起其它類別的導航有一個明顯的優點：它們對用戶有積極的心理效應。人們一般把導航與選項卡關聯在一塊兒，由於他們曾經在筆記本或資料夾裏看見選項卡，而且把它們與切換到一個新的章節聯繫在一塊兒。這個真實世界的暗喻使得選項卡導航很是直觀。

選項卡導航的通常特徵

樣子和功能都相似真實世界的選項卡(就像在文件夾，筆記本等中看到的同樣)

通常是水平方向的但也有時是豎直的(堆疊標籤)

選項卡導航的缺點

選項卡最大的缺點是它比簡單的頂部水平欄更難設計。它們一般須要更多的標籤，圖片資源以及CSS，具體根據標籤的視覺複雜度而定。選項卡的另外一個缺點是它們也不太適用於連接不少的狀況，除非它們豎直地排列(即便這樣，若是太多的話它們仍是看起來很不合適)。

什麼時候使用選項卡導航

選項卡也適合幾乎任何主導航，雖然它們在能夠顯示的連接上有限制，尤爲在水平方向的狀況下。將它們用於擁有不一樣風格子導航的主導航的較大型網站是個不錯的選項。

麪包屑導航

麪包屑的名字來源於Hansel和Gretel的故事，他們在沿途播撒麪包屑以用來找到加家的路，這能夠告訴你在網站的當前位置。這是二級導航的一種形式，輔助網站的主導航系統。

麪包屑對於多級別具備層次結構的網站特別有用。它們能夠幫助訪客瞭解到當前本身在整站中所處的位置。若是訪客但願返回到某一級，它們只須要點擊相應的麪包屑導航項。

麪包屑的通常特徵

通常格式是水平文字連接列表，一般在兩項中間伴隨着左箭頭以指示層及關係

從不用於主導航

麪包屑導航的缺點

麪包屑不適於淺導航網站。當網站沒有清晰的層次和分類的時候，使用它也可能產生混亂。什麼時候使用麪包屑導航。麪包屑導航最適用於具備清晰章節和多層次分類內容的網站。沒有明顯的章節，使用麪包屑是得不償失。

標籤導航

標籤常常被用於博客和新聞網站。它們經常被組織成一個標籤雲，導航項可能按字母順序排列(一般用不一樣大小的連接來表示這個標籤下有多少內容)，或者按流行程度排列。

標籤是出色的二級導航而不多用於主導航。他能夠提升網站的可發現性和探索性。標籤雲一般出如今邊欄或底部。若是沒有標籤雲，標籤則一般包括於文章頂部或底部的元信息中，這種設計讓用戶更容易找到類似的內容。

標籤導航的通常特徵

標籤是之內容爲中心的網(博客和新聞站)站的通常特性

僅有文字連接

當處於標籤雲中時，連接一般大小各異以標識流行度

常常被包含在文章的元信息中

標籤導航的缺點

人們一般把標籤和博客和新聞網站聯繫在一塊兒(有時候也多是電子商務網站)，因此若是你的網站與這些網站有本質的不一樣，它可能對你就沒有幫助。標籤也會給內容創做者帶來必定量的工做量，由於爲了使標籤系統有效，每篇文章都須要打上準確的標籤。

什麼時候使用標籤

若是你擁有不少主題，爲內容打上關鍵詞標記是頗有利的。若是你僅有幾個頁面(可能你的網站是一個公司網站)，可能就不須要給內容打標籤了。是否結合標籤雲或只是將標籤包含在元信息中得取決於你的設計。

搜索導航

近些年來網站檢索已成爲流行的導航方式。它很是適合擁有無限內容的網站(像維基百科)，這種網站很難使用其它的導航。搜索也常見於博客和新聞網站，以及電子商務網站。

搜索對於清楚知道本身想要找什麼的訪客很是有用。可是有了搜索並不表明着就能夠忽略好的信息結構。它對於保證那些不徹底知道本身要找什麼或是想發現潛在的感興趣內容的瀏覽者能夠查找到內容依然很是重要。

搜索導航的通常特徵

搜索欄一般位於頭部或在側邊欄靠近頂部的地方

搜索欄常常會出如今頁面佈局中的輔助部分，如底部

搜索導航的缺點

搜索最大的缺點是並不是全部搜索引擎都是平等的。取決於你選擇的方案，你網站的搜索特性可能不能返回精確的結果或者缺失一些東西如文章元數據。搜索導航，對於大部分網站來講，應該做爲次要的導航形式。搜索是用戶在沒法被導航到他們想找的東西的地方時的可靠選擇。

什麼時候使用搜索導航

對於具備無數頁面而且有複雜信息結構的網站來講，確定必須引入搜索功能。沒有它用戶可能很難經過遍歷連接和多層的導航來找到他們想要的信息。搜索對於電子商務網站也很是重要，而關鍵的一點是電子商務網站的搜索結果要根據網站存貨的多少具備相應的篩選和排序功能。

出式菜單和下拉菜單導航

出式菜單(與豎直/側邊欄導航一塊兒使用)和下拉菜單(通常與頂部水平欄導航一塊兒使用)是構建健壯的導航系統的好方法。它使得你的網站總體上看起來很整潔，並且使得深層章節很容易被訪問。

他們一般結合水平，豎直或是選項卡導航一塊兒使用，做爲網站主導航系統的一部分。

出式菜單和下拉菜單導航的通常特徵

用於多級信息結構

使用JavaScript和CSS來隱藏和顯示菜單

顯示在菜單中的連接是主菜單項的子項

菜單一般在鼠標懸停在上面時被激活，而有時候也多是鼠標點擊時激活

出式菜單和下拉菜單導航缺點

除非你在主導航連接邊上放置一些標識(一般是箭頭圖標)，否則訪客可能不知道那有包含子導航項的下拉或出式菜單，所以使這些標識很明顯是很是重要的。同時出式菜單和下拉可能使得導航在移動設備上很是難用，因此要確保你的移動樣式表處理了這種狀況。

什麼時候使用出式菜單和下拉菜單導航

若是你想在視覺上隱藏很大的或很複雜的導航層次，出式菜單和下拉是很好的選擇，由於它讓用戶決定他們想看見什麼，以及何時能夠看見它們。它們能夠用來在不弄亂網頁的狀況下按需顯示很大數量的連接。它們還能夠用來顯示子頁面和局部導航，而且不須要用戶首先點擊打開新的頁面。

分面/引導導航

分面/引導導航(也叫作分面檢索或引導檢索)最多見於電子商務網站。基本上來講引導導航給你提供額外的內容屬性篩選。假設你在瀏覽一個新的LCD顯示器，引導導航可能會列出大小，價格，品牌等選頂。基於這些內容屬性，你能夠導航到匹配你的條件的項。

引導導航在擁有巨大數量貨物的大型電子商務網站中是很是寶貴的。用戶經過直接搜索一般很難找到他們想要的東西，而且增長了用戶漏掉一個產品的或能性。例如他們可能搜索一個灰褐色的產品，但你可能將它標記了灰色或褐色，雖然它可能就是用戶想要的東西。

分面/引導導航的通常特徵

最多見於電子商務網站

一般讓用戶對不一樣的特徵作屢次篩選

幾乎老是使用文字連接，分解在不一樣的類別下或是下拉菜單下

經常與麪包屑導航一塊兒使用

分面/引導導航的缺點

引導導航可能會引發一些用戶的迷惑。另外不能保證用戶會在你預先定義的類別中查找。

什麼時候使用分面/引導導航

分面導航對於大型電子商務網站很是有用。它方便了用戶購物，提高了購物體驗，並更容易找到它們真正想要的東西。它也能夠用於其它目錄風格的網站。

頁腳導航

頁腳導航一般用於次要導航，而且可能包含了主導航中沒有的連接，或是包含簡化的網站地圖連接。

訪客一般在主導航找不到他們要找的東西時會去查看頁腳導航。

頁腳導航的通常特徵

頁腳導航一般用於放置其它地方都沒有的導航項

一般使用文字連接，偶爾帶有圖標

一般連接指向不是那麼關鍵的頁面

頁腳導航的缺點

若是你的頁面很長，沒有人願意僅僅爲了導航而滾動到頁面底部。對於較長的頁面，頁腳導航最好做爲重複連接和簡要的網站地圖的地方。它不適合做爲主導般形式。

什麼時候使用頁腳導航

\絕大多數網站都有這樣那樣的頁腳導航，即便它只是重複其它地方的連接。考慮什麼放在那有用，以及你的訪客可能最想找什麼。

結論

大多數網站使用不僅一種導航設計模式。例如一個網站可能會用頂部水平欄導航做爲主導航系統，並使用豎直/側邊欄導航系統來輔助它，同時還用頁腳導航來做冗餘，增長頁面的便利度。當選擇你的導航系統基於的導航設計模式時，你必須選擇支持你的信息結構以及網站特性的方案。導航是網站設計的重要部分，它的效果必須有堅實的基礎設計

 

轉自：http://www.wzsky.net/html/Website/Experience/111312.html