出自UXGuide.net

复选框

Check Boxes

目录 1 它用在这里合适吗？ 2 使用模式 3 设计规范 3.1 不要再显示此 <项> 3.2 附属控件 4 推荐尺寸与间距 5 标签 5.1 复选框标签 5.2 复选框分组标签 6 文档编写

复选框（Check Box）用于在两个或两个以上有清晰差别的选项中进行选择。复选框的标签是对选中状态的描述，而清除状态的含义必须与选中状态明确相反。因此，复选框应当仅用于切换选项的开关状态，或者是选择/取消选择一个项目。

典型的复选框。

注：与布局相关的设计规范请参考各自相应的章节。

它用在这里合适吗？

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

• 该复选框是用于切换选项的开关状态，或者是选择/取消选择一个项目吗？如果不是，则改用其他控件。
• 选中与清除状态的含义是否清晰并明确相反？如果不是，应使用选项按钮（radio buttons）或下拉列表（drop-down list），以分别标注每种状态。
• 当组合使用时，它们是否是相互独立的，且用户能够选择零个或多个？如果不是，考虑使用那些用于依赖关系的控件，比如选项按钮和带有复选框的树形视图（check box tree views）。
• 当组合使用时，它们是否是相互独立的，且用户必须至少选择其中一个？如果是，应使用一组复选框，并当一个选项也没有选中时进行错误处理。
• 选项的数量是否在 10 个以内？屏幕空间的使用会随着选项的数量而成比例增长，因此应当将复选框的数量控制在 10 个以下。如果选项多于 10 个，应使用带复选框的列表框（check box list）。
• 选项按钮会不会更合适？复选项只适合用于打开或关闭一个选项，而选项按钮则可用于完全不同的选项。如果现两种解决方案都可行的话：
  • 如果复选框被清除时的含义不是非常明显的话，应使用选项按钮。

错误：

在这个示例中，纸张横向（Landscape）选项的对立面并不明确，因此复选框在这里并不是好的选择。

正确：

在这个示例中，选项并非完全对立的，因此选项按钮更加合适。

• • 在向导中，使用选项按钮会使可选项更为清晰，即使复选框本身是可行的。
  • 如果屏幕空间足够，且这些选项之重要值得占用那么多屏幕空间的话，就可以使用选项按钮。否则，应使用复选框或者下拉列表。

错误：

在这个示例中，这些选项并不值得去使用选项按钮。

正确：

在这个示例中，复选框对屏幕空间的占用对于这个并不重要的选项来说非常经济。

• • 如果窗口中存在其他复选框，则也可以使用复选框。
• 该选项展示的是程序选项，而非数据吗？选项值不应当基于上下文或其它数据。对于数据，应当使用带复选框的列表框，或是多选列表框（multiple-selection list）.

使用模式

复选框具有下列使用模式：

单个选项 用于选择单个选项的单个复选框。	用于单个选项的单个复选框
独立选项（不选或多选） 用于选择零个或多个选项的一组复选框。	与单选按钮这样的单选控件不同，用户可以从一组复选框中选择任意的组合。 用于选择独立选项的一组复选框
关联选项（一项或多项） 也可用于选择一个或多个选项的一组复选框。	你可能需要呈现一个或多个相关联的选项。因为 Microsoft® Windows® 并没有直接支持这种输入类型的控件，最好的办法就是使用一组复选框，并当没有选择任何选项时手工处理错误。 用于必须选择至少一种协议的一组复选框
混合选项 除了选中和清除状态外，复选框还有用于多选的混合状态，以指示该选项是对部分对象有效，而非所有对象。	混合状态的复选框

设计规范

• 将相关的复选框合并成组。将相关的选项合并，不相关的选项分开，成为 10 个或 10 个以下的组合，必要时使用多个组合。

一组相关但互相独立的选项示例

• 认真考虑是否使用分组框来对复选框进行分组——这往往导致不必要的屏幕混乱。
• 以逻辑顺序排列复选框，比如将高度相关的选项放在一起，或将最常用的选项放在前面，或者遵循其他自然过程。字母顺序排列并不推荐，因为这是语言相关的，无法本地化。
• 将多个复选框垂直排列，不要水平排列。水平排列会使得难以阅读。

正确：

在这个示例中，复选框正确地进行了对齐。

错误：

在这个示例中，水平对齐会使得难以阅读。

• 不要使用混合状态来表示第三种状态。混合状态是在多选时用于指示部分而非全部对象设置了该选项，对于每个单独的对象来说，要么是选中状态，要么是清除状态。混合状态不应被用于单个项目的第三种状态。要表示第三种状态，应当改用选项按钮或下拉列表。

错误：

在这个示例中，混合状态用于指示 Theme service 没有安装。

正确：

在这个示例中，用户能够从包含三个明确的选项列表中进行选择。

• 不要将复选框用于进度指示。应当改用进度条控件。

错误：

在这个示例中，复选框被错误地用作进度指示器。

正确：

典型的进度条示例

• 显示禁用的复选框时应使用正确的选中状态。即使用户无法更改，禁用的复选框仍然传达了一定的信息，应当与结果相一致。

错误：

在这个示例中，“Always read this section aloud（始终朗读该部分）”选项应当被清除，因为当该选项被禁用时该部分不会被朗读出来。

