制表符

注意

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

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

五个选项卡的屏幕截图

典型的选项卡集。

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

选项卡控件表示用于组织在美国通常发现的档案柜中的信息的选项卡式马尼拉文件夹。 (马尼拉文件夹未在全球使用。

注意

有关 布局选项卡菜单对话框以及 属性窗口 的指南,请参阅单独的文章。

这是正确的控件吗?

若要决定,请考虑以下问题:

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

使用模式

选项卡有多个使用模式:

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

如果你只做一件事...

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

指引

常规

  • 如果:,则 使用水平选项卡

    • 该窗口包含七个或更少的选项卡。
    • 所有选项卡都适合一行,即使用户界面(UI)已本地化也是如此。
  • 如果:,则 使用垂直选项卡

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

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

      屏幕截图

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

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

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

    不正确:

    截断的水平选项卡标签屏幕截图

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

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

    使用滚动条屏幕截图

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

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

    不正确:

    带有选项卡屏幕截图

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

互动

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

图标

  • 不要在选项卡上放置图标。 图标通常添加不必要的视觉混乱、占用屏幕空间,并且通常不会改善用户理解。 仅添加有助于理解的图标,例如标准符号。

    不正确:

    选项卡屏幕截图

    在此示例中,这些图标添加视觉混乱,很少改进用户理解。

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

    正确:

    带有图标和已桥式标签的选项卡的屏幕截图

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

  • 不要将产品徽标用于选项卡图形。 选项卡不适用于 品牌

动态窗口图面模式

  • 不要在选项卡页上使用滚动条。 选项卡的功能类似于滚动条,以增加窗口的有效区域。 一种机制应该足够。

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

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

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

    不正确:

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

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

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

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

    不要禁用选项卡,因为这样做不是自我解释的,禁止浏览。 查找特定值的用户将被迫在所有其他选项卡上查找。

    窗口的屏幕截图,其中视图选项卡选项灰显

    在此示例中,“阅读布局”中没有任何视图选项适用。 但是,用户可能期望他们基于选项卡标签应用,因此显示页面,但选项已禁用。

多个视图和文档模式

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

独占选项模式

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

    不正确:

    窗口的屏幕截图,其中两个“创建”选项卡

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

    正确:

    窗口的屏幕截图,其中两个单选按钮

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

标签

  • 标签选项卡基于其模式。 使用名词而不是动词,而不用结束标点符号。 有关详细信息,请参阅前面的模式指南。
  • 使用句子样式大写。
  • 请勿分配访问密钥。 可通过快捷键(Ctrl+Tab、Ctrl+Shift+Tab、Ctrl+PgUp、Ctrl+PgDn)访问选项卡。 访问密钥选项不足,因此不向选项卡分配访问密钥可以更轻松地将其分配到其他控件。

文档

引用选项卡时:

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

示例:在 工具 菜单上,单击 选项,然后单击 视图 选项卡。