开关和单选按钮的区别，大部分设计师都说不清楚

一、全文速览图

Hello，这里是Clip设计夹，今天分享的是「开关组件vs单选按钮」。

这里主要讨论选择控件中“开关”与“单选按钮”的选用问题，虽然是很常见的控件设计，但越常用的控件越需要注意使用细节。

文章的思考总结来源于工作中前端同学在开发中遇到的问题，根据查阅的资料和一些思考总结，希望可以抛砖引玉，如有错误也请大家多多斧正～

二、问题来源

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

将选中、未选中按钮替换成了开关，🧑‍💻并提出：选中、未选中与开启、关闭表达的是一个意思，所以他做了这样的替换。

当时觉得这样做有点问题，但又无法清晰描述出两种方案的差异。于是查阅了相关的文章、书籍，并结合主流App和操作系统中的使用场景做了简单总结。

三、开关与单选按钮的差异

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

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

单选按钮的常见形式有：

① 常规形式

 iMac-显示器分辨率设置

② 选择列表

输入框中的下拉列表：

选择列表：

 iMac-颜色设置

③ 单个选项

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

iMac-聚焦设置

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

是不是有点晕了，和开关的概念很像了。

梳理一下，单个选项按钮本质还是属于单选按钮，而单选按钮是录入类组件，当选中某项时，不会立即触发操作，而是需要再点击别的触发类组件后再执行操作。（多重复几遍加深记忆）

录入类组件本质上只是在录入数据，因为它只是一种变输入为选择的快捷手段，并且点击以后我们感觉不到页面的变化，得靠点击页面中的其他触发组件来保存和执行这样的录入。

④ 开关

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

MIUI-WiFi控制开关效果

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

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

*存在争议的情况：

京东-设置默认地址

上图是京d编辑地址-设置默认地址，采用开关来控制是否设置为默认地址，并且需要保存才可生效不保存将保持原有设置（淘宝采用与京东相同的方式）。

这和我们上面所说“开关属于触发类组件，被点击后会立刻触发界面或系统中的某些变化”并不符合，反而和单选按钮选择后需要保存才能生效很匹配。

设置默认地址可以理解为“开启/关闭默认地址功能”也可以理解为“选择此地址作为默认地址”，从组件属性和功能性上看都更倾向使用单选按钮。

拼xx-设置默认地址

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

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

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

开关按钮其实是现实开关的形象衍射，想象一下现实生活中的开关：开灯-灯亮/关灯-灯灭，打开燃气灶-点燃/关闭-熄火等，现实中开关状态改变后会立刻给予操作者五官立刻感知到的反馈。

所以在人机交互系统中，判断使用开关按钮的标准：操作后页面是否立即发生让用户可感知的变化（可以不在当前页面），如果是就使用开关，如果不一定发生或一定不发生则不使用。

四、总结

1. 从组件属性来看：

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

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

2. 从功能性来看：

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

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

3. 另外在操作系统上:

A.单选按钮更多用于PC端，鼠标操作精度高方便选择同时更大的屏幕也能承载更多的选项；

B.而开关按钮更多适用于移动端，它占用更小的页面空间且方便操作。

所以大家在选择使用哪种操作方式时应该多方面综合去考虑。