交互工程 · 1 / 10

能跑通了,然后呢?

上一章练的是看出「哪里丑」,这一章练看出「哪里难用」。AI 交付的应用功能齐全、点哪都有反应,但用起来处处硌手。这一节先立住全章的地基:交互的病比审美的病更隐蔽,然后拿一张理论清单,亲手抓五个现行。

开篇立论体贴清单找茬实验自查投票
看一眼 vs 用一遍

审美的病暴露得快:页面一打开,配色乱、间距挤,三秒钟就皱眉头。交互的病藏得深:demo 演示那两分钟一切正常,等真实用户删错一条数据、断一次网、第一次打开空荡荡的页面,病才发作。

这就是 Vibe Coding 时代的新坑。AI 把「做出来」变得很容易,它默认交付的交互停在「能跑通」级别:空态一片空白、报错弹 alert、删除不带确认、保存了没动静。你验收时点两下觉得没问题,用户用一周就想卸载。

维度审美的病交互的病
暴露时机页面打开的前三秒用起来之后:删错数据、断网、第一次打开
谁先发现你自己扫一眼就能发现往往是用户替你发现,代价是流失
AI 犯错的样子五颜六色、字号打架,看着就不对demo 里一切正常,边界情况全是坑
验收方式看:截图就能评审用:把流程走一遍,把坏情况都试一遍
好不好看一眼能看出来,好不好用要用起来才知道。所以交互的病更隐蔽,也更需要一张清单来兜底。
体贴是一张清单,反过来用就是找茬清单

清单从哪来?Alan Cooper 在《About Face 4》第 8 章「数字产品的礼仪」里给过答案。他借了纳斯和里夫斯的研究,把结论落成一条设计原则:

「软件应该像人一样体贴。」
Alan Cooper,《About Face 4》第 8 章

Cooper 的观察很扎心:交互产品惹怒我们的原因通常不在缺功能,在不体贴。他列了十几条体贴软件的特质,挑出最适合检查 AI 产出的六条,每一条反过来读,就是一条找茬标准。

体贴的软件…Cooper 的意思AI 默认产出的反面
有预见预判你下一步要什么,提前备好第一次打开一片空白,下一步全靠猜
会及时通知你关心的进展主动告诉你,不用你问点了保存没动静,转了圈也没个说法
不因自己的问题烦你技术故障自己消化,别拿代码味的话甩锅一断网就把 Error: code 500 端到你脸上
是自信的,但备好退路照你说的做,不反复质疑;万一你错了,帮你恢复要么删前问三遍,要么删了就真没了
不问多余的问题能记住的选择记住,能给默认值的给默认值每次打开都把同一个问题再问一遍
帮你避免低级错误看你要犯错,悄悄拉一把,别指责眼睁睁看你误删,然后弹窗说操作失败

这张表右边那一列,就是接下来找茬的靶子。别背,动手抓一遍就记住了。

顺带说清这一章和前后两章的分工:审美工程管好看,本章管好用,心理学篇管用户的感受。三章各出一张验收清单,配齐了就是「上线前三张清单」。

还有一个好消息:这六条病 AI 都治得好,它只是默认不治。你能说出病名,它就能开药,这也是全章反复练「说清要什么」的原因。

动手 · 五处不体贴,逐个点出来

下面是一个 AI 生成的待办应用「今日清单」,功能齐全,能跑通。它藏着五处不体贴,全在这一屏里。觉得哪里不对就点哪里,点中一处,右边立一张病历卡,写清它违反了清单上哪一条、该怎么改。

给「今日清单」挑毛病 找到 0 / 5
五处毛病分布在顶部横幅、工具栏、报错条、列表和归档区,点错了没有惩罚
todo.example.com
8 月 11 日 · 还剩 3 件 保存
要开启夜间模式吗? 开启 不了 每次打开都问一遍
Error: request failed with status code 500 确定
给猫买冻干今天 18:00 · 购物×
交这个月电费明天截止 · 生活缴费×
回房东消息已经拖了两天×
今天已归档
病历卡会立在这里。先从最扎眼的地方下手:哪一块让你多想了一秒,哪一块就有问题。
五处全中。回头看这五张病历卡:没有一处是功能缺失,应用照样能跑通,病全出在礼数上。这正是 Cooper 那句话的意思:惹怒用户的多数时候是不体贴,缺功能反倒排在后面。空态和报错怎么治,下一节整节展开;删了就没怎么治,第 3 节讲防错与可逆。
保存成功,用不用敲锣打鼓

找茬清单里有一对容易搞混的病:没反馈是病,反馈过度也是病。Cooper 在第 8 章专门点过名:交互产品爱用不必要的通知向我们炫耀,「文档保存成功!」这种弹窗等着被点掉,除了打断你没有别的作用。下面两个编辑器都做了保存反馈,点你认为更体贴的那个

同一个保存动作,两种反馈 A/B 对决
点卡片投票,投完揭晓判词
方案 A
docs.example.com/weekly
周报草稿共 486 字 · 最后编辑 21:47保存

本周把订单导出功能收了尾,联调通过,周四已经上线。

下周计划:把导出格式扩到 Excel,预计三个工作日…

提示
保存成功!
确定
每次保存都弹窗庆祝,必须点掉「确定」才能继续写
方案 B
docs.example.com/weekly
周报草稿共 512 字 · 最后编辑 21:47已保存

本周把订单导出功能收了尾,联调通过,周四已经上线。

数据侧补齐了近 30 天的留存看板,口径和产品确认过。

下周计划:把导出格式扩到 Excel,预计三个工作日…

已自动保存 · 刚刚
按钮原地变成「已保存」,角落留一行时间戳,手不用停
投一票 · 你都默默忍了什么

找茬清单看完,回想一下你天天在用的软件,包括你自己让 AI 做的那些。六种不体贴,选一个你被折磨得最狠的,投完看看别人都在忍什么。

六种不体贴,哪个最折磨你 投一票
点一行投票,只投一次,投完显示票仓分布
空白空态,下一步全靠猜
报错全是代码味黑话
手一滑删了,找不回来
点了没反应,不知道成没成
同一个问题每次都问
一崩溃,写了半天的东西全没了
验收交互,按这个顺序走三遍

找茬清单有了,还差一个使用姿势。审美验收看截图就行,交互验收要动手走流程,而且要走三遍,每遍换一个身份。

第几遍扮演谁怎么走抓什么病
第一遍老用户顺着理想路径把主流程走完存了没动静、问个没完这类日常摩擦
第二遍倒霉用户故意犯错:删一条、断个网、输错格式、连点两次提交报错像甩锅、删了就没、一崩全丢
第三遍新用户清掉数据从零开始,第一次打开的每一屏都停下来看空白空态、下一步全靠猜

第二遍和第三遍最容易被省略,AI 的病恰恰全堆在那里。demo 给你演示的永远是第一遍,网络流畅、数据现成、路径笔直。你替用户把另外两遍走了,病就在上线前被抓住。

走的时候手边放着那张体贴清单,每停一屏问一句:这一屏有预见吗?会通知吗?在甩锅吗?备好退路了吗?在问多余的问题吗?会帮我兜住低级错误吗?六个问号过完,这一屏才算验收完。

选一选 · 为什么交互的病更隐蔽
AI 交付了一个能跑通的应用,为什么交互问题最容易漏掉? 单选
选错也有解释,选到对的为止
A因为 AI 写的交互代码 bug 更多
B因为交互问题只在真实使用中暴露,验收时点两下根本走不到那些时刻
C因为用户不在乎交互,只在乎功能
D因为交互设计没有标准,看不出对错
本节要点

交互的病更隐蔽:审美问题三秒暴露,交互问题要等到删错数据、断网、第一次打开才发作,往往是用户替你发现的。

