使用单选按钮,用户可以在一组互斥的相关选项中进行选择。用户只能选择一个选项。单选按钮之所以叫做radio button,是因为它们的功能类似于收音机上的频道设置按钮。
一组典型的单选按钮
一组单选按钮的行为类似于一个单一控件。只有选定的选项可以使用 Tab 键访问,但用户可以使用箭头键在项目组中循环访问。
何时使用该控件
思考以下问题:
- 控件是用来在一组互斥的相关选项中,选择一个吗?如果不是,请使用其他控件。要选择多个选项,使用复选框、多选列表或者复选框列表。
- 选项数量在2个到7个之间吗?因为屏幕空间是和选项数量成正比的,尽量将一组选项的数量控制在2-7个之间。对于超出8个的选项,使用下拉列表或单选列表框来表示。
-
使用复选框是否更好? 如果只有两种选择,则可以使用单个复选框。 但是,复选框只适用于启用或关闭单个选项,而单选按钮可用于完全不同的选项。如果两种解决方案都可行:
1.如果清空复选框的表意不够明显,则还是需要使用单选按钮。
错误示例
正确示例:因为两个选项的含义并不是对立的,所以使用单选按钮更好
2.在向导页上使用单选按钮以清晰表述不同的选项,即使这种情况下使用复选框是无误的。
3.如果屏幕空间足够,并且选项也足够重要到需要全部展示,这时可以使用单选按钮以显示选项。否则,使用复选框或者下拉列表。
错误示例:这组选项的重要性不足以使用单选按钮全部展示
4.如果页面上有其他复选框,也可以继续使用复选框。
-
使用下拉列表是否更好?如果默认选项适用于绝大部分用户和场景,那么单选按钮会过多地将用户的注意力吸引到不必要注意的选项上去。
1.如果你不希望用户过多注意到其他选项,或者不建议用户更改默认选项,使用下拉列表代替单选按钮。下拉列表更强调当前选项,单选按钮则是平等地强调所有可选项。
在该例中,下拉列表强调当前选项,并且不鼓励用户进行更改
2.如果页面上有其他下拉列表,可以考虑继续使用下拉列表。
- 使用一组命令按钮、命令链接或者分裂式按钮是否会更好?如果使用单选按钮仅仅是为了影响命令的执行方式,那么通常最好直接展示不同的命令。 这样用户可以仅通过一次交互选择正确的命令。
- 选项是否提供程序选项,而不是数据选项?选项的值不应该基于上下文或其他数据。对于数据,使用下拉列表或单选列表框。
- 如果控件位于向导页面或控制面板中,该控件是否用来响应主指令,并且用户之后还能对其进行更改?如果这样,使用命令链接来代替单选按钮会更有效率。
- 选项是数值数据吗?对于数值数据,使用文本框、下拉列表或滑块控件。
设计指南
一般原则
- 按照逻辑顺序罗列选项。例如从最有可能选择的到最不可能被选择的,从最简单的操作到最复杂的操作,或者从最安全的到最有风险的操作。在这里不建议按字母表顺序排列选项,这种方式基于语言的不同很难实现本地化。
- 如果“不选择任何一项”也是一种选择,另增一个选项以代表这种选择,例如“无”或者“不应用”。
-
尽量竖向对齐单选按钮,不要使用横向排列。横向对齐的选项难以阅读,并且很难本地化。
正确示例:单选按钮竖向对齐
- 慎重考虑使用组框组织单选按钮组。这种做法常常会导致界面杂乱。
- 不要将单选按钮标签用作组框标签。
-
不要使用单选按钮的选择项来:
1.执行命令;
2.展示其他窗口,例如用来收集更多信息的对话框;
3.动态显示或隐藏与当前控件相关的其他控件(屏幕阅读器无法侦测到这类事件) ,但你可以根据所选取的内容,动态更改文字。
次级控件
-
将次级控件放置在单选按钮及其标签的右边或者下方(在下方时缩进,与单选按钮的标签对齐)。用冒号结束单选按钮标签。
在此示例中,单选按钮及其从属控件共享单选按钮标签及其访问键。在这种情况下,使用箭头键可以将焦点从单选按钮移动到它的下级文本框上。 -
如果文本框和下拉列表共享单选按钮的标签,用户未选择响应选项时禁用它们。当用户在框中键入或粘贴任何内容时,则自动选择相应的选项。 这样做可以简化交互。
该例中,输入页码会自动选择页面选项
-
避免多层级使用单选按钮和其他按选按钮或复选框。尽可能保证所有选项都在同一层级。
正确示例:所有选项都在同一层级
错误示例:多层级的选项带来了不必要的复杂 -
如果要将单选按钮与其他单选按钮或复选框一起嵌套,请在选择高级选项之前禁用它们的次级控件。这样做可以避免关于次级控件含义的混淆。
默认值设置
-
因为单选按钮表示的是一组互斥的相关选项,永远保证默认状态下有一项是被选中的。默认选中最安全(以避免数据丢失或系统更改)、最保险或者最私密的选项。如果安全性和保险性没那么重要,就默认选中最有可能被选择或者对用户来说最便捷的选项。
-
特例:以下情况不要选择默认值:
1.出于安全、保障或法律原因,没有可接受的默认选项,因此用户必须自己做出明确的选择。 如果用户没有做出选择,显示错误信息提示以强制用户进行选择。
2.用户界面(UI)需要反映当前状态,而当前选项尚未设置。默认值会错误地暗示用户不需要进行设置。
3.目的是收集无偏向性的数据。这种情况下默认值会影响数据的收集。
4.单选按钮组表示一种混合的属性,这种情况发生在显示多个不同设置的对象的属性时。在这种情况下,不要显示错误消息,因为每个对象都有一个有效状态。 -
设置第一个选项为默认选中项,这符合用户的正常预期,除非选项并没有按照逻辑顺序排列。为了做到这点,有时需要对标签文字进行更改。
错误示例:默认选中项不是第一项
建议尺寸和间距
单选按钮的建议尺寸和间距标签
单选按钮标签
- 给每个单选按钮设置标签文字。
- 为每个标签分配一个唯一的访问键。有关指南,请参阅键盘一章。
- 使用句式大小写规则。
- 把标签写成短语形式,不要写成句子,并且不要使用结尾标点符号。
(例外情况: 如果一个单选按钮标签也标记了它紧接于它后面的一个次级控件,则用冒号结束标签。) - 不同选项尽量使用相同句式,并尽量保持所有标签的长度相同。
- 标签文本应着重强调选项之间的差异。如果所有选项都含有相同的介绍性文字,则应将该文本移动到组标签上。
- 使用积极的措辞。例如,用 do 代替 do not,用 print 代替 do not print。
-
标签仅仅用来描述选项。保持标签简洁,以便在其他讯息和文档中引用它们。如果该选项需要进一步解释,请在静态文本控件中使用完整的句子和结束标点符号提供解释。
在该例中,选项使用单独的静态文本控件加以解释
(备注:对一个单选按钮添加解释并不意味着必须为所有单选按钮提供解释。尽可能在标签上提供相关信息,并且只在必要的时候使用解释文字。不要仅仅为了保持一致性而重述标签文字。)
- 如果强烈推荐某个选项,则在标签上添加“(推荐)”字样。推荐字样需要添加到控件标签上,而不是放在补充说明中。
- 如果某个选项仅适用于高级用户,则在标签中添加“(高级)”字样。 该字样需要添加到控件标签上,而不是放在补充说明中。
- 如果必须使用多行标签,请将标签与单选按钮顶部对齐。
- 不要使用次级控件、它包含的值或它的单元标签来创建句子或短语。这样的设计是不可本地化的,因为句子结构会随语言而变化。
单选按钮组标签
- 使用组标签来解释组的目的,而不是告诉用户如何进行选择。默认为用户知道如何使用单选按钮。例如,不要说“选择以下选项之一”。
- 所有单选按钮组都需要标签文字。将标签写成单词或短语,而不是句子,使用静态文本并以冒号结尾,或使用组框组织选项。
(例外情况: 如果标签仅仅是对对话框主要指令的重述,则省略它。 在这种情况下,主指令可以以冒号结尾(除非是问题)和接受访问键(如果有的话)。)
说明
当提到单选按钮时:
- 使用带有大小写规范的完整标签文字,但是不要带有存取键;
- 在代码和技术文档中,用“单选按钮”指代单选按钮,在其他地方、尤其是用户文档中,使用选项按钮指代单选按钮。
- 使用“单击”描述用户交互;
- 在可能的情况下,加粗标签文字。否则使用双引号括住单选按钮名称以防止混淆。
示例:单击当前页面,然后单击确定。
网友评论