ux-selection-controls

选择控件技能

此技能的行为方式（请先阅读）

这是一项生成式技能。默认的失败模式是选择错误的控件：3 个选项却使用下拉菜单，需要提交操作却使用切换开关，把单选按钮改成方形，以及在需要精确调节的场景使用滑块。控件由选择的结构决定（选项数量、可选数量、效果是立即生效还是延后生效），而非外观。此技能会把控件选择分为以下步骤：

1. 确定选择结构——这基本上决定了控件；样式问题放在后面考虑。
2. 应用始终适用的核心原则——使用惯常形状、交互式标签、清晰对齐和默认值。
3. 呈现取决于具体情境的决策（下拉菜单的替代方案、滑块变体、预设范围）及其权衡。

随后，将验证工作交给 ux-heuristics-audit、ux-accessibility-audit、ux-aesthetics-audit 和 ux-microcopy-audit。

---

步骤 0 — 确定选择结构

以下四个问题基本上决定了控件：

• 用户可以选择多少个选项？ 一个 → 单选按钮。多个（或零个）→ 复选框。恰好是开/关 → 切换开关或独立复选框。
• 选择是立即生效还是提交后生效？ 立即生效（设置、实时更新的筛选器）→ 切换开关 / 滑块。点击提交 / 确认后生效 → 复选框或单选按钮。
• 有多少个选项？ ≤5 个 → 全部显示（单选按钮 / 复选框——可见选项优于隐藏选项）。选项较多 → 带自动建议搜索的下拉菜单，或文本输入框。
• 取值是在刻度上选取某个点 / 范围吗？ 只需大致感知（音量、亮度、价格区间）→ 滑块。需要精确数值 → 文本输入框（或滑块 + 关联的输入框）。

还需确定平台——移动端会影响对齐方式（开关靠右、标签靠左）、触摸目标要求，以及选择器类型（出生日期等较远日期使用输入式日期选择器；一年以内的日期使用日历选择器）。

---

始终适用的核心原则（几乎适用于所有情况）

保持惯常形状——它们至关重要

• 方形 = 复选框，圆形 = 单选按钮，圆角矩形 = 开关。 可自由调整颜色、边框和阴影，但不要改变基本形状——用户会据此判断如何交互。
  • ❌ 为了“保持品牌一致性”而把复选框做成圆形 ✅ 方框内使用勾号；圆形只用于单选按钮
• 同一组中的控件尺寸应一致。 尺寸差异会微妙地影响用户的选择——引导必须保持透明，而非带有操纵性。
• 嵌套列表中的父级复选框应支持不确定状态：空框 = 未选，横线 = 部分选中，勾号 = 全部选中。子选项应缩进显示在父级下方，而不是全部铺平排列。

标签承担主要说明作用

• 标签可点击 / 轻触——点击或轻触整个标签与控件区域即可激活选项（桌面端显示指针光标，移动端提供舒适的触摸区域）。
• 以关键词开头，删去多余内容。 不要提问，也不要留下歧义。对于切换开关，标签应描述开关打开时会发生什么——将标签与“开 / 关”连起来读一遍进行测试：❌“您想接收通知吗？”✅“电子邮件通知”
• 标签字号约为 14px，比正文稍弱，但仍清晰易读；控件与标签之间的间距应足够紧凑，避免两者的对应关系产生歧义。

对齐方式应便于浏览

• 采用纵向单列、左对齐列表——更易浏览，也符合从左边缘开始扫描的习惯。只有在留有充足间距、确保标签与控件对应关系清晰时，才使用横向布局。
• 在从左到右的布局中，控件应放在标签之前：便于连续快速点击，并形成可预测的模式。
• **多行标签：**控件与文本第一行对齐；换行后的文本与上一行对齐（类似项目符号列表）。
• 小标题应与控件对齐，而非与标签文本对齐。
• **移动端开关：**开关右对齐，标签左对齐。

默认值和状态

• 必选单选组始终默认选中一项——避免出现“未选择任何选项”错误；默认值应基于现实中最常见的选择。
• **切换开关会立即生效，并且始终有默认值。**如果操作需要审核后再提交，就不是切换开关——应使用复选框。
• 单独的复选框用于单个主动选择项（条款、新闻简报）——对于同意类选项，切勿预先勾选（→ 属于暗黑模式范畴）。

滑块（适用于值是范围或手感的情况）

• **组成部分：**轨道、滑块按钮（触控目标要足够大——考虑运动障碍者和老年用户）、已填充部分、最小值/最大值标签（对于价格、时间等不直观的单位至关重要），以及手指不会遮挡的值显示。
• 更改会立即生效——无需“应用”按钮；这正是滑块的优势。
• 对于凭感觉调整的值（音量、亮度），使用连续滑块；只有离散值有效时，使用刻度 + 自动吸附；对于范围（价格筛选），使用双滑块按钮；当用户可能需要精确输入时，添加关联的文本输入框。
• 使用易于识别的滑块按钮样式，并确保相邻滑块之间有足够间距，以避免意外调整。
• **RTL 语言环境：**滑块从右向左移动。

