勾选框（Checkbox） 和 开关（Switch / Toggle） 虽然有时看起来相似，但它们有完全不同的使用场景和语义。创建表单时，交互规划师总是会面临一个选择，选用哪种UI元历来标明可选项的操作。当然，我们每个人都有自己的规律。但是，在选用可选项控件时，仍然要多加考虑。

可选项可以用勾选框、开关、单选框和下拉菜单标明。选择得当的话，任何一种都十分出色。本文中，我们关键关注勾选框和开关。

勾选框

勾选框用在一系列选项中，用户可以选择恣意数量，包含0个、1个，或许许多个。换言之，每个勾选框在列表中都是彼此独立的，勾上一个框并不会撤销其他选项。

开关

开关组件是在仿照物理开关，让用户翻开或关闭某个项目。

开关供应了两种简略直接的敌对选项

开关组件一般用于表现一个动作（例如开端或中止某个操作）。它类似于电灯开关：

开关一般用在电灯开关上

勾选框和开关的最佳实践

运用标准的视觉表现

勾选框应当是一个小方框，选中时有一个勾，或许一个叉。

开关应当看起来有开和关的情况

用户在操作各种控件时，应当供应清楚的视觉反应。纤细的动画能让体会更详尽——在移动使用中特别如此，

iOS7/8的开关按钮。来历：Dribbble

纵向摆放列表

纵向展示列表，每行一个选项。这关于开关和勾选框都有用。假设一定要横向摆放，一行有多个选项，就要调整好按钮和标签的距离，哪个选项对应哪个标签清楚清楚。下面的比如中，元素之间的距离都太近了。

很难确认选项4对应的到底是哪个选框

开关的其时情况应该在控件外面

规划开关时，你应该防止情况和操作的歧义。我们以iOS6的开关规划为例，留心看写着ON的蓝色情况按钮。

并不能确认标签（比如中是“ON”）是指其时情况，仍是按下的操作

你能判别按钮其时是开着的吗，或许拖动滑块、点击、点按时会敞开？“ON”在这里是个情况（名词）仍是动作（动词）？并不清楚。

不应该让用户感到困惑，差异出操作和情况十分重要。实际上，高亮显现其时情况，可以让它更加和睦。

文字颜色标清楚现在的情况（亮起的是ON）

勾选框运用必定的案牍

运用必定、有用的案牍作为勾选框的标签，用户就很清楚假设勾上选框会发生什么。防止“不要给我发邮件”这样的否定案牍，这就意味着用户要勾上选框来阻止某些事发生。

勾选框永远都应该运用必定的指令，不能用否定案牍，例如“请勿……”

勾选框运用Label标签，增大操作区域

一切的勾选框都有标签，但并非都运用label标签。勾选框本质上很小，但是依据费茨规律，它们就很难点击或许点按。要增大操作区域，让用户在点击或点按标签与相关文字时就能选中选项，而不仅仅是那个小方框。

让用户通过点击方框或它的标签来选中选项

勾选框只用来改动设置，不能作为操作按钮

作为一个二元选择，勾选框和开关的首要差异，是勾选框是情况，而开关是操作。假设一个操作适合用物理开关标明，那么开关或许便是最适合的控件。

勾选框和开关的提交操作

勾选框的操作可以延迟（例如作为表单的一部分），但开关的操作应当当即触发。

出色的用户体会，是当即改动开关对应的设置项，而不是点按了“保存”或回来上个界面之后才保存。我们在现实生活中对开关的期望便是如此（例如我们知道，按下开关灯马上就亮了）。

当用户有必要履行额定步骤才干让改动收效时，运用勾选框。

当用户有必要点击“提交”或“下一步”按钮，批改才干收效时，选用勾选框

结论

规划界面时，交互元素的选择要保持一致、可预期。遵从规划标准，能让用户更好猜测控件的功用、怎么操作。相反，违背标准会让界面感觉很脆弱——好像会毫无预兆发生任何事情。遵循这个原则，就能使你的表单交互清晰、符合用户预期。