[译文]单选按钮最佳实践

单选按钮是表单中的必备元素。当一个列表里包含两个以上互斥元素而用户必须从中择一时,会使用单选按钮。简言之,点击未选中的按钮,就会让之前选中的按钮变为未选中状态。

常见的单选按钮

善用单选按钮能帮助减少用户错误输入,因为单选按钮只展示有效选项,并且能够用键盘辅助填写,还能跨平台渲染。本文中,我们将讨论通过可用性测试的单选按钮的使用方法。


只有一个按钮可以被按下

单选按钮是如何得名的?

单选按钮因老式汽车上的收音机物理按钮而得名的。当其中一个按钮被按下,另外的按钮就会弹起,只有被按下的按钮处于『按下』状态。软件的单选按钮仿照这种物理按钮产生的。

单选按钮最佳实践——仅在设置时使用

使用单选按钮来改变设置,而不要使用它来传达命令。同样的,被改变的设置不应在用户点击确定或者执行命令之前的生效。如果用户点击了返回或者取消按钮,单选按钮中做出的更改应该被放弃而回到原始状态。
如果单选按钮是用来触发命令的,那么最好将要改变的元素放在单选按钮中。这样做可以方便用户一步交互操作就执行正确的命令。

用户只需一步就能完成操作

选项按照逻辑顺序排列

你应该将所有选项按照一定逻辑排列,比如最容易被选择的到最不容易被选择的,最简单的选项到最复杂的选项,或者最小风险到最大风险。不推荐按照字母表顺序因为这种顺序和语言本身相关因而各地难以统一。

选项应该易于阅读并且能被清晰分辨

单选按钮最大的可用性问题在于描述选项的标签文案是模糊的,或者让大部分人难以理解。虽然联系上下文可以稍稍缓解后一个问题,但是最好还是请用户来测试交互控件。

总是提供一个默认选项

十大UI启发式设计方法之一就是允许用户撤消操作。就是说允许用户将UI控件设置为其原始状态。对于单选按钮来说,就意味着它始终需要有一个默认选项被选中。应该默认选择最安全(防止数据或系统权限丢失)、最保险和最私密的选项。如果安全和隐私不是要考虑的因素,就默认选中最可能被用户选择的那一项。

在用户不必非要决策的情况下,你应该提供一个标签为”None”的选项。提供给用户一个明确的、中立的选项比强迫用户做出一个不准确的决定要好得多。


需要默认选项

你的选项纵向排版

横向排版的单选表单难以浏览。横向排版还会让按钮和标签的关联性产生问题——按钮是和它之前的标签关联还是和它之后的标签关联?纵向排版的选项列表比较安全。

让单选按钮的标签部分也变得可点击

单选按钮很小,因此根据费茨定律,它们很难点击。为了增大点击区域,应该让用户不仅仅点击或者轻触按钮有效,点击其标签也应该有效。让用户点击按钮或者关联标签都能触发控件。

左:只有按钮部分可点;右:更大的点击区域

一款名为Danlingo的应用的横向单选按钮设计得不错:它采用了横向排列的单选按钮,但是将点击态明显区分出来,并且点击热区足够大满足触屏设备的点击需求。

好的案例:横排版的单选按钮

尽可能使用单选按钮而非下拉菜单

如果可能,使用单选按钮而非下拉菜单。单选按钮有更低的认知负载因为它让所有可能的选项变得可见,让用户更方便对比每个选项。
如果你的选项不多于7项,可以考虑采用单选按钮。用户能迅速扫视到底有多少个选项,每个选项是什么,而不需要点击才能查看详细信息。

避免嵌套

避免单选和其他单选按钮或者多选按钮嵌套。应该让各个选项在同一层级来避免混淆。

嵌套增加额外复杂度

使用动画或者视觉反馈

设计良好的动画给人一种精巧的体验。像单选按钮这种界面元素应该看起来可触碰,即便单选按钮被放在一层玻璃后。视觉动效引导让人感知其是可输入的,并且在输入后呈现清晰的视觉反馈。


单选按钮动效
单选按钮动效

复选框会是更好的选择吗?

如果只有一个选项,你可能会选择复选框。但是复选框仅仅是用来开启或者关闭某个单一选项,而单选按钮可以在不同的选项之间切换。

你应该记住单选按钮的使用情况:
可选。如果复选框无法完全表意时,采用单选按钮。如下面的例子,选项是互斥的,因此选用单选按钮比较好。

选择横屏还是竖屏

安装向导。在安装向导上使用单选按钮让互斥的选择变得清晰。单选按钮的默认状态对用户来说是一个重要建议。默认选项可以帮助用户做出最适合的决定,还可能帮助他们更有信心地使用。

默认选项代表着重要建议,可以进一步在其后加上『推荐』

简单的对或错。如果用户对或错来回答这个问题,那么可以采用复选框。

简单的对错问题可以采用复选框控件

结论

当设计单选按钮时,最终要的是要遵循设计标准,保证用户能预期这个控件的作用以及如何使用它。相反得,违背标准让用户界面脆弱,好像任何无预期的改变都会在界面上发生。
细致地设计。单选按钮可以用纸上原型法来测试,因此你不用为了测验单选控件的可用性进行任何开发实现。

原文链接

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,761评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,953评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,998评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,248评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,130评论 4 356
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,145评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,550评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,236评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,510评论 1 291
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,601评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,376评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,247评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,613评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,911评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,191评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,532评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,739评论 2 335

推荐阅读更多精彩内容

  • 1、窗体 1、常用属性 (1)Name属性:用来获取或设置窗体的名称,在应用程序中可通过Name属性来引用窗体。 ...
    Moment__格调阅读 4,429评论 0 11
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,208评论 1 41
  • 单选按钮作为表单系统的一个基本元素,它们被使用在当存在互斥的两个或多个选项而用户必须选择其中之一的时候。换句话说,...
    三达不留点gpj阅读 2,603评论 5 7
  • 用户利用选择框,可以进行“选择/不选择”这两种意义截然相反的操作。复选框的标签为选中状态下的意义,未选中状态下的意...
    烈焰虾米阅读 1,508评论 0 3
  • 秋天敲打着玻璃 斑驳模糊 坐上一片黄色的枯萎 悠然地飘落 路过的诗人捡起 夹进棕色的怀旧 赤脚印在泥泞的小路 指头...
    康本丛Ben阅读 234评论 0 0