能跑通只是及格线:AI 默认交付的交互停在「能跑通」,惹怒用户的多数时候是不体贴,缺功能反倒排在后面(Cooper,《About Face 4》第 8 章)。

体贴清单反过来就是找茬清单:有预见、会通知、不甩锅、自信但备好退路、不问多余的问题、帮你避免低级错误。六条对着 AI 产出逐条过。

验收交互要用,别只看:把流程走一遍,把坏情况都试一遍:删一条、断个网、开个新账号。接下来四节把找茬的抓手逐个拆开,先从状态三件套开始。

内容来源:小山学堂「交互工程」专题原创;部分交互原则整理自《About Face 4:交互设计精髓》。

交互工程 · 2 / 10

状态三件套:loading、空态、错误态

AI 生成的界面默认只有一种状态:数据齐全、网络流畅、一切正常。可用户遇到的头一屏常常是另外三种:没数据、在等待、出错了。这三种非正常时刻恰恰是体验分水岭,这一节把三件套逐个拆开,每件配一局 A/B 对决。

空态骨架屏错误三要素文案改写
正常状态是及格线,非正常时刻才拉开差距

给 AI 一句「做个笔记应用」,它交出来的界面永远预装着几条漂亮的假数据。可真实用户的第一屏没有数据,第一次搜索可能超时,第一次同步可能失败。这三种时刻怎么表现,AI 不会主动想,你不提要求,它就一律敷衍。

状态AI 默认的敷衍版该有的样子
空态一片空白,或一行灰字「暂无数据」教下一步:说明这里是干嘛的,给一个动作入口,最好带示例
loading一个干转的圈,转多久都是那个样说进行到哪:内容形状先出来,进度看得见
错误态alert 弹一串代码,或者干脆没反应说人话给出路:发生了什么、为什么、怎么办

上一节的体贴清单在这里全用得上:空态考的是有预见,loading 考的是会及时通知,错误态考的是不因自己的问题烦你。三件套一件件来。

空态是新用户的第一屏,别给他一片白

Cooper 在《About Face 4》第 8 章讲乐于助人的软件时打过一个比方:向店员问路,好店员除了指路还会顺手告诉你更划算的选择。空态就是用户在问路:我到了,然后呢?一片空白等于店员耸了耸肩。

好空态回答三个问题:这里是干嘛的、我现在能做什么、做出来大概长什么样。前两个用一句话加一个按钮解决,第三个给示例数据或模板。下面两个笔记应用都是第一次打开,点你认为更体贴的那个

第一次打开的笔记应用 A/B 对决
点卡片投票,投完揭晓判词
方案 A
notes.example.com
我的笔记0 篇
列表区一片空白,新建按钮藏在右上角菜单里
方案 B
notes.example.com
我的笔记0 篇
还没有笔记
写下第一条,或者从模板开始
写第一篇 看看示例笔记长什么样
说明这里是干嘛的,给主按钮,还备了一条示例入口
loading 别干转,说说进行到哪了

体贴的软件会及时通知:用户关心的进展要让他看得见。一个干转的圈只传达了一个信息「在忙」,转到第五秒,用户开始怀疑是卡死了。骨架屏先把内容的形状画出来,等于告诉用户马上到了、到了以后长这样;再配一条进度说明,焦虑就压下去大半。

等多久该给什么反馈,那套三档决策心理学篇讲过了,这里放一张跳转卡,不重教。

跨章引用 · 等待心理学:难受的从来不是那 5 秒0.1 秒 / 1 秒 / 10 秒三档反馈决策、预期管理为什么比提速管用,心理学篇第 2 节讲透了,点这里跳过去。
同样等 3 秒,两种等法 A/B 对决
左右两块都在播 loading 演示(这是教具,可暂停),点你认为更体贴的那个
方案 A
chat.example.com
消息列表
加载中…
干转圈:在忙,忙什么、忙到哪了、还要多久,一概不说
方案 B
chat.example.com
消息列表
正在拉取最近 30 天的消息…
骨架屏:内容形状先出来,配一句进行到哪和一条进度
错误态三要素:发生了什么、为什么、怎么办

Cooper 在《About Face 4》第 15 章对错误信息的立场很硬:老式错误对话框要么责备用户,要么拿技术故障甩锅,多数根本不该出现。真到了必须说的时候,向用户交代清楚三件事:发生了什么、为什么会这样、现在怎么办。三样齐了才算说人话,缺了「怎么办」的错误信息等于把用户堵在死胡同里。

还有一条底线:措辞不能责备用户。第 15 章的原则是用户视角里没有过错,把「您输入了非法字符」换成「这里只支持字母和数字」,信息一样,态度天差地别。下面两个同步失败的提示,点更体贴的那个

同一次同步失败,两种说法 A/B 对决
点卡片投票,投完揭晓判词
方案 A
notes.example.com
我的笔记
错误
SyncException: ETIMEDOUT at
upload.ts:214 (code 10060)
确定
异常栈直接上屏,唯一的出路是点「确定」认栽
方案 B
notes.example.com
我的笔记
这篇笔记还没同步上去
发生了什么刚才的修改保存在本机,云端还没收到。
为什么网络连接超时了,可能是网不稳。
怎么办联网后会自动重试,也可以现在手动同步。
立即重试稍后再说
三要素齐全,本地数据没丢也交代了,出路给了两条
动手 · 把三条弱文案改成人话

三要素公式抄下来还不够,得练手感。下面三条错误文案都出自 AI 产出的真实水平,逐条点「改写」,看弱文案怎么按三要素重写,顺便记住每条弱在哪。

错误文案改写器 改写 0 / 3
点每条右侧的「改写」,弱文案划掉,三要素版本展开
操作失败,请重试。改写 →
发生了什么报销单没提交出去,草稿已经保留。
为什么附件超过了 10MB 的上限。
怎么办压缩一下附件,或者拆成两张单子提交。
原文病灶:「操作失败」没说哪个操作、「请重试」是句空话,重试十次照样失败,因为病根在附件大小。
Error 422: Unprocessable Entity改写 →
发生了什么收货信息没保存上。
为什么手机号少了一位,现在是 10 位。
怎么办补上缺的那位就能提交,光标已经帮你定位过去了。
原文病灶:HTTP 状态码是给开发者看的日志,端给用户等于甩锅,上一节的病历四说的就是它。
您输入了非法字符!改写 →
发生了什么用户名还没通过检查。
为什么用户名只支持字母、数字和下划线,空格进不来。
怎么办把空格换成下划线就行,比如 xiao_shan。
原文病灶:「非法」加感叹号,输个空格就成了嫌疑人。第 15 章的底线是措辞不责备用户,规则讲清楚就好。
自查 · 你的页面盖住几种状态

三件套讲完,拿一张自查表收口。想着你最近让 AI 生成的那个页面,下面五种状态,做了哪种就勾哪种,覆盖率当场出分。这张表也是给 AI 提需求的模板:第 9 节会教你把它整张写进提示词。

状态覆盖率自查表 0 / 5
点行勾选,可反复勾掉重勾,判词按覆盖档位变化
默认态数据齐全时的正常展示,AI 一定会做,白送一分
loading 态骨架屏或进度说明,干转圈算半分
空态说明这里是干嘛的、给动作入口、有示例更好
错误态发生了什么、为什么、怎么办,三要素齐全
成功态操作成了要让人看见,但别用弹窗邀功(上一节的对决)
状态覆盖率0%
本节要点

非正常时刻是分水岭:AI 默认只做「一切正常」,空态、loading、错误态三件套你不写进需求,它就全敷衍。

空态要教下一步:说明这里是干嘛的、给动作入口、给示例。空态是新用户的第一屏,一片白等于把人往外推。

loading 要说进行到哪:骨架屏先给内容形状,配进度说明。等待反馈的三档时机在 psy-2,不重教。

