vc6.0mfc中单选按钮如何分组_一篇文章弄懂单选框

0f1b3ece2bdb47c355d79cc1f6e4a8ac.png

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

​发展历史

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

f4cb6056e21ab969cf5d502ad1119213.png

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

81eb2d774dd2601b3120918e97c35252.png

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

6503b9b5784dcaec8f9f056fda9cf412.png

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

92bbdc19e37e7deff5344314e5edc2da.png

何时使用

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

8b1fdb3eb06e7cc25badb475394696c3.png

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

abb63d3e4098a284a5c9687d8a319461.png

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

35b0b85ba80850b8c586a348826d1e07.png

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

2c36636f75c6f416e9ca62b223b336ce.png

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

ea825e929420d35f222201d17d01d014.png

行为交互指南

选项

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

6812cc7d7f4c4b2ba99b92ad6c3576b3.png

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

879981f0a2814b2d1ce5867a5fb64e8b.png

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

7570cf9ddda46f3754e627492c0226c0.png

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

4a77d464f09fdc2df5f58bdd9d800335.png

默认选项

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

65fbb8faa9bd3dd549681d0fcac7ef11.png

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

b62f77ce1e5cbddb7f41f9f4f1ee8b8e.png

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

3931b7483e4ff30c5b3dae41006404ef.png

选项排序

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

8ea9d3aa19b6e5a079af4f1e52b48358.png

排列对齐方式

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

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

56871875ddac07113cfff2e33ea1309c.png

交互区域

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

65f2704b0bf7a5f7e58482ffca8c3b6d.png

文字标签

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

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

68c12167458d88265dcd7e40b42a86d9.png

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

683e303644ebc6b301195b5ae9b0092b.png

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

1fc13faf44836910eb43c3f209b5feda.png

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

2aa1cb90c23e85e2759dd74dd6d902ce.png

状态

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

19c760f10fa4602ce6e170e4d76db584.png

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值