选项卡

备注

此设计指南是针对 Windows 7 创建的,并且尚未更新 Windows 的更新版本。 本指南中的大部分内容仍适用,但演示和示例并不反映我们 当前的设计指导

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

5个选项卡的屏幕截图

一组典型的选项卡。

选项卡通常与属性 windows (相关联,反之亦然) ,但是选项卡可用于任何类型的窗口中。

选项卡控件表示马尼拉文件夹,这些文件夹用于组织通常在美国中找到的存档文件柜中的信息。 不会在全球范围内使用 (马尼拉文件夹。 )

备注

布局选项卡菜单对话框属性窗口 相关的准则显示在单独的文章中。

这是正确的控件吗?

在决定之前,请考虑以下问题:

  • 控件是否可以适当地适应单个大小合理的页面? 如果是这样,请使用单个页面。
  • 只有一个选项卡? 如果是这样,请使用单个页面。
  • 选项卡是否以某种显而易见的方式相互关联? 如果不是这样,请考虑将信息拆分为单独的相关信息窗口。
  • 如果用于设置,则不同页面上的设置是否完全独立? 更改一页上的设置是否会影响其他页上的设置? 如果它们不是独立的,请改用任务页或 向导
  • 选项卡是彼此之间还是彼此同级,还是有层次结构关系? 如果是分层的,请考虑使用渐进式披露或子 对话框 来显示相关信息。
  • 选项卡是否用于显示任务中的步骤? 仅当任务显示为类似步骤时,才可以使用 "选项卡" 显示任务中的步骤,并且可以使用一种明显的替代方法来访问文本步骤,如 "下一步" 按钮。 否则,如果需要执行这些步骤,请使用页面流或 向导中的页面。 如果步骤是可选的,请改为使用模式 对话框 显示可选步骤。
  • 选项卡是否具有相同数据的不同视图? 如果是这样,请考虑使用 拆分按钮下拉列表 来更改视图。 尽管选项卡可以有效地用于更改视图,但替代方法更轻量。

使用模式

选项卡具有几个使用模式:

使用情况 示例
动态窗口图面
与滚动条一样,选项卡可用于增加窗口外围应用以显示相关信息。
使用此模式,在概念上类似于将选项卡上的所有信息以线性方式放置在单个可滚动表面上,选项卡标签作为标题。
5个选项卡的屏幕截图
在此示例中,选项卡会有效地增加窗口外围应用。
多个视图
与拆分按钮或下拉列表类似,选项卡可用于显示相同或相关信息的不同视图。
"设计"、"拆分" 和 "预览" 选项卡的屏幕截图
在此示例中,选项卡会更改文档中的视图。
多个文档
与多个窗口一样,选项卡可用于在单个窗口中显示不同的文档。
不同文档的三个选项卡的屏幕截图
不同月份的选项卡图
在这些示例中,选项卡在单个应用程序窗口中显示不同的文档。
独占选项
与单选按钮一样,选项卡可用于显示多个独占选项。 在此模式中,只会应用所选的选项卡,并忽略所有其他选项卡。
"位置"、"数据" 和 "消息" 选项卡的屏幕截图
在此示例中,使用了选项卡 (错误地) 替换为单选按钮。
不建议使用此模式, 因为它使用非标准行为。 选项卡的行为是一种设置,而不是纯粹在窗口中导航的方法。

如果只做一件事 .。。

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

指南