错误态三要素:发生了什么、为什么、怎么办,措辞不责备用户(Cooper,《About Face 4》第 15 章)。更进一步的思路是让错误压根发生不了,下一节讲防错与可逆。

内容来源:小山学堂「交互工程」专题原创;部分交互原则整理自《About Face 4:交互设计精髓》。

交互工程 · 3 / 10

防错与可逆:让用户敢点

上一节教错误怎么说,这一节往前挪一步:让错误压根发生不了,发生了也能一键回头。AI 生成的应用最爱用确认弹窗当保险,但那是最弱的一道防线,你自己动手删两条数据就明白了。

防错三板斧撤销 toast狼来了实验改造演练
用户在探索,别把探索当犯错

Cooper 在《About Face 4》第 15 章有个立场:从用户的心理模型看,没有「错误操作」这回事。人用软件就是在探索,点点这个、试试那个,走进死胡同再退出来,这是学会一个工具的正常方式。把探索标记成错误、动不动弹框拦截的软件,用户会越用越缩手缩脚。

他给撤销打的比方很形象:人进山洞探险,洞口挂一条随时能爬回地面的绳梯,胆子就大得多。撤销就是那条绳梯,它救的次数不多,但它挂在那里,用户才敢往深处走。

「做,不要问。」
Alan Cooper,《About Face 4》:与其用弹窗要用户确认,先自信地执行,再备好撤销。

敢点的心理机制(防御心理、控制感)在心理学篇有一整节,这里放跳转卡,不重教。

跨章引用 · 防御心理:用户不是不会用,是不敢用可逆性怎么给用户控制感、为什么误触一次就再也不敢碰,心理学篇第 6 节讲透了,点这里跳过去。
防错三板斧:报错的最高境界是无错可报

第 15 章的排序很清楚:错误信息写得再好,也比不过让错误发生不了。检查 AI 产出时先看这三板斧用上没有,三样都便宜,AI 也都会做,前提是你提了。

禁用不可用项
条件不满足的按钮置灰,旁边说明缺什么。让用户点一下再报错,等于设好陷阱看人踩。
危险操作拉开距离
「清空」别挨着「保存」。Cooper 的比方:无害的功能和弹射座椅拉杆排在一起,像坐在打开的烤肉炉边上。
默认值兜底
默认选项永远是最安全的那个。群发邮件默认发所有人,等于把手滑的代价预设到最大。

三板斧防住大半,剩下的交给可逆性。于是问题来了:真到删除这种动作上,AI 最常给的方案是确认弹窗,它到底顶不顶用?做个实验。

动手 · 删一条数据,两种善后

左右两个通讯录,数据一样。左边用 AI 最爱的确认弹窗,右边用立即删除 + 可撤销 toast。请你两边各删一条,然后试着把删掉的救回来,体感会替你下结论。

确认弹窗 vs 撤销 toast 两边都删删看
点行尾的「删除」,B 面删完 5 秒内可以撤销,倒计时条走完就真没了
contacts.example.com
通讯录A · 确认弹窗方案
王小虎
产品 · 138****2201
删除
林晚晴
设计 · 139****8842
删除
陈大江
运营 · 137****0917
删除
确定要删除吗?
删除后将无法恢复。
contacts.example.com
通讯录B · 撤销 toast 方案
王小虎
产品 · 138****2201
删除
林晚晴
设计 · 139****8842
删除
陈大江
运营 · 137****0917
删除
已删除 撤销
A 面打断你 0 次弹窗。删掉的救得回来吗?救不回来。弹窗只负责事前拦一下,拦过之后两手一摊。
B 面救回 0 条数据,全程零弹窗。删除立即生效不打断,后悔窗口敞开 5 秒。
狼来了 · 确认弹窗为什么拦不住你

你可能不服:弹窗好歹拦了一下,怎么就最弱?Cooper 的解释是习惯化:在常规位置反复出现的确认框,用户很快就看也不看地点掉,等真正的危险到来,手指比脑子快。这个实验 20 秒,亲自验证一次。

连点八个弹窗,看看你拦得住第几个 实验
规则:尽快处理掉八个弹窗,怎么点都行,实验结束见分晓
oa.example.com/daily-report
你在赶一份日报,弹窗会一个接一个跳出来
像平时一样处理它们就行,越快越好,系统会计时。
演练 · 给三个危险按钮做改造

三板斧加可逆性都齐了,上手改造。三个场景全出自 AI 产出的常见毛病,每个场景选一种最对症的防错手段,选错有解释,选到对的为止。

场景一:工具栏上「清空画布」紧挨着「保存」,已经有用户手滑 单选
A点「清空画布」时弹确认框
B把「清空画布」挪进菜单深处,和「保存」拉开距离,再配撤销
C把「清空画布」按钮改成红色以示警告
D清空前自动导出一份备份文件到本地
场景二:群发通知的弹窗里,收件人默认勾着「所有成员(2841 人)」 单选
A发送前弹确认框,显示收件人数
B把「所有成员」选项删掉
C默认值改成「只发给我勾选的人」,选「所有成员」时就地显示人数提示
D发出去以后允许撤回,兜底就够了
场景三:表单没填完,「提交」照样能点,点了弹「信息不完整」 单选
A报错文案按三要素改写得更友好
B没填完时禁用「提交」,按钮旁边写明还缺哪几项
C提交时自动把空字段填上默认值
D弹确认框列出空字段,让用户选择继续或返回
选一选 · 四道防线排个序
四道防线里,哪道最弱? 单选
选错也有解释,选到对的为止
A禁用不可用项,配说明
B危险操作和常用操作拉开距离
C删除前弹确认框
D立即执行,配可撤销
本节要点

用户在探索,别当犯错处理:撤销是洞口的绳梯,它挂在那里,用户才敢往深处走(Cooper,《About Face 4》第 15 章)。

防错三板斧:禁用不可用项并说明、危险操作拉开距离、默认值选最安全的。报错的最高境界是无错可报。

确认弹窗是最弱的防线:狼来了效应,常规弹窗被无脑点掉,真危险来时它早已失效。做,不要问,然后备好撤销。

给 AI 提需求的话术:「删除立即生效,弹出可撤销的 toast,保留 5 秒」比「删除要有确认」产出好一个档次。流程里的多余步骤怎么砍,下一节讲。

内容来源:小山学堂「交互工程」专题原创;部分交互原则整理自《About Face 4:交互设计精髓》。

交互工程 · 4 / 10

流程克制:每多一步掉一批人

上一节管住了危险按钮,这一节看整条路:用户从进来到办完事,中间有多少步在伺候软件而没在办他的事。AI 生成的流程有个通病:太完整。你来当一回流程审计员,把一个五步注册砍到两步。

负担 excise砍步骤漏斗模拟编配与流
白干的活,Cooper 给它起了名字

《About Face 4》第 12 章把用户的操作分成两类。一类直接推进目标,比如开车上班这件事里的踩油门、打方向。另一类在伺候工具:开车库门、热车、等红灯,这些动作一步也没让你离办公室更近。第二类,Cooper 叫它负担(excise)

软件里的负担长这样:你想发一条动态,先登录、找入口、点掉引导气泡、翻过一个升级弹窗。发动态是目标,前面四步都是税。Cooper 把这笔税拆成四种:

认知税
琢磨这个产品怎么用:按钮是什么意思、结构怎么组织。
记忆税
背下密码、命令、东西放在哪一层菜单里。
视觉税
在屏幕上找:眼睛从哪开始看、哪块能点、哪块是装饰。
体力税
点击、移动、切输入法、一层层导航过去的手上功夫。
「尽可能地消除每一种负担。」
Alan Cooper 把这句列为设计原则,还补了一刀:界面里的负担,是用户对软件不满的头号原因。

