前言

总结：本文提供了何时使用勾选框，何时使用单选按钮的界面设计指南，并总结了关于它们的12个可用性问题。
我最近在一个大型网站的注册页面看到了一个如下的对话框。它至少包含了两个设计上的问题。请看看你是否能在继续阅读前找出它们。
image.png
第一个错误即是本文主要讨论的议题：许多人该使用单选按钮时使用勾选框。因为上述两个选项是互斥的，页面应该给用户呈现只能让他们选择一项的单选按钮。

第二个错误是——首先呈现两个问题，然后把它们放在一个啰嗦的对话框里。其实用一句更简短的话术就可以：「是，请发送关于其他主打产品、方案、服务和教育机会的邮件。」

有趣的是，如果我们只用单个问题来呈现这个对话框，则应该使用勾选框：因为用户可以回答是或否。根据我们对购物网站的用户测试结果，这个勾选框应该默认不选（留空），而用户可以主动选择接收更多的信息。

一、何时用哪种元素

自从1984年苹果发表的第一部开发者文档Inside Macintosh以来，使用勾选框还是单选按钮的规范一直是一样的。此后的所有图形用户界面（GUI）标准和万维网联盟（W3C）标准对于使用这两者的定义都是相同的：

  1. 单选按钮：在有一系列（两个或以上）互斥的选项，且用户必须选择其中的一个时使用。换句话说，点击一个未被选中的单选按钮，会自动取消掉之前选中的任何单选按钮。
  2. 勾选框：在有一系列选项，且用户可以选择其中的任意个（包括0个、1个或多个）时使用。换句话说，这个系列中的每个勾选框与其他勾选框是独立的，选择其中一个并不意味着不选择其他的。
  3. 一个单独的勾选框在用户可以选择打开/关闭单个选项时使用。

听起来很简单，是吧？

然而，我还是经常会遇到搞错这两者的网页。即使是在20年后，我们也有必要重申使用这两者的规范。

二、附加规范

  1. 使用标准的视觉表征。勾选框应为一个小的正方形，在被选中时中间是对勾或X。单选按钮应该是一个小的圆形，在被选中时中间有一个实心圆。
  2. 视觉上把同属一个类别的选项归类在一起，并与页面上其他类别的选项分隔开。上文的例子违反了这一原则，因为它的布局显得这两个勾选框表达的是不同的主题——然而它们其实是同一主题的可选选项。
    • 使用小标题将一长串的勾选框分成数个有逻辑的小组。这能使得用户快速扫读选项，同时也易于理解。这样的风险是用户可能会将每个分组看作单独的选项集合，但这对于勾选框来说并不致命——毕竟每个勾选框本身就是互相独立的。相反，一系列的单选按钮则必须被放在一起，而并不能用将其分组。
  3. 垂直地分布选项，每个选项一行。如果你必须水平分布选项，每行有若干个选项，一定要确保把单选按钮和其对应的标签放在一起，并与其他选项足够隔开，确保每个按钮对应哪个标签是非常清晰的。例如，下表中，我们就很难看出点击哪个按钮可以选到选项四（Four）。
    1. image.png
  4. 使用积极、正向的语言来表述勾选框，这样用户可以清晰地了解选择了该勾选框后会发生什么。换句话说，不要用否定的表述如「停止给我发送邮件」，这意味着用户需要打勾来阻止某件事的发生。
    • 勾选框的表述应该能让用户清楚地了解选择，或者不选特定选项会产生怎样的结果。
    • 如果你无法做到这一点，也许你应该使用两个单选按钮——一个表示开启该功能，而另一个表示关闭——并在以清晰的语言撰写这两个选项的标签。
  5. 尽可能使用单选按钮而非下拉菜单。单选按钮对用户的认知负荷更低，因为它持续地展现所有的选项，使得用户能够比较它们。单选按钮对于执行精细鼠标操作有困难的用户也更有帮助。（空间有限的情况下，我们可能会要违反该原则，但应该尽可能让所有选项可见。）
  6. 呈现单选按钮时，总是提供一个默认选项。根据定义，单选按钮总会有唯一一个被选择的选项，因此你在呈现它时必须提供一个默认选项。（与之相反，呈现勾选框时的默认设置应该为所有的选项都不选中。）
    • 如果用户需要能够在一个选择中什么都不选，你也应该为这种可能的情况准备一个单选按钮，例如一个「无」的选项。提供一个明显的、中立的选项好过允许他们跳过选择、什么都不选，因为这违反了单选按钮「必须要选一个」的原则。
  7. 因为单选按钮要求精确的单一选择，应确保每个选项的表述都是全面、有区分度的。例如，在我们对老年用户的测试中，用户无法完成一个需要选择其职业的表格，因为它没有提供「退休」这一选项。如果选项无法涵盖所有方面，提供一个「其他」选项，并提供一个文本输入框。
  8. 在用户点击单选按钮/勾选框或其文字部分时，都选中该选项。根据菲茨定律，人们能更快地选中更大的目标。在HTML表格中，你可以通过把每个标签添上
  9. 仅在用户修改设置时使用单选按钮和勾选框，而不是让某事发生的操作按钮。同时，被更改的设置也应该等到用户点击命令按钮（例如「确认」或「继续到XXX」，而「XXX」是流程的下一步）
    • 如果用户点击「返回」按钮，任何对于页面上勾选框或单选按钮的更改都应被取消并恢复到之前的设置。当用户点击「取消」时也应如此（尽管可导航的网页不需要「取消」这一选项，因为返回键就可以达到该目的）。
    • 如果用户在点击「返回」按钮后又点击「前进」，最合适的做法是把这个动作当作「撤销-重做」操作，这意味着这些操作选项的显示应该保存了用户之前的更改，就像用户从没有点过「返回」一样。同样，这些设置的更改也要等到用户点击「确认」或同等含义的命令按钮时才会实现。

