ui表单设计中的“复选框”与“切换开关”要怎么选择？

UI 上的表单往往带有一些控制元件（如：复选框（Checkbox））来协助使用者更容易的输入，相对的，如何在对的时机使用对的控制元件是一项挑战。

复选框（Checkbox） 有三种状态：unselected（非勾选态）、selected（勾选态）和indeterminate（未确定态）。前两个很好理解，第三个状态表示：该选项底下还有子选项，且其中包含未择及已选。

切换开关（toggle switch）模拟实体开关的操作方式，让使用者可以快速将某功能开启或关闭，例如现实生活中的电灯开关。

点击切换开关同时带有两个动作：选择并执行; 而复选框（Checkbox）仅表示选择了一个项目，若要执行会需要另一个控制元件触发。

那该怎么选择这两个控制元件呢？其实我们应该更关注“使用情境”来判断，而不是依造它们的功能。

以下有几个情况可以协助设计师们来判断，带来更好的设计与体验。

状况1：马上反应

当以下情况时，我们应该使用“切换开关”：

• 不需要还要进行某些动作，即可反应出选择后的结果时
• 马上显示某功能的“开启/ 关闭”或“出现/ 隐藏”的结果或状态时
• 使用者执行一些不需要确认或审核的动作时

状况2：确认设定的选项

当以下情况时，我们应该使用“复选框（Checkbox）”：

• 在送出调整或改变的需求前，使用者需要“再次确认” 或“预览结果” 时
• 在显示结果前，送出需求的按钮通常是“提交”、“好” 或“下一步” 时
• 使用者必须执行额外的动作来执行这些选项时

状况3：复选

当以下情况时，我们应该使用“复选框（Checkbox）”：

• 具有复数选项且使用者必须从中选择一个或以上时
• 需要一一点选多个切换开关，且无法及时看到结果（还需等待一段时间，如系统处理中）。

状况 4：不确定选项的状态

当以下情况时，我们应该使用“复选框（Checkbox）”：

• 当某选项底下还有子选项需要确认时

状况 5：显示明确的状态

当以下情况时，我们应该使用“复选框（Checkbox）”：

• 切换开关的“状态” 容易被使用者混淆时，例如很难了解选项上的开关按钮表明的是“状态” 或“动作”
• 需要提供明确的已择或未选状态时

状况 6：选项的关联性

当以下情况时，我们应该使用“复选框（Checkbox）”：

• 使用者必须从“具关联性的选项”中选择时

当以下情况时，我们应该使用“切换开关”：

• 选项间皆是“不同或独立”的功能或行为时

状况 7：单一选项

当以下情况时，我们应该使用“复选框（Checkbox）”：

• 选项仅是“是或否”的决定时
• 只有一个选项可“选择或不选择”，而且它所表示的意思明确时

当以下情况时，我们应该使用切换开关：

• 仅在“开或关”的选项上做选择时

结论

提供正确合理的控制元件在对的地方相当的重要，希望本文提供的案例及准则能协助判断何时该使用复选框（Checkbox）或切换开关，来提升更好的表单体验。

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