网页控件规范
- 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