如何使用单选和复选控件

151 阅读4分钟

相信大家对单选、复选和选择器控件不陌生。但是,大家对几种控件的差别是否完全理解,以及在设计工作中是否能够根据场景选用正确的控件呢?

1. 单选控件 (Radio)

单选控件 (Radio),是容许用户在一组(两个或更多)预定义互斥选项中选择其中一个选项的控件。

当用户选择了一项之后,之前的其他选中项则被取消选中,再次点击已选中项,选中状态不改变。单选控件存在未选、已选、不可操作 (未选/已选) 三种状态。未选状态的样式上通常为中空圆圈,选中态一般为圆形内部显示实心圆点或对号,选中态的样式注意在同一款产品中保持一致。

在使用单选控件时,建议为用户设置一个默认选中项,这样做的原因有以下三点:

  • 符合可控性原则

如果我们不为用户设置默认选中项,那么当用户进行过操作之后,由于控件属性,无法撤销选择,回退到操作前的所有选项都未选中的初始状态,不符合“尼尔森十大可用性原则”中的“可控性原则”,设置默认选中项则可避免这个问题。

  • 降低交互成本

当我们通过数据分析,观察到一组选项中哪一个是被用户最多选择的,则可以尝试将这一项设置为默认选项,来降低用户的交互成本。

  • 提供决策牵引

当用户需要对于一组相对陌生的选项进行选择操作时,默认选中项可作为提供给用户的建议或推荐选项来辅助用户决策,增加用户选择的信心,并节省决策时间;对于平台来说,也可以引导用户选择平台希望用户选择的选项。

2. 复选控件 (Checkbox)

复选控件 (Checkbox),是容许用户对指定问题的回答是“是”还是“否”,也可以在一组预定义选项中选择一个或多个项目的控件。

其操作不具有互斥性,选项的选中与否,不影响其他选项的状态,当再次点击已选中项时,会取消选中。复选控件存在未选、已选、未定、不可操作(未选/已选/未定)四种状态。

这里容易被忽略的是未定 (indeterminate)状态,未定状态常见于B端,当选项存在多个子项时,其中某些子项被选中,但并未全部选中,这时父级状态尚不确定,即为未定状态。

3. 几种控件的差别

下面来看一下几种控件的差别,以便在界面中正确使用。

  • 选择和切换控件

一般来说,单选、复选控件需要配备提交按钮,点击按钮后才会提交被选中的信息,而开关选择器控件在操作之后可即时生效。

  • 单选和复选控件

单选和复选则可以从以下几个方面进行区分:

4. 问题思考

1. 在我们进行登录操作时常见的协议勾选是单选还是复选?

2. 协议勾选的选择控件能否换成开关选择器控件?

答案:

1. 在我们进行登录操作时常见的协议勾选是单选还是复选?

是复选,单选的选项设置数量最少是两项,而且在选中后,再次点击无法取消勾选。而从复选控件定义和使用规则上可以得知,复选可以用来对指定问题的回答是“是”还是“否”,最少可以只有一个选项,再次点击选中项,选中状态取消,所以这里是复选。

2. 协议勾选的选择控件能否换成开关选择器控件?

不能,因为开关一般来说操作可即时生效,而此处的已同意协议状态,须要在点击登录按钮之后方才生效。