使用标签页，与标签相关联的信息可以在独立的页面上分别展示。

一组典型的标签页

标签页通常出现在属性窗口中，但实际上标签页可以在任何窗口中使用。
标签页控件源于在美国常见的文件柜中整理信息的带标签的马尼拉文件夹。 (马尼拉文件夹不在全世界通用。)

何时使用该控件？

思考以下问题：

• 所有控件是否都能放置在同一个大小合宜的页面上？如果是，直接使用单页。
• 是否只有一个标签？如果是，使用单页。
• 这些标签页之间是否有明显的联系？如果没有，可以考虑将信息分割成相关信息的不同窗口。
• 如果用于设置，不同页面上的设置是否完全独立？更改一个页面的设置会影响其他页面的设置吗？如果它们不是独立的，则使用任务页面或向导页面代替。
• 标签页之间是同级关系，还是层级关系？如果是层级关系，考虑使用渐进式展示控件或者子对话框来显示相关信息。
• 标签页是用来展示同一个任务中的数个步骤吗？只有当标签页的设计看起来类似步骤、并且有一个明显的（除点击标签页外的）替代方法（比如“下一步” 按钮）来进入下一步骤时，您可以使用它来显示任务中的步骤。 否则，如果需要这些步骤，请使用页面流或向导页来引导设置。如果步骤是可选的，则使用模态对话框显示可选的步骤。
• 标签页展示的是同一数据的不同视图吗？如果这样，考虑使用分裂式按钮或者下拉菜单来更改视图。尽管标签页也可以更改视图，但其他两种控件更轻量。

应用范例

标签页有以下几种使用形式：
动态窗口界面：类似滚动条，标签页可用来扩展窗口界面以显示更多信息。使用这种模式，使用标签页在概念上类似于将所有信息以可滚动选项卡的形式线性排列在单个界面上，并将标题作为选项卡标签。

在该例中，标签页（选项卡）有效地扩展了界面的显示区域

在该例中，标签页可更改文件的视图模式

在上面例子中，标签页在同一窗口中展示了多份文件

在本例中，选项卡(错误地)被用作单选按钮的替代品。 **不推荐使用此模式**，这是一种非标准行为：该例中标签页的作用是设置，而不是单纯在窗口中导航。

只需记住一件事······
标签页下的信息相互之间是有关联的，但不同标签页下的设置又是相互独立的。最后一项被选中的标签页不应具有任何特殊含义。

设计指南

通用原则

• 以下情况使用水平标签页：
  1.窗口的标签页少于7个；
  2.即使在用户界面本地化的极端情况之下，在一行上排列所有标签也是合适的。

• 以下情况使用垂直标签页（个人觉得这种情况下叫选项卡更为合适）：
  1.属性窗口的标签页多于8个；
  2.使用横向标签页会出现超过一行的情况。
  

  在该例中，纵向标签页可以容纳8个及以上的标签页

• 不要嵌套标签页，也不要将横向标签页与纵向标签页组合在一起。应该减少标签页的数量，只使用纵向标签页；或者使用其他控件，如下拉列表等。

• 不要将标签页横向滚动。水平滚动的功能不容易被用户发现。但纵向标签页的垂直滚动是可以的。

错误示例：横向滚动的标签页

• 对于可调整大小的窗口或面板上的标签页，当需要的时候，在页面内、而不是整个窗口上加滚动条。

  
  
  该例中，滚动条在标签页内而不是在窗口上。

• 确保标签页的形态像标签页，而不是其他控件。
  

  错误示例：这些标签页看起来像是命令按钮

交互

