第二章 導航欄原型制作

1.導航欄

在網頁設計中有一些通用的交互設計模式，網站導航各種各樣的通用的設計模式，可以用來為網站創建有效的信息架構基礎。本章內容涵蓋了流行的站點導航設計模式。對于每一種網站導航欄設計模式，我們將討論它的一般特征、不足，以及什么時候使用它最好。

1.1 頂部水平欄導航

頂部水平欄導航是當前兩種最流行的網站導航菜單設計模式之一。它最常用于網站的主導航菜單，且通常地放在網站所有頁面的網站頭的直接上方或直接下方。頂部水平欄導航設計模式有時伴隨著下拉菜單，當鼠標移到某個項上時彈出它下面的二級子導航項，導航項是文字鏈接、按鈕形狀，或者選項卡形狀，頂部水平欄導航通常直接放在鄰近網站Logo的地方，位于折疊之上，如圖2-1所示。

1.2 側邊（豎直）欄導航

側邊欄導航的導航項被排列在一個單列，一項一項地縱向排列著。它一般在左上角的列上，在主內容區之前——根據一份針對從左到右閱讀習慣的導航模式的可用性研究，左邊的豎直導航欄比右邊的豎直導航欄效果要好。側邊欄導航設計模式隨處可見，幾乎存在于各類網站上。這有可能是因為豎直導航是當前最通用的模式之一，可以適應鏈接數量很多的情況。它可以與子導航菜單一起使用，也可以單獨使用，它很容易用于包含很多鏈接的網站主導航。側邊欄導航可以集成在幾乎任何種類的多列布局中，如圖2-2所示。

1.3 選項卡導航

選項卡導航比起其他類別的導航有一個明顯的優勢：對用戶有積極的心理效應。人們通常把導航與選項卡聯系在一起，因為筆記本或資料夾中的選項卡和導航，都可以切換到一個新的章節或網頁，如圖2-3所示。

1.4 面包屑導航

“面包屑”的名稱來源于Hansel和Gretel的故事，他們通過沿途撒下的面包屑找到回家的路。面包屑導航是二級導航的一種形式，輔助網站的主導航系統，對多級別具有層次結構的網站特別有用。它們可以幫助用戶了解當前自己在整個網站中所處的位置。如果用戶希望返回到某一級，只需要點擊對應的面包屑導航項即可，如圖2-4所示。