无网站不导航！网站的导航设计对于网站而言至关重要，网站99％的内容都依赖良好的导航设计，因为良好的导航可以保证用户找到任何信息。总体来说，导航设计包含了三方面的部分：栏目构成、视觉设计和交互设计。是栏目构成决定了导航的设计。

网站的导航设计对于网站而言至关重要，网站99％的内容都依赖良好的导航设计，因为良好的导航可以保证用户找到任何信息。总体来说，导航设计包含了三方面的部分：栏目构成、视觉设计和交互设计。是栏目构成决定了导航的设计。

10.1 网站的栏目构成

网站栏目构成，决定了导航的分类级别，例如一个栏目是否可以包含两个或多个分类，等等。其中，有很大一部分工作是对内容进行分类。

分类，就是对已有的项目、内容，通过已知的共同属性，进行分组、归类。就好比可以把地球上的所有人按性别分成男人和女人两类，如图10-1所示。这里“性别”就是分类的方法，同样的道理也可以按“年龄”分成幼儿、青年、老人等等。对网站栏目使用什么样的分类方法，应该根据网站的内容来决定。

图10-1 按性别分类

一般来说分类方式有两种类型，广度优先和深度优先。广度优先就是同一层次的目录数量尽量多，层数尽量少，如图10-2所示。在这个音乐站点中，每个栏目下面都会有一个图片的二级栏目，这样分类便于不同栏目图片的查找。

图10-2 广度优化

深度优先则正好相反。两者的不同在于，广度优先访问时间少，但是搜寻定位的话会花时间，如图10-3所示。

图10-3 深度优先

例如一个新闻栏目的文件夹底下添加100条新闻，不一定马上能找到你想要找的那一个。而深度优先比较容易定位搜寻，可以根据新闻的类型来进行分类，但是找到一个新闻页面可能要经过好几层目录，比较麻烦。

对内容分类的最终目的是希望浏览者能快速找到他所需要的，那么所分出来的不同类别就是网站的栏目。如图10-4所示，大部分的公司产品网站，其导航规划中基本上都会包括“公司资讯（或公司简介）、最新消息、产品中心、联系我们”等栏目，因为这些栏目也是作为一个公司产品网站所必须的内容分类。

图10-4公司产品网站

读者可以参看淘宝网（www.taobao.com）是如何对内容进行分类的，如图10-5所示。淘宝网中的商品数以万计，没有一个合理的的导航规划，用户是很难快速找到自己所想要的商品的，除了网站所提供的搜索功能以外，网站在商品栏目构成的规划上，按照产品的不同行业类别来进行分类。

图10-5 淘宝网的导航规划

对于网站栏目定位，栏目目的，服务对像，子栏目设置，首页内容，分页内容等等，都需要网站建设人员对栏目有一个全局的整体把握和了解。并且能通过各个栏目之间的联系，来加强网站的整体性。让网站有整体感，还应当在网页中放置一些贯穿性的元素。纸上谈兵不如真枪实战，对于网站导航的规划而言，读者可以从最简单的做起，例如做一个个人网站，然后由自己来策划一下网站的栏目构成和导航效果，从而逐步地积累经验。；

10.2 导航的视觉设计

从技术上来说，导航有传统的纯文本导航，和图像类导航。文本类导航由于不需要图像修饰，所以一般下载速度较快，但是视觉效果单一。而图像类导航可以通过Fireworks或者PhotoShop设计成图像，视觉效果明显，但是相对下载速度较慢，如图10-6所示，页面顶端为图像类按钮，而多行的栏目采用了文本按钮。

图10-6 各种技术的导航

10.4.2.1 门牌式导航

导航采用纵向排列方式，并且简单排列着一些带文字和图标的按钮，如图10-7所示，这是最传统的方式。

图10-7 门牌式导航

10.4.2.2 索引式导航

导航采用横向排列方式，如图10-8所示，使人联想到文件夹索引的类型，像是在文件夹中查找文件。

