编辑导读：很多业务系统之中都会有以列表的形式展现数据的情况，那么问题来了，在本文的讲解中中，我们将研究选择器及其区别。今天就来叨一叨如何实现复选框的多选、全选和反选，以便于进行比较-同时还将它们与其他几个组件进行比较。

目录

一、什么是选择器

二、复选框和单选按钮的剖析

三、单选按钮和复选框之间有什么区别

四、选择器的常见样式

五、状态

六、标签文字规则

七、什么时候应该使用它们

八、辅助功能清单

一、什么是选择器

选择器是用户必须选择一个（或多个）选项的输入字段，与文本字段中用户可以自由控制的输入字段不同。选择器具有各种不同的形状和形式。下拉菜单，复选框，切换按钮，滑块等都是不同类型的选择器，但它们看起来彼此并不相似。这些类型的选择器之间的主要功能差异是用户可以选择的选项数量：一个或多个。

复选框- 当有一个或多个独立选项且用户可以选择任何数量的选项时使用，包括一个或多个。

单选按钮-当存在两个或两个以上互斥的选项列表且用户必须仅选择其中一个时使用。

二、剖析复选框和单选按钮

接下来我将重点介绍单选按钮和复选框。下面是他们的解剖。

三、单选按钮和复选框之间有什么区别

单选按钮和复选框非常相似，除了一些关键区别。主要区别在于，使用单选按钮只能选择一项，而使用复选框可以选择任何数字。

1：在标准复选框组件中，允许您选择几项（除非另有说明）？

A. 1个

B. 3个

C. 无限

D. 0个

2：单选按钮选择器的形状是什么？

A. 广场

B. 圈

C. 六边形

D. 三角形

3：如果要创建一个用户可以在其中选择多个浇头以放置冰淇淋的UI，则可以使用：

A. 单选按钮

B. 选框

4：如果要创建一个用户可以在其中选择想要开设的银行帐户类型的UI，可以使用：

A. 单选按钮

B. 选框

5：如果您想创建“订阅我们的电子邮件发送者”选择器，您将使用哪种选择器类型？

A. 单选按钮

B. 复选框

6：在下图中，哪个是单选按钮？

A. 一种

B. 乙

四、选择器的常见样式

这些是您在通过Internet进行实地考察时会遇到的复选框和单选按钮的一些常见样式。

标准样式（单选按钮/复选框）

复选框和单选按钮的最标准样式使用带有“复选标记”或实心圆圈的按钮。

测验按钮样式（单选按钮/复选框）

当用户在测验中回答问题时，我们必须确保两件事：1）他们可以清楚地看到他们选择的答案，2）当他们对自己的答案获得反馈时不会感到困惑。

如果您看下面的示例，您会发现“复选标记”可能会引起混淆-看起来这些答案是正确的，即使尚未对其评分。

插图

测验选择器显示带有复选标记会导致电子学习混乱

基本图像样式（单选按钮/复选框）

尽管这种选择器样式可以使用户更好地了解他们所选择的内容，但我很少使用它们，因为无论如何图像总是太小而看不清。

插图

单选按钮和带有图像的复选框。

网格样式的图像（单选/多选）

与基本图像样式相比，我更喜欢这种样式，因为您可以使图像更大，而且看起来也更好。

插图

多级复选框

如果需要将项目分成几组，则需要多级复选框。另外，请注意，如果仅选择了几个子项，则仅部分选择了父类别。

插图

多级复选框

一个解决此较为复杂的UI元素的是，最上面的项目（父）既充当选择器和手风琴。因此，如果您单击标签，它是选择选择器还是打开/关闭手风琴？我找不到关于哪种方法最好的确定性研究，因为这是一个不寻常的模式，但是在过去，我已经将标签设为手风琴的一部分，而不是选择器。让我知道您是否对如何处理此难题有任何建议。

强制选择

有时您只希望允许用户选择一定数量的项目。要强制执行此操作，如果用户单击的次数多于所选次数，则他们最早的选择将被取消选择，而最近的选择将被更新。

插图

带有强制选择的复选框

按钮样式（单选/多选）

这种样式使您可以将很多不同的项目彼此堆叠，这意味着您可以节省空间并有更多选择。因为这种模式并不常见，所以建议您让用户知道他们可以选择多少个选项。尽管没有理由不对单个选择器使用它，但我从未在野外看到它。

插图

按钮样式选择器

当要求用户选择多个内容标签时，这种样式非常普遍（尽管他们可能不知道）。在下面的示例中，Apple Music要求用户选择自己喜欢的流派，这将根据用户的选择推荐歌曲和歌手。

插图

切换（单选）

切换开关最常用于设置，并允许用户在是/否选项之间进行选择。

在移动设备上，切换开关本身通常位于最右侧，而标签位于最左侧。这是为了使右手拇指更容易更改选项。

插图

五、状态

