# Radio button VS Checkbox

在1984年的macintosh(apple macOS 早期)系统中的定义,后来的规范也都包含了同样的定义。
radio buttons 应用于两个或者更多选项,并且这些新选项是互斥的,用户必须选择其中一个。选择其中一项后,之前选择的其他项目会被取消选择。
check boxes 应用于多选,包括 不选、选一个或多个。每个项目是独立的,所以不会像radio button,选中一个,会取消其他的选择。
单独的一个checkbox 用作一个独立选项,用户可以选择打开或者关闭,相当于手机上的switch。

# 附加指南

# 使用标准视觉呈现

checkbox 应该是个小方块,在选中状态时有一个 或者 标记。

radio button 应该是一个小圆圈,选中状态时有一个实心圆形在里面。

# 选择组呈现

# 尽量使用水平布局

使用横向布局间距处理不好很容易导致radio btn , checkbox 与文字label的不对应。

# 使用肯定说法

假如使用 “不要再给我发邮件” 其实意思是用户做了选择,然后不让某件事发生。

  • 写标签的准则应该是,选择了就会发生什么,不选择就不会发生什么。

  • 如果要使用不做某事,可以使用radio btn,一个选项打开某个功能,一个选项表示关闭某个功能, 在标签上描述清楚两个选择。

# 如果可能,尽量使用radio button,而不是下拉菜单

radio button 有低认知负载特性,因为它的选项都是可见的,方便用户对比多个选择。在操作上也更便捷。如果可以的话,尽量使用radio button,保持选项可见。

# 始终为radio button 设置默认选择

通常需要为radio button设置默认选择项目,相反checkbox 一般不需要设置默认选择项目。 如果用户需要避免选择选项,那么需要提供一个类似“无”的选项。提供一个中性的选择选项比不选择要好。 且不违背上面所说的,始终为radio button 设置默认选择项

# 因为单选按钮只需要一个选择, 所以请确保选项既全面又清晰

比如一个老年用户测试例子,人们没办法完成这个表单,因为工作类型里面没有“退休”这一项。如果不能提供全面的表单,可以提供一个“其他” 以供选择,或者辅以文字输入框。

# 使 按钮/选择框 本身及文字标签都可以执行操作

根据菲兹定律,一个更大的目标更容易被点击。

# 只使用checkbox radio button 更改设置,不使用它们触发某些动作。此外这些动作不应该直接生效,直到用户通过一个action按钮来触发

  • 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).
  • 如果用户先单击后退然后向前, 则最适合将此序列解释为撤消重做对, 这意味着控件的外观应显示用户的更改, 就像用户从未单击过 "后退" 一样。在用户单击 "OK" 或等效命令之前, 这些更改仍不应在后端生效。
最后更新: December 18 2021 23:27

——《论语》