网页导航设计:让你的网站导航更扎实更清晰

核心提示：4.树状导航 （Tree navigation）允许针对层级结构的访问，往往包含加号和减号或小箭头的小图标来展开和收起下级节点，网页导航设计:让你的网站导航更扎实更清晰(2)，5.网站地图 （Site Map）为网站提供了自顶向下的迅速总览，适用于有大量内容和广泛用户群体的网站，按照标签热门程度确定字体的大小和颜色，标

4.树状导航 （Tree navigation）允许针对层级结构的访问。往往包含加号和减号或小箭头的小图标来展开和收起下级节点。

5.网站地图 （Site Map）为网站提供了自顶向下的迅速总览。适用于有大量内容和广泛用户群体的网站。因而应该比较简单易于扫视。其中的标签要与页面中的标题相符。在搭建网站地图时需要考虑其颗粒度，一般来说只需展现网站结构中的两到三级，提供到页面的链接。页脚网站地图，是现今大中型网站采用的方式，把网站地图一部分显示在页面底部，同时包含一个指向完整地图的链接。

（ 图示出自： Flickr.com）

6.Tab式导航（Tabbed Navigation）相当于导航条+Tab。导航条最简单的形式就是把超链接连成一行，有时用竖线分隔开来。而Tab式导航将tab控件结合到导航条上，使得网站内容结构化，多重化。

（ 图示出自： Motorola.com）

Amazon.com可能是第一个运用tab式导航的大型电子商务网站，Amazon目前线上运用的是垂直菜单+动态菜单的形式。

（ 图示出自： Amazon.com 1998）

7.垂直菜单 （Vertical Menu）通常置于网站的左边或者右边的一列链接。垂直菜单较横向的导航更灵活，易于向下扩展，且允许的标签长度较长。

（ 图示出自： Apple.com）

8.动态菜单 （Dynamic menus）也叫浮出菜单，下拉菜单或者弹出菜单。用户须与其产生交互行为，菜单才能显示。常用的交互是鼠标悬停或点击。

（ 图示出自： Amazon.com）

9.下拉框导航 （Drop-down menus）利用下拉菜单的特性，当选定某一项或多个选项，即将用户带到新的页面。

（ 图示出自： Dell.com）

10.标签云 （Tag clouds）所列链接按字母排序，按照标签热门程度确定字体的大小和颜色。标签云的设计者是交互设计师Stewart Butterfield。首先使用标签云的是Flickr。

（ 图示出自： Flickr.com）