翻译 | 复选框与单选按钮

原文：Checkboxes vs. Radio Buttons

作者：Jakob Nielsen (2004-09-27)

阅读时间：8m56s

摘要：何时使用复选框控件与何时使用单选按钮控件的用户界面设计指南。关于复选框与单选按钮的 12 个可用性问题。

我最近在一个网站的注册页面中遇到了下面这个提示框。它包含了至少 2 个设计上的错误。在进一步阅读之前，试试你能否找出来吧。

来自一个网站的注册页面

• 错误一是本文的主要焦点：这里本应使用单选按钮，却错误地使用了复选框。因为上面的两个选择是互斥的，所以这个页面应该提供给用户的是单选按钮，以限制用户准确地选择某一个选项。

• 错误二是这里先提出了两个问题，然后把它们放在了一个又大又冗长的提示框里。在这里，只用一个简短的问题会好得多：「好的，向我发送关于其他特色产品、解决方案、服务和教育机会的信息。」

• 讽刺的是，对于单个问题来说，使用复选框是正确的，因为用户将回答「是」或「否」。来自电商网站用户测试报告的建议是，复选框默认不勾选，这样用户就不得不主动点击它去选择进一步的信息。
  

何时使用哪个控件

自 1984 年第一版《Inside Macintosh》问世以来，复选框和单选按钮的使用规则一直都是一样的。后续所有的 GUI 标准与 W3C 官方 Web 标准都包含了与之相同的、这两个控件的定义。

1. 当列表中有 2 个或多个互斥的选项，并且用户必须从中明确选择一个选项时，使用单选按钮。换而言之，单击未选中的单选按钮，将取消选中列表中先前已选中的其他任何按钮。

2. 当有一系列的选项，并且用户可选择任意个数的选项（包括 0 个，1 个或多个）时，使用复选框。换而言之，列表中每一个复选框都是与其他复选框相互独立的，因此选中一个复选框不会取消选中其他复选框。

3. 一个单独的复选框可用作用户可打开或关闭的单个选项。

听起来十分简单，对吧？

然而，我却经常遇到错误使用单选按钮和复选框的网页。即使已经过了 20 年，还是值得再次提出这些设计准则。

其他设计准则

4. 使用标准的视觉表现形式。复选框应该是一个小方框，选中时带有一个复选标记或一个 X。而单选按钮则应该是一个小圆圈，选中时，圆圈中有一个实心圆。

5. 以组的视觉形式呈现一组选项，并将它与同一页面上的其他组明显区分开。

• 上面的提示框案例就违反了这个原则，因为布局使两个复选框看起来像是单独的主题，而实际上它们是同一个主题的两个可选项。

• 使用子标题将一长串的复选框按逻辑分解成不同的组，可使这些选项便于快速扫描，易于理解。这样做的风险在于，用户可能会将每个子组视为一组单独的选项，但这对于复选框来说并不一定是致命的──因为无论如何，每个复选框都是独立的选择。
  而相反地，单选按钮列表则必须是统一的，你不能使用子标题来分解它。

6. 垂直排列你的列表，每一行仅放置一个选项。如果必须使用一行包含多个选项的水平布局，请确保把按钮和标签分隔开，以便清楚地知道哪个选项与哪个标签匹配。

例如，下面这个列表，就很难明白哪个按钮是与选项四匹配的。

一个水平布局的单选按钮列表

7. 复选框标签应使用正向、主动的措辞，以便明确当用户打开复选框时将会发生什么。换句话说，避免使用譬如「不要向我发送电子邮件」的否定语态，因为这将意味着用户必须勾选这个复选框，以阻止某件事情的发生。

• 使用清晰的复选框标签，以便用户了解勾选与不勾选这个复选框分别会发生什么。

• 如果你无法做到这一点，最好使用两个单选按钮──一个用于打开这个功能，一个用于关闭它──并且为这两者写上明确的标签。

8. 如果可能的话，使用单选按钮而不是下拉菜单。单选按钮具有较低的认知负荷，因为它使所有选项永久可见，以便用户可轻松地比较它们。对于那些难以进行精确的鼠标移动的用户，单选按钮也更容易操作。（有限的空间有时可能会迫使你违反这个准则，但请尽可能保持所有选项可见。）

9. 始终为单选按钮列表提供一个默认选择。根据定义，单选按钮总是有且仅有一个选项被选中，因此不应呈现没有默认选择的情况。（相反地，复选框则通常默认不选中任何选项。）

