制表符

注意

此设计指南是为 Windows 7 创建的，尚未针对较新版本的 Windows 进行更新。 大部分指南原则上仍然适用，但演示和示例并不反映我们 当前的设计指南。

选项卡提供了一种在单独标记的页面上显示相关信息的方法。

一组典型的选项卡。

选项卡通常与属性窗口关联 (反之亦然，) ，但选项卡可以在任何类型的窗口中使用。

选项卡控件表示选项卡式马尼拉文件夹，用于组织文件柜中通常位于美国中的信息。 (马尼拉文件夹不在全球使用。)

注意

单独的文章中提供了与 布局、 选项卡菜单、 对话框和 属性窗口 相关的指南。

这是正确的控件吗？

在决定之前，请考虑以下问题：

• 控件能否舒适地适应单个大小合理的页面？ 如果是，请使用单个页面。
• 是否只有一个选项卡？ 如果是，请使用单个页面。
• 选项卡之间是否以某种明显的方式相互关联？ 如果没有，请考虑将信息拆分为单独的相关信息窗口。
• 如果用于设置，不同页面上的设置是否完全独立？ 更改一个页面上的设置会影响其他页面上的设置吗？ 如果它们不独立，请改用任务页或 向导 。
• 选项卡主要是彼此对等的，还是存在分层关系？ 如果是分层的，请考虑使用渐进式披露或子 对话框 来显示相关信息。
• 选项卡是否用于显示任务中的步骤？ 仅当任务中的步骤显示为步骤时，才能使用“选项卡”来显示步骤，并且有一种明显的替代方式来访问文本步骤，例如“下一步”按钮。 否则，如果需要这些步骤，请使用页面流或 向导中的页面。 如果这些步骤是可选的，请改用模式 对话框 显示可选步骤。
• 选项卡是否是相同数据的不同视图？ 如果是这样，请考虑使用 拆分按钮 或 下拉列表 来更改视图。 虽然选项卡可以有效地用于更改视图，但替代项更轻量。

使用模式

选项卡具有多种使用模式：

使用情况	示例
动态窗口图面 与滚动条一样，选项卡可用于增加窗口外围应用以显示相关信息。	使用此模式时，使用选项卡在概念上类似于将选项卡上的所有信息线性放置在单个可滚动图面上，选项卡标签为标题。 在此示例中，制表符有效地增加了窗口外围应用。
多个视图 如拆分按钮或下拉列表，选项卡可用于显示相同或相关信息的不同视图。	在此示例中，制表符更改文档中的视图。
多个文档 与多个窗口一样，选项卡可用于在单个窗口中显示不同的文档。	在这些示例中，选项卡在单个应用程序窗口中显示不同的文档。
独占选项 与单选按钮一样，选项卡可用于显示多个独占选项。 在此模式中，仅应用所选选项卡，并忽略所有其他选项卡。	在此示例中，选项卡使用 (错误地) 作为单选按钮的替代项。 不建议使用此模式 ，因为它使用非标准行为。 选项卡的行为是一种设置，而不是纯粹是一种在窗口中导航的方式。

如果只执行一件事...

请确保选项卡上的信息是相关的，但不同页面上的设置是独立的。 选择的最后一个选项卡应该没有特殊含义。

准则

常规

• 在以下情况下使用水平选项卡：

  • 窗口具有七个或更少的选项卡。
  • 所有选项卡都适合一行，即使用户界面 (UI) 已本地化也是如此。

• 在以下情况下使用垂直制表符：

  • 属性窗口有八个或更多个选项卡。

  • 使用水平选项卡需要多行。

    

    在此示例中，垂直选项卡包含八个或更多个选项卡。

• 不要嵌套制表符或将水平制表符与垂直制表符组合使用。 相反，请减少选项卡数、仅使用垂直选项卡或使用其他控件（如下拉列表）。

• 不要滚动水平选项卡。 无法轻松发现水平滚动。 但是，可以滚动垂直选项卡。

  不正确：

  

  在此示例中，水平选项卡是滚动的。

• 对于可调整大小的窗口或窗格上的选项卡，根据需要将滚动条放在页面上，而不是窗口或窗格。 选项卡应始终可见，并且不会滚动到视图外。

  

  在此示例中，选项卡页具有滚动条，而不是窗格。

• 确保选项卡看起来像选项卡，而不是其他类型的控件。

  不正确：

  

  在此示例中，这些选项卡类似于命令按钮。

交互

