一篇文章弄懂单选框

Recommanded by editor
西安/UI设计师/5年前/4547浏览
一篇文章弄懂单选框Recommanded by editor
page_wu

一篇文章帮你弄懂单选框的用法和注意事项

单选框是非常常见的表单元素。它通常被用来从一组互斥的相关选项中选择一个单独的选项。当点击一个未选中的单选框时,它会被选中,其他按钮则会变成未选中状态。


发展历史


单选框的命名(Radio)来源于旧收音机上的物理按钮,当时被用来在频率和预置电台之间切换。当一个按钮被按下时,所有其他的按钮都会弹出,使被按下的按钮成为唯一处于“按下”状态的按钮。


该概念后来被用在磁带录音机、盒式录音机以及大名鼎鼎的“随身听”上。


计算机出现之后,施乐公司提出了(GUI)的概念, Xerox Star 8010工作站是第一个在图形用户界面上使用单选框的设备。


后来被Apple Lisa,Apple Macintosh以及Microsoft Windows采用,成为了标准的用户界面组件,一直沿用至今。



何时使用


1.当用户需要在一组互斥的选项中进行单一选择时使用单选框;如果要进行多个选择,推荐使用多选框。

2.当选项数目在2-7个之间时使用单选框;如果选项超过7个,推荐使用下拉框。

3.如果有两个含义相反的选项,如“同意”和“不同意”,“接受”和“拒绝”等,建议使用一个多选框或者开关。

4.如果每个选项都有同等的优先级,没有推荐选项时,使用单选框;如果需要向用户推荐某个选项,可以使用下拉框。

5.提供的选项用户是不是很熟悉?如果用户看了第一个选项就能预见到所有的内容,如“周一”,那么后边的选项是“周二到周日”等,这种情况下就不需要将所有的选项都展示出来,可以使用下拉框来简化界面。


行为交互指南


选项


1.在设计单选框的选项时,要充分考虑用户的实际情况,给出的选项要覆盖到所有的情况。例如,要考虑到用户不进行选择的情况,这时需要提供一个“无”的选项。

2.同样,给出的选项有可能都不符合用户的情况,如果所有的选项用户都可能不会选,就需要提供一个“其它”选项。

3.所有选项应该满足“互斥”的原则,因此选项之间要避免存在交集。例如,在一个年龄的选择设置上,如果提供的选项为“20-30岁”和“30-40岁”,那么如果用户刚好30岁该如何选择?

4.选项覆盖要全面,不能出现遗漏。如果遗漏某种情况,用户可能无法进行选择。例如,在一个年龄的选择设置上,如果提供的选项为“20-30岁”、“31-40岁”、“40岁以上”,那如果用户小于20岁该如何选择?


默认选项


1.因为单选框代表了一组互斥的选择,所以默认情况下总是要选择一个单选项。如果默认情况没有选择,当用户进行选择之后,就无法返回默认情况,这违反了“可撤销重做”的交互原则。

2.将第一个选项作为默认选项,这符合用户的认知。如果将第二个或其他选项作为默认选项,用户会以为出现了问题并感到疑惑。这时需要调整选项的顺序,确保第一个选项为默认。

3.因为默认选项总是第一个,因此需要选择最安全,最有可能的选项作为默认选项,提前预判用户的操作,提升选择效率。


选项排序


选项排序会影响用户操作,因此需要遵守一定原则。一般情况下,按逻辑顺序,选择概率由高到低;或者按照复杂程度排序,由简单到复杂;也可以按照操作后风险排序,将最安全的操作放在前边,由风险最低到最高进行排序。


排列对齐方式


默认情况下,推荐竖直排列。竖直排列相对于水平排列而言,容易读取和定位,可以提高用户的浏览效率,所有的选项进行左对齐,不用受制于选项的标签文字长短。


但是竖直排列会占用较多的垂直空间,如果垂直空间受限,可以考虑水平排列。水平排列的时候,要注意每个选项之间的间距,间距尽量大一点,要不然用户会分不清单选按钮的文字到底是在前边还是后边。


交互区域


单选框的面积较小,用户在点击的时候会比较困难。可以通过扩大点击区的交互区域来提高易用性,将标签文字也设置为可点击,增加操作区域的面积,方便用户操作。


文字标签



每个选项都要配合相应的文字标签来指示该选项所代表的含义。文字标签需要简洁明了,一般使用短语而不是句子,因此不需要以句号来结尾。


尽量保证每个文字标签用语的表达的一致性,不要出现有的用名词,有的用动词的情况。

仅体现每个选项之间的差异,不用重复选项之间相同的部分,将重复部分提出来放在整个选项的上方。

保证选项尽量简洁,如果需要解释说明,可以在选项下方使用单独一行文字。

如果标签文字无法进行精简,必须使用多行文字,将单选按钮与文字顶对齐。


状态


每个选项都有选中和未选中两种情况,每种情况对应了3种交互状态,分别为默认、悬浮和禁用。



以上就是我对单选框的总结,分为定义、发展历史、使用场景和行为交互四个部分。其中难免有遗漏和错误,欢迎大家一起来讨论!

82
阅读原文
|
Report
|
150
Share
相关推荐
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
相关收藏夹
表单
表单
表单
表单
作品收藏夹
文章
文章
文章
文章
作品收藏夹
技术类文章
技术类文章
技术类文章
技术类文章
作品收藏夹
UI理论文章
UI理论文章
UI理论文章
UI理论文章
作品收藏夹
Ui按键设计
Ui按键设计
Ui按键设计
Ui按键设计
作品收藏夹
大家都在看
Log in