• 如果用户可能需要避免做出选择，那么您应该为这个选择提供一个单选按钮，例如一个标签为「无」的单选按钮。为用户提供一个明确的、中性的可点击选项，比要求不从列表中进行选择的隐性行为要好，特别是因为后者违反了总是只选择一个选项的规则。

10. 因为单选按钮总是只需要一个选项，所以要确保选项既全面又清晰。例如，在对年长用户的测试中，他们无法完成一个要求他们选择工作类型的表单，因为它没有提供一个「退休」的选项。如果无法做到全面，则需要提供一个标签为「其他」的选项，并辅以输入字段。

11. 让用户通过点击按钮 / 复选框本身或它的标签来选择一个选项：根据费茨定律，点击目标更大更易于点击。在 HTML 表单中，通过使用「Label」元素对每个标签进行编码，可轻松实现这一点，就像我在上面的水平单选按钮示例中所展示的那样（点击单词「Four」可选中该选项）。（小铁酱注：上面那个水平单选按钮的图片截自原文网页页面，原页面上是一个可交互的表单）。在对基于 Flash 的 Web 应用的测试中，我们发现，通过在可视点击区域以外增加一些像素来增大点击区域的话，可使用户的错误远远减少。（这种效果在 HTML 中很难实现，尽管一些 CSS 技巧可能会奏效。）

12. 复选框和单选按钮只用于改变设置，而不是作为动作按钮来使某些事件发生。此外，在用户单击命令按钮（比如标签为「确定」，或者「继续进行 XXX（XXX 为进程中的下一步）」）之前，这些更改的设置不会生效。

• 如果用户点击了「后退」按钮，则对页面上的复选框和单选按钮所做的任何更改都应被取消，并恢复原有的设置。如果用户点击了「取消」按钮，相同的准则也是成立的（虽然导航网页并不需要「取消」按钮，因为「后退」按钮的作用是相同的）。

• 如果用户点击了「后退」按钮后，又点击了「前进」按钮，那这种情况按「撤销 - 重做」的顺序来理解是最合适的，这意味着控件的外观应该呈现用户的更改，就像用户从未点击过「后退」一样。在用户点击「确定」或其他相同的命令之前，这些更改仍然不会对后端起作用。
  

为什么这些准则很重要

当我在坚持复选框和单选按钮的正确使用时，我是不是太挑剔了？不。遵循 GUI 标准和正确使用控件有着很重要的可用性原因。

最重要的是，遵循设计标准提高了用户预知控件的功能与操作方式的能力。当他们看到一个复选框列表时，他们知道可以选择多个选项。当他们看到一个单选按钮列表时，他们知道只能选择一个选项。（当然，不是每个用户都知道这一点，但大部分用户都知道，特别是自从 1984 年这成为一个设计标准以来。）

因为许多人都知道如何操作标准的 GUI 小部件，所以正确地使用这些元素可增强用户对技术的掌握感。相反地，违反这些标准则会使用户界面感觉很脆弱──就好像任何事情都可能在没有任何警告的情况下发生一样。比如说，你猜想你在点击一个单选按钮后是不会立即产生任何影响的，所以你可以在做了一个选择之后、但点击「确定」之前重新考虑你的选择。在这种情况下，如果一个网站违反了这个标准，并且在你输入一个选择之后，意外地使你进入下一个页面，那这将令人感到不快。更糟糕的是，这促使你对在网站上其他地方录入表单时可能会发生的情况产生担心。

复选框和单选按钮最大的可用性问题来自那些含糊不清、具有误导性或者描述了普通用户无法理解的选项的标签。上下文帮助可缓解后一个问题，但最好还是对任何一组重要的交互控件进行用户测试。幸运的是，复选框和单选按钮都很容易使用纸质原型来进行测试，所以你不需要实现任何东西就可以查看用户是否理解这些标签，并且可以正确使用这些小部件。

没有专业的交互设计师会犯在应该使用单选按钮时却使用复选框的错误。这两个控件之间的区别是任何交互设计课程中首先会教的东西之一。因此，还有正确使用小部件的最后一个理由：如果你不这样做，你将会被视为一个业余爱好者。

---

以上翻译包含个人理解，仅作为个人学习笔记使用。如有错误，求指正呀，非常感谢 ^^
感谢原文作者及所有分享想法与经验的人 ^^