复选框

备注

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

对于复选框,用户在两个明确的选项之间做出决定。 复选框标签指示选中状态,而 "已清除" 状态的含义必须与所选状态相反。 因此, 只应使用复选框来打开或关闭选项,或者使用来选择或取消选择项。

选定的四个复选框之一的屏幕截图

一组典型的复选框。

备注

布局 相关的准则显示在单独的文章中。

这是正确的控件吗?

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

  • 用于切换选项的复选框是打开还是关闭或选择或取消选择项? 如果不是,请使用其他控件。

  • 选中状态和已清除状态是否清晰并明确相对? 如果没有,则使用 单选按钮下拉列表 ,以便您可以单独标记状态。

  • 在组中使用时,组是否包含独立的选项,用户可以从中选择零个或更多? 如果不是这样,请考虑控制依赖选项,如单选按钮和 复选框树视图

  • 在组中使用时,组是否包含依赖选项,用户必须从中选择一项或多项? 如果是这样,请使用一组复选框,并在未选择任何选项时处理错误。

  • 组中的选项数是10还是更少? 由于使用的屏幕空间与选项数量成正比,因此请将复选框的数量保持为10或更少。 如果有10个以上的选项,请使用 复选框列表

  • 单选按钮是否是更好的选择? 其中的复选框仅适用于启用或禁用选项,单选按钮可用于完全不同的选项。 如果这两种解决方案都可以:

    • 如果清除的复选框的含义并不完全明显,则使用单选按钮。

      不正确:

      标记为 "横向" 的一个复选框的屏幕截图

      在此示例中,相反的选择并不清楚,因此该复选框不是一个不错的选择。

      正确:

      两个单选按钮的屏幕截图

      在此示例中,所做的选择不相对,因此单选按钮是更好的选择。

    • 使用向导页上的单选按钮,以使替代项更清晰,即使在其他情况下可接受的复选框也是如此。

    • 如果屏幕空间充足并且选项非常重要,足以充分利用屏幕空间,则使用单选按钮。 否则,请使用复选框或下拉列表。

      不正确:

      屏幕截图显示和不显示比率按钮

      在此示例中,选项不太重要,无法使用单选按钮。

      正确:

      不显示消息的复选框的屏幕截图

      在此示例中,复选框是此外设选项的有效使用屏幕空间。

  • 如果窗口上有其他复选框,请使用复选框。

  • 选项是否显示程序选项,而不是数据? 选项的值不应基于上下文或其他数据。 对于 "数据",请使用复选框列表或 多选择列表

使用模式

复选框有多种使用模式:

使用情况 示例
单项选择 单个复选框用于选择单个选项。
带有 "提醒我" 标签的一个复选框的屏幕截图
单个复选框用于单个选项。
零个或多个 (的独立选项) 一组复选框用于从零个或多个选项集中进行选择。
单选按钮(如单选按钮)不同,用户可在一组复选框中选择任意选项组合。
选中三个复选框中的两个的屏幕截图
一组复选框用于独立选项。
(一个或多个) 的依赖选项 一组复选框还可用于从一组或多个选项中进行选择。
可能需要选择一个或多个依赖选项。 由于 microsoft? windows 没有直接支持此类输入的控件,因此最好的解决方案是使用一组复选框,并在未选择任何选项时处理错误。
选中两个复选框之一的屏幕截图
如果必须至少选择一个协议,则使用一组复选框。
混合选择 除了其选中状态和已清除状态外,复选框还具有多个选择的混合状态,以指示为某些(但不是全部)对象设置了选项。
以纯蓝色只读复选框为屏幕截图
混合状态的复选框。

指南

