编辑指南:开关不仅是生活中必不可少的组成部分，在产品设计中也起着非常重要的作用。本文作者根据自己的工作经验，对选择控制进行了分析，希望对你有所帮助。

“toggle”这个词指的是一个短手柄的开关，它每次启动都会在两种状态之间切换，每次& # 8220；开关& # 8220；当你点燃你的汽车时，你总是使用它。

至于“单选按钮”(Radio Buttons)这个词，来源于汽车收音机，通常的做法是在仪表板下有一组按钮，可以机械地存储收音机预设，这样用户可以更快地在电台之间切换。按下其中一个按钮会一直按下去，直到按下另一个按钮。

首先，选择类控件的类型

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

单选按钮-当有两个或多个互斥选项时，用户只能选择其中一个。

切换开关-当有两个互斥选项并且总是有默认值时使用。拨动开关将立即生效。

选择芯片-单选按钮的替代品。它至少包含两个选项，选择标签代表用户可以做出的单个选择。

多选标签-复选框的替代。允许用户选择多个选项，主要用于移动端过滤。

选择类型控件已经在用户界面中使用了很长时间，所以我们对它们的行为有很高的期望。下面是一个简单的备忘单，根据这个备忘单，你可以为合适的情况选择合适的类型。

如何知道什么时候使用什么类型的控件？

上图灵感来自尼尔森诺曼集团的文章《复选框vs单选按钮》(注:不能理解上图的同学可以看下图)。

其次，选择类控件的状态

可以选择或取消选择复选框和单选按钮，也可以关闭或打开开关。所有这些都有启用、禁用、悬停、对焦和按下状态。我知道这看起来很多，但是为可靠的交互创建所有这些状态是很好的。

选择类控件的状态

第三，不要忘记为“不确定”设计不同的状态

“不确定”显示既未选中也未取消选中的复选框的状态。这种状态不是完全确定的，所以被命名为“不确定”。可以理解，当一个父复选框有多个子复选框时，有些子复选框被选中，而有些子复选框没有被选中。

“不确定”的不同状态

四、禁止滥用开关

不要为切换开关创建层次结构。这在视觉上更容易分散注意力，并且会给人一种所有子选项都是开/关的错误印象。

实用提示:不要滥用开关按钮。

5.当选择生效时，请使用开关

转换开关是一种数字开关。由转换开关触发的任何效果应立即生效。如果不是这样，最好用单个复选框替换转换开关。

实用提示:选择即将生效时，请使用开关。

第六，不符合当前设计标准的风格会使用户困惑

任何偏离你设计的平台标准的行为都会给用户带来额外的认知负担。我经常看到圆形复选框很容易与单选按钮混淆。

实用技巧:不符合当前标准的设计会混淆用户的感知。

7.在垂直列表中显示选项有助于用户轻松浏览

左对齐控件和标签的效果最好，因为它们彼此位置紧密，这将尽可能快地支持完成时间并减少错误。

但是，右对齐控件在移动端有一些优势，因为标签和按钮不能相距太远，所以按钮靠近右边，这样单手握住设备时更容易够到。同时我们在选择的时候也不会用手指去挡标签。

实用提示:左对齐控件和标签效果最好。

八、如果垂直空之间有问题，考虑标签

您应该防止难以看到要选择哪个控件的情况(确保按钮和文本标签之间的距离)，并考虑使用选择标签在视觉上清晰地分隔选项。

实用提示:当垂直空之间出现问题时，可以考虑使用选择标签。

9.如果可以，请使用单选按钮而不是下拉菜单

让所有选项可见，让用户可以轻松比较，可以减少认知负荷，帮助表单更加透明。

实用提示:如果只有几个选项，使用单选按钮。

X.使用下拉菜单获得许多或类似的选项

如果选项的数量超过6-7个，你应该考虑把它们放在下拉列表中，因为用户无论如何也记不住所有的选项。这也适用于可预测的、类似的或增量的选项，例如(缩放-10%、20%、30%)。

实用技巧:大量类似选项选择与下拉菜单集成。

十一、默认情况下最好有一个选中的单选按钮

一旦选择了单选按钮，用户可能无法取消选择或将其设置回原始状态。如果用户不想做选择，你应该提供一个标有& # 8220；没有& # 8220；的单选按钮。按照逻辑顺序设计选项列表，并利用“默认”功能。

实用提示:在大多数情况下，单选按钮是默认选择的。

12.写清晰的文字标签，避免负面的文字

避免用户需要检查以避免事情发生的情况。

实用技巧:写清楚文字标签，避免负面文字。

十三.突出显示所选选项以吸引用户的注意

从视觉上区分所选选项和其他选项，这对于数据表中的行选择尤其重要。

实用提示:突出所选选项，吸引用户注意力。

十四.支持批量选择和清除

对用户来说，一次选择或清除多个项目应该很容易。

实用提示:它旨在支持批量选择和清除多个选项列表。

十五.使可点击区域足够大，以实现可靠的交互

热区中的可点击/可点击区域应包含按钮和标签。根据菲茨定律，目标的大小起着重要的作用。复选框和单选按钮通常很小，所以点击或点击它们很麻烦，尤其是在移动设备上。

实用提示:使控件的可点击区域足够大，以便进行可靠的交互