出自UXGuide.net

选项卡

Tabs

目录 1 它用在这里合适吗？ 2 使用模式 3 设计规范 3.1 常规 3.2 交互 3.3 图标 3.4 动态窗口界面模式 3.5 多视图及多文档模式 3.6 互斥选项模式 4 标签 5 文档编写

选项卡（Tab）提供了一种将相关信息显示在单独的带标签页的方法。

典型的一组选项卡

虽然选项卡往往与属性窗口（或者其他情况）一起使用，但其可以被使用于任何窗口类型中。

选项卡展示了一种在美国很常见的做法——将资料组织在带有标签页的马尼拉文件夹的填充袋内。（马尼拉文件夹在全世界范围内并不常见）。

注：与布局、选项卡菜单、对话框和属性窗口相关的设计规范请参考各自相应的章节。

它用在这里合适吗？

考虑下列问题以进行判断：

• 是否能将控件放置于单个某尺寸的页面中？如果可以，则应使用单页。
• 是否只有一个选项卡？如果是，则应使用单页。
• 各选项卡之间是否有明显的联系？如果没有，则应考虑将相关的信息分别放置到单独的窗口中。
• 如果用于设置，不同页上的设置是否相互独立？一个页面上设置的改变，是否会影响其他页面？如果他们相互不独立，则应改用任务页面（Task Page）或向导。
• 选项卡相互之间是处于平等地位，还是具有层级关系？如果是层级关系，考虑使用渐进展开或子对话框来显示相关信息。
• 选项卡是否用于显示一个任务中的多个步骤？仅当它们看起来像是多个步骤，且存在明显的其他方式可以进入到下一步（如“下一步”按钮）时，才可使用“选项卡”来显示多个步骤。否则，如果这些步骤是必须的，应使用页面流（Page Flow）或向导中的页面。如果这些步骤是可选的，则应改用模式对话框来显示这些步骤。
• 这些选项卡是否是相同数据的不同视图？如果是，考虑使用分割按钮（Split Button）或下拉列表来改变视图。虽然选项卡可以快速有效地用于切换视图，但其他方案更为轻便。

使用模式

选项卡具有下列使用模式：

动态窗口界面 与滚动条类似，选项卡可以用于增大窗口界面尺寸以显示相关的信息。	在这个模式中，使用选项卡在概念上类似于将选项卡上的所有信息线性排列在一个可滚动的界面上，选项卡标签即为标题。 在这个示例中，选项卡有效地增大了窗口界面的尺寸。
多视图 与分割按钮或下拉列表类似，选项卡可以用于为相同或相关信息显示不同的视图。	在这个示例中，选项卡用于在文档中更改视图。
多文档 与多窗口类似，选项卡可以用于在单窗口中显示不同的文档。	在这些示例中，选项卡用于在单个应用程序窗口中显示不同的文档。
互斥选项 与选项按钮类似，选项卡可以用于呈现多个互斥的选项。在这个模式中，只有选中的选项卡会生效，而其他选项卡则被忽略。	在这个示例中，选项卡被（错误地）用于选项按钮的替代品。 不推荐使用此模式，因为这是非常规的行为。选项卡被用作一个设置而不是纯粹的窗口内导航方式。

最重要的一件事：

确保选项卡上的信息是相关的，而不同页上的设置是没有依赖关系的。最后选中的选项卡并没有特殊的含义。

设计规范

常规

• 使用水平选项卡的情况：
  • 该窗口包含七个或者七个以下的选项卡。
  • 所有选项卡可以排列在一行中，即使该用户界面被本地化后也是如此。
• 使用垂直选项卡的情况：
  • 该属性窗口包含八个或者八个以上的选项卡。
  • 使用水平选项卡会需要不止一行。

在这个示例中，垂直选项卡适合于八个或者八个以上的选项卡。

• 不要嵌套选磺卡或是共用水平及垂直选项卡。而是应当减少选项卡的数量、仅使用垂直选项卡、或是使用其他的控件，如下拉列表。
• 不要滚动水平选项卡。水平滚动不容易被发现。不过你可以滚动垂直选项卡。

错误：

在这个示例中，水平滚动条需要滚动。

• 对于可缩放窗口或窗格中的选项卡来说，当需要使用滚动条时，应当放置在选项页上，而非窗口或窗格。选项卡应当始终可见而不应被滚动到视野之外。

在这个示例中，选项卡包含滚动条，而非窗格。

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

错误：

在这个示例中，这些选项卡看起来像是命令按钮。

交互