常规

  • 分组相关复选框。 如果需要,请使用多个组将相关选项和分隔选项分为10个或更少。

    相关和不相关的复选框的屏幕截图

    相关的独立选项组的示例。

  • 重新 考虑使用分组框来整理复选框组, 这通常会导致不必要的屏幕杂乱。

  • 按逻辑顺序列出复选框,如将高度相关的选项组合在一起或首先放置最常见的选项,或者遵循一些其他自然进度。 不建议使用字母顺序排序,因为它是依赖于语言的,因此不能本地化。

  • 垂直对齐复选框,而不是水平对齐。 水平对齐更难阅读。

    正确:

    垂直对齐的复选框的屏幕截图

    在此示例中,复选框已正确对齐。

    不正确:

    水平对齐的复选框的屏幕截图

    在此示例中,水平对齐更难阅读。

  • 不要使用混合状态来表示第三状态。 混合状态用于指示为某些(但不是全部)子对象设置了选项。 用户不能直接设置混合状态,而是将混合状态设置为子对象的反射。 混合状态不用作单个项的第三种状态。 若要表示第三状态,请改用单选按钮或下拉列表。

    不正确:

    "纯色主题服务的屏幕截图" 复选框

    在此示例中,混合状态应指示主题服务未安装。

    正确:

    包含三个选项的下拉列表的屏幕截图

    在此示例中,用户可以从三个清除选项的列表中进行选择。

  • 单击 "混合状态" 复选框应该会循环遍历所有选定的、全部清除的状态和原始混合状态。 对于 forgiveness,必须能够还原原始混合状态,因为设置可能对用户来说是复杂的或未知的。 否则,恢复混合状态的唯一方法是取消任务并重新开始。

  • 不要使用复选框作为进度指示器。 请改用 进度指示器 控件。

    不正确:

    显示进度的四个复选框的屏幕截图

    本示例错误地将复选框用作进度指示器。

    正确:

    部分填充进度栏的屏幕截图

    典型进度栏的示例。

  • 使用正确的选择状态显示禁用的复选框。 即使用户无法更改它们,已禁用的复选框也传达信息,因此它们应该与结果一致。

    不正确:

    两个复选框之一灰显的屏幕截图

    本示例应清除"始终朗读此部分"选项,因为禁用该选项时不会读取该部分。

  • 请勿将复选框选中为

    • 执行命令。
    • 显示其他窗口,例如用于收集更多输入的对话框。
    • 动态显示与所选控件相关的其他控件 (屏幕阅读器无法检测到此类) 。

不要再次显示 < > 此项

  • 请考虑使用"不再次显示此项"选项,以允许用户仅在没有更好的替代方法时取消 < > 显示重复对话框。 尝试事先确定用户是否确实需要对话;如果它们显示,则始终显示对话;如果没有,则消除对话。

有关更多指南和示例,请参阅 对话框

从属控件

  • 将从属控件放在缩进或 (下方,用复选框及其标签) 复选框标签刷新。 用冒号结束复选框标签。

    复选框标签下方的文本框屏幕截图

    此示例中,复选框及其从属控件共享复选框标签及其访问密钥。

  • 如果依赖的可编辑文本框和下拉列表共享复选框的标签,则保持启用状态。 当用户在框中键入或粘贴任何内容时,自动选择相应的选项。 这样做可以简化交互。

    页眉和页脚文本框的屏幕截图

    此示例中,输入页眉或页脚会自动选择 选项。

  • 如果使用单选按钮或其他复选框嵌套复选框,请禁用这些从属控件,直到选择高级 选项。 这样做可以避免混淆从属控件的含义。

  • 使从属控件与选项卡顺序中的复选框连续。

  • 如果选中某个选项意味着选中从属复选框,请显式选择这些复选框,使关系清晰明了。

    不正确:

    屏幕截图:已选中按钮,已清除复选框

    本示例未选中从属复选框。

    正确:

    屏幕截图:选定的按钮,选中的复选框

    此示例选中了从属复选框,从而明确了它们与所选选项的关系。

  • 如果替代项增加了不必要的复杂性,则使用依赖复选框。 虽然复选框应该是独立的选项,但有时替代项(如单选按钮)会增加不必要的复杂性。

    正确:

    令人困惑的按钮和复选框的屏幕截图

    本示例使用单选按钮是准确的,但会创建不必要的复杂性。

    良好:

    仅复选框的屏幕截图

    此示例中,复选框的使用更简单,允许用户专注于选择所需的选项,而不是复杂的关系。

    重要说明:仅在极少数情况下 应用此准则,当显示依赖项时,会增加复杂性,而不会增加清晰度。 在上一示例中,用户不太可能尝试同时选择上标和下标,如果选择了,则很容易理解它们是排他选项。