复选框和单选按钮必须更改其状态/外观，以便用户知道已被选中。我们需要添加这些小的视觉提示，以使用他们已经知道和理解的模式将用户向正确的方向移动。

默认/有效

这是选择器的开始状态。此状态向用户指示他们可以单击问题中的项目。

插图

单选按钮和复选框处于默认/活动状态的示例

不活跃

设置为非活动状态后，用户将无法与选项进行交互。除非产品规则指定，否则很少有用户会遇到此状态。

插图

徘徊

像按钮一样，选择器应向用户指示它们是交互式的或可单击的。通常，这是通过突出显示悬停项目的背景来完成的。它还指示可单击项目的哪个区域。如果将鼠标悬停在它上面，它应该恢复为原始状态。

插图

不要成为提示：触摸设备没有悬停状态。

重点/突出显示

焦点或突出显示状态通常在可点击项周围以蓝色光晕表示。您可以通过在界面上切换来自己查看-视力不佳或运动技能较弱的人也会这样做。用户很少会遇到这种状态，除非在用户单击“输入”以选择一个项目之前。

插图

按下

这是用户按住鼠标/手指，并且该项目向用户指示其正在被单击的状态。

插图

已选

用户单击项目后，UI应告知他们。如前所述，根据业务规则，单选按钮只能选择一个项目，而复选框可以选择多个。

插图

单选按钮和复选框处于选定状态的示例

失败反馈

使用自由文本输入时，用户可以打错字等。但是，由于选择器中的选项是预先确定的，因此应该只有一种类型的失败反馈：“不完整”类型，用户只会如果他们在填写表单之前单击“提交”按钮，则会收到。对于复选框，仅当问题迫使他们选择一项或多项时，才需要这样做。

插图

六、标签文字规则

选择器标签只有一条硬性规定：一致。

1. 确保每个选择器标签上的大小写都相同（句子大小写，标题大小写等）
2. 确保所有项目都在一段时间内结束。
3. 尝试确保所有项目都是句子，短语或单词。尽量避免某些选择是句子，而另一些则是单个单词。使用组合使得很难决定要使用哪种情况和标点符号。

插图

七、什么时候应该使用它们

什么时候应该使用单选按钮或复选框？这完全取决于您要问什么问题。如果希望用户选择多个选项，请使用复选框。如果希望用户仅选择一个选项，请使用单选按钮（或另一种选择）。

何时使用单选按钮

对于何时使用或何时不使用单选按钮，我有四个规则。他们是：

1.当您只希望用户选择一项时，

如果您希望用户选择一项以上，则应使用复选框。

2.如果您的选择少于六个

根据您的设计规则，如果要选择五项或六项以上，则可以使用下拉菜单。是的，是的，我知道它们很笨重，但是它们在您的设计中节省了大量空间。

插图

3.您想强制选择一个。

当您选择单选按钮列表中的一个项目时，您不能取消选择它。您可以选择其他内容并更改选择，但是一旦选择了答案，便无法取消答案。

4.如果问题只有两个选项，则是/否。

如果您的问题是“您想接收通知吗？”，“播放背景音乐？”。等，然后使用切换键。它们占用的空间少得多，更清洁，并且-因为它们是较新的选择器类型-因此具有时髦的额外好处。

插图

单选按钮和切换按钮的比较

5.如果您希望用户单击“保存”以实现该选项，则

如果您位于设置页面中，或者要允许用户在单击该菜单之前对他们的选项感到厌烦并犯错绿色的大保存按钮-宁可使用单选按钮（或复选框）。但是，如果您想立即进行设置（打开/关闭wi-fi），则可以使用切换键。

6.如果选项的标签较短，请考虑使用多项选择开关。

您很少会在野外看到这种可爱的东西，但这样做时会很高兴。多选切换器将最好的单选按钮合并在一起，切换为这个小家伙。紧凑，整洁且用户友好。

插图

何时使用复选框

关于何时使用复选框，我有两个规则，它们是：

1.当您希望用户能够选择多个选项或根本不选择任何选项时

如果您希望用户能够向其披萨添加多个浇头，则这是您的选择器。用户可以选择全部，部分或不选择任何复选框。

2.单项

后续流行测验：为什么“我已阅读条款和条件”始终是一个复选框，而不是一个单选按钮？将它选为单选按钮肯定很有意义，因为它对“是/否”类型的问题比较好？

插图

答：因为您可以取消选择它。与仅具有一项的单选按钮不同，您不能在其中取消选择它。如果单击它，将为您带来麻烦：现在永远选中它。

八、辅助功能清单

你完成了！您已经完成选择器的设计，是时候将其交付给开发团队了。可是等等！您是否检查过它们首先可以访问？

1. 您的选择器是否符合WCAG AAA色彩对比标准？有些设计师改用AA标准，但我对此非常偏执。
2. 您的触摸屏的选项/项目是否大于44px？（不同的报告使用36像素。）
3. 每个选项/项目之间的距离是否超过8px？
4. 标签/问题始终可见吗？