网页控件规范是由大脸撰写关于网页控件交互规范的一系列文章，此规范能够帮助设计师快速的生成设计稿，提高工作效率，帮助网站达到标准化和一致性，有效的提高用户体验。 由于原发布与google doc被墙，镜像一份于此， 源地址：http://www.userkon.com/labs/web_widget_guildline 。

1. 控件名称：导航 Navigation
定义
导航的出现是因为在一个页面中无法同时展现那么多的内容。
他提供给用户方便的页面与页面之间跳转的链接；他表现着页面与页面，页面和内容的关系；是多个链接
（Link）的集合。链接之间保持结构、排序、样式的一致性。
导航的呈现方式有：横排，纵列，下拉菜单以及标签。
目标
 告诉用户他们在哪里。
 告诉用户可以去哪里，并提供路径前往。
 告诉用户已经去过哪里。
 告诉用户目标是远还是近。
 当用户需要寻找信息时，导航应提供最有效的帮助。
任务
 体现站点的层级和权重关系。
 站点入口的集中整合呈现。
 站点信息分类的精简体现。
分类
根据导航的具体功能和对信息分类方法，我们把导航分为以下几类，这种区分影响着导航的信息，排列，
位置和样式。
导航有以下分类：
全局导航 Global navigation
表现整个站点最基本的权重结构，几乎出现在站点内所有页面中的元素（除一些独立页面外）。
用户使用它可到达站点主要分类地点。
全局导航不一定要尊重站点的结构树。全局导航深度不能超过 2 级。
控件规范：导航 Navigation 1 / 12

2. 图 1 全局导航结构树指示
图 2 亚马逊全局导航
局部导航 Partial navigation
局部导航是对上级导航的补充；提供上级导航某个分类的兄、子级别的路径，用户使用它可到达
目前位置附近地点的路径。
因为全局导航的浅度要求,局部导航承载着更多的导航任务,导航的体验的优秀很大程度由局部
导航决定。
控件规范：导航 Navigation 2 / 12

3. 图 3 局部导航结构树指示
图 4 苹果商城左侧局部导航
辅助导航 Assistant navigation
提供用户在不同页面的直接跳转，用户使用它可到达任意页面（理论上），辅助导航无需关注结
构，排序等，其样式要求比较宽松。
控件规范：导航 Navigation 3 / 12

4. 图 5 辅助导航结构树指示
图 6 苹果站点内热销榜单的辅助导航
上下文导航 Context navigation
上下文导航是提示用户当前地点同级附近地点的元素。用户使用它到达当前页面的同级页面。它
包含着信息的排序和优先级。我们常见的页面导航（Page navigation）也属于上下文导航。
控件规范：导航 Navigation 4 / 12

5. 图 7 兄弟导航结构示意图
图 8 网页中常见的兄弟导航链接
产品导航 Product navigation
产品导航帮助用户到达站点的其他 web 应用或者服务，他出现的原因是用户需求增长以及产品整
合的需要。
因为大部分 web 应用需登录使用，它常与用户账号操作区域出现在相近的位置。
图 9 Google 基于办公的产品导航
控件规范：导航 Navigation 5 / 12

6. 图 10 Google 基于搜索的产品导航
异类导航 X-navigation
为了突出站点的某种分类，同时保持导航的浅度，会把该分类以另外一种方式呈现出来。
图 11 异类导航在结构树的体现
图 12 土豆网右侧的“频道”导航1
1
确切来说这条导航应该属于左侧的主导航的“频道”分类。
控件规范：导航 Navigation 6 / 12

7. 交互规范
概述
 导航用于站点页面之间的跳转，如果是页内的跳转，请使用描点或者 tab。
 因为内容，所以导航。先确定内容，后产生导航。
内容 分类方法 导航
图 13 导航是内容按照分类方法梳理的体现
1
 导航只适用于需要对信息进行分类的站点。不适合单页面站点以及不要跳跃阅读站点。
2
 导航表现站点结构树，但不必完全相同，导航必须保持浅度结构。
3
 导航的分类应是保持固定，能得到普遍任何且包含一定逻辑性与相关性。
 信息类站点，禁止用户自定义导航。应用类站点，用户自定义的分类建议采用树状图。
4
 无论在任何页面，全局导航都应提供返回最初页面的路径 。
5
 导航为文字链接的集合，列表排列，不可采用按钮，图片 ，或者纯图标方式。