判据只有一条,很好记:把这一步删掉,用户的目标还能达成吗?能,它就是负担。带着这条判据,来看 AI 交付的流程。

AI 爱交「完整」的流程,完整是它的病

让 AI 生成一个注册页,它大概率给你一个五步向导:邮箱、手机验证、完善资料、兴趣标签、确认提交,一步不少。它在训练数据里见过太多「规范」的注册流程,就把最全的那套端给你,每一步单看都有道理,合起来是一条收税走廊。

Cooper 对向导这种形式本来就没好话:向导把过程写死成一问一答,用户很快学会只点「下一步」,脑子全程没参与。他给的替代方案是把活直接干完,用合理的默认值兜底,事后允许用户改。放到 AI 时代,这条要由你写进需求里,它自己想不起来。

砍之前先认脸。第 12 章点名的负担源里,有三个在 AI 产出里出现得最密,点开每张卡看病征和给 AI 的话术

三大负担源速查 翻开 0 / 3
导航负担 点开
病征换页、换窗口、翻菜单找功能。用户在赶路,路上没有风景,走的每一步都在扣耐心。
AI 典型病一个功能一个新页面,改个昵称也要跳三层;常用工具埋在二级菜单里。
给 AI 的话术:常用操作就地完成,别新开页面;导航层级最多两层。
打断负担 点开
病征确认框、成功提示对话框、无关紧要的报告,把人从做事的状态里拽出来伺候软件。
AI 典型病每次保存都弹「保存成功」,点掉确定才能继续干活。
给 AI 的话术:反馈用页面内的轻提示;对话框只留给不可逆的大事。
重复输入负担 点开
病征让用户报一遍软件已经知道的事:重复登录、重复填资料、每次都要重新设置一遍偏好。
AI 典型病表单提交失败,回来一看填的内容全被清空了。
给 AI 的话术:填过的信息记住;出错保留已填内容;能推断的默认值直接给。
动手 · 负担清点器:五步注册砍到两步

下面是一个 AI 生成的会员注册流程,五步俱全,右边的漏斗按每步 78% 的通过率算给你看:1000 个人进门,走完五步只剩 289 个。请你拿着那条判据逐步清点,把没在推进目标的步骤砍掉。砍对了漏斗上涨,砍错了它会告诉你为什么砍不得。

流程审计:该留的留,该砍的砍 砍掉 0 / 3
点每一步右侧的「砍掉」,被砍的步骤会塌缩消失,漏斗实时重算
signup.example.com/register
创建账号流程审计模式
1 邮箱和密码输入常用邮箱,设置登录密码
2 手机号验证输入手机号,填 6 位短信验证码
3 完善个人资料上传头像,填写昵称和生日
4 选择兴趣标签至少挑 5 个,用于内容推荐
5 同意协议并创建勾选用户协议,点「创建账号」
这条流程的漏斗
1000 人点了「注册」
完成注册 289
演示模型:每一步按 78% 通过率计算
推而广之 · 每多一步,掉多少人

注册只是最好算的例子。下单、发布、报名、提交工单,凡是有流程的地方都有这只漏斗。拖动滑块改步骤数,看完成的人怎么变。流失率取 22% 只是演示口径,真实数字因产品而异,但方向从来一致:步骤和留存是反着走的

步骤漏斗模拟器 拖滑块
漏斗里的流动条纹是演示动画,只在视口内播放,可暂停
5 步
1000 人进来,走完的 289
编配与流:好流程让人待在状态里

砍步骤有理论撑腰。《About Face 4》第 11 章讲「流」(flow):心理学家米哈里·契克森米哈赖提出的概念,人全神贯注做事时会进入一种高产出的状态,察觉不到时间。Cooper 的推论:交互设计的任务是保住这个状态,好的交互应该「透明」,用户直接面对自己要办的事,感觉不到软件的存在。

流的天敌是打断。每多一步、每弹一个框、每换一个页面,用户都要从状态里出来一次,回去要重新酝酿。这也解释了漏斗为什么掉人:掉的多半就发生在被打断的那一下,用户抬头一想「我为什么要填这个」,就把页面关了。

「不论界面多酷,越少越好。」
Alan Cooper,《About Face 4》第 11 章。同章还有一条更直接的原则:不要愚蠢地打断进程。

验收 AI 产出时的走查法:亲手把核心流程从头走一遍,每一步问两个问题。第一,这步删掉目标还能达成吗?第二,这步有没有把我从状态里拽出来?两个问题都过关的流程,才配上线。

选一选 · 哪一步是负担

拿一个外卖 App 的下单流程练练手感。四步里藏着一步典型负担,用判据挑出来

外卖下单四步,哪步在收税? 单选
选错也有解释,选到对的为止
A浏览菜单,把菜品加进购物车
B第一次下单时填写收货地址
C每次提交订单前,重新勾一遍「我已阅读并同意配送协议」
D选择支付方式,完成支付
本节要点

负担的判据一句话:删掉这一步,用户的目标还能达成吗?能,就是负担(Cooper,《About Face 4》第 12 章)。认知、记忆、视觉、体力,四种税都要清。

三大负担源认清脸:导航(换页翻菜单)、打断(弹框和报告)、重复输入(报软件已知的事)。AI 的产出三样俱全,等你点名来砍。

步骤和留存反着走:五步注册砍到两步,走完的人翻一倍。掉人的位置多半在被打断的那一下,好流程让人待在状态里(第 11 章编配与流)。

给 AI 的话术:「注册只收邮箱和密码,其余资料进产品后再补;反馈用页内轻提示;填过的信息要记住。」流程管住了,下一节看 AI 发明的新交互怎么坑人。

内容来源:小山学堂「交互工程」专题原创;部分交互原则整理自《About Face 4:交互设计精髓》。

交互工程 · 5 / 10

习惯用法:别让 AI 发明新交互

流程砍利索了,还有一种病藏得更深:AI 有时会发明看着新颖、没人会用的交互。这一节讲两个词,习惯用法(idiom)和能供性(affordance),学完你能一眼认出哪个控件在装创新,还能说清为什么用户学不会。

习惯用法能供性找茬演练创新刀刃
你会用的交互,没有一个是天生就会的

《About Face 4》第 13 章把界面分成三种路数:按程序内部结构长的(实现中心),靠画得像现实物件的(隐喻),还有靠学的(习惯用法)。Cooper 的立场很干脆:现代图形界面基本靠第三种撑着。窗口、滚动条、下拉菜单、超链接,没有一个靠直觉,全是用户一个个学来的。

他举的例子是鼠标:没有人看一眼鼠标就知道它控制屏幕上的光标,得有人教,或者自己摸索半分钟。但学会之后一辈子忘不掉。滚动、双击、拖放、下拉刷新、左滑删除,都是这样:学一次,到处用

「所有的习惯用法都需要学习,好的习惯用法只需要学习一次。」
Alan Cooper,《About Face 4》第 13 章。

这条对做产品的人来说是天大的便宜:全世界的产品已经替你把用户教好了,你直接用现成的习惯用法,学习成本为零。麻烦在于 AI 有时不领这个情,它把训练数据里的花样拼一拼,就能发明出一个谁也没学过的控件。

隐喻这条路走不远

顺手把第二条路数也埋了。图形界面刚火起来那几年,功劳被记在「画得像」头上:桌面画成桌面、文件夹画成文件夹,用户看图识意。Cooper 在第 13 章不买账:隐喻界面让用户在图标和功能之间连线猜谜,简单功能还能猜,稍微抽象一点就画不出来了。「批量重命名 50 个文件」,你打算画成什么?

更麻烦的是隐喻会赖着不走。用户学会基本操作之后,那些拟真的皮革纹理、翻页动画就从帮手变成拖累,占地方、限制交互,还把机械时代的规矩带进来。苹果自己也认了:iOS 6 上那本皮质日历,到 iOS 7 被清得干干净净。

