（翻译）导航标签（ Navigation Tabs）

问题概述

需要将内容划分为多个部分，采用平面导航方式来访问这些部分的内容，这样可以清晰地指示当前的位置[1]。

示例

  用途

• 用于内容可以划分为2-9个部分，需要使用屏幕导航模式时；
• 用于内容每个部分的名称相对较短时；
• 用于想让导航在水平方向充满整个页面时；
• 用于想提供网站中的最好的模块或者子模块列表时；
• 如果想显示与特定内容相关的数据，则不要使用本模式。例如显示最新的文章；
• 如果不需要找出当前选中的选项，则不要使用本模式[2]；
• 如果模块列表或者目录列表中包含“更多...”链接，则不要使用本模式。可以考虑使用其它导航模式。

解决方案

• 采用水平栏包含网站中的不同的部分或目录；
• 通常使用类似于按钮的标签表示一个部分或目录，这就是为什么标签应该是可点击的，而不仅仅是作为文本来标识一个部分或者目录；
• 根据需要，还可以在顶部栏下再配备一栏，用以显示当前在顶部栏中选中对象的下一级内容；
• 标签链接的所有网页中导航标签都一直存在；
• 不同网页中的导航标签结构（顺序）应该保持一致，这样用户就可以将导航标签与其对应的网页联系起来；
• 应该高亮显示选中的标签，这样便于指示当前的位置；
• 如果使用了下一级内容导航标签（也就是在顶部栏下面有一个二级水平栏），应该在当前选中的顶部栏标签与二级水平栏之间建立明确的、可视化的关联[3]。

说明

本模式类似于桌面的扩展，GUI元素就像桌子上的物品一样。导航标签功能参考文件柜中的文件夹管理方式，因此其用法 也为最终用户所熟悉。

导航标签能够明确地、可视化地说明在网站中可以找到什么内容，并且高亮显示用户当前所在的位置。

原文地址：http://ui-patterns.com/patterns/NavigationTabs

[1]原文：Content needs to be separated into sections and accessed using a flat navigation structure that gives a clear indication of current location.

[2]原文：Do not use when there is no need to single-out the currently selected option.

[3]原文：If subsections are used (a second horizontal bar below the top bar) there should be a clear visual connection between the currently selected top tab and the bar below showing subsections.