第二章 导航栏原型制作

1.导航栏

在网页设计中有一些通用的交互设计模式，网站导航各种各样的通用的设计模式，可以用来为网站创建有效的信息架构基础。本章内容涵盖了流行的站点导航设计模式。对于每一种网站导航栏设计模式，我们将讨论它的一般特征、不足，以及什么时候使用它最好。

1.1 顶部水平栏导航

顶部水平栏导航是当前两种最流行的网站导航菜单设计模式之一。它最常用于网站的主导航菜单，且通常地放在网站所有页面的网站头的直接上方或直接下方。顶部水平栏导航设计模式有时伴随着下拉菜单，当鼠标移到某个项上时弹出它下面的二级子导航项，导航项是文字链接、按钮形状，或者选项卡形状，顶部水平栏导航通常直接放在邻近网站Logo的地方，位于折叠之上，如图2-1所示。

图2-1 顶部水平栏导航

1.2 侧边（竖直）栏导航

侧边栏导航的导航项被排列在一个单列，一项一项地纵向排列着。它一般在左上角的列上，在主内容区之前——根据一份针对从左到右阅读习惯的导航模式的可用性研究，左边的竖直导航栏比右边的竖直导航栏效果要好。侧边栏导航设计模式随处可见，几乎存在于各类网站上。这有可能是因为竖直导航是当前最通用的模式之一，可以适应链接数量很多的情况。它可以与子导航菜单一起使用，也可以单独使用，它很容易用于包含很多链接的网站主导航。侧边栏导航可以集成在几乎任何种类的多列布局中，如图2-2所示。

图2-2 京东侧边栏导航

1.3 选项卡导航

选项卡导航比起其他类别的导航有一个明显的优势：对用户有积极的心理效应。人们通常把导航与选项卡联系在一起，因为笔记本或资料夹中的选项卡和导航，都可以切换到一个新的章节或网页，如图2-3所示。

图2-3 选项卡导航

1.4 面包屑导航

“面包屑”的名称来源于Hansel和Gretel的故事，他们通过沿途撒下的面包屑找到回家的路。面包屑导航是二级导航的一种形式，辅助网站的主导航系统，对多级别具有层次结构的网站特别有用。它们可以帮助用户了解当前自己在整个网站中所处的位置。如果用户希望返回到某一级，只需要点击对应的面包屑导航项即可，如图2-4所示。

图2-4 面包屑导航