• 不要将选中复选框用于：
  • 执行命令。
  • 显示其他窗口，比如用于收集更多输入的对话框。
  • 动态显示与选中控件相关的其他控件（屏幕阅读器无法检测到这类事件）。

不要再显示此 <项>

• 考虑使用“不要再显示此 <项>”的选项，以让用户能够禁用一个重复出现的对话框，但仅适用于没有更好的其他途径时。最好是只在用户真正需要它的时候才显示该对话框，或者如果用户不需要的话干脆把它去掉。

更多设计规范和示例，参见对话框。

附属控件

• 将附属控件放在复选框及其标签的右侧或下方（缩进，与复选框标签平齐）。复选框标签应以冒号结尾。

在这个示例中，复选框及其附属控件共用复选框的标签和访问键。

• 如果相关的可编辑文本框及下列拉表共用复选框的标签时，应当保持其处于可用状态。当用户在其中键入或粘贴任何内容时，自动选中对应的选项。这么做能够简化操作。

在这个示例中，输入页眉或页脚会自动选中该选项。

• 如果要在复选框中嵌套选项按钮或其他复选框，则在高层次的选项被选中之前，禁用这些附属控件。这么做能够避免附属控件含义的混乱。
• 使复选框的附属控件在 Tab 顺序上与该复选框保持连续。
• 如果选中一个选项意味着选中附属的复选框，则应明确选中这些复选框以明确其关系。

错误：

在这个示例中，附属的复选框没有被选中。

正确：

在这个示例中，附属的复选框被选中，明确了其与选中项之间的关系。

• 如果其他方案会增加不必要的复杂度时，应当使用互相关联的复选框。虽然复选框应当是相互独立的选项，但有时像选项按钮这样的方案会增加不必要的复杂度。

正确：

在这个示例中，选项按钮的使用很准确，但导至不必要的复杂度。

更好：

在这个示例中，复选框的使用更加简单，让用户得以专注于选择他们想要的选项上，而不是它们之间的复杂关系。

重要提示：仅在极端罕见的情况下才可应用此条规范，即展示依赖关系只会大幅增加复杂度而不会增加清晰度时。在前面的示例中，用户不会试图同时选择上标和下标，而且即使他们这么做了，也很容易理解为什么这两个选项是互斥的。

推荐尺寸与间距

用于复选框的推荐尺寸与间距

标签

复选框标签

• 为所有复选框添加标签。
• 为每个标签分配唯一的访问键。相关设计规范，参见键盘。
• 使用句子大写样式。
• 标签应当是短语或祈使句，不要使用句末标点。
  • 例外：如果复选框标签同时用于其后的附属控件，则标签应当以冒号结尾。
• 标签的内容应当描述的是复选框选中时的含义。
• 对于一组复选框来说，应当使用并列的措辞并尽量保持所有标签的长度大致相同。
• 对于一组复选框来说，标签文本应当专注于各选项的差异上。如果所有的选项都有相同的说明文本，则应将此文本移至分组标签中。
• 使用肯定的表述方式。不要将标签表述为选中复选框意味着不要执行某操作。
  • 例外：不要再显示此 <项>复选框。

错误：

在这个示例中，该选项没有使用肯定的表述方式。

• 在标签中仅描述选项。保持标签的简洁使得在提示信息和文档中易于引用。如果需要对选项给出进一步的解释，应当在静态文本控件中使用完整的带有句末标点的句子进行解释。

注：为一个复选框添加说明并不意味着你需要给这一组所有的复选框都提供说明。如果可以的话，在标签中提供相关信息，并仅在必要时才使用说明。不要仅仅为了统一而重复标签的内容。

在这个示例中，复选框标签下方具有额外的解释性文本。

• 如果一个选项是强烈推荐的，应当在标签中添加“(recommended)”/“（推荐）”字样。确保添加至控件标签，而不是附加说明。
• 如果你必须使用多行标签，应当将标签的顶部与复选框对齐。
• 不要通过附属控件、其包含的值、或是其单位标签来组成句子或短语。这种设计无法被本地化，因为句子结构在不同的语言中会发生变化。

错误：

在这个示例中，文本框错误地被放置在复选框的标签内部。

复选框分组标签

• 各标签应当以冒号结尾。
• 不要为标签分配访问键。这么做没有必要，而且它会使其他访问键难以分配。
• 对于一个或多个相关选项的选择，应当在标签中解释需求。

正确：

在这个示例中，用户可能会认为他们只能选择一项。

更好：

在这个示例中，很明确用户可以选择不止一项。

文档编写

当提及复选框时：

• 原样引用标签文本，包括其大小写，但无须包含访问键下划线和冒号。包含“check box（复选框）”字样。
• 提及复选框时，应称其为“check box（复选框）”，而非“option（选项）”、“checkbox”、或光是“box”，因为单独的“box”对于本地化人员来说具有歧义。
• 用“select（选择）”和“clear（清除）”描述用户的交互行为。
• 应尽可能为标签文本应用粗体样式。对于英文来说，仅当需要避免歧义时才在其两侧添加引号；对于中文来说，则应总是使用引号。

示例：Select the Underline check box.（选择“下划线”复选框。）