译文 | 复选框 VS 开关

本期翻译的文章来自 Saadia Minhas，她总结了在的选择表单组件时，复选框和开关的不同用法。

用户界面设计中的开关和复选框  

表单提供了多种控件来方便用户填写，在设计表单的时候，在合适的地方使用正确的控件对设计师来说是一个挑战。

复选框有三种状态：未选中，选中和不确定状态。最后一种状态通常出现在一个父级选项底下有一组子选项，这些子选项选中或者未选中都有的情况。

开关控件模拟了一个实物的开关，允许用户打开或者关闭，就像灯的开关一样。

按下开关控件其实是一个分为两步的操作：选择和执行。而复选框仅仅只有一个选择的操作，它的执行需要另外的控件来辅助。

当要决定到底使用开关还是复选框控件，最好是结合他们的使用情景，而不是仅仅看功能。

以下是一些在设计表单体验时如何选择这两个控件的案例和指导原则。

案例1：即时响应

在以下情况使用开关控件：

无需明确操作即可立即响应应用的设置

需要开/关或者显示/隐藏功能区显示结果的设置

用户需要执行而不需要审核或确认的即时操作

需要即时响应的操作最好选择开关控件  

案例2:确认设置

在以下情况使用复选框：

应用设置需要在提交之前由用户确认和审核

定义的设置需要在显示结果之前执行提交，确定，下一步等操作

用户必须执行其他步骤才能使更改生效

当需要一个明确的操作设置时，最好使用复选框  

案例3：多选

在以下情况使用复选框：

有多个选项可供选择，用户必须从中选择一个或多个选项

单击多个切换按钮逐个切换，每次单击后查看结果都需要额外的时间

在列表中选择多个选项可使用复选框提供更好的体验

案例4：不确定的状态

以下情况使用复选框：

当一个父选项底下有多个子选项时，会出现不确定的选择状态，这种状态下，子选项只有个别被选中，并不是全选中

不确定的选择状态最好用复选框

案例5：清晰的视觉状态

以下情况选择复选框：

在使用开关控件时会出现这样一个令人疑惑的情况，有时它很难让人分清楚开关是在表示目前的状态还是动作

需要提供明确的选定或未选择状态时

有时候开关并不能清楚的表示到底是状态还是动作

案例6：相关的条目

以下情况使用复选框：

用户必须从相关的列表中选择时

在列表中选择相关的条目时，使用复选框

以下情况使用开关控件：

用户在切换独立的功能和行为时

独立的条目使用开关控件来选择

案例7：独立的选项

以下情况使用复选框：

提供一个单独的是/否选择时

只有一个行为可以选择或者取消，并且含义明确

一个单独的是/否选项使用复选框比较好

以下情况使用开关控件：

需要进行单一选择，并且你希望为开/关类型提供两个选项

使用开关控件可以最好地理解单个开/关决定

结论

在表单中合适的地方提供适当的组件对于友好的用户体验来说非常重要。因为表单可能非常长而且有大量的选项，所以对于用户来说让他做一些额外的操作来填写表单是很乏味的。本文提供的案例和指南将帮助你，在向表单添加控件时决定该选择复选框还是开关控件。