唐老鸭
在各种的网页端和移动端,都有选择控件的存在,看似平常却又有许多的考虑和小细节。

 

01 什么是选择控件

选择控件(selection control):是一种供用户选择不同选项的组件,常用于表单、设置页。它分为三类:单选按钮(radio button)、复选框(checkbox) 和开关(switch)。

在文本框中我们提过,当需要用户输入的内容只有几种固定的格式时,我们可以变输入为选择,这样不仅节约时间,也能避免输入出错,选择控件就是在这样的情况下出现的。

 

分类 

单选按钮:在若干(≥2)选项中,同一时间只能选择一个选项。其中,后选的一项会立刻使先选的一项被取消选择。

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

macOS

 

复选框:在若干(≥1)选项中,同时可以选择任意多个选项,选项之间互相独立。和单选按钮一样,复选框也是录入类组件。

macOS

 

开关:用来在开和关两种状态之间切换。开关属于触发类组件,拨动开关时,它所指挥的某个操作会立即生效。

iOS

 

单选按钮没有物理原型,有人说它的原型是老式收音机上的按键,但我想那可能不严谨。的确,单选按钮的名字来源于此(radio button “收音机按键”),它们都是单选功能。但从物理世界演化到UI后,这个组件有了交互上的变化,因为UI中的单选按钮的功能只是录入内容,并不立即执行;而收音机的物理按键却能立即触发(换台)操作。

老式收音机的按键是单选按钮名称的来源,但并非它的物理原型

 

复选框的原型则是纸张上的多选题:

复选框的原型:选多少都可以,互相不影响

 

开关的原型历史悠久:

开关控件的物理原型

Tips:

  • 单选按钮和复选框通常是多个成组出现,开关却不用。
  • 单选按钮至少有两个选项,复选框至少有一个选项。


选用哪一类

UI设计中,当遇到需要用户点选的场景,我们如何决定是用按钮、单选按钮、复选框还是开关呢?有时候感觉似乎开关可以用两个单选按钮代替,有时候不知道按钮和单选按钮该用哪一种,还有时候好像一个复选框也可以当开关使….造成这种困惑是因为这四种组件有一个共同点,那就是它们都可以供用户进行选择。

但事实上,它们有根本的不同:如前面所说,按钮和开关属于触发类组件,单选按钮和复选框属于录入类组件。

这两类的区别:触发类组件被点击后会立刻触发界面或系统中的某些变化,比如打开或关闭新的页面、让Wi-Fi连接状态改变、让声音模式改变等等;而录入类组件本质上只是在录入数据,因为它只是一种变输入为选择的快捷手段,点击它以后我们感觉不到页面的变化,得靠点击页面中的其他触发组件来保存和执行这样的录入。

这样两类、四种组件,分别有适合自己出现的场合,按照下面的流程图来梳理,就不会错:

不得不提,有时候单选按钮可以用下拉菜单(dropdown menu)代替,这样可以节约不少空间,但同时会使用户无法直观看到所有选项,且增加交互步骤,所以请斟酌后取舍。

更适合用下拉菜单的情况:

  • 当选项较多(多于5个)时,比如选择国家;
  • 默认选项是推荐项,且隐藏选项是用户可预期的,比如等差数字(50%、75%、100%、125%…..);
  • 空间受限。

 

更适合用单选按钮的情况:

  • 当选项较少(≤5),且希望用户直观看到并比较每一个选项,如会员付费方案;
  • 需要快速选择、节约时间;
  • 界面中表单太长、单选题太多,不方便每一个都去展开查看。

 

Tips:

  • 还有更多的单选形式,如“选择纸片”,以后讲。

 

02 一个选择控件

拆分 

单选按钮

通常,未选中的用一个圆表示,选中的则在圆中间加一个同心小圆。

它有默认选中项,那是最保险或保护隐私的一项,要么就是用户最可能选、最被推荐的一项。设置默认选项的好处是,能让用户感觉更可靠,从细节上提升体验感。设计大牛Jakob Nielsen的十大可用性原则中说到,最好能让用户随时撤销操作,带有默认选中项的单选按钮,重新加载页面就可以回到默认状态。

 

复选框

未选择的项用方框表示,选中的项则是方框里再加一个对勾,不确定的项是在方框里加一条横线。

它不需要默认选中项,可选范围从0到全选。复选框可以嵌套在一起形成多个层级。

复选框可以嵌套,单选按钮不行(材料设计)

 

开关

它由两个元素组成:滑块(thumb)和轨道(track)。

它有默认状态:开或者关。

 

Tips:

  • 选择控件的已选状态应该要比未选状态更加醒目。
  • 我们把选择控件所代表的内容称为标签。标签文本都应该简洁易懂,避免使用否定词汇,否则用户还需要绕个弯来理解。开关标签被误解尤为常见,诸如“请勿打开”、“补光灯关闭“、“延时关闭”这些都是不好的,它们都有否定词。
  • 把控件图标+文字一起作为可点击/触控区域,操作更方便。

 