所以习惯用法赢在轻装:它没打算让你猜,直接让你学,学起来还快。下面看看这套词汇是怎么搭起来的。

三层词汇:图形界面为什么好学

第 13 章里有一张倒金字塔,解释习惯用法为什么容易学:整套图形界面的交互词汇分三层,越往下越少、越简单。点每一层看它装着什么

交互词汇的倒金字塔 看过 0 / 3
从底往上,词汇越垒越丰富,但地基只有几个动作
点左边的任意一层倒金字塔从底往上看:地基极小,楼却能盖很高,这就是图形界面好学的结构性原因。

用户能把这套词汇从别的产品搬进你的产品,靠的是心智模型:他默认你的界面和他用过的一万个界面遵守同一套规则。模型对不上时用户有多懵,心理学篇讲过了,放跳转卡,不重教。

跨章引用 · 心智模型:用户脑子里那张图用户拿着旧产品的模型来套你的界面,错配一次就迷路一次。模型从哪来、错配怎么修,心理学篇第 7 节讲透了,点这里跳过去。
动手 · 这个设置页里藏着三个发明

下面是 AI 生成的云盘设置页,功能都能跑,界面也不丑,但里面藏着三个自作聪明的发明,每一个都打破了一条学好的习惯用法。把它们逐个点出来,点中会给判词。

找出装创新的控件 找到 0 / 3
直接在界面上点你觉得有问题的控件,点到正经控件也有话说
pan.example.com/settings
账户设置云盘会员版
基本资料
发明 ①
山雾观测员
mist@example.com
未填写
未设置
未命名
第 1 / 3 页 · 向左滑填写更多
通用
消息通知
发明 ② 查看会员权益双击打开 年费会员 · 剩 208 天
发明 ③ 保存 点击后环走满一圈即保存成功
退出登录
发明 ① · 横着滑的表单:用户学不会。表单的习惯用法是从上往下:滚动、填写、提交,三十年没变过。横滑分页等于把必填项装进暗格,用户以为填完了,一点保存全是报错。想省高度,用折叠或分组都行,方向别动。
发明 ② · 要双击的链接:用户学不会。带下划线的蓝字,Web 的契约是单击就走。双击属于桌面图标那套习惯用法,两套规则混着用,没人猜得到,只好靠一行小字来教。要配说明书才能用的控件,等于宣布自己失败。
发明 ③ · 进度环保存按钮:用户学不会。保存有全世界最烂大街的写法:一个写着「保存」的实心按钮。做成环以后,用户第一反应是「它在加载什么」,第二反应是「这东西能点吗」。控件不再自我说明,创新反而把能供性丢了。
三个发明都揪出来了。注意它们的共同点:单看都挺有想法,败在打破了用户学好的规则。给 AI 的验收话术就一句:「导航、表单、基础按钮一律用最常见的标准模式,别发明新交互。」创新往哪放,本页最后一节讲。

顺便解释一下 AI 为什么会干这种事。它的训练数据里什么都有:正经产品、获奖概念稿、设计社区里炫技的作品集。让它「做个有设计感的设置页」,它就把几种来源的花样搅在一起端出来,语法上都通,规则上互相打架。

它还有一样东西永远学不到:你的用户学过什么。习惯用法长在用户的经验里,AI 看得见控件长什么样,看不见三十年的教学史。所以这道关只能你来把:凡是需要配一行小字解释怎么用的控件,都值得怀疑

能供性:控件要自己说明自己

第二个词来自诺曼的《设计心理学》:能供性(affordance),东西的样子透露它怎么用。Cooper 在第 13 章把定义修得更锋利:能供性管的是你以为它能干什么,和它实际能干什么分开算。门旁边装个小圆钮,人人都当它是门铃,哪怕按下去触发的是别的,它的能供性仍然是门铃。

经典例子是门把手:门上横着装一根金属杆,形状高度都在喊「拉我」,结果这扇门要推。于是店家贴上「推」的标字,没用,人们照拉。手能读懂的信号,比字大声。

在屏幕上,这件事变成一纸契约:你画一个按钮,就是向用户承诺它能点、点了有反应、干的是标签上写的事。毁约的控件,Cooper 叫它诱饵式能供性(bait-and-switch)。

他还点了扁平化的名:早年的界面靠阴影和立体感喊「来按我」,扁平风把这些全刮掉了,视觉上是清爽,能供性跟着受了伤。所以扁平界面里可点的元素更要守纪律:同一种颜色、同一种形状,专门留给能点的东西,谁都别客串。

下面两个会员中心,同一块升级卡片两种画法,点你认为守约的那个

长得像按钮的,必须能点 A/B 对决
点卡片投票,投完揭晓判词
方案 A
vip.example.com
桌面客户端检查更新
当前版本 v3.2.0,上次检查于今天 09:41
已是最新版本
蓝色大胶囊看着最像按钮,点了没反应;真动作「检查更新」缩成右上角小字
方案 B
vip.example.com
桌面客户端
当前版本 v3.2.0,上次检查于今天 09:41
已是最新版本
检查更新
状态用灰字加圆点老实待着,动作用一个正经按钮

能供性有个零成本的检验法:把界面截图发给一个没用过它的人,只给 5 秒,让他指出哪里能点。他指错的每一处,都是一起能供性事故。这个测试对 AI 生成的界面尤其管用,因为 AI 画界面时压根没想过这个问题。

创新要花在刀刃上

讲到这里容易得出一个错误结论:交互永远抄现成的,谁创新谁死。Cooper 给的尺子精确得多:

「重大改变必须显著优秀。」
Alan Cooper,《About Face 4》:让用户重学一遍的改动,收益必须大到肉眼可见。

导航、保存、表单这些基础操作,用户每天在别的产品里练几百遍,你换花样等于逼人重新学走路,而且给不出像样的回报,这里就该用最烂大街的模式。创新预算留给核心差异点:你的产品独有的那个能力,那里没有现成习惯用法可抄,做好了轮到别人抄你。

用这把尺子量一道题。AI 给一个批量文件管理工具加了四个「亮点设计」,哪个创新花对了地方?

四个亮点设计,哪个值得留? 单选
选错也有解释,选到对的为止
A底部导航换成按住呼出的放射状圆盘菜单
B上传进度做成拟物水杯,水位涨满即完成
C核心功能批量重命名:改一处规则,五十个文件名实时预览
D双击文件卡片加收藏,界面上不放收藏按钮
烂大街清单:这些直接抄,别客气

最后备一张速查表。下面这些习惯用法,用户早在别的产品里学到滚瓜烂熟,你的产品照抄就是白得的易用性。验收 AI 产出时对着查,右列的话术可以整段抄进提示词。

习惯用法用户在哪学的给 AI 的默认要求
下拉刷新每一个信息流 App列表刷新用下拉,别自创刷新浮层
左滑删除系统邮件、微信聊天列表列表项删除用左滑或明确按钮,别藏进长按菜单
底部导航栏手机 App 的标配位主导航用底部标签栏,图标配文字,3 到 5 个
购物车电商三十年的教学成果多选加结算沿用购物车模型,别发明新比喻
拖放上传网盘和邮箱附件上传区域支持拖放,同时保留「点击选择文件」
Ctrl / Cmd + Z桌面软件的老规矩编辑类功能必须支持撤销快捷键
蓝字下划线链接Web 的第一课链接保持可识别样式,单击直达
放大镜搜索框浏览器和每个内容 App搜索入口用放大镜图标加占位提示文字
红点角标手机通知系统未读提醒用角标数字,别自创闪烁标记

表里没有一项需要用户学,这正是它们的价值。省下来的学习预算,按上一节的尺子,投给你的核心差异点。

本节要点

