复选框和切换按钮的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