图10-8 索引式导航

对于导航内的字体而言，中文网站常间的效果是中文或者中英文混排的方式，字体选择上一般选择比较“粗”的字体，如黑体或其他艺术字体。同时字体的形状还应当考虑到导航的形状，两者要能够很好的结合起来。最后，导航字体的颜色一定要和底色有强烈的对比，否则文本不易于识别，如图10-9所示。

图10-9 导航的文本设计

10.4.2.3 变化方框式导航

这种导航采用没有底座的清爽形式，如图10-10所示，给人以自由轻松的印象。

图10-10 变化方框式导航

10.4.2.4 按钮式导航

按钮式导航也是最常见的导航效果，让人联想起电子产品和汽车的按钮，如图10-11所示。

图10-11 按钮式导航

大多数的网页效果图设计中，导航选择比较标准的矩形和圆角矩形，也有部分强调视觉效果的网页以不规则形状来设计导航，前面说过，导航是由多个按钮组成的按钮组，所以一定要注意多个按钮之间的连续性，导航要有整体的感觉，如图10-12所示。

图10-12 不规则形状的导航

10.4.2.5 无框图标式导航

去掉边框，给人以轻快的自由感，增强了趣味性，如图10-13所示。

图10-13 无框图标式导航

10.4.2.6 下划线式导航

符合人们在报纸和图书的重要部分加下划线的习惯，如图10-14所示，让你从这个链接开始冲浪！

图10-14 下划线式导航

10.4.2.7 记号式导航

虽然文字偏小，但是在每句话的前面加上“●”、“★”或特殊的小图标，就变成了可以点击的信息，如图10-15所示。

图10-15 记号式导航

10.3 导航的交互设计

随着网络技术的不断发展，网页导航的交互设计也在发生着不断的变化，其最主要的特点就是把复杂变的简单，用户使则更加流畅。在网站中制作交互式的导航，主要使用Flash技术和JavaScript技术。在了解导航的交互设计之前，需要知道导航的级别分类。习惯上可以把导航分为分层、线性、无序的。下面举例来说明：

10.4.3.1 分层导航

分层导航一般仅限于一二三级栏目的，下拉菜单的就是“分层导航”的典型应用，基本属于必要元素，如图10-16所示。

图10-16 分层导航

10.4.3.2 线性导航

能够跟踪用户行为，记录的用户在网站的活动足迹就是“线性导航”，俗称面包屑，如图10-17所示。

图10-17 面包屑导航

10.4.3.3 无序导航

例如网站管理系统的后台，在首页增加的类似跨分层结构的链接就是“无序导航”，俗称快捷方式，如图10-18所示。

图10-18 无序导航

10.4.3.4 Tab导航

从交互技术上来说，网页导航的交互技术主要为JavaScript和Flash，使用这两种技术，可以设计出各种级别的导航。常见以JavaScript技术为主的交互导航除了下拉菜单、折叠菜单外，还有现在比较流行的TAB导航等，如图10-19所示。

图10-19TAB导航

由于Flash的动画特性，以Flash技术为主的导航其交互效果丰富多样，但是其级别分类还是和传统的导航设计没有太多区别，这里就不再详细介绍。

10.4没有“导航”的导航—搜索

导航的根源在于分类，当有几十条信息的时候，我们需要类别，当有上万条信息的时候，有了导航，当信息非常多的时候，无论怎么分类都是难以寻找的，于是就有了搜索。当一个网站信息越积越多，搜索将会变得越来越重要。甚至到了某一天，网站50%以上的用户都是通过搜索来查询信息的时候，搜索就将成为没有“导航”的导航，如图10-20所示。

图10-20 网页中的搜索

对于网站的导航设计而言，如果在设计时没有什么好的想法或创意，不妨上网多参考同类型网页的设计风格，进行归纳和总结，从而设计出最符合当前网站的导航效果。