原文：7 Rules of Using Radio Buttons vs Drop-Down Menus

作者：Saadia Minhas (2018-05-06)

阅读时间：3m43s

不管你正在使用移动 apps 还是基于网页的工具，表单都是用户界面中至关重要的一部分。同时，表单也是用户交互的最佳来源。用户通过表单录入、提供信息，系统则通过理解这些信息来满足用户需求。

输入控件、输入校验、错误处理、用户反馈等，都是可用表单中的一些项目。

单选按钮和下拉菜单是其中两个非常重要的输入控件。当用户需要输入时，它们可以互换使用。

然而，如果我们仔细研究这两个控件的可用性，很明显，它们都有各自特定的使用场景，以便用户更容易选择给定的输入。

下面是基于这个可用性研究的一些使用原则，它们将帮助你在设计表单时决定使用哪个控件更合适。

使用单选按钮

1. 当需要强调选项时

下面是一些需要强调选项的情况：

•  没有明确的默认选项或推荐选项

•  希望用户阅读所有选项

•  用户不熟悉这些选项，并且较少有机会甚至没有机会预知它们

当需要强调选项时

在上面这个例子中，使用下拉菜单并不是一个很好的方案，因为默认选项并没有提供关于其他选项的线索。

2. 当选项少于 5 个时

选项较少时最好并排放置，以便：

•  用户可轻松快速的浏览所有选项

•  提供快速响应，而不是打开下拉菜单后再从多个选项中进行选择

选项较少时

如上面的例子所示，当用户需要从 2 至 4 个选项中进行选择时，使用单选按钮更合适。

3. 当选项之间需要进行明确的比较时

可比较的选项最好并排放置，因为：

•  用户可对所有选项一目了然，并轻松进行比较

•  从下拉菜单中比较和确定选项需要耗费时间

•  用户每次需要检查已选项时，都必须再次打开下拉菜单对选项进行比较

当需要比较选项时

上面这个比较好的例子是，关于用户必须做出严肃决定的订阅计划的选择。

4. 当需要优先考虑可见性和快速响应时

清晰的可见性及选项的可快速浏览对用户来说更容易理解。

•  对于较长的表单，可更简单快捷地扫描并标记所需选项

•  每次都点击下拉菜单去选择某个选项，会耗费很多时间

长表单──Survey Monkey Questionnaire

从上面例子可明显看出，所有可选项对用户可见的长表单提供了更好的用户体验。

使用下拉菜单

1. 当默认选项是推荐选项时

仅查看推荐选项使用户更容易做出选择，因为：

•  显示所有选项将吸引用户的注意力

•  不鼓励用户更改默认选项

默认推荐选项

在上面的例子中，用户基本不需要改变默认选项，所以没有必要显示所有的选项。

2. 当有大量相似的选项可选时

当有大量相似选项时，推荐使用下拉菜单，因为：

•  用户很容易预知这些选项

•  用户没有必要并排查看所有选项

大量相似选项

3. 当选项超过 7 个时

当选项个数较多时，并不适合并排显示，因为：

•  如果一大堆选项并排放置，用户界面将变得杂乱。用户在查看时有可能会感到困惑。

•  扫描大量的单选选项需要耗费时间

超过 7 个选项

此外，对于长下拉列表，提供文本输入框是一个不错的方法。用户在其中输入选项名称后，列表仅显示出过滤选项。这将使选择更轻松快捷。

输入选项来过滤列表

总结

为提高表单的用户体验，提供正确的控件以便用户输入是非常重要的。由于大量的选项会使表单变得很长，如果用户需要额外点击来输入信息的话，这将变得十分枯燥。

以上这些规则将帮助你决定在设计表单时使用哪个控件，单选按钮还是下拉菜单。

---

以上翻译包含个人理解，仅作为个人学习笔记使用。如有错误，求指正呀，非常感谢 ^^ 

感谢原文作者及所有分享想法与经验的人 ^^