复选框和切换按钮的7个使用案例

欢迎关注富途web开发团队，php , 前端须要你。缺人从众

表单自带的控件能够方便咱们收集用户的输入。在表单设计时，恰当的使用合适的控件也是一项挑战。

checkbox有三种状态：未选择，选择和状态不肯定的三种。最后一个状态表示子选项在父选项分组里而且子选项处于选择和未选择的中间状态。

toggle表示物理开关，容许用户打开或者关闭，就像开关灯同样。

监听toggle开关实现了两个操做：选择和执行，然而checkbox只是选择一个选项，执行须要另外的控件来实现。

在决定用checkbox仍是toggle时，最好是关注具体的情景而不是功能。

如下是一些用例，以及在设计表单时决定用哪一个控件的一些指引。

案例一：及时反馈

如下这些状况须要用toggle

• 应用设置不须要有很明确的操做就能够即刻生效。
• 设置须要开/关或者显示/隐藏来展现效果。
• 用户选择后没必要审核确认就能够执行生效。

须要即刻响应时最好用toggle

案例二：设置须要确认

如下这些状况须要用checkbox

• 应用设置须要用户确认和审核才能提交。
• 定义的设置生效以前须要有一些操做，好比点击提交，OK，或者下一步。
• 用户必须执行额外的操做才能使更改的变化生效。

若是须要一些明确的操做才能使得应用失效，首选checkbox

案例三：多选

如下这些状况须要用checkbox

• 在多选中用户须要选择一个或者多个选项。
• 若是用toggle的话，须要一个一个的点击，而每一次点击都须要有额外的时间等待才能看到效果。

在列表中选择多个选项可以使用checkbox

案例四：不肯定的状态

“使用更好的切换开关设计能够解决此问题。 显示开/关声明将提升清晰度。 微软有正确的想法：https：//docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/toggles”

如下这些状况须要用checkbox

• 不肯定选择状态时须要有多个子选项在父选项的分组里。这个不肯定的状态意味着子选项是须要被选择的（不是所有都必选）。

不肯定的状态最好用checkbox展现

案例五：清晰的视觉

如下这些状况须要用checkbox

• 有一种状况会让toggle的开关状态比较困惑，就是有时很难分清这个开关是展现状态仍是须要操做。
• 须要提供一个清晰的选择和未选择的状态区别。

有时候toggle不能很清晰的表示出它是一个状态仍是须要操做。

“这是toggle切换开关的主要问题。 它们（还）没有像复选框那样强大的约定来代表它们的状态。 因为不良的视觉设计和切换标签，这种模式错误也会变得更糟。

在最近对桌面应用程序中的独立切换开关的测试中，咱们观察到大约200％的人中约有20％的人在他们意味着“关闭”时点击切换到开启状态。 咱们认为这是由于toggle切换看起来太像按钮了：一个说关闭的按钮会让它被点击动做它（由于这就是一个按钮会作什么）。 而后用户没法从错误中恢复，由于按钮的状态如今对他们来讲是正确的（如今它说'打开'由于我已将其关闭）。

直到明白左/右切换按钮的原理才会中止切换，因此最好避免暂时在桌面应用程序上切换。”

案例六：须要选中类似的选项

如下这些状况须要用checkbox

• 用户须要在选出列表中的类似选项

在列表中选出类似的选项须要用checkbox

如下这些状况须要用toggle

• 用户须要切换不一样的特性或者操做。

相互独立无交集的一些操做须要用toggle

案例七：选项单一独立

如下这些状况须要用checkbox

• 无论这个选项的选择与否会记录一个是或者否的结果。
• 当只有一个选项时，你能够选择也能够不选择，可是选不选择的效果区别比较明显。

选择意味着表示是/否选择用checkbox

如下这些状况须要用toggle

• 只有一个选择，而且开关表明不一样的选择。

用toggle能更好的表示出开关的选择

结论

在合适的情形下使用合适的控件可使界面更加友好。由于表单可能会有比较多的选项须要选择，当用户点击选择这些选项来完善信息时会以为很枯燥。以上这些例子能够帮助你在表单中添加控件时，能够更好的选择用checkbox和toggle。

原文：futu.im/article/che…

英文：uxplanet.org/checkbox-vs…

译者：Diandian