如何选择“开关”与“单选按钮”

本文主要讨论选择控件中“开关”与“单选按钮”的选用问题，虽然是很常见的控件设计，但越常用的控件越需要注意他们使用的细节。文章的思考总结来源于工作中前端同学在开发中遇到的问题，根据查阅的资料和一些思考总结，希望可以抛砖引玉，如有错误也请大家多多斧正。

1.问题来源

工作中，前端同学在开发时，将设计稿做出了自己调整，如下

将选中、未选中按钮替换成了开关，并提出：选中、未选中与开启、关闭表达的是一个意思，所以他做了这样的替换。当时觉得这样做有点问题，但又无法清晰描述出两种方案的差异。于是查阅了相关的文章、书籍，并结合主流App和操作系统中的使用场景做了简单总结。

2.开关与单选按钮的差异

分析问题要回归问题本质，“选中/未选中”按钮属于单选按钮，它是单选按钮（radio button）的特殊形式。单选按钮在若干（≥2）选项中，同一时间只能选择一个选项。其中，后选的一项会立刻使先选的一项被取消选择。

单选按钮是录入类组件，当选中某项时，不会立即触发操作，而是需要再点击别的触发类组件（如确定按钮或默认保存）后，再执行操作。

单选按钮的常见形式有：

2.1常规形式

iMac-显示器分辨率设置

2.2选择列表

输入框中的下拉列表：

选择列表：

iMac-颜色设置

2.3单个选项

本质上属于2.1常规形式，因为今天讨论的主题是它，所以单独分出一类

iMac-聚焦设置

单个选项按钮是单选按钮的特殊情况：当选项A和选项B包含了所有可能出现的情况，且两者对立不并存，就可以使用单个选项。（下图集合的概念可能会更好的理解，非A即B、非B即A）

是不是有点晕了，和开关的概念很像了。梳理一下，单个选项按钮本质还是属于单选按钮，而单选按钮是录入类组件，当选中某项时，不会立即触发操作，而是需要再点击别的触发类组件后，再执行操作。（多重复几遍加深记忆）录入类组件本质上只是在录入数据，因为它只是一种变输入为选择的快捷手段，并且点击它以后我们感觉不到页面的变化，得靠点击页面中的其他触发组件来保存和执行这样的录入。

2.4开关

开关属于触发类组件，触发类组件被点击后会立刻触发界面或系统中的某些变化，比如让Wi-Fi连接状态改变、让声音模式改变等等

MIUI-WiFi控制开关效果

微信-接受新消息通知开关

有时开关控制的页面变化不一定发生在当前页面，但也是立刻发生变化，例如：微信 视频号更新提醒开关

*存在争议的情况：

京东-设置默认地址

上图是京东编辑地址-设置默认地址，采用开关来控制是否设置为默认地址，并且需要保存才可生效不保存将保持原有设置（淘宝采用与京东相同的方式），这和我们上面所说“开关属于触发类组件，被点击后会立刻触发界面或系统中的某些变化”并不符合，反而和单选按钮选择后需要保存才能生效很匹配。设置默认地址可以理解为“开启/关闭默认地址功能”也可以理解为“选择此地址作为默认地址”，从组件属性和功能性上看都更倾向使用单选按钮。

拼多多-设置默认地址，采用单选按钮来实现设置默认地址功能，并且在地址列表页就可以设置默认地址，而淘宝和京东都是需要在编辑地址页面操作（可能拼多多的用户群体对默认地址变更的需求高于淘宝和京东，不知道数据不予分析评价）。

回到本文主题，京东设置默认地址功能采用“开关”而非“单选按钮”的原因，个人觉得是因为“开启/关闭”默认地址后，地址列表页面发生了变化，如下图

默认地址标签会显示、消失或移动，也就是上面所说的“被点击后会立刻触发界面或系统中的某些变化”，故而选择了开关来控制此功能。

开关按钮其实是现实开关的形象衍射，想象一下现实生活中的开关：开灯-灯亮/关灯-灯灭，打开燃气灶-点燃/关闭-熄火等，现实中开关状态改变后会立刻给与操作者五官立刻感知到的反馈。所以在人机交互系统中，判断使用开关按钮的标准：操作后页面是否立即发生让用户可感知的变化（可以不在当前页面），如果是就使用开关，如果不一定发生或一定不发生则不使用。

3.总结

从组件属性来看：

A.开关属于触发类组件，被点击后会立刻触发界面或系统中的某些变化；

B.单选按钮是录入类组件，当选中某项时，不会立即触发操作，而是需要再点击别的触发类组件后，再执行操作。

从功能性来看：

A.开关适用于控制某些功能、权限的开启/关闭，在心智模型上符合开启/关闭某权限等；

B.单选按钮适用于选择某项数据，如城市、日期、性别等，本质上是帮助用户快速录入信息，从输入变为选择，增加效率且减少出错。

另外，在操作系统上，单选按钮更多用于PC端，鼠标操作精度高方便选择同时更大的屏幕也能承载更多的选项；而开关按钮更多适用移动端，它占用更小的页面空间且方便操作。所以大家在选择使用哪种操作方式时应该多方面综合去考虑。

文章观点属于个人思考，如有不足欢迎大家指出。