默认值

  • 如果复选框用于用户选项,请设置最安全 (以防止数据丢失或系统) ,默认情况下,最安全且 私密的状态。 如果安全和安全性不是因素,请选择最可能或最方便的值。

建议的复选框大小调整和间距图

复选框的建议大小调整和间距。

标签

复选框标签

  • 标记每个复选框。

  • 为每个标签 分配唯 一的访问密钥。 有关指南,请参阅 键盘

  • 使用 句子样式大写

  • 将标签编写为短语或命令性句子,不使用结束标点。

    • 异常: 如果复选框标签还标记其后跟的从属控件,则以冒号结束标签。
  • 编写标签,以便描述复选框的选定状态。

  • 对于一组复选框,请使用并行短语,并尝试使所有标签的长度保持相同。

  • 对于一组复选框,将标签文本焦点放在选项之间的差异上。 如果所有选项具有相同的介绍性文本,请将其移动到组标签。

  • 使用正短语。 不要对标签使用短语,因为选中复选框意味着不执行操作。

    • 异常:不要再次显示 < > 此项 复选框。

    不正确:

    负标签"关闭"的屏幕截图

    此示例中, 选项不使用正短语。

  • 仅描述带有标签的选项。 使标签保持简短,以便轻松地在消息和文档中引用它们。 如果该选项需要进一步说明,则使用完整的句子和结束标点在 静态文本 控件中提供说明。

    备注

    向一个组中一个复选框添加解释并不意味着你必须为组内的所有复选框提供说明。 在标签中提供相关信息(如果可以)并仅在需要时使用说明。 不要只重述标签以确保一致性。

    复选框、标签和说明的屏幕截图

    此示例中,复选框标签下方有其他说明性文本。

  • 如果强烈建议使用选项,请考虑将" (建议) "添加到标签。 请务必将 添加到控件标签,而不是补充说明。

  • 如果必须使用多行标签,请使标签顶部与复选框对齐。

  • 请勿使用从属控件、控件包含的值或单元标签来创建句子或短语。 此类设计不可本地化,因为句子结构因语言而异。

    不正确:

    包含文本框的复选框标签的屏幕截图

    此示例中,文本框错误地放置在复选框标签内。

复选框组标签

  • 使用组标签说明组的用途,而不是如何进行选择。 假设用户知道如何使用复选框。 例如,不要说"选择以下任一选项"。

  • 用冒号结束每个标签。

  • 不要为标签分配访问密钥。 这样做不是必需的,这会使其他访问密钥更难分配。

  • 有关一个或多个依赖选项的选择,请解释标签的要求。

    正确:

    两个控件的标签屏幕截图:协议

    此示例中,用户可能认为只能进行一个选择。

    良好:

    标签的屏幕截图:协议选择一个或多个

    此示例中,用户显然可以进行多个选择。

文档

引用复选框时:

  • 使用确切的标签文本,包括其大写,但不包括访问键下划线或冒号。 "包括单词"复选框。

  • 将复选框引用为复选框,而不是选项、复选框或仅框,因为框本身对于本地化人员是不明确的。

  • 若要描述用户交互,请使用 select 和 clear。

  • 如果可能,使用粗体文本设置标签的格式。 否则,仅在需要时将标签置于引号中以防止混淆。

    示例:选中" 下划线 "复选框。