【翻译】多选框 vs 拖拽开关

原文地址：https://uxplanet.org/checkbox-vs-toggle-switch-7fc6e83f10b8

最近无意中看到这篇文章，虽然篇幅不多，但句句都是干货，于是将它翻译了出来，并添加了一些注解，供大家参考

表单提供了几个不同的输入控件来更方便的收集用户的输入信息，在对的地方使用对的控件在组件设计中是个挑战

多选框控件有三个状态：未被勾选，已被勾选，部分勾选。部分勾选是在包含父子关系的联动列表中勾选了部分子列表，此时父多选框的状态就是部分勾选（就像如图所示）

开关控件和现实中的开关表达的意思是一致的，用户可以像灯的开关一样操作开和关两种状态

开关有选择和执行两个操作，多选框只有从选项中选择这个操作，它的执行操作通常需要借助另外一个控件实现

我的理解：在用户体验上，通常开关点击完选择之后可以直接控制执行，比如想关灯，按开关之后，系统直接执行关灯操作，但多选框一般就只是把这个结果勾选上，还是以关灯为例，多选框一般就是告诉你，是否要关灯，勾选了是，那接下来的关灯操作一般就是另外执行，而不是勾选完马上就可以联动电系统，不是不可以，但是一般人不这样

我们最好通过使用场景（usage context）来选择是用多选框控件还是用开关控件，而不是通过功能

我的理解：在功能上，两个控件其实是互通的，想要的效果也都基本能够实现，不然也不会被拿来比较，但是根据使用场景就会发现他们还是有一些区别的，不然人家也不会设计两个出来了

以下是在表单设计中的一些常用使用场景

一、 需要及时响应时——建议使用开关

• 及时响应是指当申请某个设置时不需要太过复杂的行为
• 设置需要一个开/关或者显示/隐藏功能去展示结果
• 用户需要执行即时行动而不需要审查或者验证
  

就像上图所示，展示偏好栏这个选项，背后不需要太多的操作，表示的含义是展示与否，Wi-Fi也是一样，只是一个开关的操作，不需要有啥校验，也不需要有额外的操作

二、设置确认信息——使用多选框

• 操作需要在用户提交之前确认和审查
• 在显示结果之前有一个类似提交、确定，下一步，申请这种操作
• 用户必须在获取当前结果之前执行其他的操作
  

三、多选时——使用多选框

• 可以进行多选并且用户必须从中选择一个或者多个选项时
• 在需要一个接着一个选择，并且每次点击都需要额外时间返回结果之后才能看到下一次结果的场景下使用多选的开关

也就是说，当这些多选项相互之间是并列关系时需要多选框，是串联关系时最好使用开关，一个打开，执行完毕才能执行下一个

四、中间选择状态——使用多选框

• 中间选择状态时指那些在父选择项内包含多个子选择项。中间选择状态代表着部分子选项被选择
  

五、清除虚拟状态——使用多选框

• 当使用开关来改变状态的时候容易让人产生迷惑时，比如有时候很难分辨当前这个开关表示状态还是一个操作
• 需要提供清空选项或者展示没有被选择的状态时
  

六、关联选项

• 使用多选框的场景

• 用户需要从关联选项中选中一个或多个选项时
  

• 使用开关的场景

• 用户操作的是独立的行为或者属性之间相互独立时
  

七、单个选项

• 使用多选框的场景

• 只提供独立的是/否选项时

• 当选项可以选择和被选择，并且这个属性很明显时
  

• 使用开关的场景

• 需要单个选择，但用户项为开/关一类决定提供两个选项时
  

总结
在表单对的地方提供对的控件对提高用户使用友好度非常重要。表单可能会非常长，出现大量选项，因此用户如果需要在填写某个选项时需要多余的点击会让他们感到乏味。以上提供的用户场景会帮助你在表单内添加控件时决定到底是多选框还是开关