常规

  • 使用水平选项卡(如果:

    • 此窗口具有7个或更少的选项卡。
    • 即使 (UI) 的用户界面进行了本地化,所有选项卡仍适用于一行。
  • 如果是以下情况,则使用垂直选项卡:

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

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

      具有十一个选项的属性窗口的屏幕截图

      在此示例中,垂直选项卡容纳8个或更多选项卡。

  • 不要嵌套选项卡,或者将水平制表符与垂直选项卡组合在一起。 相反,减少选项卡数目,只使用垂直选项卡,或者使用其他控件(如下拉列表)。

  • 不要滚动水平制表符。 横向滚动并不容易发现。 不过,您可以垂直滚动制表符。

    不正确:

    截断的水平制表符标签的屏幕截图

    在此示例中,水平选项卡会滚动。

  • 对于可调整大小的窗口或窗格上的选项卡,请在需要时将滚动条置于页面上,而不是窗口或窗格中。 选项卡应始终可见,而不是从视图中滚动。

    带滚动条的垂直选项卡页的屏幕截图

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

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

    不正确:

    带有选项卡按钮的窗口的屏幕截图

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

交互

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

图标

  • 不要将图标放在选项卡上。 图标通常会增加不必要的视觉干扰,使用屏幕空间,并且通常不能改善用户理解。 仅添加有助于理解的图标,如标准符号。

    不正确:

    带有选项卡上的图标的窗口的屏幕截图

    在此示例中,这些图标可以增加视觉对象的混乱,并不太方便提高用户理解。

    异常: 如果空间不足,无法显示有意义的标签,则可以使用清晰可识别的图标:

    正确:

    带有图标和缩减标签的选项卡的屏幕截图

    在此示例中,窗口太窄,因此图标比标签更好地传达选项卡。

  • 请勿使用选项卡图形的产品徽标。 选项卡不用于 品牌标记

动态窗口图面模式

  • 请勿在选项卡页上使用滚动条。 选项卡的工作方式类似于滚动条,以增加窗口的有效区域。 一种机制应该足以满足需要。

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

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

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

    不正确:

    选项卡名称灰显的 "选项" 窗口的屏幕截图

    在此示例中,将 Microsoft Word 用作电子邮件编辑器时,"文件位置" 选项卡不会被正确禁用。 应删除此选项卡,而不是禁用此选项卡,因为用户不希望在此上下文中查看或更改文件位置。

  • 如果选项卡不适用于当前上下文,用户可能希望它:

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

    请勿禁用该选项卡,因为这样做不会一目了然,并且禁止浏览。 查找特定值的用户将被强制查找所有其他选项卡。

    "视图" 选项卡选项灰显的窗口屏幕截图

    在此示例中,没有任何视图选项适用于读取布局。 但是,用户可能希望它们基于选项卡标签进行应用,因此会显示页面,但禁用了选项。

多个视图和文档模式

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

Exclusive options 模式

  • 不要使用此模式! 请改用单选按钮或下拉列表。

    不正确:

    具有两个 "创建" 选项卡的窗口的屏幕截图

    在此示例中,选项卡不正确地用作单选按钮的替代项。

    正确:

    具有两个单选按钮的窗口的屏幕截图

    在此示例中,改为正确使用单选按钮。

标签

  • 基于其模式为选项卡添加标签。 使用名词而不是动词,无需结束标点。 有关详细信息,请参阅前面的模式准则。
  • 使用句式大写。
  • 不要分配访问密钥。 选项卡可通过其快捷键 (Ctrl + Tab、Ctrl + Shift + Tab、Ctrl + PgUp、Ctrl + PgDn) 访问。 没有足够的访问密钥选择,因此不能将访问密钥分配给选项卡,从而更容易将它们分配给其他控件。

文档

引用选项卡时:

  • 使用确切的标签文本(包括其大小写),并包含 "单词" 选项卡。
  • 若要描述用户交互,请使用单击。
  • 如果可能,请使用粗体文本设置标签的格式。 否则,仅在需要时才将标签放在引号中以防止混淆。
  • 由于多个使用可能不明确,特别是对于全球受众,使用 "名词" 选项卡只引用选项卡控件。 对于其他用途,使用描述符来阐明含义: Tab 键、制表符或标尺上的制表符。

示例:在 " 工具 " 菜单上,单击 " 选项",然后单击 " 查看 " 选项卡。