👋Hello,这里是Clip设计夹,今天分享的是「开关组件vs单选按钮」。
这里主要讨论选择控件中“开关”与“单选按钮”的选用问题,虽然是很常见的控件设计,但越常用的控件越需要注意使用细节。

文章的思考总结来源于工作中前端同学在开发中遇到的问题,根据查阅的资料和一些思考总结,希望可以抛砖引玉,如有错误也请大家多多斧正~
01 问题来源
工作中前端同学在开发时,将设计稿做出了调整,如下。

将选中、未选中按钮替换成了开关,🧑💻并提出:选中、未选中与开启、关闭表达的是一个意思,所以他做了这样的替换。
当时觉得这样做有点问题,但又无法清晰描述出两种方案的差异。于是查阅了相关的文章、书籍,并结合主流App和操作系统中的使用场景做了简单总结。
02 开关与单选按钮的差异
分析问题要回归问题本质,“选中/未选中”按钮属于单选按钮,是单选按钮 (radio button) 的特殊形式。单选按钮在若干 (≥2) 选项中,同一时间只能选择一个选项。其中,后选的一项会立刻使先选的一项被取消选择。
单选按钮是录入类组件,当选中某项时不会立即触发操作,而是需要再点击别的触发类组件 (如确定按钮或默认保存) 后,再执行操作。
单选按钮的常见形式有:
① 常规形式


▲ iMac-显示器分辨率设置
② 选择列表
输入框中的下拉列表:

选择列表:

▲ iMac-颜色设置
③ 单个选项
本质上属于常规形式,因为今天讨论的主题是它,所以单独分出一类。


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

是不是有点晕了,和开关的概念很像了。
📚梳理一下,单个选项按钮本质还是属于单选按钮,而单选按钮是录入类组件,当选中某项时,不会立即触发操作,而是需要再点击别的触发类组件后再执行操作。(多重复几遍加深记忆)
录入类组件本质上只是在录入数据,因为它只是一种变输入为选择的快捷手段,并且点击以后我们感觉不到页面的变化,得靠点击页面中的其他触发组件来保存和执行这样的录入。
④ 开关
开关属于触发类组件,触发类组件被点击后会立刻触发界面或系统中的某些变化,比如让Wi-Fi连接状态改变、让声音模式改变等等。

▲ MIUI-WiFi控制开关效果

▲ 微信-接受新消息通知开关
有时开关控制的页面变化不一定发生在当前页面,但也是立刻发生变化,例如:微信视频号更新提醒开关。

*存在争议的情况:

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

▲ 拼xx-设置默认地址
采用单选按钮来实现设置默认地址功能,并且在地址列表页就可以设置默认地址,而淘b和京d都是需要在编辑地址页面操作 (可能拼xx的用户群体对默认地址变更的需求高于淘b和京d,不知道数据不予分析评价)。
回到本文主题,京d设置默认地址功能采用“开关”而非“单选按钮”的原因,个人觉得是因为“开启/关闭”默认地址后,地址列表页面发生了变化,如下图。

默认地址标签会显示、消失或移动,也就是上面所说的“被点击后会立刻触发界面或系统中的某些变化”,故而选择了开关来控制此功能。
开关按钮其实是现实开关的形象衍射,想象一下现实生活中的开关:开灯-灯亮/关灯-灯灭,打开燃气灶-点燃/关闭-熄火等,现实中开关状态改变后会立刻给与操作者五官立刻感知到的反馈。
所以在人机交互系统中,判断使用开关按钮的标准:操作后页面是否立即发生让用户可感知的变化 (可以不在当前页面),如果是就使用开关,如果不一定发生或一定不发生则不使用。
总结
从组件属性来看:
A.开关属于触发类组件,被点击后会立刻触发界面或系统中的某些变化;
B.单选按钮是录入类组件,当选中某项时,不会立即触发操作,而是需要再点击别的触发类组件后,再执行操作。
从功能性来看:
A.开关适用于控制某些功能、权限的开启/关闭,在心智模型上符合开启/关闭某权限等;
B.单选按钮适用于选择某项数据,如城市、日期、性别等,本质上是帮助用户快速录入信息,从输入变为选择,增加效率且减少出错。
另外在操作系统上:
A.单选按钮更多用于PC端,鼠标操作精度高方便选择同时更大的屏幕也能承载更多的选项;
B.而开关按钮更多适用移动端,它占用更小的页面空间且方便操作。
所以大家在选择使用哪种操作方式时应该多方面综合去考虑。
慢慢来比较快,如觉得有帮助,










评论区 (0)
最新评论登录后发布评论并参与互动。
暂无评论,欢迎抢沙发。