當前位置:主頁 > 網頁教程 > 設計制作綜合 > 內容歡迎大家投稿

網頁導航欄設計模式

時間:2011-03-17 20:28來源:未知 作者:大寶庫 點擊:讀取中
閱讀工具:字體:

在網頁設計中有一些通用的交互設計模式。網站導航各種各樣的通用和大家熟知的設計模式,可以用來作為為網站創建有效地信息架構的基礎。這篇指南涵蓋了流行的站點導航設計模式。對于每一種網站導航欄設計模式,我們將討論它的一般特征,它的缺點,以及什么時候使用它最好。

網頁導航欄設計模式,PS教程,思緣教程網

頂部水平欄導航

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

網頁導航欄設計模式,PS教程,思緣教程網

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

頂部水平欄導航一般特征

導航項是文字鏈接,按鈕形狀,或者選項卡形狀

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

它通常位于折疊之上

網頁導航欄設計模式,PS教程,思緣教程網

頂部水平欄導航的缺點

頂部水平欄導航最大的缺點就是它限制了你在不采用子級導航的情況下可以包含的鏈接數。對于只有幾個頁面或類別的網站來說,這不是什么問題,但是對于有非常復雜的信息結構且有很多模塊組成的網站來說,如果沒有子導航的話,這并不是一個完美的主導航菜單選擇。

何時使用頂部水平欄導航

頂部水平欄導航對于只需要在主要導航中顯示5-12個導航項的網站來說是非常好的。這也是單列布局的網站的主導航的唯一選擇(除了通常用于二級導航系統的底部導航)。當它與下拉子導航結合時,這種設計模式可以支持更多的鏈接。

豎直/側邊欄導航

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

側邊欄導航設計模式隨處可見,幾乎存在于各類網站上。這有可能是因為豎直導航是當前最通用的模式之一,可以適應數量很多的鏈接。

網頁導航欄設計模式,PS教程,思緣教程網

它可以與子導航菜單一起使用,也可以單獨使用。它很容易用于包含很多鏈接的網站主導航。側邊欄導航可以集成在幾乎任何種類的多列布局中。

側邊欄導航的一般特征

文字鏈接作為導航項很普遍(包含或不包含圖標)

很少使用選項卡(除了堆疊標簽導航模式)

豎直導航菜單經常含有很多鏈接

網頁導航欄設計模式,PS教程,思緣教程網

豎直/側邊欄導航缺點

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

何時使用豎直/側邊欄導航

豎直導航適用于幾乎所有種類的網站,尤其適合有一堆主導航鏈接的網站。

選項卡導航

選項卡導航可以隨意設計成任何你想要的樣式,從逼真的,有手感的標簽到圓滑的標簽,以及簡單地方邊的標簽等。它存在于各種各樣的網站里,并且可以納入任何視覺效果。

網頁導航欄設計模式,PS教程,思緣教程網

選項卡比起其它類別的導航有一個明顯的優勢:它們對用戶有積極的心理效應。人們通常把導航與選項卡關聯在一起,因為他們曾經在筆記本或資料夾里看見選項卡,并且把它們與切換到一個新的章節聯系在一起。這個真實世界的暗喻使得選項卡導航非常直觀。

選項卡導航的一般特征

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

一般是水平方向的但也有時是豎直的(堆疊標簽)

網頁導航欄設計模式,PS教程,思緣教程網

選項卡導航的缺點

選項卡最大的缺點是它比簡單的頂部水平欄更難設計。它們通常需要更多的標簽,圖片資源以及CSS,具體根據標簽的視覺復雜度而定。選項卡的另一個缺點是它們也不太適用于鏈接很多的情況,除非它們豎直地排列(即使這樣,如果太多的話它們還是看起來很不合適)。

何時使用選項卡導航

選項卡也適合幾乎任何主導航,雖然它們在可以顯示的鏈接上有限制,尤其在水平方向的情況下。將它們用于擁有不同風格子導航的主導航的較大型網站是個不錯的選項。

(責任編輯:大寶庫)



------分隔線----------------------------
推薦內容
贊助商鏈接
贊助商鏈接


偷拍尿尿百样