网页导航设计的常见样式

1、网页导航设计的常见样式导航是指引用户找到自己所需内容的一个入口，对于导航栏目的设计，自然也有 一套方法。让用户能够快速、便捷的找到所需，让用户能够清晰明了的了解到导 航条的内容，让用户能够青睐于导航栏目结构的设置，从视觉上做到醒目的效果。对于导航栏目的最佳设计就是采用文本链接的方式，文本链接方式便于人们了解， 直接的看到内容，更醒目，提高了网站的易用性。对用户来说，易用，易理解， 易操作的网站比较重要，而那些因为花哨而制作的导航栏目是不会受用户所喜爱 的。在网页设计中有一些通用的交互设计模式。网站导航各种各样的通用和大家熟知 的设计模式，可以用来作为为网站创建有效地信息架构的基础。这篇指南涵盖

2、了 流行的站点导航设计模式。对于每一种网站导航栏设计模式，我们将讨论它的一 般特征，它的缺点，以及什么时候使用它最好。顶部水平栏导航是当前两种最流行地网站导航菜单设计模式之一。它最常用于网 站的主导航菜单，且最通常地放在网站所有页面的网站头的直接上方或直接下方。 顶部水平栏导航设计模式有时伴随着下拉菜单，当鼠标移到某个项上时弹出它下 面的二级子导航项。顶部水平栏导航一般特征：导航项是文字链接，按钮形状， 或者选项卡形状，水平栏导航通常直接放在邻近网站logo的地方，它通常位于 折叠之上。顶部水平栏导航最大的缺点就是它限制了你在不采用子级导航的情况下可以包 含的链接数。对于只有几个页面或类别的网

3、站来说，这不是什么问题，但是对于 有非常复杂的信息结构且有很多模块组成的网站来说，如果没有子导航的话，这 并不是一个完美的主导航菜单选择。顶部水平栏导航对于只需要在主要导航中显示5-12个导航项的网站来说是非常 好的。这也是单列布局的网站的主导航的唯一选择（除了通常用于二级导航系统 的底部导航）。当它与下拉子导航结合时，这种设计模式可以支持更多的链接。竖直/侧边栏导航，侧边栏导航的导航项被排列在一个单列，一项在一项的上面。 它经常在左上角的列上，在主内容区之前一一根据一份针对从左到右习惯读者的 导航模式的可用性研究，左边的竖直导航栏比右边的竖直导航表现要好。侧边栏 导航设计模式随处可见，几乎存

4、在于各类网站上。这有可能是因为竖直导航是当 前最通用的模式之一，可以适应数量很多的链接。它可以与子导航菜单一起使用， 也可以单独使用。它很容易用于包含很多链接的网站主导航。侧边栏导航可以集 成在几乎任何种类的多列布局中。侧边栏导航的一般特征：文字链接作为导航项 很普遍（包含或不包含图标），很少使用选项卡（除了堆叠标签导航模式），竖 直导航菜单经常含有很多链接。竖直/侧边栏导航缺点：因为可以处理很多链接，当竖直菜单太长时有时可能将 用户淹没。尝试限制你引入的链接数，取而代之可以使用飞出式子导航菜单以提 供网站的更多信息。同时考虑将链接分放在直观的类别当中，以帮助用户很快地 找到感兴趣的链接。竖直

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

6、选项卡最大的缺点是它比简单的顶部水平栏更难设计。它们通常需要更多的标签， 图片资源以及CSS，具体根据标签的视觉复杂度而定。选项卡的另一个缺点是它 们也不太适用于链接很多的情况，除非它们竖直地排列（即使这样，如果太多的 话它们还是看起来很不合适）。选项卡也适合几乎任何主导航，虽然它们在可以显示的链接上有限制，尤其在水 平方向的情况下。将它们用于拥有不同风格子导航的主导航的较大型网站是个不 错的选项。面包屑的名字来源于Hansel和Gretel的故事，他们在沿途播撒面包屑以用来找 到加家的路，这可以告诉你在网站的当前位置。这是二级导航的一种形式，辅助 网站的主导航系统。面包屑对于多级别具有层次结

7、构的网站特别有用。它们可以 帮助访客了解到当前自己在整站中所处的位置。如果访客希望返回到某一级，它 们只需要点击相应的面包屑导航项。面包屑的一般特征：一般格式是水平文字链 接列表，通常在两项中间伴随着左箭头以指示层及关系，从不用于主导航。面包屑导航的缺点：面包屑不适于浅导航网站。当网站没有清晰的层次和分类的 时候，使用它也可能产生混乱。何时使用面包屑导航。面包屑导航最适用于具有 清晰章节和多层次分类内容的网站。没有明显的章节，使用面包屑是得不偿失。标签导航，标签经常被用于博客和新闻网站。它们常常被组织成一个标签云，导 航项可能按字母顺序排列（通常用不同大小的链接来表示这个标签下有多少内 容），

