网页导航栏设计模式

在网页设计中有一些通用的交互设计模式。网站导航各类各样的通用和你们熟知的设计模式，能够用来做为为网站建立有效地信息架构的基础。这篇指南涵盖了流行的站点导航设计模式。对于每一种网站导航栏设计模式，咱们将讨论它的通常特征，它的缺点，以及何时使用它最好。

顶部水平栏导航

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

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

顶部水平栏导航通常特征

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

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

它一般位于折叠之上

顶部水平栏导航的缺点

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

什么时候使用顶部水平栏导航

顶部水平栏导航对于只须要在主要导航中显示5-12个导航项的网站来讲是很是好的。这也是单列布局的网站的主导航的惟一选择(除了一般用于二级导航系统的底部导航)。当它与下拉子导航结合时，这种设计模式能够支持更多的连接。

竖直/侧边栏导航

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

侧边栏导航设计模式随处可见，几乎存在于各种网站上。这有多是由于竖直导航是当前最通用的模式之一，能够适应数量不少的连接。

它能够与子导航菜单一块儿使用，也能够单独使用。它很容易用于包含不少连接的网站主导航。侧边栏导航能够集成在几乎任何种类的多列布局中。

侧边栏导航的通常特征

文字连接做为导航项很广泛(包含或不包含图标)

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

竖直导航菜单常常含有不少连接

竖直/侧边栏导航缺点

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

什么时候使用竖直/侧边栏导航

竖直导航适用于几乎全部种类的网站，尤为适合有一堆主导航连接的网站。

选项卡导航

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

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

选项卡导航的通常特征

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

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

选项卡导航的缺点

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

什么时候使用选项卡导航

选项卡也适合几乎任何主导航，虽然它们在能够显示的连接上有限制，尤为在水平方向的状况下。将它们用于拥有不一样风格子导航的主导航的较大型网站是个不错的选项。

面包屑导航

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

面包屑对于多级别具备层次结构的网站特别有用。它们能够帮助访客了解到当前本身在整站中所处的位置。若是访客但愿返回到某一级，它们只须要点击相应的面包屑导航项。

面包屑的通常特征

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

从不用于主导航

面包屑导航的缺点

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

标签导航

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

标签是出色的二级导航而不多用于主导航。他能够提升网站的可发现性和探索性。标签云一般出如今边栏或底部。若是没有标签云，标签则一般包括于文章顶部或底部的元信息中，这种设计让用户更容易找到类似的内容。

标签导航的通常特征

标签是之内容为中心的网(博客和新闻站)站的通常特性

仅有文字连接

当处于标签云中时，连接一般大小各异以标识流行度

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

标签导航的缺点

人们一般把标签和博客和新闻网站联系在一块儿(有时候也多是电子商务网站)，因此若是你的网站与这些网站有本质的不一样，它可能对你就没有帮助。标签也会给内容创做者带来必定量的工做量，由于为了使标签系统有效，每篇文章都须要打上准确的标签。

什么时候使用标签

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

搜索导航

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

搜索对于清楚知道本身想要找什么的访客很是有用。可是有了搜索并不表明着就能够忽略好的信息结构。它对于保证那些不彻底知道本身要找什么或是想发现潜在的感兴趣内容的浏览者能够查找到内容依然很是重要。

搜索导航的通常特征

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

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

搜索导航的缺点

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

什么时候使用搜索导航

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

出式菜单和下拉菜单导航

出式菜单(与竖直/侧边栏导航一块儿使用)和下拉菜单(通常与顶部水平栏导航一块儿使用)是构建健壮的导航系统的好方法。它使得你的网站总体上看起来很整洁，并且使得深层章节很容易被访问。

他们一般结合水平，竖直或是选项卡导航一块儿使用，做为网站主导航系统的一部分。

出式菜单和下拉菜单导航的通常特征

用于多级信息结构

使用JavaScript和CSS来隐藏和显示菜单

显示在菜单中的连接是主菜单项的子项

菜单一般在鼠标悬停在上面时被激活，而有时候也多是鼠标点击时激活

出式菜单和下拉菜单导航缺点

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

什么时候使用出式菜单和下拉菜单导航

若是你想在视觉上隐藏很大的或很复杂的导航层次，出式菜单和下拉是很好的选择，由于它让用户决定他们想看见什么，以及何时能够看见它们。它们能够用来在不弄乱网页的状况下按需显示很大数量的连接。它们还能够用来显示子页面和局部导航，而且不须要用户首先点击打开新的页面。

分面/引导导航

分面/引导导航(也叫作分面检索或引导检索)最多见于电子商务网站。基本上来讲引导导航给你提供额外的内容属性筛选。假设你在浏览一个新的LCD显示器，引导导航可能会列出大小，价格，品牌等选顶。基于这些内容属性，你能够导航到匹配你的条件的项。

引导导航在拥有巨大数量货物的大型电子商务网站中是很是宝贵的。用户经过直接搜索一般很难找到他们想要的东西，而且增长了用户漏掉一个产品的或能性。例如他们可能搜索一个灰褐色的产品，但你可能将它标记了灰色或褐色，虽然它可能就是用户想要的东西。

分面/引导导航的通常特征

最多见于电子商务网站

一般让用户对不一样的特征作屡次筛选

几乎老是使用文字连接，分解在不一样的类别下或是下拉菜单下

经常与面包屑导航一块儿使用

分面/引导导航的缺点

引导导航可能会引发一些用户的迷惑。另外不能保证用户会在你预先定义的类别中查找。

什么时候使用分面/引导导航

分面导航对于大型电子商务网站很是有用。它方便了用户购物，提高了购物体验，并更容易找到它们真正想要的东西。它也能够用于其它目录风格的网站。

页脚导航

页脚导航一般用于次要导航，而且可能包含了主导航中没有的连接，或是包含简化的网站地图连接。

访客一般在主导航找不到他们要找的东西时会去查看页脚导航。

页脚导航的通常特征

页脚导航一般用于放置其它地方都没有的导航项

一般使用文字连接，偶尔带有图标

一般连接指向不是那么关键的页面

页脚导航的缺点

若是你的页面很长，没有人愿意仅仅为了导航而滚动到页面底部。对于较长的页面，页脚导航最好做为重复连接和简要的网站地图的地方。它不适合做为主导般形式。

什么时候使用页脚导航

\绝大多数网站都有这样那样的页脚导航，即便它只是重复其它地方的连接。考虑什么放在那有用，以及你的访客可能最想找什么。

结论

大多数网站使用不仅一种导航设计模式。例如一个网站可能会用顶部水平栏导航做为主导航系统，并使用竖直/侧边栏导航系统来辅助它，同时还用页脚导航来做冗余，增长页面的便利度。当选择你的导航系统基于的导航设计模式时，你必须选择支持你的信息结构以及网站特性的方案。导航是网站设计的重要部分，它的效果必须有坚实的基础设计

 

转自：http://www.wzsky.net/html/Website/Experience/111312.html