三、为什么需要遵循这些规范

我为什么要坚持这些正确使用勾选框和单选按钮的规范——是我太挑剔了吗？不是。遵循图形用户界面标准和正确使用这些元素是有一定可用性上的道理的。

最重要的一点是，遵循设计规范可以提高用户预测一个对话框的功能的能力，并让他们有区分性地对待它们。当用户看到一系列的勾选框时，他们就会知道可以选择多个选项。当他们看到一系列的单选按钮时，他们明白了只能选一个。（当然，不是每个用户都知道这一点，但许多人知道，尤其考虑到这是从1984年就被提出并遵循的设计规范。）

因为许多人知道如何操作标准的图形用户界面元素，正确的使用这些元素提升了用户对于科技的驾驭感。相反，违反这些规范会让用户界面显得很脆弱——好像在毫无预兆的情况下任何事情都会发生一样。例如，你认为在点击一个单选按钮时不会有什么即刻的反应，这样你就可以在点击「确定」之前再考虑一下你的选择。在这种情况下，如果网页违反了这个规范并在你点击一个选项后立刻把你带到了下一页，你会感到惊讶和茫然。更糟糕的是，你在这个网站填写其他表格时也会更加的畏缩。

勾选框和单选按钮最大的可用性问题来源于模糊、有歧义的选项表述，有的表述甚至让普通用户无法理解。提供情境性帮助可以减轻第二个问题，但对于任何重要的交互设置，最好还是进行用户测试来检测其效果。幸运的是，勾选框和单选按钮用纸质原型都可以进行测试，因此你不需要进行任何编程上的实现就可以检测用户是否可以理解选项描述并正确使用这些元素。

专业的交互设计师不会在需要使用单选按钮时使用勾选框。这两种元素的区分是所有交互设计课程里都会讲的第一课的内容。因此，以下是正确地使用这两个元素的最后一个理由：如果你不能正确使用，你就会显得非常业余。

附录

原文地址：https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/

版权声明
本文版权属尼尔森诺曼集团（Nielsen Norman Group）所有。欢迎转发至朋友圈，如需转载，请邮件Support@nngroup.com。未经授权的转载、翻译是侵权行为，版权方将保留追究法律责任的权利。