制表符

注意

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

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

screen shot of five tabs

典型的选项卡集。

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

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

注意

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

这是正确的控件吗?

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

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

使用模式

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

用法 示例
动态窗口图面
与滚动条一样,选项卡可用于增加窗口外围区域以显示相关信息。
使用此模式时,使用选项卡在概念上类似于将所有信息线性放置在单个可滚动图面上的选项卡上,选项卡标签作为标题。
screen shot of five tabs
在此示例中,选项卡可有效地增加窗口图面区域。
多个视图
与拆分按钮或下拉列表一样,选项卡可用于显示相同或相关信息的不同视图。
screen shot of design, split, and preview tabs
在此示例中,选项卡更改文档中的视图。
多个文档
与多个窗口一样,选项卡可用于在单个窗口中显示不同的文档。
screen shot of three tabs for different documents
figure of tabs for different months
在这些示例中,选项卡在单个应用程序窗口中显示不同的文档。
独占选项
与单选按钮一样,选项卡可用于显示多个独占选项。 在此模式中,只有所选选项卡适用,所有其他选项卡将被忽略。
screen shot of location, data, and messages tabs
在此示例中,选项卡 (错误地) 用作单选按钮的替代项。
不建议使用此模式 ,因为它使用非标准行为。 选项卡的行为是设置,而不是纯粹是在窗口中导航的方法。

如果你只做一件事...

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

指南

常规

  • 如果以下情况,请使用水平选项卡:

    • 窗口包含七个或更少的选项卡。
    • 即使用户界面 (UI) 本地化,所有选项卡都适合一行。
  • 如果以下情况,请使用垂直选项卡:

    • 属性窗口包含 8 个或更多选项卡。

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

      screen shot of property window with eleven options

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

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

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

    不正确:

    screen shot of truncated horizontal tab label

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

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

    screen shot of vertical tab page with scroll bar

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

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

    不正确:

    screen shot of window with buttons for tabs

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

交互

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

图标

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

    不正确:

    screen shot of window with icons on tabs

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

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

    正确:

    screen shot of tabs with icons and abridged labels

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

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

动态窗口图面模式

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

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

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

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

    不正确:

    screen shot of options window with tab name dimmed

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

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

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

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

    screen shot of window with view tab options dimmed

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

多个视图和文档模式

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

独占选项模式

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

    不正确:

    screen shot of window with two 'create' tabs

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

    正确:

    screen shot of window with two radio buttons

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

标签

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

文档

引用选项卡时:

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

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