控件选对了吗：单选、多选、开关与下拉

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：交互设计精髓》。