网站建设中心

在网页设计中有一些通用的交互设计模式。网站导航各种各样的通用和大家熟知的设计模式，可以用来作为为网站创建有效地信息架构的基础。这篇指南涵盖了流行的站点导航设计模式。对于每一种网站导航栏设计模式，我们将讨论它的一般特征，它的缺点，以及什么时候使用它最好。

顶部水平栏导航

顶部水平栏导航是当前两种最流行地网站导航菜单设计模式之一。它最常用于网站的主导航菜单，且最通常地放在网站所有页面的网站头的直接上方或直接下方。

顶部水平栏导航设计模式有时伴随着下拉菜单，当鼠标移到某个项上时弹出它下面的二级子导航项。

顶部水平栏导航一般特征

导航项是文字链接，按钮形状，或者选项卡形状

水平栏导航通常直接放在邻近网站logo的地方

它通常位于折叠之上

顶部水平栏导航的缺点

顶部水平栏导航最大的缺点就是它限制了你在不采用子级导航的情况下可以包含的链接数。对于只有几个页面或类别的网站来说，这不是什么问题，但是对于有非常复杂的信息结构且有很多模块组成的网站来说，如果没有子导航的话，这并不是一个完美的主导航菜单选择。

何时使用顶部水平栏导航

顶部水平栏导航对于只需要在主要导航中显示5-12个导航项的网站来说是非常好的。这也是单列布局的网站的主导航的唯一选择(除了通常用于二级导航系统的底部导航)。当它与下拉子导航结合时，这种设计模式可以支持更多的链接。

竖直/侧边栏导航

侧边栏导航的导航项被排列在一个单列，一项在一项的上面。它经常在左上角的列上，在主内容区之前——根据一份针对从左到右习惯读者的导航模式的可用性研究，左边的竖直导航栏比右边的竖直导航表现要好。

侧边栏导航设计模式随处可见，几乎存在于各类网站上。这有可能是因为竖直导航是当前最通用的模式之一，可以适应数量很多的链接。

它可以与子导航菜单一起使用，也可以单独使用。它很容易用于包含很多链接的网站主导航。侧边栏导航可以集成在几乎任何种类的多列布局中。

侧边栏导航的一般特征

文字链接作为导航项很普遍(包含或不包含图标)

很少使用选项卡(除了堆叠标签导航模式)

竖直导航菜单经常含有很多链接

竖直/侧边栏导航缺点

因为可以处理很多链接，当竖直菜单太长时有时可能将用户淹没。尝试限制你引入的链接数，取而代之可以使用飞出式子导航菜单以提供网站的更多信息。同时考虑将链接分放在直观的类别当中，以帮助用户很快地找到感兴趣的链接。

何时使用竖直/侧边栏导航

竖直导航适用于几乎所有种类的网站，尤其适合有一堆主导航链接的网站。

选项卡导航

选项卡导航可以随意设计成任何你想要的样式，从逼真的，有手感的标签到圆滑的标签，以及简单地方边的标签等。它存在于各种各样的网站里，并且可以纳入任何视觉效果。

选项卡比起其它类别的导航有一个明显的优势：它们对用户有积极的心理效应。人们通常把导航与选项卡关联在一起，因为他们曾经在笔记本或资料夹里看见选项卡，并且把它们与切换到一个新的章节联系在一起。这个真实世界的暗喻使得选项卡导航非常直观。

选项卡导航的一般特征

样子和功能都类似真实世界的选项卡(就像在文件夹，笔记本等中看到的一样)

一般是水平方向的但也有时是竖直的(堆叠标签)

选项卡导航的缺点

选项卡最大的缺点是它比简单的顶部水平栏更难设计。它们通常需要更多的标签，图片资源以及CSS，具体根据标签的视觉复杂度而定。选项卡的另一个缺点是它们也不太适用于链接很多的情况，除非它们竖直地排列(即使这样，如果太多的话它们还是看起来很不合适)。

何时使用选项卡导航

选项卡也适合几乎任何主导航，虽然它们在可以显示的链接上有限制，尤其在水平方向的情况下。将它们用于拥有不同风格子导航的主导航的较大型网站是个不错的选项。面包屑导航

面包屑的名字来源于Hansel和Gretel的故事，他们在沿途播撒面包屑以用来找到加家的路，这可以告诉你在网站的当前位置。这是二级导航的一种形式，辅助网站的主导航系统。

面包屑对于多级别具有层次结构的网站特别有用。它们可以帮助访客了解到当前自己在整站中所处的位置。如果访客希望返回到某一级，它们只需要点击相应的面包屑导航项。

面包屑的一般特征

一般格式是水平文字链接列表，通常在两项中间伴随着左箭头以指示层及关系

从不用于主导航

面包屑导航的缺点

面包屑不适于浅导航网站。当网站没有清晰的层次和分类的时候，使用它也可能产生混乱。何时使用面包屑导航。面包屑导航最适用于具有清晰章节和多层次分类内容的网站。没有明显的章节，使用面包屑是得不偿失。

标签导航

标签经常被用于博客和新闻网站。它们常常被组织成一个标签云，导航项可能按字母顺序排列(通常用不同大小的链接来表示这个标签下有多少内容)，或者按流行程度排列。

标签是出色的二级导航而很少用于主导航。他可以提高网站的可发现性和探索性。标签云通常出现在边栏或底部。如果没有标签云，标签则通常包括于文章顶部或底部的元信息中，这种设计让用户更容易找到相似的内容。

标签导航的一般特征

标签是以内容为中心的网(博客和新闻站)站的一般特性

仅有文字链接

当处于标签云中时，链接通常大小各异以标识流行度

经常被包含在文章的元信息中

标签导航的缺点

人们通常把标签和博客和新闻网站联系在一起(有时候也可能是电子商务网站)，所以如果你的网站与这些网站有本质的不同，它可能对你就没有帮助。标签也会给内容创作者带来一定量的工作量，因为为了使标签系统有效，每篇文章都需要打上准确的标签。

何时使用标签

如果你拥有很多主题，为内容打上关键词标记是很有利的。如果你仅有几个页面(可能你的网站是一个公司网站)，可能就不需要给内容打标签了。是否结合标签云或只是将标签包含在元信息中得取决于你的设计。

搜索导航

近些年来网站检索已成为流行的导航方式。它非常适合拥有无限内容的网站(像维基百科)，这种网站很难使用其它的导航。搜索也常见于博客和新闻网站，以及电子商务网站。

搜索对于清楚知道自己想要找什么的访客非常有用。但是有了搜索并不代表着就可以忽略好的信息结构。它对于保证那些不完全知道自己要找什么或是想发现潜在的感兴趣内容的浏览者可以查找到内容依然非常重要。

搜索导航的一般特征

搜索栏通常位于头部或在侧边栏靠近顶部的地方

搜索栏经常会出现在页面布局中的辅助部分，如底部

搜索导航的缺点

搜索最大的缺点是并非所有搜索引擎都是平等的。取决于你选择的方案，你网站的搜索特性可能不能返回精确的结果或者缺失一些东西如文章元数据。搜索导航，对于大部分网站来说，应该作为次要的导航形式。搜索是用户在无法被导航到他们想找的东西的地方时的可靠选择。

何时使用搜索导航

对于具有无数页面并且有复杂信息结构的网站来说，肯定必须引入搜索功能。没有它用户可能很难通过遍历链接和多层的导航来找到他们想要的信息。搜索对于电子商务网站也非常重要，而关键的一点是电子商务网站的搜索结果要根据网站存货的多少具有相应的筛选和排序功能。