在web表单设计中，我们会常常碰着在开关、单选、复选框三个组件的选择利用上纠结，特殊是只有两种状态下，比如开启/关闭、启用/关闭、显示/隐蔽、赞许/不同意、默认/自定义……
我们创造利用Switch开关、Radio单选和Checkbox复选这三个组件彷佛也都是可以的，这时该当选择哪个组件更得当呢？
本文紧张磋商这三个组件的基本特点，以及在web表单设计中，这三个组件利用上有什么差异，以及常见的场景如何去选择。
文章概览
一、Switch 开关•它就像是灭霸的响指1. 简要理解开关开关作为仿照物理开关的映射，供应了两种最为大略、直接的对立选项，比如开/关、启动/禁用等。它就像生活中掌握灯泡的开关，点击灯泡立即亮起。以是它的意符也必须明确，不然用户都不知道，即将要启动/关闭什么。
2.开关组件的特点工具标署名称须传达清晰，能够让用户能够明确感知操作后的动作开启或关闭什么；主体标签信息和按钮是分离的，两个视觉焦点；一样平常点击后会立即反馈；没有hovering效果，有动作效果，更适宜手指操作；非W3C组织官方html标记，极度情形不支持 Javascript。
3. 苹果公司对开关组件的设计规范苹果的「Human Interface Guidelines」有着这么一份对付开关组件的利用规范定义，我们不妨可以借鉴。
1) 避免利用开关掌握局部细节或者次要的设置。开关的视觉权重比较高，以是用它掌握内容较多更为得当，比如可以将它作为总开关打开或关闭一组设置。
2) 常日不要用开关替代复选框。如果我们的规范中定义了复选框，则尽可能保持同等的利用规范。
4. 开关利用场景举例
通过上述对开关组件特点，结合苹果组件的规范，我们基本可以梳理出以下几条紧张紧张利用场景：
1）开关的标签意符需传达清晰
和单选、复选框不一样的是，由于开关主体的信息和按钮是分离的。用户在点击开关按钮前，必须清晰奉告用户点击后会发生什么，乃至有时我们须要通过增加副标题来加以解释。
2）一样平常只为立即生效的场景利用开关按钮
在表单填写时，每每终极会有「提交」按钮作为结束态，开关作为表单字段的填写，用户点击后并不能够立即生效，而是须要再次点击「提交」按钮。
3）有风险，需着重提醒用户
开关的视觉权重较高，在繁芜的表单信息中，它能够很快吸引到用户的把稳力，并能够给用户以视觉提醒。
4）避免大面积利用开关，利用它掌握局部细节或者次要设置
开关在视觉感知上它和按钮上有些靠近，以是尽可能避免在表单中大量利用开关来掌握局部层级内容，这时推举利用复选框来替代开关作为局部。
5）把它作为高层级内容掌握或信息设置
把它用来作为总掌握来显示更高层级内容，避免web表单中大面积的利用开关按钮，会和其他的基本组件造成视觉滋扰。这样可以既凸显其主要性，又能提升用户浏览表单的效率。
5. 小结
开关按钮就像是灭霸的戒指，视觉突出且反应快。用户浏览表单、填写内容组之间，一样平常不须要很强的视觉差异。如果填写的表单信息之间比拟差异过大，开关每每给用户造成过大的视觉滋扰，反而阻碍用户浏览表单的效率。
二、Checkbox 复选框• 它是一个机器小好手1. 简要理解复选框
让用户在两个布尔值之间进行选择，勾选后和未勾选表示“是/否、要/不要、开启/关闭…” 等问题。以下内容紧张谈论单个复选框的利用情形。
2.复选框的特点
1）为了便于用户快速理解，一样平常复选框的标签内容是一句话，不会用逗号去作隔开。
2）作为单选状态时，操为难刁难象和标签主体内容视觉焦点是不分开的，选择后就知道它当选中了。
3）可直接表示标签内容的开启、关闭。
3. 场景举例剖析
1) 用户基本清楚会发生什么，利用复选框
如果利用开关或者单选框，我们会创造视觉滋扰特殊严重，一样平常表单内容不须要特殊去强调每一个字段的开启状态。当然如果排版限定，我们也是可以将复选框放到标签的右侧（放右侧复选框需对齐）。
2）表单中的复选框生效，须要合营提交按钮
一样平常情形下，表单填写中，复选框不会像开关点击后立即生效，它须要合营提交按钮生效。以是用户在提交前可查看他们填写的表单，更有助于在信息防错。
（Ps. 在设置页，复选框可单独作为设置且立即生效。）复选框的主体标签信息和复选按钮在一起，特殊是对付批量填写或设置一批字段，利用复选框效率更高。
3）用复选框来掌握表单局部细节
如上述，如果掌握工具的功能是表单的一个局部，或信息内容不是很多，用户也清楚知道选择后会是什么，这时候复选框更适宜。
这时我们不须要过重地给用户强调什么，用复选框会比利用开关让全体表单的构造内容更清晰。
4. 小结
复选框就像是一个机器小好手，它的运用拓展性比开关更强，它既可以作为层级内容利用，又可以作为设置项，点击后并立即生效。
在表单中，作为局部、或者细节内容掌握，利用复选框更得当。它也不会像单选按钮阅读有信息阻断的问题，不会像开关有强视觉滋扰，它会让我们的视觉焦点更集中表单信息上。
三、Radio 单选按钮• 白天不懂夜的黑1. 简要理解单选按钮
单选按钮最早的设计模型，来源于收音机切换频道的按键，当我们按下个中一个，其他的按钮就会被弹出，按下的那个按钮就成为了选中的状态。单选按钮可谓是泾渭分明，有你不能有我。
2. 单选按钮的特点
单选按钮的优点是，将所有信息条件暴露给到用户，它不像开关在利用上带有去预测、探索的必要。
1）每个选择都非常直不雅观，如果希望用户阅读完所有选项，用它再好不过了。
2）拓展性更强，相较于开关、复选框的布尔值，单选能承载两个或两个以上选择。
3）必须供应默认值，且默认值可以承载内容。
3. 场景举例剖析
1）须要让用户明确知道两者的差异，乃至须要强调两个选项的不同
如果采取复选框，用户须要在两个差距较大的选项中去作思考。
2）开启/关闭的单选状态，利用复选框
复选框对付绝大多数用户都是非常清楚，利用复选框在空间、视觉焦点更是更集中的，以是如果只针对开启/关闭的状态，推举利用复选框
3）每个选项都关联内容时，利用单选按钮
我们知道，如果默认选项设计的好，会让很多人保持选择默认选项。
下图这个案例，如果采取复选框或者开关，用户就不得不去探索思考开启后是什么，还要担心理解开启/关闭后带来的影响，而对付绝大多数用户来说，这边的报名设置系统默认内容无需改动。需把稳给用户供应的默认选择，一定假如安全、方便的选项。
4）较长需隐蔽拆分的内容情形，利用单选按钮
在表单设计中，如果碰着的内容须要重新组织或者拆分时，选择利用单选按钮。这样不仅能够做到表单信息简洁，也能够提高用户的浏览效率。
5）垂直排列单选，信息阅读更佳
如果字段名称较长，须要添加副标题加以解释，这时单选按钮承载的信息较多，利用垂直排列让用户有同等的起始阅读线，眼球迁徙改变幅度最小，信息获取体验更佳。如果标签笔墨较少，也可以横排不至于占用太多的垂直空间。
4. 小结
单选按钮便是白天和黑夜，互不滋扰的条件，希望用户阅读完这两个选项，利用单选按钮再好不过了，考虑到单选按钮供应的默认选项，供应的假如绝大多数用户须要的，且是安全方便的，如果单选按钮标签笔墨过多，在排版时垂直排列拓展性更强，阅读体验更佳。
四、全文总结
1）开关更像是一个灭霸的戒指闪闪发光，不过在表单构造、各种控件内容较多，须要页面清晰、避免过多的视觉突出，以是只管即便避免让无数个戒指闪亮中表单中。
2）复选框它更像是一个机器小好手，适用和拓展性极强，即可以单独作为设置，不用合营其他提交按钮，也可以作为表单填写的一部分。当我们犹豫利用哪个组件时，选择它一样平常不会错。
3）单选按钮就像这天间和黑夜，完备不见彼此。单选条件承载的信息也较多，如果希望用户比拟感知到两者信息的不同，那么利用单选按钮。
4）末了理论永久只是辅导实践的一部分，上述内容可能只是在用户认知和易用性之间，找到一个相对平衡的点，详细的利用场景情形，还是要详细问题详细剖析。
参考文献
Nielsen Norman Group
Human Interface Guidelines
http://www.woshipm.com/pd/374314.html
http://www.woshipm.com/ucd/1267601.html
本文由 @小高杂谈 原创发布于大家都是产品经理，未经作者容许，禁止转载。
题图来自Unsplash，基于CC0协议