状态 

单选按钮

单选按钮有两种录入情况:已选(selected)和未选(unselected) 。

在移动端和网页,单选按钮的状态有4种:

单选按钮的状态

 

因为太小了,单选按钮不适合用在电视上,电视上的单选请用选择纸片(choice chips)表示,即未选择和已选择用背景和字体颜色的变化来体现。

电视上的单选纸片(长虹)

 

单选按钮的状态示意图,供参考:

 

复选框

复选框有三种录入情况:未勾选(unchecked)、已勾选(checked)和不确定(indeterminate),不确定是专门用于父子复选框的,设父复选框下面有n个子复选框,当有m个选中、且0<m<n时,父复选框的情况即为不确定;当m=0:父、子都为未勾选;当m=n:父、子都为已勾选。

在三种终端,它的状态有5种:

由于复选框本身较小,在电视上不容易被发现,所以它的焦点框不应该只是复选框那般大小,最好是覆盖了标签的大面积实心焦点:

安卓TV

 

复选框的状态示意图,供参考:

 

开关

开关只有两种情况:开和关。它的状态有:

 

开关的状态示意图,供参考:

当开关图标本身颜色已经可以说明它的状态时,尽量不要写“开/关”或“ON/OFF”这样的字在图标上,那样会画蛇添足。

此外,避免写“开启/关闭”这种带动词含义的字在组件上,它们会让人搞不懂是表当前状态还是表拨动操作,此时如果图形本身状态辨认度较低,就会使这个问题尤为严重。所以,在设计开关时,一定要分别用艳丽和暗淡的颜色来表示开和关状态,举个例子:

Tips:

  • 拨动开关的滑块后如果状态切换失败,要马上弹回来。
  • 开关的规范做法是滑块在左为“关”状态,在右边为“开”。
  • 由于开关会立即执行,所以若是危险的操作需要用户再次确认。

 

尺寸

移动端

第三个表的示意图:

 

网页端

 

电视端

 

03 界面中的选择控件

标签的位置

约定俗成的做法是单选按钮和复选框的标签都位于右侧,开关的标签位于左侧:

标签的位置(材料设计)

 

复选框的标签在右边,最常见于购物车:

   

购物车:复选框的标签在右(京东到家和淘宝)

 

但经常会发现,在同一个APP里的其他地方,复选框的标签被放在组件的左侧:

   

提交订单页:复选框的标签在左(京东到家和淘宝)

 

为什么和购物车不一样呢?我的分析是,这取决于标签的长度和内容,如果标签是简短的文字,或排列整齐一目了然的商品(如购物车),那么为了美观和快速勾选,应该把组件放在左侧左对齐;但如果标签格式复杂或者内容专业性强、涉及到利益,供用户斟酌的话(如系统设置、支付方式、优惠券选择等),最好把标签放在左边,这样能让人顺着阅读习惯从左至右完成“阅读-思考-决定-勾选”的流程。

Tips:

  • 标签位置总结:开关的标签在左边;单选按钮和复选框的标签如果简单,就放右边,如果复杂、涉及到利益,就放左边。
  • 考虑界面设计的一致性,同类情况下,标签位置统一。

 

组件的布局

选择组件通常是多个选项集体出现,这就有了怎么布局的问题。规范的做法是尽量纵向排列,因为横向会不方便阅读,也容易造成每一项的勾选框和标签之间的混淆。

纵向排列(macOS)

 

如果不能避免横向,请确保选项之间的间距拉开,不要这样:

错误示例,间距不合理

 

应该这样:

正确示例,间距合适(百度云)

 

Tips:

  • 单选和多选的选项排序,按照:用户最可能选到最不可能选、最简单到最复杂、风险从小到大。但没必要按照首字母顺序来。
  • 有人说tab标签的本质就是单选按钮,我觉得不正确,它们是两种不同类型的组件,前者是触发类,后者是录入类,且不可互换

选择组件到此结束,下次见,祝你天天开心。

 

原文地址:UI设计语言(公众号)

作者:lady珠珠 

转载请注明:学UI网 » UI设计组件-选择控件(单选、复选、开关)

登录收藏
 
你可能喜欢的:
UI设计中的10条经验法则UI设计中的10条经验法则
10个新手UI设计师常犯错误,小编已中招,你呢?10个新手UI设计师常犯错误,小编已中招,你呢?
说这款银行APP不但省钱还体验很好,于是我们评测了一下说这款银行APP不但省钱还体验很好,于是我们评测了一下
产品思考:体系化设计流程与思路产品思考:体系化设计流程与思路
临摹的三个技巧,你尝试过吗?临摹的三个技巧,你尝试过吗?
需求落地之信息架构设计需求落地之信息架构设计
2019中国用户体验行业调查报告2019中国用户体验行业调查报告
一键了解内容分发的X种节点一键了解内容分发的X种节点
发布器的常见入口样式总结发布器的常见入口样式总结
为什么你的设计无法让别人记住(二)?为什么你的设计无法让别人记住(二)?