• 当控件仅应用于页面时，将它们置于选项卡式页面的边框内。
• 当控件应用于整个窗口时，将它们放置在选项卡式页面的外部。
• 不要为更改选项卡分配效果。 选项卡必须按任意顺序进行访问。 更改当前选项卡不应产生副作用、应用设置或导致错误消息。
• 不要为所选的最后一个选项卡指定特殊含义。 选项卡选择用于导航，用户的最后一个选项卡选择不是一个设置。
• 不要使页面上的设置依赖于其他页面上的设置。 请改为将任何依赖设置放在同一页上。
• 如果用户可能从显示的最后一个选项卡开始，请保留该选项卡，并在默认情况下将其选中。 使设置在每窗口、每个用户的基础上持久保存。 否则，默认选择第一页。

图标

• 不要将图标放在选项卡上。 图标通常会添加不必要的视觉混乱、占用屏幕空间，并且通常无法提高用户理解能力。 仅添加有助于理解的图标，例如标准符号。

  不正确：

  

  在此示例中，图标添加视觉混乱，对提高用户理解几乎无所事事。

  例外： 如果空间不足，无法显示有意义的标签，则可以使用可清晰识别的图标：

  正确：

  

  在此示例中，窗口非常窄，图标比标签更好地传达选项卡。

• 请勿将产品徽标用于选项卡图形。 选项卡不用于 品牌打造。

动态窗口图面图案

• 请勿在选项卡页上使用滚动条。 选项卡的功能类似于滚动条，以增加窗口的有效面积。 一种机制应该就足够了。

• 使用简洁的选项卡标签。 使用一两个单词来清楚地描述页面的内容。 较长的标签会占用屏幕空间，尤其是在本地化标签时。

• 使用特定且有意义的选项卡标签。 避免可能应用于任何选项卡的通用选项卡标签，例如“常规”、“高级”或“设置”。

• 如果选项卡不适用于当前上下文，并且用户不期望它，请将其删除。 这样做可以简化 UI，用户不会错过它。

  不正确：

  

  在此示例中，当 Microsoft Word 用作电子邮件编辑器时，“文件位置”选项卡被错误地禁用。 不应禁用此选项卡，而是应将其删除，因为用户不希望在此上下文中查看或更改文件位置。

• 如果选项卡不适用于当前上下文，并且用户可能希望它：

  • 显示选项卡。
  • 禁用页面上的控件。
  • 包含说明禁用控件的原因的文本。

  请勿禁用选项卡，因为这样做不言而喻，并且禁止浏览。 查找特定值的用户将被迫查看所有其他选项卡。

  

  在此示例中，“阅读布局”中没有“视图”选项适用。 但是，用户可能希望基于选项卡标签应用它们，因此显示页面，但选项被禁用。

多个视图和文档模式

• 在选项卡标签上使用视图或文档名称。
• 避免选项卡名称过长。 如有必要，请使用最大名称大小或使用省略号截断显示的选项卡标签。 较长的标签会占用屏幕空间，尤其是在本地化标签时。
• 如果选项卡不适用于当前上下文，请删除该选项卡。

独占选项模式

• 请勿使用此模式！ 请改用单选按钮或下拉列表。

  不正确：

  

  在此示例中，选项卡被错误地用作单选按钮的替代项。

  正确：

  

  在此示例中，将正确使用单选按钮。

标签

• 根据选项卡的模式标记选项卡。 使用名词而不是动词，不结束标点。 有关详细信息，请参阅前面的模式指南。
• 使用句式大写。
• 不要分配访问密钥。 可通过快捷键 (Ctrl+Tab、Ctrl+Shift+Tab、Ctrl+PgUp、Ctrl+PgDn) 来访问选项卡。 由于缺少良好的访问键选项，因此不向选项卡分配访问键可以更轻松地将它们分配给其他控件。

文档

引用选项卡时：

• 使用确切的标签文本（包括其大写），并包含单词选项卡。
• 若要描述用户交互，请使用单击。
• 如果可能，请使用加粗文本设置标签的格式。 否则，仅在需要时将标签置于引号中以防止混淆。
• 由于多次使用可能不明确，尤其是对于全球受众，因此单独使用名词选项卡仅引用选项卡控件。 对于其他用途，请使用描述符阐明含义：Tab 键、制表位或标尺上的制表符标记。

示例：在“ 工具 ”菜单上，单击“ 选项”，然后单击“ 视图 ”选项卡。