表现
 导航只存在横排和纵列两种排列方式。导航不可夹杂于内容信息当中。
 横排导航权重关系从左到右依次降低，但用户并不像阅读段落那样从左到右的视线移动，往
6
往会产生跳跃，这就意味着导航最后一个项目权重会出现跃升。
图 14 横排段落：权重由左到右依次降低
1
指的是单独的宣传页面，或者是需要用户一步步操作或者阅读完毕的页面。
2
最大 2 级，不可超过 3 级。如果是 3 级，建议直接显示。
3
比如采用国际化标准分类或得到大众普遍认可的分类。不可以自定义。
4
这种路径指的是“首页”链接。
5
在某些对视觉要求较高的情况下，会使用图片模式，但在 DOM 中依然保留标准化结构，方便搜索引擎收录。
6
对于最后一个项目的权重跃升，这个项目在很多情况下并不属于左侧的分类。如： “个人信息”
“设置”
控件规范：导航 Navigation 7 / 12

8. 图 15 横排导航：权重由左到右依次降低，最后出现跃升
 对于纵列导航，因为用户的横扫习惯，由上至下保持了一个简单的权重递减，顶部的权重最
高，底部权重最低。
图 16 纵列导航：权重从上至下依次降低
 越浅的导航越有效，用户能够方便的最快找到想要的信息。为了保持导航的浅度，有时候需
1
打破网站栏目之间明确的从属逻辑，压扁导航。
图 17 一个二级导航被压扁，成为浅度导航
1
因此，在现有的网站结构当中，导航并不是对网站从属逻辑的最优体现。
控件规范：导航 Navigation 8 / 12

9. 1
 对于全局和局部导航而言，它们需通过改变具体的某个链接样式来表示用户当前的位置 。
图 18 导航处“经销商与加盟”应该是凹陷状态
 页面的主导航一般深度为二级，一个页面内不能同时存在两个或两个以上的二级导航。
 导航的文字应是精简而易于理解的短语。勿使用疑问，否定语气。不超过 6 个汉字，实在无
法精简可使用自创名词或缩写。
 分类 5 个以下建议采用标签式，5-15 个建议采用横向列表，超过 15 个建议采用纵向列表。
 如果需要强调逻辑性和从属关系，可以使用下拉菜单和标签。
 当信息的分类较深时，建议取消导航，或只保留浅度导航，采用树状图。
 当信息的分类宽而深时，建议取消导航，或只保留浅度导航，重点突出搜索，同时建议采用
分面搜索。
 导航上同等级别的链接必须采用统一的样式，需要突出的某个链接与其他应保持较大的一致。
 导航上的文字应为链接或者块状样式，不可采用按钮，或者纯图标方式。
 导航上链接的激活方式应为“点击”，而不是“划过（Hover），导航上的链接除一些其他站
”
点外链之外，都必须是在当前页面打开。
 对于全局导航而言，他必须是一个通栏或者封闭式设计。以此将它与页面内其他元素区分开
1
这个位置无需像面包屑那样表示如此清晰，至少应该体验当前位置的顶级位置或者是父级位置。
控件规范：导航 Navigation 9 / 12

10. 来。
DOM
 导航一般为文字链接（Link）的形式，与链接的区别是，导航上的文字不需要默认下划线
（text-decoration:underline;）
，无需写 title，感应区域为大小相同的块状。
 导航使用<ul><li><a></li></ul>结构，如果需要圆角背景等效果,可在 li 标签内使用行内
元素 span,strong,em 等。
1
 导航不能含有自身链接 。
 文字链接导航无需默认设置 underline，但需要定义 hover 或者 actived 效果。
 除一些全动画站点之外，禁止使用纯 Flash 导航。
 所有导航，禁止使用 hover 激活方式。
 导航链接感应区域应设置为 block，而不是只感应文字区域。
2
 在 CSS Naked 模式下，导航须保持好的身材 。