---

取决于具体情境的决策（需呈现，不要自动应用）

决策	适用情况	避免／调整的情况	默认建议
下拉菜单还是显示选项	列表较长（国家/地区）——节省空间；添加自动建议，并将常用选项置顶	≤5 个选项（会隐藏选项并增加交互成本）	约 5 个选项以内使用单选框／复选框；更多选项则使用可搜索的下拉菜单
切换开关还是复选框	立即生效的设置 → 切换开关	选项需一起审核并提交 → 复选框	根据生效时机决定，切勿仅凭外观判断
滑块还是预设范围	桌面端／对精度要求不高的用户 → 滑块	移动端／外出场景：易于点击的预设（“低于 $50”“$100–200”）	已知常见范围时提供预设；自定义范围使用滑块
滑块还是单选框／下拉菜单	确实有许多可选值的范围	可选项较少，或需要精确值	如果一只手就能数完选项，就不要使用滑块
直方图滑块	数据背景有助于选择（如 Airbnb 的价格分布）	数据只会增加噪声，而非提供有效信息	除非分布信息有助于决策，否则使用普通双滑块
选择器类型（移动端日期）	较远日期使用输入选择器 + 掩码（出生日期）；一年以内使用日历选择器（预订）	出生日期使用日历选择器（需要无休止地滚动）；嵌套下拉菜单	根据日期远近选择匹配的选择器
默认选项（单选框）	必填字段；有研究依据的最常见选项	默认值会引导用户选择付费或同意选项（→ 暗黑模式）	默认选择真正最常见的选项
视频式滑块	媒体拖动定位——预览缩略图、可点击的滑块按钮、键盘快捷键	标准表单场景	仅用于时间轴导航

---

验证结果（编排）

交接时使用每个审查视角对应的可安装技能 name。只有在该技能已安装时才调用；如果未安装，此技能本身的核心内容已涵盖这些规则——继续操作，不要因此受阻。

生成或修订后，应将结果交给审计视角审查，而不是直接宣布完成。这些是候选视角——具体采用方式由 docs/orchestration-policy.md 规定，也可以将整个流程交由 ux-design-review 处理。此处，heuristics、microcopy 和 dark-patterns 属于 A 级（自动运行）；accessibility、aesthetics 和 mobile-responsiveness 属于 B 级（可选）——在现有设计系统下，aesthetics 会被跳过，accessibility 的审查范围会缩小为使用体验；mobile-responsiveness 仅适用于移动设备。如果用户调用此技能是为了处理某个特定事项，请遵循该范围。

• ux-heuristics-audit （A 级）——符合心智模型（效果时机与控件类型相匹配）、保持一致性、防止错误（默认值、吸附）。
• ux-accessibility-audit （B 级——可选；在设计系统下缩小范围）——触控目标尺寸（拇指操作、复选框）、键盘可操作性、标签与控件的关联、小型控件图形的对比度。
• ux-aesthetics-audit （B 级——可选；在设计系统下跳过）——对齐节奏、间距、重新设计样式后的控件是否仍易于识别。
• ux-microcopy-audit （A 级）——标签措辞（关键词优先、开关的开启状态用语）、分组副标题。
• ux-dark-patterns-audit （A 级）——当默认值或预选项会引导用户选择同意、付款或数据共享时，检查尺寸偏向、预先勾选的选择加入项、引导性默认值。
• ux-mobile-responsiveness-audit （B 级——可选；仅适用于移动设备）——在移动场景中检查开关对齐方式、选择器类型、拇指触控目标。

如果审计发现冲突，应优先满足主要任务：用户应能一眼看懂选项结构，并准确作出选择。

---

常见的正确与错误做法

❌ 不要	✅ 应该
用于 3 种付款方式的下拉菜单	单选按钮——所有选项一目了然，点按一次即可选择
只有点击“保存”后才生效的切换开关	复选框 + 提交按钮；切换开关 = 立即生效
为了样式而使用圆形复选框 / 方形单选按钮	使用常规形状；只调整颜色和边框样式
使用疑问句标签（“想接收邮件吗？”）	使用关键词优先的开启状态标签（“邮件通知”）
只有很小的控件方框可以点击	点击整个标签和控件都可激活该选项
必选单选组中没有任何选项被选中	预先选中基于研究的默认选项
用滑块在 4 个方案中选择 1 个	使用单选按钮；滑块适用于范围或连续感受
带有“应用”按钮的滑块	立即生效——这正是滑块的意义
没有最小值 / 最大值标签的价格筛选器	显示最小值 / 最大值；使用双滑块；为移动设备提供预设选项
将预先勾选的同意复选框作为“默认值”	同意选项默认不勾选；默认值用于预填事实，而非替用户作出决定（→ 暗黑模式）
未经检查就发布	交由 heuristics + accessibility + aesthetics + microcopy 审查

---

参考课程（Uxcel）

• 选择控件及其适用场景
• 设计选择控件的最佳实践
• 设计移动端选择控件
• UI 滑块及其适用场景
• 设计 UI 滑块的最佳实践