8、或者按流行程度排列。标签是出色的二级导航而很少用于主导航。他可以 提高网站的可发现性和探索性。标签云通常出现在边栏或底部。如果没有标签云， 标签则通常包括于文章顶部或底部的元信息中，这种设计让用户更容易找到相似 的内容。标签导航的一般特征：标签是以内容为中心的网（博客和新闻站）站的 一般特性，仅有文字链接，当处于标签云中时，链接通常大小各异以标识流行度 经常被包含在文章的元信息中。标签导航的缺点：人们通常把标签和博客和新闻网站联系在一起（有时候也可能 是电子商务网站），所以如果你的网站与这些网站有本质的不同，它可能对你就 没有帮助。标签也会给内容创作者带来一定量的工作量，因为为了使标签系统有

9、效，每篇文章都需要打上准确的标签。如果你拥有很多主题，为内容打上关键词标记是很有利的。如果你仅有几个页面 （可能你的网站是一个公司网站），可能就不需要给内容打标签了。是否结合标 签云或只是将标签包含在元信息中得取决于你的设计。搜索导航，近些年来网站检索已成为流行的导航方式。它非常适合拥有无限内容 的网站（像维基百科），这种网站很难使用其它的导航。搜索也常见于博客和新 闻网站，以及电子商务网站。搜索对于清楚知道自己想要找什么的访客非常有用。 但是有了搜索并不代表着就可以忽略好的信息结构。它对于保证那些不完全知道 自己要找什么或是想发现潜在的感兴趣内容的浏览者可以查找到内容依然非常 重要。搜索导航

10、的一般特征：搜索栏通常位于头部或在侧边栏靠近顶部的地方， 搜索栏经常会出现在页面布局中的辅助部分，如底部。搜索最大的缺点是并非所有搜索引擎都是平等的。取决于你选择的方案，你网站 的搜索特性可能不能返回精确的结果或者缺失一些东西如文章元数据。搜索导航， 对于大部分网站来说，应该作为次要的导航形式。搜索是用户在无法被导航到他 们想找的东西的地方时的可靠选择。对于具有无数页面并且有复杂信息结构的网站来说，肯定必须引入搜索功能。没 有它用户可能很难通过遍历链接和多层的导航来找到他们想要的信息。搜索对于 电子商务网站也非常重要，而关键的一点是电子商务网站的搜索结果要根据网站 存货的多少具有相应的筛选和排

11、序功能。出式菜单（与竖直/侧边栏导航一起使用）和下拉菜单（一般与顶部水平栏导航 一起使用）是构建健壮的导航系统的好方法。它使得你的网站整体上看起来很整 洁，而且使得深层章节很容易被访问。他们通常结合水平，竖直或是选项卡导航 一起使用，作为网站主导航系统的一部分。出式菜单和下拉菜单导航的一般特征： 用于多级信息结构，使用JavaScript和CSS来隐藏和显示菜单，显示在菜单中 的链接是主菜单项的子项，菜单通常在鼠标悬停在上面时被激活，而有时候也可 能是鼠标点击时激活。出式菜单和下拉菜单导航缺点：除非你在主导航链接边上放置一些标识（通常是 箭头图标），不然访客可能不知道那有包含子导航项的下拉或出

12、式菜单，因此使 这些标识很明显是非常重要的。同时出式菜单和下拉可能使得导航在移动设备上 非常难用，所以要确保你的移动样式表处理了这种情况。如果你想在视觉上隐藏很大的或很复杂的导航层次，出式菜单和下拉是很好的选 择，因为它让用户决定他们想看见什么，以及什么时候可以看见它们。它们可以 用来在不弄乱网页的情况下按需显示很大数量的链接。它们还可以用来显示子页 面和局部导航，并且不需要用户首先点击打开新的页面。分面/引导导航（也叫做分面检索或引导检索）最常见于电子商务网站。基本上 来说引导导航给你提供额外的内容属性筛选。假设你在浏览一个新的LCD显示器， 引导导航可能会列出大小，价格，品牌等选顶。基于这

13、些内容属性，你可以导航 到匹配你的条件的项。引导导航在拥有巨大数量货物的大型电子商务网站中是非 常宝贵的。用户通过直接搜索通常很难找到他们想要的东西，并且增加了用户漏 掉一个产品的或能性。例如他们可能搜索一个灰褐色的产品，但你可能将它标记 了灰色或褐色，虽然它可能就是用户想要的东西。分面/引导导航的一般特征： 最常见于电子商务网站，通常让用户对不同的特征做多次筛选，几乎总是使用文 字链接，分解在不同的类别下或是下拉菜单下，常常与面包屑导航一起使用分面/引导导航的缺点：引导导航可能会引起一些用户的迷惑。另外不能保证用 户会在你预先定义的类别中查找。分面导航对于大型电子商务网站非常有用。它方便了用户购物，提升了购物体验， 并更容易找到它们真正想要的东西。它也可以用于其它目录风格的网站。页脚导航通常用于次要导航，并且可能包含了主导航中没有的链接，或是包含简 化的网站地图链接。访客通常在主导航找不到他们要找的东西时会去查看页脚导 航。页脚导航的一般特征：页脚导航通常用于放置其它地方都没有的导航项，通 常使用文字链接，偶尔带有图标，通常链接指向不是那么关键的页面。页脚导航的缺点：如果你的页面很长，没有人愿意仅仅为了导航而滚动到页面底 部。对于较长的页面，页脚导航最好作为重复链接和简要的网站地图的地方。它 不适合作为主导般形式。绝大多数网站都有这样那样