https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/
Checkboxes
vs.
Radio Buttons
复选框与单选按钮
Summary: User interface guidelines for when to use a checkbox control and when to use a radio button control. Twelve usability issues for checkboxes and radio buttons.摘要：关于“何时使用复选框控件”和“何时使用单选按钮控件”的用户界面指南。复选框和单选按钮的12个可用性问题。
By Jakob Nielsen on September 26, 2004雅各布·尼尔森 2004年9月26日
Topics: Application Design, Web Usability, Interaction Design相关话题：应用程序设计，Web可用性，交互设计
I recently encountered the following box on a major website's registration page. It contains at least two design mistakes. See if you can find them before reading further.我最近在某主流网站的注册页面遇到了下面的窗框设计，它至少包含两个设计错误。在进一步阅读之前，看看你能否找到这些错误。
Mistake #1 is the primary focus of this article: The erroneous use of checkboxes where radio buttons should be. Because the two choices above are mutually exclusive, the page should present users with radio buttons, which restrict them to selecting exactly one option.
第一个错误（本文的关注要点）：本应使用单选按钮，却错误的使用了复选框。因为上面的两个“选中”互不相容，网页应该提供用户单选按钮，从而限制用户只能选择其中的一个选项。
Mistake #2 is to present two questions in the first place, and then to put them in a big, verbose box. A single, shorter question would be far better here: "Yes, send me information about other featured products, solutions, services, and educational opportunities."第二个错误：搞了两个问题，扔进庞大冗长的窗框。如果换成独立的简短问题会更好，比如“是的，发给我其他特色产品、解决方案、服务、教育机会的信息”。
Ironically, with a single question, using a checkbox would have been correct because the user would be answering yes or no. The recommendation from user testing of ecommerce sites is to leave the checkbox blank by default, so users must actively click it to opt in for further messages.讽刺的是，“一个带有复选框的独立问题”应该是正确的设计，因为用户可以轻松地回答“是”或“否”。根据电商网站的用户测试，建议让复选框默认为空，这样用户必须主动点击才能订阅更多消息。
When to Use Which Widgets
何时使用哪种部件？
Ever since the first edition of Inside Macintosh in 1984, the rule has been the same for when to use checkboxes versus radio buttons. All subsequent GUI standards and the official W3C Web standards have included the same definition of these two controls:自从1984年第一版《Inside Macintosh》发布以来，何时使用复选框而不用单选按钮，相关规则一脉相承，所有后续的GUI标准和W3C Web标准都包含了这两个控件的相同定义：
1. Radio buttons are used when there is a list of two or more options that are mutually exclusive and the user must select exactly one choice. In other words, clicking a non-selected radio button will deselect whatever other button was previously selected in the list.第一，当列表中有两个或多个不相容的选项且用户必须选择一个时，使用单选按钮。换而言之，单击未选中的单选按钮将取消选择列表中曾经选中的任何其他按钮。
2. Checkboxes are used when there are lists of options and the user may select any number of choices, including zero, one, or several. In other words, each checkbox is independent of all other checkboxes in the list, so checking one box doesn't uncheck the others.第二，当有选项列表并且用户可以选择任意数量的选项时，使用复选框，包括零个、一个或多个。换句话说，每个复选框都独立于列表中的所有其他复选框，因此选中一个复选框不会取消选中其他复选框。
3. A stand-alone checkbox is used for a single option that the user can turn on or off.第三，独立复选框用于用户可以打开或关闭的单个选项。
Sounds simple enough, right?
听起来很简单，对吧？
Yet I frequently encounter web pages that use radio buttons and checkboxes wrong. Even after twenty years, it's worth stating these guidelines once again.然而，我经常遇到错误使用单选按钮和复选框的网页。即使在二十年后，仍然值得再次阐述这些指导原则。
Additional Guidelines
附加指南
4. Use standard visual representations. A checkbox should be a small square that has a checkmark or an X when selected. A radio button should be a small circle that has a solid circle inside it when selected.第四，使用标准视觉传达。复选框应该是一个小正方形，选中时带有选中标记或X。单选按钮应该是一个小圆圈，当选中时，里面有一个实心圆圈。
5.Visually present groups of choices as groups, and clearly separate them from other groups on the same page. The boxed example above violates this guideline because the layout makes the two checkboxes appear to be addressing separate topics when they're actually alternative options for a single topic.第五，视觉上把选项进行分组，在同一个页面上清晰地区分其他选项组。上例中的窗框设计违反了这个原则，原本是单个选择任务的两个候选项，变成了看起来毫不相关的两个选择任务。
Use subheads to break up a long list of checkboxes into logical groups. This makes the choices faster to scan and easier to understand. The risk is that users might view each subgroup as a separate set of options, but this is not necessarily fatal for checkboxes — each box is an independent choice anyway. A list of radio buttons, however, must always appear unified, so you cannot use subheads to break it up.使用小标题将一长串复选框分隔为逻辑分组，这会让用户轻松扫视、易于理解并更快做出选择。这样做的风险是用户可能会把每个分组看成独立的选项集合，但是这对复选框来说并非致命，因为每个复选框都是独立的选择任务。然而，一串单选按钮，它们的外观必须保持一体，不能用小标题进行分隔。
6.Lay out your lists vertically, with one choice per line. If you must use a horizontal layout with multiple options per line, make sure to space the buttons and labels so that it's abundantly clear which choice goes with which label. In the following list, for example, it's difficult to see the correct radio button to click for option four.第六，每行一个选项，垂直排列。如果你必须使用每行多个选项的水平布局，必须确保选项之间的足够的留白，以确保勾选操作与选项对应。例如，在下图的排列中，很难辨认选项“four”对应的单选按钮。
7.Use positive and active wording for checkbox labels, so that it's clear what will happen if the user turns on the checkbox. In other words, avoid negations such as "Don't send me more email," which would mean that the user would have to check the box in order for something not to happen.
第七，复选框搭配积极肯定的语气，清晰传达“勾选”操作的意义。换言之，避免类似“不要再给我发邮件”等消极否定的语气，为了“不发生某事”而进行“勾选”操作。
Write checkbox labels so that users know both what will happen if they check a particular box, and what will happen if they leave it unchecked.复选框的文案要向用户兼顾传达两件事：“勾选”将会发生什么；“未勾选”将会发生什么。
If you can't do this, it might be better to use two radio buttons — one for having the feature on, and one for having it off — and write clear labels for each of the two cases.如果无法兼顾传达（“勾选”与“未勾选”），最好使用两个单选按钮，一个用于打开，一个用于关闭，并用清晰准确的文案说明两种情况。
8.If possible, use radio buttons rather than drop-down menus. Radio buttons have lower cognitive load because they make all options permanently visible so that users can easily compare them. Radio buttons are also easier to operate for users who have difficulty making precise mouse movements. (Limited space might sometimes force you to violate this guideline, but do try to keep choices visible whenever possible.)第八，尽量使用单选按钮，而不是下拉菜单。单选按钮的选项一目了然，易于识别，认识负荷较低；对于难以精确控制鼠标的用户来说，单选按钮更易于操作。（有限的界面空间往往会逼迫你违反这个原则，但是也尽可能保持选项可见。）
9.Always offer a default selection for radio button lists. By definition, radio buttons always have exactly one option selected, and you therefore shouldn't display them without a default selection. (Checkboxes, in contrast, often default to having none of the options selected.)第九，保持单选按钮有默认选项。根据定义，单选按钮“始终保持一个选项被选中”，所以你不应该在没有默认选项的情况下显示单选按钮。（反之，复选框通常没有默认选项。）
If users might need to refrain from making a selection, you should provide a radio button for this choice, such as one labeled "None." Offering users an explicit, neutral option to click is better than requiring the implicit act of not selecting from the list, especially because doing the latter violates the rule of always having exactly one option chosen.如果用户可能需要避免选择，你应为单选按钮提供一个类似“无/没有”的选项。为用户提供一个明确、中立的的选项比“选填”更友好，因为“选填的单选按钮”破坏了“始终保持一个选项被选中”的法则。
10.Because radio buttons require exactly one choice, make sure that the options are both comprehensive and clearly distinct. In tests with older users, for example, people couldn't complete a form that required them to select their job because it didn't offer "retired" as an option. If it's impossible to be comprehensive, offer a button labeled "Other," supplemented by a type-in field.第十，因为单选按钮总是选中一个选项，务必让选项保持“全面且分明”。例如，对老年用户的测试中，人们无法完成填写职业的表单项，因为界面没有“退休”的选项。如果无法面面俱到，就提供一个“其他”的选项，并在输入框中进行补充。
11.Let users select an option by clicking on either the button/box itself or its label: a bigger target is faster to click according to Fitts's Law. In HTML forms, you can easily achieve this by coding each label with <label> elements, as I've done for the example with horizontal radio buttons above (to select that option, click on the word "Four"). In testing web-based applications in Flash, we found that user errors are further reduced by generous click zones that extend a few pixels beyond the visibly clickable area. (This effect can be hard to achieve in HTML, though some CSS hacks might do the trick.)第十一，允许用户点击按钮/框或文字都能进行选择（整体热区）：根据费茨法则，目标越大，点击用时越短。在网页表单中，你可以使用 <Label> 标记编写代码，轻松实现整体热区，比如刚才水平排列单选按钮的例子（直接点击文本“four”即可选中该项）。测试网页中的Flash应用时，我们发现：在可视区范围之外，扩大少许像素的宽绰热区能进一步减少用户误操作（虽然某些CSS hacks能奏效，但是类似效果在HTML中依然很难实现）。
12.Use checkboxes and radio buttons only to change settings, not as action buttons that make something happen. Also, the changed settings should not take effect until the user clicks the command button (labeled "OK" for example, or "Proceed to XXX" where "XXX" is the next step in a process).第十二，复选框和单选按钮只能用来更改设置，而不能作为行动按钮（直接使设置生效）。此外，对设置的修改不应该生效，直到用户点击行动按钮（例如“确定”，或“继续XXX”去往流程的下一步骤）。
If the user clicks the Back button, any changes made to checkboxes or radio buttons on the page should be discarded and the original settings reinstated. The same guideline obviously holds if the user clicks a Cancel button (though navigational web pages don't need a cancel option because the Back button serves the same purpose).如果用户点击后退按钮，则应放弃对页面上复选框或单选按钮所做的任何更改，并恢复原始设置。显而易见。这个规则也适用于点击“取消”按钮的情况（导航有序的网页不需要“取消”，因为“后退”按钮可以实现相同目的）。
If the user first clicks Back and then Forward, then it's most appropriate to interpret this sequence as an Undo-Redo pair, meaning that the appearance of the controls should show the user's changes as if the user had never clicked Back. These changes should still not take effect on the backend until the user clicks "OK" or an equivalent command.如果用户先点击“后退”按钮，然后再点击“前进”按钮，最好把这种操作序列理解为“撤消-重做”，这意味着控件应该恢复（后退之前）用户进行更改，就像用户从未点击过“后退”按钮一样。
Why These Guidelines Matter为什么这些准则如此重要
Am I just being picky when I insist on the correct use of checkboxes and radio buttons? No. There are good usability reasons to follow GUI standards and use the controls correctly.坚持正确使用复选框和单选按钮，是不是有点吹毛求疵？错，遵循GUI标准和正确使用控件是保证良好可用性的（重要）因素。
Most important, following design standards enhances users' ability to predict what a control will do and how they'll operate it. When they see a list of checkboxes, users know that they can select multiple options. When they see a list of radio buttons, they know that they can only select one. (Of course, not every user knows this, but many do, especially since this has been a design standard since 1984.)最重要的是，遵循设计标准增强了用户对“控件如何操作，何种反馈”的预判能力。当用户看到复选框组成的列表时，他们知道选择多个选项；当用户看到单选按钮组成的列表时，他们知道只能选择一个。（从1984年以来这种设计成为业界标准，绝大部分用户都知道，当然总有一部分人不知道。）
Because many people know how to operate standard GUI widgets, employing these design elements correctly enhances users' sense of mastery over technology. Conversely, violating the standards makes the user interface feel brittle — as if anything can happen without warning. Say, for example, that you assume you can click on a radio button without any immediate impact, and can thus consider your choices after making a selection but before hitting "OK." In such a case, it's jarring when a website violates this standard and unexpectedly moves you to the next page once you enter a selection. Worse, it makes you fear what may happen as you work with forms elsewhere on the site.
因为绝大部分用户知道如何操作标准GUI组件，所以正确使用这些设计元素会增强用户对技术的掌握感。相反，违反这些标准会让界面变得脆弱，仿佛毫无征兆地发生任何事情。例如，你以为“点击一个单选按钮，并不会立即生效”，于是可以在点击“OK”按钮之前权衡利弊。在这种认知之下，当一个网站违反了设计标准，在你选择了某个选项就突然跳转到下一页，这会非常令人抓狂。更糟糕的是，它会让你担心在使用这个网站的其他表单时，也会发生类似的情况。
The biggest usability problems for checkboxes and radio buttons come from labels that are vague, misleading, or describe options that are impossible for average users to understand. Contextual help can alleviate the latter problem, but it's still best to user test any important set of interaction controls. Luckily, checkboxes and radio buttons are easy to test using paper prototyping, so you don't need to implement anything to see if users understand the labels and can use the widgets correctly.复选框和单选按钮的最大可用性问题，来自模棱两可、误导、不知所云的选项描述；上下文帮助可以缓解“不知所云”的问题，但最好还是对重要组件进行用户测试；幸运的是，复选框和单选按钮非常易于进行纸面原型测试，因此你不需要任何（开发）实现就能看看：用户是否能理解这些选项并正确使用这些组件。
No professional interaction designer would make the mistake of using checkboxes when radio buttons are called for. The distinction between these two controls is one of the first things taught in any interaction design class. So here's a final reason to use the right widget: if you don't, you'll be taken for an amateur.专业的交互设计师都不会“在该使用单选按钮的场合”错误的使用复选框，区别这两个控件是任何交互设计课程的基础内容之一。所以正确使用它们的终极理由：如果你滥用，那就是外行。
（全文完）
生肉在此，熟肉还远吗？