选择控件的设计
Jun 15, 2024
“toggle” 一词指的是带有短手柄的开关，每次激活时，该开关都会在两种状态之间交替。
至于“Radio Buttons”，这个词来自汽车收音机，通常做法是在表盘下方有一组按钮，可以机械地存储电台预设，因此用户可以更快地在电台之间切换。按下其中一个按钮将导致它保持下降状态，直到按下另一个按钮。
复选框(Checkbox) — 当有一个或多个独立选项并且用户可以选择任意数量的选项时，包括无、一个或多个选项，则使用复选框。
单选框(Radio) — 当存在两个或多个互斥的选项列表并且用户只能选择其中一个时使用。
开关(Toggle-Switch) — 当 是两个互斥的选项并且始终具有默认值时使用。切换选择将立即生效。
选择按钮(Choice chips) - 是单选按钮的紧凑型替代品。选择条状标签至少包含两个选项，表示用户可以进行的单个选择。
多选标签按钮(Multi-select chips) — 是复选框的紧凑替代品。允许用户选择多个选项，主要用于移动设备上的筛选
选择控件在用户界面中已经使用了很长时间，这是一个简单的备忘单，您可以按照它为正确的情况选择正确的类型。
状态(States)
复选框和单选框可以选择或取消选择，开关可以是关闭或打开。它们都具有 启用enabled、禁用disabled、悬停hovered、获焦focused 和 按下pressed 状态。看起来很多，但创建所有这些状态以实现可靠的交互。
不确定状态(indeterminate state)
表示既未选中也未选中的复选框。状态尚未完全确定，因此名称 - 不确定。创建用于处理父复选框具有多个子项（其中一些子项已选中，而另一些子项未选中）的情况。
不要乱用开关
不要使用开关创建分层结构。这在视觉上更分散注意力，并且可能会给人一种所有子选项都是 On/Off 的错误印象。
使用开关选择将立即生效
由切换开关触发的任何效果都应立即生效。如果不是这种情况，最好将拨动开关替换为单个复选框。
非正统的样式可能会使用户感到困惑
任何设计平台标准的偏差都会给用户增加额外的认知负担。经常看到容易与单选按钮混淆的圆形复选框。
在垂直列表中显示选项
左对齐的控件和标签在彼此紧密的位置时效果最佳。这支持最快的完成时间和更少的错误。右对齐的控件在移动设备上有一些好处，因为标签和按钮不能相距太远。将按钮靠近右边缘，以便在单手握住设备时更容易触及。此外，在选择过程中，我们不会用手指遮挡标签。
如果空间不足，请考虑标签按钮
应该防止出现确实很难看到哪个控件被选中的情况（确保将按钮和标签隔开）。考虑使用筹码在视觉上清楚地区分选项
如果可能，请使用单选按钮而不是下拉菜单
使所有选项永久可见，以便用户可以轻松比较它们，从而减少认知负荷并帮助表单更加透明。
多个类似选项请使用下拉列表
如果选项的数量超过 6-7 个，您应该考虑将它们放在下拉列表中，因为用户无论如何都无法记住所有选项。这同样适用于可预测的、相似的或增量的选项，例如 （zoom — 10%， 20%， 30% ..）。
默认情况下，最好有一个选定的单选按钮
一旦选择了单选按钮，用户就无法取消选择并将单选按钮设置回其原始状态。如果用户可能需要避免进行选择，则应提供标记为“无”的单选按钮。
突出显示所选选项以吸引用户的注意力
在视觉上将所选选项与其他选项区分开来，这对于数据表中的行选择尤其重要。
支持批量选择和清除
对用户来说一次选择或清除多个项目应该毫不费力
使可点击区域足够大，以实现可靠的交互
在宽大的可点击/可点击区域中包含按钮和标签。根据菲茨定律，目标的大小起着重要作用。复选框和单选按钮通常很小，很难点击或点击，尤其是在移动设备上。