• 当控件仅应用于页面内时，请将它们放置在选项卡式页面的边框之内。
• 当控件应用于整个窗口时，将它们置于选项卡式页面之外。
• 在更改选项卡标签页的时候不要设置特殊效果。标签页可以按任意顺序访问。更改当前选项卡不应产生附带效果、应用特殊的设置或触发错误提示。
• 不要为用户最后选择的标签页赋予特殊的意义。标签页选择的作用是导航，用户选择的最后一个标签并不是某种设置。
• 不要让一个页面内的设置依赖于其他页面上的设置。将所有相关联的设置放在同一页面上。
• 如果用户可能从显示的最后一个选项卡开始，使该选项卡保持不变，并默认选中它。将这一设置应用在每个窗口、每个用户上。否则，默认选中第一个标签页。

图标

• 不要在选项卡上放置图标。这里的图标通常会造成视觉冗余，在占用屏幕空间的同时也不会增进用户对选项的理解。只有类似于标准符号等能帮助用户更好地理解选项卡的图标才是可以被添加的。
  

  错误示例
  
  例外情况: 当空间不足以显示有意义的完整标签文字，你可以使用清晰可识别的图标:
  
  在该例中，窗口过窄，图标比文字在标签页中的表意效果更好

• 不要在标签页中使用产品logo图标。标签页不能用来做品牌标志。

动态窗口界面模式

• 不要在所有标签页上方再加滚动条。标签页的功能本就与滚动条类似，是为了增加可用的屏幕空间。这两种机制择一选用就可以了。

• 使用简明的标签页文字。使用一至两个词简单描述页面内容。过长的文字标签会占用屏幕空间，还要考虑到本地化标签文字时需要的空间。

• 使用明确、有意义的标签页文字。避免使用可以应用于任何标签页的文字描述，比如：“通用”、“高级”和“设置”等。

• 如果一个标签页不适用于当前上下文，用户也不希望应用它，就直接去掉它。这样做可以简化界面。
  

  错误示例：在此示例中，在将 microsoftword 用作电子邮件编辑器时，未正确禁用“文件位置”选项卡。应该删除这个选项卡，而不是禁用它，因为用户不希望在这个上下文中查看或更改文件位置。

• 当某个选项卡不适用于当前上下文，但用户可能会希望：
  1.展示选项卡控件。
  2.禁用该标签页内的所有控件。
  3.展示解释为何控件被禁用的文字信息。
  时：
  不要直接禁用该选项卡，直接禁用会让用户无法进行探索，而且也没有给出禁用的原因。如果用户有明确需要的内容，将不得不一一点击其他所有选项卡进行查看。
  

  该例中，视图选项卡下没有任何一项可以应用于阅读布局。但是，基于对标签文字的理解，用户可能希望选项卡下的应用能生效，因此页面会显示，但选项是禁用的。

多视图和多文档模式

• 将视图或文档名称放在标签上。
• 避免过长的标签名。如果需要，可以设置最大名称长度，或者使用省略号截断显示的选项卡标签。长的标签会占用更多屏幕空间，特别是当标签本地化时。
• 如果选项卡不适用于当前上下文，则删除该选项卡。

独占选项模式

• 不要使用此种模式！直接用单选按钮或下拉列表代替。
  
  错误示例：选项卡被错误地用作单选按钮的替代品

正确示例

标签

• 基于模式为选项卡设置标签文字。使用名词而不是动词，不要设置结束标点符号。更多有关信息，请参见前面的模式指南。

• 使用句式大小写规则。

• 不要分配存取键。可以通过快捷键(Ctrl + Tab，Ctrl + Shift + Tab，Ctrl + PgUp，Ctrl + PgDn)访问标签。好的存取键搭配数量有限，因此不将访问键分配给选项卡，就能将它们分配给其他控件了。

说明

当提到标签页/选项卡时：

• 使用确切的标签文本，包括其大小写，并加上“选项卡/标签页/tab”描述。
• 要描述用户交互，请使用点击/click。
• 尽量使用粗体文本格式化标签文字。否则，仅在需要时将标签加上引号，以防混淆。
• 因为多重用法可能是模棱两可的，特别是对于全世界的读者来说，单独使用名词“选项卡”来指代选项卡控件。对于其他用途，请使用描述符(Tab 键、制表位或标尺上的制表符标记)来阐明其含义。