对比
导航与站点结构树的关系？
从信息结构上来讲，按照严谨的分类，每个网站结构都可以用一个结构树来表示。
在进行卡片分类等研究过程中，往往会建立一种极其严谨的从属关系；简而言之，卡片分类是让
逻辑清晰，但是这个结构树可能非常的宽而且深。在这种情况下，如果导航依然保持与结构树的
对应显示，显然会与其浅度要求产生冲突。
一个直白明了的导航可能会打破逻辑关系，采用自然语言能够理解的结构。
事实上无论横排导航还是纵列导航，假如入屏幕足够宽或足够长，那么只需要一级导航就可以。
这种好处是用户更快找到自己想要的内容，但也打破了导航的结构树体现。
无论从那种角度上来说，用户并不需要了解网站具体的结构树，导航也不必完全照着结构树来体
现，以下是各种交互组件对结构树的体现度的排列。从左到右依次降低。
上下文导
树状图 面包屑 全局导航 局部导航 辅助导航
航
图 19 对于信息分类体现度的示意图
1
自身链接，指的是链接到当前页面的链接。点击之后与重新刷新（F5）当前页面相同。
2
好的身材，指的是好的结构，在 css Naked 下也能清晰且包含逻辑关系。
控件规范：导航 Navigation 10 / 12

11. 导航与面包屑的区别？
导航是告诉用户可以去哪，面包屑是告诉用户现在在哪。
面包屑比导航更注重信息的分类以及从属关系，面包屑可以告诉用户当前页面的父级元素以及进
入路径，导航则不可以。导航只能大致体现用户的当前位置。
全局导航和局部导航在大部分情况下依然还是遵从站点结构树，因此，不少站点选择了将到会与
面包屑结合的方式呈现。这是值得推崇的。那在具体使用时需考虑实际情况。
导航与面包屑如何结合？
导航与面包屑的最有效结合就如 Vista 内路径条一样。但是所有的这些结合，都是建立在信息架
构足够清晰、足够稳固同时又足够灵活的基础之上的。
图 20 Vista 系统的路径条
如果网站信息太丰富、太复杂，有些内容不能明确划分到某个类别中，面包屑就会变成鸡肋，导
航与面包屑的集合也变得毫无作用；这方面的典型就是门户网站。
如果你的网站结构够清晰，内容也够稳定，那么极有可能是企业或个人网站，对于这种站点，这
种结合则显得非常的高效和优秀。
导航与其他相关元素的结合于区别？
 实用工具（Utility）
实用工具是到达网站中不属于内容层次的重要元素的链接。他在页面上一般为这些元素：用
户登录，帮助信息，关于我们等。实用工具能够有效的帮助我们怎么使用站点；通常，全局
导航附近会出现 4-5 个实用工具。
 网站标志（Logo）
网站标志，导航，面包屑都能够告诉用户当前在什么位置，仅仅只是详细的区别。通常，网
站标志与全局导航共同存在，并且会出现在其右侧。网站标志同样提供一个和全局导航相同
控件规范：导航 Navigation 11 / 12

12. 的路径：回到首页。但这不意味着，导航可以取消此路径。
 搜索栏（search Bar）
海量的信息将会使导航不堪重负，搜索似乎是现有的最佳解决办法。对于超大型站点而言，
导航很大程度上已经失去作用，搜索成为最重要的路径提供工具。导航仅仅只会按照信息的
物理属性而对其进行辅助。
搜索栏与导航同样都告诉用户可以去哪里，为用户提供进入站点路径；搜索栏因此会出现在
导航附近区域。如，全局导航右侧。
如何导航用户生产的信息？
Web 应用当中，对于用户生产出来的信息，除了提供简单的默认分类之外，大部分应用是提供用
户自定义分类的。当用户选择自定义分类时，导航条则不属于这种应用场景1。更多的采用的是标
签云（Tags Cloud），树状图（Tree）或者链接列表（link list）样式。
如何看待“三次点击“原则?
谓的“三次点击”原则，是站内的链接的一个指导原则，让网站“链接结构”扁平化。从首页开始，
网站内的内容经 3 次点击即可到达。
如企业站：首页 -> 产品列表 -> 产品页(2 次)
如资讯站：首页 -> 频道 -> 栏目 -> 内容 (3 次)
“三次点击”原则要求必须将信息架构尽量压扁，当遇到海量信息，问题出现了：扁平的信息架
构造成了冗长的内容列表，对于导航而言，这有可能导致链接列表项目非常的多，反而不利于用
户检索信息。
我们可以看到，“三次点击”原则提供了网站设计的一个重要的参照规范，他的不适用只限于超
大型信息站点（如 163.com），如果恪守原则的话，用户往往需要进行“内容-列表-内容-列表-”的拨
浪鼓式操作。要缩短浏览路径，就必须要建立“内容-内容”的信息关联，建立信息闭环2。
1
对于系统默认的分类依然可以使用导航条。
2
可参考 http://www.hozin.com/Point/200908/Information-Closed-Loop.html
控件规范：导航 Navigation 12 / 12