界面靠习惯用法运转:滚动、双击、拖放没有一个靠直觉,全是学来的。好的习惯用法学一次用一辈子,全世界的产品已经替你把用户教好了(Cooper,《About Face 4》第 13 章)。

能供性是契约:控件长什么样,就得干什么事。画一个按钮等于承诺能点、点了有反应;长得像按钮的东西点不动,赔上的是整页控件的信用。

创新要花在刀刃上:导航和基础操作用最烂大街的模式,创新预算留给核心差异点。重大改变必须显著优秀,给不出回报的新花样就是负担。

给 AI 的话术:「导航、表单、基础按钮一律用最常见的标准模式,不要发明新交互;可点的元素必须长得可点。」抓手讲完四个,下一节进细节:控件本身怎么选。

内容来源:小山学堂「交互工程」专题原创;部分交互原则整理自《About Face 4:交互设计精髓》,能供性概念出自唐纳德·诺曼《设计心理学》。

交互工程 · 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:交互设计精髓》。

交互工程 · 7 / 10

界面会说话:用户怎么理解你的文案

控件选对了,界面还得开口说话。按钮上的两个字、弹窗里的一句话,就是产品和用户的全部对话。微文案是交互的一半:写对了,用户不用想;写错了,控件再标准也白搭。AI 写微文案只有一招,逢事「确定」。

按钮动词确定取消系统语翻译弹窗改造
「确定」是最忙的按钮,也是最没用的

数一数你今天点过多少次「确定」。它出现在删除、提交、退出、覆盖、清空的弹窗里,同一个词替一百种后果背书。问题就出在这:按钮自己不带答案,答案在正文里,用户必须读完整段话,才知道这一下点的是什么。「确定 / 取消」配对是偷懒,把阅读成本推给了用户。

处方是让按钮把后果带在身上:「删除这 3 条」替掉「确定」,「留着」替掉「取消」。这样哪怕正文一个字没读,扫一眼按钮也能安全作答。Cooper 在《About Face 4》第 21 章给功能对话框立过同款规矩:标题要用动词。标题说清在确认什么,按钮说清点了会怎样,两头都不让用户猜。

「在功能对话框的标题中使用动词。」
Alan Cooper,《About Face 4》第 21 章:动词带着动作和后果,名词和「提示」什么都不带。

这条规矩还有一个测试版本:把弹窗正文遮住,只看标题和按钮,能不能安全作答。能,文案就合格;要回头翻正文,就还是「确定 / 取消」的偷懒变体。先看几组对照,找找动词按钮的手感。

场景偷懒版携带后果版
清空购物车确定 / 取消清空 12 件 / 先留着
退出编辑是 / 否保存并退出 / 丢弃改动
解绑手机号继续 / 返回解绑 138****2046 / 不解绑

注意「携带后果版」的另一个副产品:数量和对象一并写进按钮(12 件、138****2046),等于替用户做了最后一次核对。误操作大多发生在「我以为选的是另一批」,按钮把对象报出来,这层误会当场消解。

用户的词,系统的词

按钮之外,第二个重灾区是名词。界面上写着「字段 user_mobile 校验失败」「违反唯一性约束」,这些词一个用户都不认识,它们是从数据库和日志里直接端出来的。Cooper 在第 14 章把根子挖了出来:开发者把数据库的需求放在用户的需求前面,软件成了替 CPU 服务的,用户反倒像在替软件打工。

第 14 章还有一条被引用得很多的原则:出错可能不是程序的问题,但是程序的责任。手机号少一位、用户名重复,都算用户的「错」,但把错误翻译成用户听得懂、改得动的话,是程序分内的事。连菜单名都逃不过这条:Cooper 认为「文件」这个菜单名都是实现模型的词,发票应用的菜单就该叫「发票」,用户管自己的东西叫什么,界面就叫什么。

系统的词它其实想说病根
此操作无法撤销「此操作」指哪个操作?说出来系统视角的指代,用户要自己回忆上一步
Error 422哪里填得不对、怎么改HTTP 状态码是写给开发者的日志(第 2 节的病历)
Session 已过期登录过期了,重新登录就行Session 是实现模型的词,用户的词是「登录」

AI 写界面时特别容易犯这个病:它对着数据结构生成文案,字段叫什么,标签就叫什么。你不拦,数据库就直接上台演讲。下面动手改一个弹窗,三处文案逐条换成人话,看 mock 当场变样。

动手 · 改写一个弹窗,mock 实时变

左边这个删除确认弹窗出自 AI 产出的真实水平:标题「提示」、正文含糊、按钮「确定 / 取消」。右边三处逐条点「说人话」,每改一处,弹窗当场更新,三处全改完再做遮正文测试。

按钮文案改写器 改写 0 / 3
场景:用户勾了 3 封邮件点删除。点右侧每条的「说人话」,左边弹窗实时变
mail.example.com/inbox
提示
确定要执行此操作吗?此操作无法撤销。
取消 确定
标题提示说人话 →
删除这 3 封邮件?
「提示」零信息量。功能对话框标题用动词(第 21 章),动作和数量都摆进标题,用户第一眼就知道在确认什么。
正文确定要执行此操作吗?此操作无法撤销。说人话 →
删除后会进「已删除」,保留 30 天,之后才永久消失。
「此操作」是系统视角的指代,用户要自己回忆刚才点了什么。正文该交代的是后果的细节:东西去哪了、留多久、还救不救得回。
按钮取消 / 确定说人话 →
留着 / 删除这 3 封
「确定 / 取消」把答案全押在正文上。按钮携带各自的后果,危险的那颗换成红色,正文一个字不读也不会点错。
对决 · 哪个弹窗更危险

危险的定义先说清:用户没读懂也会点下去的那种,才叫危险。上一节的狼来了实验演过,用户处理弹窗的平均耗时读不完一行字,文案模糊的弹窗等于在盲点里放了一把刀。下面两个弹窗都在删客户数据,点你敢把用户交给的那个。

模糊文案 vs 明确文案 A/B 对决
点你敢把用户交给的那个,投完揭晓另一个危险在哪
方案 A
crm.example.com/customers
警告
此操作将影响所选数据,确定要继续吗?
取消确定
影响什么数据、影响成什么样,全靠用户脑补
方案 B
crm.example.com/customers
删除这 3 位客户?
会同时删除他们名下的 24 条跟进记录。删除后 30 天内可以在回收站找回。
留着删除这 3 位
对象、连带后果、退路,三样都写在明面上
动手 · 把系统语翻译成人话

按钮练完练名词。下面五条都是 AI 爱直接端上界面的系统语,每条从两个翻译里挑出真正的人话。小心,有个别选项只是把系统语打扮了一下,骨子里还是日志。