• 当控件仅适用于一个选项页时，将其放在该选项页的边框之内。
• 当控件适用于整个窗口时，将其放在选项页之外。
• 不要为切换选项卡添加效果。选项卡应当可以以任何顺序进行访问。更改当前选项卡不应该带有任何副作用、应用选项、或是导致出现错误信息。
• 不要为最后选中的选项卡赋予特殊含义。选项卡的选择只用于导航——用户最后的选项卡选择并非一项设置。
• 不要使一个页面上的设置依赖于其他页上的设置。相互依赖的设置应当放置在相同的页面上。
• 如果用户通常会从最后显示的选项卡开始的话，应当维持并默认进行选择。这些设置应当是基于特定的窗口及用户的。否则，默认选择第一页。

图标

• 不要在选项卡上放置图标。图标经常会增加不必要的视觉混乱、占用屏幕空间、且往往并不能帮助用户理解。仅使用那些能够帮助理解的图标，比如一些标准符号。

错误：

在这个示例中，图标增加了视觉混乱，却没有能够帮助用户理解。

例外：如果没有足够的空间来显示有意义的标签的话，你可以使用可被明确识别的图标：

正确：

在这个示例中，窗口很窄，图标比标签更适合代表选项卡的含义。

• 不要将产品标识用于选项卡图形。选项卡不是用于品牌宣传的。

动态窗口界面模式

• 不要在选项卡页上使用滚动条。选项卡的功能与滚动条类似——都是增加窗口的有效面积。使用一种机制足矣。
• 使用简明的选项卡标签。使用一两个能够清晰描述页面内容的词。长标签占用过多屏幕空间，尤其当标签被本地化之后。
• 使用明确、有意义的选项卡标签。避免一般性的选项卡标签，比如“常规”、“高级”或“设置”。
• 如果一个选项卡在当前上下文中不适用且用户也并不期望它可用的话，应当将其移除。这么做能够简化用户界面，用户也不会觉得少了些什么。

错误：

在这个示例中，当 Microsoft® Word 被用作电子邮件编辑器时，File Locations（文件位置）选项卡错误地被禁用了。与其禁用这个选项卡，不如将其移除，因为在这样的上下文中，用户不会打算查看或更改文件位置。

• 如果一个选项卡在当前上下文中不适用，但用户可能会期望它可用的话：
  • 显示该选项卡。
  • 禁用该页上的控件。
  • 使用一段文字来解释为什么这些控件被禁用了。

不要禁用选项卡本身，因为这么做不是自描述的，且阻止了探索。寻找特定值的用户会被强迫去看所有其他的选项卡。

在这个示例中，没有一个 View（视图）选项在 Reading Layout（阅读版式）中是适用的。但是，基于选项卡的标签，用户也许期望它们是有效的，因此该页仍然能够显示但选项已被禁用。

多视图及多文档模式

• 在选项卡标签上使用视图或文档的名称。
• 避免过长的选项卡名称。如果必要，要么限制最大名称长度，要么使用省略号截断显示选项卡标签。长标签占用过多屏幕空间，尤其当标签被本地化之后。
• 如果一个选项卡在当前上下文中不适用，则将其移除。

互斥选项模式

• 不要使用此模式！应当改用选项按钮或下拉列表。

错误：

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

正确：

在这个示例中，正确地改用了选项按钮。

标签

• 基于选项卡的模式来书写标签。使用名词而非动词，不带句末标点。更多信息，参见之前模式的设计规范。
• 使用句子大写样式。
• 不要为其分配访问键。选项卡是通过其快捷键（Ctrl+Tab、Ctrl+Shift+Tab、Ctrl+PgUp、Ctrl+PgDn）来访问的。没有什么好的访问键选择，因此不分配访问键可以使为其他控件分配访问键更容易些。

文档编写

当提及选项卡时：

• 原样引用标签文本，包括其大小写及“tab（选项卡）”字样。
• 用“click（单击）”描述用户的交互行为。
• 应尽可能为标签文本应用粗体样式。对于英文来说，仅当需要避免歧义时才在其两侧添加引号；对于中文来说，则应总是使用引号。
• 由于“tab”的一词多义可能产生歧义，尤其是当面对全球的受众时，因此仅在代指选项卡控件时，才单用名词“tab”。对于其他用途，应当用具体的描述词声明其含义：“the Tab key（Tab 键）”、“a tab stop（一个跳格位）”、“a tab mark on the ruler（标尺上的一个制表位）”。

示例：On the Tools menu, click Options, and then click the View tab.（在“工具”菜单上，单击“选项”，然后单击“视图”。）