单选按钮的设计思考

平台ID：UI_xzw(点击关注) -- --- - -- ----- ---- --- 一┳═┻︻▄

（页底留言开放，欢迎来吐槽）

● ● ●

单选按钮是表格中一个非常重要的组成部分。当用户需要在含有两个或更多选项的列表中选择一个选项的时候，就可以使用它。它的本质指仅能选择没有被勾选的选项，选择以后则其他被勾选的选项将被取消勾选。

当使用正确时，单选按钮可以发挥很大的价值——由于所给选项是限制的并附有其他相关的解释说明，可以有效的避免用户输入错误的数据。在这篇文章中，我们将通过已有的可用性案例来更加全面的思考单选按钮的设计规范。

1、单选按钮(radio button)为何叫这个名字？

单选按钮（radio button）的名字源自老式汽车音响上用来选台的物理按钮——当一个按钮被按下的时候，另外一个按钮将被弹起，只留下一个按钮是维持在被按下的状态。软件上的单选按钮就是基于此而创建的。

2、单选按钮的几点思考

在设置中应用单选按钮

使用单选按钮去改变设置项，并不是像指令按钮一样去下达命令。通常，如果用户改变了某项设置以后，需要点击确认或保存设置才能生效。如果用户选择了返回或则取消，则任何被改变的设置都将被还原。

但如果只包含单个设置项时，则单选按钮选择即生效的方式将会更好，因为这样做可以使用户操作起来更加高效。

选项的顺序要有逻辑

选项的排序需要按照一定的逻辑顺序，比如最可能被选的放在前面，生效后的风险最小的选项放在前面以及复杂的放在后面。要避免按照字母去排列选项，因为不同种族语言的差异性将导致产品本地化出现问题。

各个选项应该更易理解且区别明显

关于单选按钮存在的最大问题就是：模糊、误导性或描述不清的标签名将导致普通用户难以理解。不过通过上下文的帮助可以缓和这个问题，但对于用户体验而言这个问题还是需要重视的。

提供一个默认的选项

UI设计的10条启发（10 heuristics of UI design)中的一条提到过：要给予用户撤销的权利。这表明要加入一个帮助用户回到默认状态的按钮。而在单选按钮中，则可以通过设置一个默认的预选按钮来达到这个目的。这个选项应该是最安全（可以防止数据的丢失和系统的异常）、稳定而又私人性的选项。如果不考虑安全性，则选择最普遍而又快捷的选项。

如果用户不想在所给的选项中进行选择，那么应该给予用户一个放弃的选项，比如”空白”。为用户提供一个中立态度的选项明显要比啥都不做要好很多。

垂直展示你的选项

水平排布的单选按钮有的时候很难浏览而且不利于排版。而且还有一个问题就是：水平排布的按钮，会让用户疑惑标签名对应的到底是前面的选项还是后面的选项，会产生误解。而垂直排布则不会有这种问题。

尝试着垂直排布你的选项列表，每行一个。如果特殊情况下需要水平排布，那需要考虑好每个选项的按钮和标签名的间距，使得每个选项和该选项的标签名是清晰对应的。像下面这个例子，就应该避免出现这种难以分辨的情况。

让标签名也成为点击的热区

通常单选按钮都是比较小的，根据费茨定律，它们可能会比较难点击。为了扩大选择的区域，让用户不仅可以通过勾选框选择还可以通过标签名进行勾选。

关于水平排布的单选按钮优秀案例，可以参考多邻国app。他们使用了传统的水平排布单选按钮，但保证了在触摸设备上，各个选项在视觉上有较好的可区分性以及足够大的可点击区域。

使用单选按钮代替下拉控件

如果可以的话，尽量使用单选按钮而不是下拉菜单。因为使用单选按钮，保证了所有的选项都是可见的，用户可以更加容易的比较它们。

除非选项超过了7个，否则都应该使用单选按钮。用户能够直接观察到有多少个可选的选项，并更加直接的了解每个选项分别是什么。这样就不需要再费劲的去多点一次下拉按钮。

避免嵌套式

要避免与其他单选按钮或勾选框产生嵌套式的情况。你应该保证所有的选项都是同一个层级下的，这样可以使得选项更加清楚易懂。

使用动效和视觉反馈

精心设计的动效可以使用户体验更加流畅。像单选按钮这种交互元素应该看起来像可以触摸的，即使它们是在屏幕之下。用户在操作时，动效的使用将使用户更加确认自己的输入是否有效。

3、勾选框是否是更好的选择？

如果仅仅只有两个选项，你确实可以使用单独的勾选框而不是单选按钮。但是勾选框只适用于选项非是即否的情况，而单选按钮可用于完全不同的两个选项的选择。

下面的情况应该着重注意：

a、选择：当一个勾选框无法准确表达选项含义的时候，应该使用单选按钮。比如下面的例子中存在两个截然不同的答案，这时使用单选按钮将是更好的选择。

b、引导界面：在引导界面中，你应该使用单选按钮保证选项的清晰易懂，即使勾选框也是可行的。因为通过使用默认选项，可以给予用户一定的建议，使新手用户更好选择。同时这也提高了他们进行下一步操作的信心。

c、简单的是或否的判断：这时候使用勾选框会更好，因为用户仅仅需要回答的”是”或则”否”。

4、总结

在设计单选按钮时，遵循设计规范是十分重要的，因为这可以提升用户理解操作以及使用更加顺畅的能力。违反了设计规范，将导致异常现象的发生，就好像没有了警告，任何事都有可能发生。

设计时要仔细。单选按钮通过原型来测试是十分方便的，所以没有必要在产品实现以后再去测试用户是否了解如何操作以及能否正确使用。

入群即可结交更多UI设计师

想和兴趣相投的朋友们一起交流吗？

丰富的学习资源进入我们的直播课！

扫描下面的二维码加入我们爱好群！

群号： 246049893

长按二维码即可入群

微信公众号：UI设计自学平台

点击下方“阅读原文”结交更多的UI设计师！

↓↓↓