系统语翻译题 0 / 5
每条选一个翻译,选错有解释,可以再选
DB_CONN_TIMEOUT
A数据库连接超时(错误码 10060),请稍后重试。
B刚才没连上服务器,你写的内容已存在本机,网络恢复后会自动重试。
打扮过的系统语。「数据库」「错误码」还是实现模型的词,用户不关心哪个环节超时,关心的是我的东西丢没丢、接下来要不要管
对。只字不提数据库,先交代用户最怕的事(内容没丢),再交代要不要行动(不用管,会自动重试)。技术故障自己消化,这是第 2 节三要素的名词版。
字段 user_mobile 校验失败
A手机号少了一位,现在是 10 位,补上就能提交。
B手机号格式不合法,请检查后重新输入。
对。user_mobile 翻成「手机号」只是及格线,说出「少了一位」才算把校验结果翻译完,用户不用数就知道怎么改。
「不合法」加「请检查」,等于让用户自己当校验器再跑一遍。程序明明知道差在哪,说出来是它的责任(第 14 章)。
Session 已过期,Token 失效
A会话凭证已失效,请重新获取访问令牌。
B登录过期了,重新登录就能接着编辑,草稿已经保留。
把 Session 翻成「会话凭证」、Token 翻成「访问令牌」,词是中文了,模型还是实现模型。用户的词典里只有「登录」。
对。用户的词(登录)、明确的出路(重新登录)、最要紧的安抚(草稿还在),一句话三件事全办了。
404 Not Found: /orders/8291
A请求的资源不存在,请确认地址是否正确。
B这笔订单找不到了,可能已被撤销。去「全部订单」里看看,或者联系客服帮你查。
「资源」「地址」都是 HTTP 的词。用户点的是一笔订单,他的世界里没有资源,只有订单。
对。用用户的词(订单)说清现状,给两条出路(去列表、找客服)。404 这种死胡同页面,出路比解释更值钱。
该操作违反唯一性约束
A这个用户名已经有人用了,换一个试试,比如加个数字。
B数据重复,操作被拒绝,请修改后重试。
对。「唯一性约束」是数据库给自己立的规矩,用户眼里这件事叫「名字被人占了」。顺手给条建议(加个数字),把死胡同变成岔路口。
「数据重复」比「唯一性约束」好懂一点,但哪个数据重复、跟谁重复、怎么办,一个都没说。翻译要翻到用户能行动为止。
错误信息三要素,第 2 节讲过了

聊到这里你可能想起第 2 节的错误文案改写器:发生了什么、为什么、怎么办。那套三要素管错误信息的骨架,这一节管的是骨架里每个词的选法,两边拼起来才是完整的文案功。三要素不重教,跳转卡在这。

本章引用 · 状态三件套:loading、空态、错误态错误信息三要素(发生了什么、为什么、怎么办)和三条弱文案的完整改写,第 2 节讲透了,点这里跳过去。

最后一道综合题,把这一节的按钮功和上面的三要素合在一起考。

关文档时还有改动没保存,按钮组怎么配 单选
选错也有解释,选到对的为止
A「确定 / 取消」,正文写明会丢失未保存的改动
B「保存并关闭 / 不保存 / 取消」,三颗按钮各带后果
C「是 / 否」,正文问「要保存吗?」
D「知道了」,告知改动将丢失
本节要点

按钮携带后果:「删除这 3 条」替掉「确定」,「留着」替掉「取消」。验收标准:遮住正文只看标题和按钮,还能安全作答。

用用户的词:Session、字段名、错误码都是实现模型的词,别端给用户(Cooper,《About Face 4》第 14 章)。翻译要翻到用户能行动为止。

出错是程序的责任:用户的输入可以有错,把错讲成听得懂、改得动的话,是程序分内的事。措辞不责备用户,三要素骨架在第 2 节。

给 AI 提需求的话术:「按钮文案写明动作和数量,禁用『确定 / 取消』配对;界面文案禁止出现字段名、错误码、Session 等系统词」。界面细节到此讲完,下一节开始把这些要求翻译给 AI 听。

内容来源:小山学堂「交互工程」专题原创;部分交互原则整理自《About Face 4:交互设计精髓》。

交互工程 · 8 / 10

目标导向:用目标描述需求,别用功能清单

前七节教你识别好交互,这两节教你把要求翻译给 AI 听。第一句翻译心法来自《About Face 4》的开篇方法论:先说清用户是谁、要完成什么,功能让 AI 自己推。给它开清单,你会收到一个柜台;给它讲场景,你会收到一个工具。

目标 vs 任务人物模型情境场景提示词对决
功能清单是怎么骗人的

跟 AI 提需求,多数人的第一反应是列功能:「要有上传、要有表单、要有导出」。清单看着专业,其实把最重要的信息漏掉了:这些功能凑在一起,到底要帮谁完成什么。AI 拿到清单只能逐项照做,每一项都做了,合起来却谁的问题都没解决。

《About Face 4》第 1 章把这件事定成方法论的地基:交互设计先研究用户的目标,再从目标推导功能。Cooper 强调目标和任务是两种东西:目标是对最终状态的预期,任务只是达成目标的中间步骤。目标几十年不变(把报销交出去、让老板知道我干完了),任务隔几年就换一茬(从贴发票到拍照识别)。盯着任务提需求,AI 给你的是旧任务的电子版;盯着目标提需求,它才有机会把任务本身省掉。

「我们把这种直接研究并满足用户目标与需求的方法,叫作目标导向设计。」
Alan Cooper,《About Face 4》第 1 章。先问为谁、为什么,再问做什么。
对决 · 同一个需求,两种提示词

同一个报销工具,左边把功能清单喂给 AI,右边把人物和场景喂给 AI,下面是两份提示词和它们各自换回的界面。先别看判词,自己选:哪边你愿意每月底用一次?

功能清单 vs 目标场景 点选一边
上面是喂给 AI 的提示词,下面是它换回的界面,点你愿意用的那边。
提示词 A · 功能清单
// 逐项列功能 做一个报销页面,要有: 发票上传、金额输入框、 类别下拉、备注、审批人选择、 提交按钮、历史记录表格、 筛选、导出 Excel。
oa.example.com/expense
报销管理
选择文件(未选择)
请输入金额
请选择 ▾
请输入备注
请选择 ▾
提交 重置 导出 Excel
历史记录金额状态
2026-07 打车费¥86.00已通过
2026-06 办公用品¥219.00已通过
提示词 B · 目标场景
// 讲人物和场景 用户是销售小美,每月底攒一叠 出租车发票。目标:三分钟内交完 报销,不打断手头工作。 场景:拖入发票照片,系统自动识别 金额和类别,她扫一眼确认,点提交, 看到「已提交,预计 3 天到账」。
oa.example.com/expense
1 拖入发票2 确认3 完成
把发票照片拖到这里
支持批量,金额和类别自动识别
出租车发票 · ¥86.00
识别为「交通」,点错可改
已识别
确认并提交
提交后可在 5 分钟内撤回

注意一个细节:B 的提示词里一个控件名都没提,产出里的拖放、自动识别、撤回反而都是 A 清单里没有的。功能是从目标里长出来的,你把土壤给够,AI 自己会结果

先练分辨:目标,还是任务

要用目标提需求,先得会认目标。判据就一条,来自第 1 章:目标是终点状态,任务是走向终点的步骤。追问一句「做这个是为了什么」,还答得上来的是任务,答不上来(它本身就是答案)的是目标。六道题,逐条判。

目标还是任务 0 / 6
对每句话追问「为了什么」,然后下判断。
判完六条,这里给总结。
人物模型:为谁设计,就写谁的名字

目标得有主人。第 3 章的工具是人物模型(persona):从真实用户里提炼出一个有名字、有职业、有目标的具体人,设计时所有取舍都拿他当裁判。Cooper 反复敲打的一点是每个界面只伺候一位首要人物:想讨好所有人,界面就会变成什么都摆一点的柜台,谁来了都得先找半天。

小美
销售 · 每月报销一次
目标:三分钟交完报销,别打断我跟单。
首要人物
老周
财务 · 每天审几十单
目标:一眼看出哪单有问题,批量处理没问题的。
次要人物
大刘
总监 · 常年出差
目标:多币种发票别让我自己换算。
次要人物

次要人物的需求可以做,但只能在不挤占首要人物的前提下塞进角落。不信邪的话,下面这个实验演给你看「每个人都照顾一点」的下场。

贪多实验:再照顾一位用户 已照顾 1 人
这是小美的报销首页。每点一次按钮,就往里塞一位新用户的需求。
oa.example.com/expense
报销
审批工作台(老周要的):待审 23 单 · 异常 2 单 · 批量通过 · 驳回原因库
汇率中心(大刘要的):USD 7.18 · EUR 7.82 · JPY 0.048 · 历史汇率曲线
把发票照片拖到这里
团队报表(经理要的):本月部门报销 ¥42,190 · 同比 +18% · 查看明细
确认并提交
发票归档打印(行政要的):按月装订 · 生成封面 · 对接打印机
现在整页只为小美服务:拖入、确认、提交,三分钟目标稳稳达成。
场景:让人物在纸上把产品用一遍

