交互工程 · 6 / 10 控件选对了吗：单选、多选、开关与下拉 前面四节看的是流程和状态，这一节钻进界面最小的零件。控件是用户和产品之间的通用语言，用错一个，用户就要多点一次、多猜一次。 选用规则四句话就讲完 ，AI 不知道这四句，你得替它把关。 四句口诀 场景连连看 下拉的代价 该不该弹 一句话速览 互斥选一个用单选钮，可勾多个用复选框，立即生效用开关，选项超过一屏才配用下拉。六个场景连连看，配一张能抄进提示词的速查表 AI 挑控件，靠的是掷骰子 让 AI 生成一张表单，控件八成是随手抓的：三个选项也塞进下拉，单选多选看心情，再顺手给每个动作都配一个弹窗。这些毛病单看都不大，叠在一张表单里，用户每一步都在多花力气。
典型病 现场 用户多付的成本 三个选项也用下拉 发票类型就三种，藏进「请选择」里 多点一次才能看见选项，选项之间没法直接比较 单选多选随缘 互斥的选项给了复选框，能多选的给了单选钮 勾出矛盾数据，或者想多选却选不了，只能撞一次错 什么都爱弹框 保存成功弹一个，切换页签也弹一个 每个弹窗都是一次打断，手在页面上，心思被拽走
Cooper 在《About Face 4》第 21 章把这些零件逐个讲过一遍，规则清楚得能背下来。这一节先背口诀，再连连看练手，最后把规则抄成提示词。
四句口诀，控件各回各家 第 21 章把选择类控件的分工划得很清楚。单选钮的名字来自老式汽车收音机：司机按下一个电台键，前一个键自动弹起，眼睛不用离开路面。互斥、必选一个，就是它的地盘。四句口诀对应四种控件，先认脸再认规则。
专票 普票 电子票
互斥选一个，用��选钮 选中一个，其他自动弹起，错误选法在物理上不存在。成组才有意义，单独一个单选钮点上就取消不掉，第 21 章直接判它无意义。
产品更新 活动 周报
可勾多个，用复选框 勾上做标记，再点取消，几个并排就能同时多选。方形是它几十年攒下的脸，别改成圆的，圆形会和单选钮撞脸。
深色模式 声音
立即生效，用开关 拨下去当场变，不用再点保存。第 21 章说它在移动端设置页非常好用，反过来讲，要跟着表单一起提交的选项就别用开关，用户会以为已经生效了。
广东省 34 个选项收在里面
选项超一屏，才考虑下拉 下拉的初始状态只露出当前选中的那一项，其余全部藏起来，看一眼选项就要付一次点击。它是屏幕装不下时的妥协方案，配额别浪费在三个选项上。
「链接用于导航，按钮用于动作。」 Alan Cooper，《About Face 4》第 21 章：每种控件都有自己的分工，让控件干别人的活，用户就要重学一遍。
动手 · 六个场景，给控件对号入座 口诀背完练手感。下面六个场景都出自真实表单， 每个场景从四种控件里挑一个最对症的 。选错有纠错判词，可以继续选到对为止。
场景配控件连连看 0 / 6
点场景下方的控件圆片作答，六题全对，口诀就算过了手
1 报销单里选发票类型：专票、普票、电子票，只能选一种
单选钮 复选框 开关 下拉
对。 三个选项、互斥、必选一个，单选钮平铺让三种发票一眼可比。AI 多半会塞给你一个下拉，把三个选项藏进两次点击里。 复选框能同时勾多个。 专票和普票一起勾上，财务系统当场报警。互斥场景要的是选一个顶掉一个。 开关只装得下开和关。 三种发票塞不进两个状态，它管的是立即生效的设置项。 选项才三个就下拉，藏早了。 第 21 章的门槛是选项多到一屏放不下才轮到它。
2 订阅设置「你想收到哪些邮件」：产品更新、活动通知、每周精选，随便勾
单选钮 复选框 开关 下拉
单选钮是互斥的。 勾了活动就自动放弃产品更新，用户想都要就没门了。能共存的选项归复选框管。 对。 三个选项彼此独立、可以共存，复选框逐个勾选正对症。第 21 章还有个进阶用法叫做记号：列表里每行配一个复选框，多选状态一眼可见。 差一口气。 三个开关也能凑合，但这里的选择要跟着「保存」一起提交，开关的承诺是拨下去立即生效，语义对不上。 下拉一次只露一项。 用户想看自己勾了哪几样，还得点开数一遍，多选状态全被藏住了。
3 设置页的「深色模式」，一改界面立刻变色，不用保存
单选钮 复选框 开关 下拉
两个单选钮「开 / 关」占地翻倍。 开关本来就是两个压缩版单选钮拼的，二选一且立即生效，直接用开关。 复选框在表单里长大， 用户看见它会下意识找「保存」按钮。立即生效的设置项用开关，生效感是设计出来的。 对。 拨下去当场变色，开关的形态本身就在承诺「立即生效」。第 21 章点名它在设置页最好用，AI 生成设置页时给它这个词就够了。 两个选项做下拉， 用户要点两次才能完成一次切换，还看不见另一个选项是什么。
4 收货地址选省份，一共 34 个选项
单选钮 复选框 开关 下拉
34 个单选钮平铺，表单直接变成一面墙。 单选钮吃屏幕，第 21 章说它适合选项少、不常用的场合。 省份只能选一个， 复选框先在语义上就错了，再摆 34 个更是灾难。 开关装不下 34 个状态。 它只有开和关。 对。 选项超过一屏，下拉此时才名正言顺，藏起来是为了救屏幕。再讲究一点可以配输入联想，打两个字直达。
5 收银台选支付方式：微信、支付宝、云闪付，选一种付款
单选钮 复选框 开关 下拉
对。 互斥、必选一个、选项就三个，平铺的单选钮让用户扫一眼就点。真实收银台都做成三张大卡片，那是单选钮的变体，规则没变。 一笔钱没法同时走两条通道， 复选框的多选语义在这里是个陷阱。 三种支付方式塞不进一个开关。 它只有两个状态。 付款是最不该加阻力的一步， 三个选项藏进下拉，等于在收银台前多设一道门。
6 注册页的「我已阅读并同意服务条款」，勾了才能注册
单选钮 复选框 开关 下拉
单独一个单选钮没有意义， 点上就取消不掉，这是第 21 章的原话级结论。二选一且不互斥的标记，归复选框。 对。 勾上表示同意，再点一下反悔，复选框单个使用正好覆盖「勾 / 不勾」两个状态，这就是它最初被发明出来的用法。 开关会当场生效， 可「同意条款」是跟着注册动作一起提交的承诺，用开关会让用户以为拨一下就算签了字。 把「同意 / 不同意」做成下拉， 用户要点开才知道有什么可选，这是给一步动作硬加两步。
下拉的账：每次看选项都要付一次点击 四种控件里最常被 AI 滥用的就是下拉，值得单独算笔账。第 21 章讲列表控件时点破了它的先天缺陷：初始状态只显示上次选中的条目，其余选项全部不可见。选项看不见，用户就没法比较，也预估不了这一步要花多久。下面是同一个外卖下单页， 点你愿意用的那个 。
选配送时间：下拉 vs 平铺 A/B 对决
点卡片投票，投完揭晓判词
方案 A
waimai.example.com/checkout
确认订单 合计 ¥ 42.5
配送时间 请选择配送时间 提交订单
三个时段收进下拉，点开之前一个都看不见
方案 B
waimai.example.com/checkout
确认订单 合计 ¥ 42.5
配送时间
立即送出 约 35 分钟 今天 18:00 前后 避开午高峰 今天 19:00 前后 到家再收
提交订单
三个时段平铺，各带说明，默认选好最常用的
平铺方案还偷偷用上了一招：把「立即送出」设成默认值。选项可见加默认合理，多数用户一秒通过这一步，这正是上一章防错三板斧里「默认值兜底」在控件层的样子。
对话框是打断，能不弹就不弹 第 21 章给对话框的定位讲了一个厨房比喻：应用是厨房，对话框是食品储藏室，它推动情节，但当不了主角。主要的交互操作要放在主窗口里，对话框只装主流程之外的东西：危险的、少用的、需要把一个主题的信息集中到一处的。还有一条容易忽视的细节：功能对话框的标题要用动词，让用户一眼知道自己在确认什么。 AI 的习惯正相反：成功也弹、提示也弹、确认也弹。下面五个场景， 逐个判断该弹还是不该弹 。
对话框该不该弹，五连判 0 / 5
每个���景点「该弹」或「不该弹」，判词会说清依据
用户点了「清空回收站」，200 条记录将永久消失，产品暂时做不了撤销 该弹 不该弹
该弹，但它是备胎。 不可逆又暂时做不了撤销，确认框是仅剩的防线，标题记得用动词：「清空这 200 条记录？」。第 3 节讲过，能做可撤销就优先做，弹窗只在撤销缺席时顶班。
每次保存成功，都弹一个「保存成功」对话框让用户点确定 该弹 不该弹
不该弹。 正常干完活还要用户点一下表扬，等于软件在邀功。成功反馈用非模态的轻提示：角落一枚对勾、一条两秒消失的 toast，用户眼角能看到就够了。
表单还有一项没填，用户点提交，弹窗告知「信息不完整」 该弹 不该弹
不该弹。 这一幕在第 3 节演过：防错要前置，没填完就禁用提交按钮，旁边写明还缺哪几项。让用户先撞墙再弹窗递创可贴，是把防错做成了报错。
用户点「导出全部数据」，需要一次性选好格式、范围、是否含附件 该弹 不该弹
该弹。 导出在主流程之外、不常用、又要把一个主题的好几项设置收拢到一处，这正是第 21 章说对话框最擅长的活：把相关信息集中起来，免得用户满界面找。
用户正在打字，后台同步完成了，弹窗告知「同步完成」 该弹 不该弹
不该弹。 用户手在键盘上，弹窗抢走焦点，半句话就打进了「确定」按钮里。后台状态用界面角落的图标或状态条静静更新，Cooper 管这叫富视觉非模态反馈，第 15 章整章都在讲怎么用它消灭对话框。
速查表 · 抄进提示词，AI 就不掷骰子了 规则记在你脑子里没用，要写进给 AI 的需求里。先收一张速查表，再把下面那段约束话术一键复制，生成任何带表单的界面时贴在提示词末尾。
控件 什么时候用 AI 常见误用 单选钮 互斥、必选一个、选项一屏放得下 该用它的地方给了下拉或复选框 复选框 可多选，或单个的「勾 / 不勾」标记 互斥选项也给复选框，勾出矛盾数据 开关 二选一且立即生效的设置项 用在要跟表单一起提交的字段上 下拉 选项超过一屏，屏幕装不下的妥协 三五个选项也藏进去，凭空加一次点击 对话框 主流程之外：危险、少用、集中一个主题 成功提示、常规确认也弹，逢事必弹
控件约束话术，直接进提示词 可复制
点右上角复制，粘到生成界面的提示词末尾
约束话术 复制
控件选择约束：互斥且选项不超过 5 个时用单选钮平铺，禁止用下拉；可多选用复选框；开关只用于立即生效的设置项；选项超过一屏才允许下拉，并提供输入联想。对话框只用于主流程之外的功能（危险操作、少用的设置、需要集中一个主题的信息），功能对话框标题用动词；操作成功用非模态 toast 提示，禁止弹「成功」对话框；表单校验前置（禁用 + 缺项说明），禁止提交后弹「信息不完整」。
加试 · 一颗合体按钮的悬案 第 21 章还点名了一种要避开的控件：状态切换按钮。音乐播放器那颗「播放 / 暂停」合体键就是代表，图标显示三角时你点它，音乐响起，图标变成两道竖条。 Cooper 认为它的毛病出在哪？
播放 / 暂停合体键，病根是什么 单选
选错也有解释，选到对的为止
A 两个功能挤一个按钮，点击区域太小容易误触 B 用户分不清图标显示的是当前状态，还是点下去会发生的事 C 图标不带文字，新手学不会 D 切换太快，动画来不及播完
本节要点
✓ 四句口诀： 互斥选一个用单选钮，可勾多个用复选框，立即生效用开关，选项超一屏才考虑下拉（Cooper，《About Face 4》第 21 章）。 ✓ 下拉是妥协方案： 它初始只露一项，看选项就要付点击。三五个选项先平铺，配上合理默认值，多数用户一秒通过。 ✓ 对话框是打断： 主交互放主窗口，弹窗只装主流程之外的危险、少用、需要集中的功能；成功提示用非模态轻反馈，功能对话框标题用动词。 ✓ 把规则写给 AI： 速查表的约束话术贴进提示词，控件就不再靠 AI 掷骰子。控件说对了，文案也得说人话，下一节讲界面怎么开口。
内容来源： 小山学堂「交互工程」专题原创；部分交互原则整理自《About Face 4：交互设计精髓》。