网页导航设计的常见样式

网页导航设计的常见样式

导航是指引用户找到自己所需内容的一个入口，对于导航栏目的设计，自然也有一套方法。让用户能够快速、便捷的找到所需，让用户能够清晰明了的了解到导航条的内容，让用户能够青睐于导航栏目结构的设置，从视觉上做到醒目的效果。

对于导航栏目的最佳设计就是采用文本链接的方式，文本链接方式便于人们了解，直接的看到内容，更醒目，提高了网站的易用性。对用户来说，易用，易理解，易操作的网站比较重要，而那些因为花哨而制作的导航栏目是不会受用户所喜爱的。

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

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

顶部水平栏导航最大的缺点就是它限制了你在不采用子级导航的情况下可以包

含的链接数。对于只有几个页面或类别的网站来说，这不是什么问题，但是对于有非常复杂的信息结构且有很多模块组成的网站来说，如果没有子导航的话，这并不是一个完美的主导航菜单选择。

顶部水平栏导航对于只需要在主要导航中显示5-12个导航项的网站来说是非常

好的。这也是单列布局的网站的主导航的唯一选择（除了通常用于二级导航系统的底部导航）。当它与下拉子导航结合时，这种设计模式可以支持更多的链接。

竖直/侧边栏导航，侧边栏导航的导航项被排列在一个单列，一项在一项的上面。它经常在左上角的列上，在主内容区之前——根据一份针对从左到右习惯读者的导航模式的可用性研究，左边的竖直导航栏比右边的竖直导航表现要好。侧边栏导航设计模式随处可见，几乎存在于各类网站上。这有可能是因为竖直导航是当前最通用的模式之一，可以适应数量很多的链接。它可以与子导航菜单一起使用，也可以单独使用。它很容易用于包含很多链接的网站主导航。侧边栏导航可以集成在几乎任何种类的多列布局中。侧边栏导航的一般特征：文字链接作为导航项很普遍（包含或不包含图标），很少使用选项卡（除了堆叠标签导航模式），竖直导航菜单经常含有很多链接。

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

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

选项卡导航可以随意设计成任何你想要的样式，从逼真的，有手感的标签到圆滑的标签，以及简单地方边的标签等。它存在于各种各样的网站里，并且可以纳入任何视觉效果。选项卡比起其它类别的导航有一个明显的优势：它们对用户有积极的心理效应。人们通常把导航与选项卡关联在一起，因为他们曾经在笔记本或资料夹里看见选项卡，并且把它们与切换到一个新的章节联系在一起。这个真实世界的暗喻使得选项卡导航非常直观。选项卡导航的一般特征：样子和功能都类似真实世界的选项卡（就像在文件夹，笔记本等中看到的一样），一般是水平方向的但也有时是竖直的（堆叠标签）。

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

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

面包屑的名字来源于Hansel和Gretel的故事，他们在沿途播撒面包屑以用来找到加家的路，这可以告诉你在网站的当前位置。这是二级导航的一种形式，辅助网站的主导航系统。面包屑对于多级别具有层次结构的网站特别有用。它们可以帮助访客了解到当前自己在整站中所处的位置。如果访客希望返回到某一级，它们只需要点击相应的面包屑导航项。面包屑的一般特征：一般格式是水平文字链接列表，通常在两项中间伴随着左箭头以指示层及关系，从不用于主导航。

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

标签导航，标签经常被用于博客和新闻网站。它们常常被组织成一个标签云，导航项可能按字母顺序排列（通常用不同大小的链接来表示这个标签下有多少内容），或者按流行程度排列。标签是出色的二级导航而很少用于主导航。他可以提高网站的可发现性和探索性。标签云通常出现在边栏或底部。如果没有标签云，标签则通常包括于文章顶部或底部的元信息中，这种设计让用户更容易找到相似的内容。标签导航的一般特征：标签是以内容为中心的网（博客和新闻站）站的一般特性，仅有文字链接，当处于标签云中时，链接通常大小各异以标识流行度经常被包含在文章的元信息中。

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

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

搜索导航，近些年来网站检索已成为流行的导航方式。它非常适合拥有无限内容的网站（像维基百科），这种网站很难使用其它的导航。搜索也常见于博客和新闻网站，以及电子商务网站。搜索对于清楚知道自己想要找什么的访客非常有用。但是有了搜索并不代表着就可以忽略好的信息结构。它对于保证那些不完全知道自己要找什么或是想发现潜在的感兴趣内容的浏览者可以查找到内容依然非常

重要。搜索导航的一般特征：搜索栏通常位于头部或在侧边栏靠近顶部的地方，搜索栏经常会出现在页面布局中的辅助部分，如底部。

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

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

出式菜单（与竖直/侧边栏导航一起使用）和下拉菜单（一般与顶部水平栏导航一起使用）是构建健壮的导航系统的好方法。它使得你的网站整体上看起来很整洁，而且使得深层章节很容易被访问。他们通常结合水平，竖直或是选项卡导航一起使用，作为网站主导航系统的一部分。出式菜单和下拉菜单导航的一般特征：用于多级信息结构，使用JavaScript和CSS来隐藏和显示菜单，显示在菜单中

的链接是主菜单项的子项，菜单通常在鼠标悬停在上面时被激活，而有时候也可能是鼠标点击时激活。

出式菜单和下拉菜单导航缺点：除非你在主导航链接边上放置一些标识（通常是箭头图标），不然访客可能不知道那有包含子导航项的下拉或出式菜单，因此使这些标识很明显是非常重要的。同时出式菜单和下拉可能使得导航在移动设备上非常难用，所以要确保你的移动样式表处理了这种情况。

如果你想在视觉上隐藏很大的或很复杂的导航层次，出式菜单和下拉是很好的选择，因为它让用户决定他们想看见什么，以及什么时候可以看见它们。它们可以用来在不弄乱网页的情况下按需显示很大数量的链接。它们还可以用来显示子页面和局部导航，并且不需要用户首先点击打开新的页面。