人物和目标就位后,第 4 章的最后一件工具是情境场景:不谈技术、不点名控件,像讲故事一样写这个人从头到尾怎么达成目标。场景一写,哪些功能必须有、哪些纯属想象,自己就浮出来了。这也正是喂给 AI 最好的格式:它读得懂故事,也补得出故事里缺的零件。

下面是一张典型的功能清单,四条全是「要有什么」。逐条点击,看每一条翻译成场景语言长什么样。

场景改写器 0 / 4
点每一条,看功能语翻成场景语。四条翻完,送你一段能直接用的提示词。
1 功能语要有会议室预订功能,支持按时间筛选
2 功能语要有日历视图和列表视图切换
3 功能语要有会议提醒推送设置
4 功能语要有取消预订和改期功能
拼好的场景提示词
用户是行政专员阿哲,每周要给三个团队订会议室,目标是十秒内订到一间能用的,订错了能马上改。走一遍场景:他说出时间和人数,系统只给他看当下订得到的房间;订完顺手看一眼这周的安排;开会前收到一条刚刚好的提醒;同事临时改期,他在原记录上一步改完,不用取消重订。界面的状态(加载、空、错误)和控件选择你来定,以帮阿哲达成十秒目标为准。
留意每条翻译的共同点:主语从「系统」换成了「人」。
考一下:哪句需求喂给 AI 最好
要做一个记账 App 的记一笔页面,哪句需求最好 单选
A要有金额键盘、分类九宫格、日期选择、备注框、保存按钮
B参考主流记账 App 做一个记一笔页面,好看一点
C用户是上班族,目标是排队买咖啡的间隙五秒记完一笔,常记的就那几类,最好两下点完
D页面分三个区块,顶部输入金额,中部选分类,底部大按钮保存
本节要点

目标是终点,任务是步骤:追问「为了什么」还答得上来的是任务。用目标提需求,AI 才有机会把多余的任务整个省掉。

一个界面只伺候一位首要人物:次要人物的需求塞角落,谁都想照顾的界面最后谁都用不顺。

喂 AI 的最佳格式是场景:人物 + 目标 + 从头到尾走一遍的故事,控件和状态让它自己推,你只验收目标达没达成。

模板一句话:「用户是__,目标是__。走一遍场景:__。界面细节你来定,以帮用户达成目标为准。」

内容来源:小山学堂「交互工程」专题原创;目标导向设计、人物模型与情境场景的方法整理自《About Face 4:交互设计精髓》第 1、3、4 章(Alan Cooper 等)。

交互工程 · 9 / 10

把状态机和边界写进提示词

上一节把「要什么」翻译成了目标和场景,这一节补上「别糊弄」的部分。规律很简单:AI 只认真写你提到的状态,没提到的一律按晴天想象。所以状态要列全,边界要说死,防错要写明,这三样合起来就是交互规格。

状态五件套边界轮盘界面姿态规格积木机
为什么 AI 的产出总是「晴天版」

你说「做一个订单列表页」,AI 脑补的画面永远是:网络通畅、数据正好一屏、用户不会点错。它不是偷懒,是你给的描述里只有晴天。本章第 2 节讲过界面的状态三件套(加载、空、错误),第 3 节讲过防错与可逆,那两节教你识别,这一节教你把识别出的要求变成提示词里白纸黑字的条款

跨章引用 · 状态三件套与错误信息三要素加载、空、错误各自长什么样才合格,错误信息怎么说人话,第 2 节已经玩过一遍,这里直接引用它的结论。
动手 · 状态机补全器

下面这段提示词是典型的晴天版,右边的状态板上五个格子还全是问号。点下方的状态芯片,逐个把状态写进提示词,看规格一条条长出来。

状态机补全器 已定义 0 / 5
点一个状态芯片,就往提示词里写进一条对应的规格。
做一个订单列表页,显示订单、金额和状态,顶部可以按状态筛选。// 到这就停笔的话,下面五个状态全部由 AI 自由发挥
加载中
AI 自由发挥
空列表
AI 自由发挥
加载失败
AI 自由发挥
弱网超时
AI 自由发挥
操作成功
AI 自由发挥
「自由发挥」四个字在交互上的意思通常是:白屏、alert、没反应。
对决 · 同一个空列表,两种命运

规格里那句「空态给引导」到底值多少?下面是同一个订单页在新用户眼里的两个版本:左边的提示词没提空态,右边多写了一句。点你觉得留得住新用户的那边。

晴天版 vs 全天候版 点选一边
A · 提示词没提空态
shop.example.com/orders
我的订单
全部 待付款 已完成
暂无数据
B · 多写了一句空态规格
shop.example.com/orders
我的订单
你的订单会出现在这里 下第一单后,物流和发票都在这页管 去逛逛
边界轮盘:AI 最爱糊弄的六种情况

状态列全之后,还有一批藏得更深的边界情况。它们共同的特点是演示时永远碰不到,上线第一周全都来报到。抽一个看看 AI 默认会怎么糊弄,以及提示词里该补哪句。

边界轮盘 已抽 0 / 6
? / 6点下面的按钮,抽第一个边界情况
六种全抽完,你就有了一张边界自查单。
先报姿态,再谈状态密度

状态和边界要写到多细,取决于界面的姿态。《About Face 4》第 9 章把产品分成几种姿态,最常用的两种抄给你。写提示词时先报姿态,AI 对状态密度的拿捏会准很多。

主权姿态(sovereign)
用户整天开着的主力工具:IDE、后台、表格。屏幕归它独占,用户是熟手。状态可以密:骨架屏、行内校验、批量操作的进度、快捷键提示,都值得写进规格。
临时姿态(transient)
用完就走的小工具:扫码、计算器、请假申请。用户每次来都像第一次来。状态要少而醒目:一屏一件事,反馈大而直白,别摆密密麻麻的仪表盘。

姿态报错的典型翻车:给用完就走的请假页配上主权级的筛选器和统计图,或者给整天盯着的监控后台配上大字报式的单屏流程。密度跟着姿态走,姿态跟着使用频率走

拼装 · 交互规格积木机

审美篇的积木机拼的是视觉规格,这一台拼交互规格。五组条款自由开关,右侧预览实时更新;哪组选了「不提」,预览里会标出 AI 将在哪里自由发挥。拼好复制,贴在你生 UI 提示词的末尾。

交互规格积木机
状态全集
空态
网络与错误
危险操作
控件与文案
五组全开就是一份完整的交互验收附件,关掉任何一组,风险都标在预览里。
考一下:防错条款怎么写才对
给「删除项目」写防错要求,哪句最好 单选
A删除前弹两次确认框,第二次加倒计时
B删除立即执行并给撤销入口,回收站保留 30 天
C把删除按钮做小做浅,放进三级菜单
D不用写,AI 知道删除要小心
本节要点

AI 只写你提到的状态:加载、空、错误、弱网、成功,五态点名列全,没点名的就是白屏和 alert 的温床。

边界要说死:列表为空时、网络失败时、重复提交时、权限不足时,每个「时」后面接一句明确要求。

先报姿态再谈密度:主权姿态的界面状态可以密,临时姿态的界面要少而醒目,别拿错剧本。

规格拼好当附件:目标场景(上一节)打头,交互规格(这一节)殿后,两段合起来就是喂 AI 的完整需求。

内容来源:小山学堂「交互工程」专题原创;错误与状态的原则整理自《About Face 4:交互设计精髓》第 15 章,界面姿态整理自第 9 章(Alan Cooper 等)。

1 / 4