能跑通了,然后呢?
上一章练的是看出「哪里丑」,这一章练看出「哪里难用」。AI 交付的应用功能齐全、点哪都有反应,但用起来处处硌手。这一节先立住全章的地基:交互的病比审美的病更隐蔽,然后拿一张理论清单,亲手抓五个现行。
审美的病暴露得快:页面一打开,配色乱、间距挤,三秒钟就皱眉头。交互的病藏得深: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 生成的待办应用「今日清单」,功能齐全,能跑通。它藏着五处不体贴,全在这一屏里。觉得哪里不对就点哪里,点中一处,右边立一张病历卡,写清它违反了清单上哪一条、该怎么改。
找茬清单里有一对容易搞混的病:没反馈是病,反馈过度也是病。Cooper 在第 8 章专门点过名:交互产品爱用不必要的通知向我们炫耀,「文档保存成功!」这种弹窗等着被点掉,除了打断你没有别的作用。下面两个编辑器都做了保存反馈,点你认为更体贴的那个。
本周把订单导出功能收了尾,联调通过,周四已经上线。
下周计划:把导出格式扩到 Excel,预计三个工作日…
本周把订单导出功能收了尾,联调通过,周四已经上线。
数据侧补齐了近 30 天的留存看板,口径和产品确认过。
下周计划:把导出格式扩到 Excel,预计三个工作日…
找茬清单看完,回想一下你天天在用的软件,包括你自己让 AI 做的那些。六种不体贴,选一个你被折磨得最狠的,投完看看别人都在忍什么。
找茬清单有了,还差一个使用姿势。审美验收看截图就行,交互验收要动手走流程,而且要走三遍,每遍换一个身份。
| 第几遍 | 扮演谁 | 怎么走 | 抓什么病 |
|---|---|---|---|
| 第一遍 | 老用户 | 顺着理想路径把主流程走完 | 存了没动静、问个没完这类日常摩擦 |
| 第二遍 | 倒霉用户 | 故意犯错:删一条、断个网、输错格式、连点两次提交 | 报错像甩锅、删了就没、一崩全丢 |
| 第三遍 | 新用户 | 清掉数据从零开始,第一次打开的每一屏都停下来看 | 空白空态、下一步全靠猜 |
第二遍和第三遍最容易被省略,AI 的病恰恰全堆在那里。demo 给你演示的永远是第一遍,网络流畅、数据现成、路径笔直。你替用户把另外两遍走了,病就在上线前被抓住。
走的时候手边放着那张体贴清单,每停一屏问一句:这一屏有预见吗?会通知吗?在甩锅吗?备好退路了吗?在问多余的问题吗?会帮我兜住低级错误吗?六个问号过完,这一屏才算验收完。
交互的病更隐蔽:审美问题三秒暴露,交互问题要等到删错数据、断网、第一次打开才发作,往往是用户替你发现的。
能跑通只是及格线:AI 默认交付的交互停在「能跑通」,惹怒用户的多数时候是不体贴,缺功能反倒排在后面(Cooper,《About Face 4》第 8 章)。
体贴清单反过来就是找茬清单:有预见、会通知、不甩锅、自信但备好退路、不问多余的问题、帮你避免低级错误。六条对着 AI 产出逐条过。
验收交互要用,别只看:把流程走一遍,把坏情况都试一遍:删一条、断个网、开个新账号。接下来四节把找茬的抓手逐个拆开,先从状态三件套开始。
内容来源:小山学堂「交互工程」专题原创;部分交互原则整理自《About Face 4:交互设计精髓》。
状态三件套:loading、空态、错误态
AI 生成的界面默认只有一种状态:数据齐全、网络流畅、一切正常。可用户遇到的头一屏常常是另外三种:没数据、在等待、出错了。这三种非正常时刻恰恰是体验分水岭,这一节把三件套逐个拆开,每件配一局 A/B 对决。
给 AI 一句「做个笔记应用」,它交出来的界面永远预装着几条漂亮的假数据。可真实用户的第一屏没有数据,第一次搜索可能超时,第一次同步可能失败。这三种时刻怎么表现,AI 不会主动想,你不提要求,它就一律敷衍。
| 状态 | AI 默认的敷衍版 | 该有的样子 |
|---|---|---|
| 空态 | 一片空白,或一行灰字「暂无数据」 | 教下一步:说明这里是干嘛的,给一个动作入口,最好带示例 |
| loading | 一个干转的圈,转多久都是那个样 | 说进行到哪:内容形状先出来,进度看得见 |
| 错误态 | alert 弹一串代码,或者干脆没反应 | 说人话给出路:发生了什么、为什么、怎么办 |
上一节的体贴清单在这里全用得上:空态考的是有预见,loading 考的是会及时通知,错误态考的是不因自己的问题烦你。三件套一件件来。
Cooper 在《About Face 4》第 8 章讲乐于助人的软件时打过一个比方:向店员问路,好店员除了指路还会顺手告诉你更划算的选择。空态就是用户在问路:我到了,然后呢?一片空白等于店员耸了耸肩。
好空态回答三个问题:这里是干嘛的、我现在能做什么、做出来大概长什么样。前两个用一句话加一个按钮解决,第三个给示例数据或模板。下面两个笔记应用都是第一次打开,点你认为更体贴的那个。
体贴的软件会及时通知:用户关心的进展要让他看得见。一个干转的圈只传达了一个信息「在忙」,转到第五秒,用户开始怀疑是卡死了。骨架屏先把内容的形状画出来,等于告诉用户马上到了、到了以后长这样;再配一条进度说明,焦虑就压下去大半。
等多久该给什么反馈,那套三档决策心理学篇讲过了,这里放一张跳转卡,不重教。
跨章引用 · 等待心理学:难受的从来不是那 5 秒0.1 秒 / 1 秒 / 10 秒三档反馈决策、预期管理为什么比提速管用,心理学篇第 2 节讲透了,点这里跳过去。Cooper 在《About Face 4》第 15 章对错误信息的立场很硬:老式错误对话框要么责备用户,要么拿技术故障甩锅,多数根本不该出现。真到了必须说的时候,向用户交代清楚三件事:发生了什么、为什么会这样、现在怎么办。三样齐了才算说人话,缺了「怎么办」的错误信息等于把用户堵在死胡同里。
还有一条底线:措辞不能责备用户。第 15 章的原则是用户视角里没有过错,把「您输入了非法字符」换成「这里只支持字母和数字」,信息一样,态度天差地别。下面两个同步失败的提示,点更体贴的那个。
upload.ts:214 (code 10060)
三要素公式抄下来还不够,得练手感。下面三条错误文案都出自 AI 产出的真实水平,逐条点「改写」,看弱文案怎么按三要素重写,顺便记住每条弱在哪。
三件套讲完,拿一张自查表收口。想着你最近让 AI 生成的那个页面,下面五种状态,做了哪种就勾哪种,覆盖率当场出分。这张表也是给 AI 提需求的模板:第 9 节会教你把它整张写进提示词。
非正常时刻是分水岭:AI 默认只做「一切正常」,空态、loading、错误态三件套你不写进需求,它就全敷衍。
空态要教下一步:说明这里是干嘛的、给动作入口、给示例。空态是新用户的第一屏,一片白等于把人往外推。
loading 要说进行到哪:骨架屏先给内容形状,配进度说明。等待反馈的三档时机在 psy-2,不重教。
错误态三要素:发生了什么、为什么、怎么办,措辞不责备用户(Cooper,《About Face 4》第 15 章)。更进一步的思路是让错误压根发生不了,下一节讲防错与可逆。
内容来源:小山学堂「交互工程」专题原创;部分交互原则整理自《About Face 4:交互设计精髓》。
防错与可逆:让用户敢点
上一节教错误怎么说,这一节往前挪一步:让错误压根发生不了,发生了也能一键回头。AI 生成的应用最爱用确认弹窗当保险,但那是最弱的一道防线,你自己动手删两条数据就明白了。
Cooper 在《About Face 4》第 15 章有个立场:从用户的心理模型看,没有「错误操作」这回事。人用软件就是在探索,点点这个、试试那个,走进死胡同再退出来,这是学会一个工具的正常方式。把探索标记成错误、动不动弹框拦截的软件,用户会越用越缩手缩脚。
他给撤销打的比方很形象:人进山洞探险,洞口挂一条随时能爬回地面的绳梯,胆子就大得多。撤销就是那条绳梯,它救的次数不多,但它挂在那里,用户才敢往深处走。
Alan Cooper,《About Face 4》:与其用弹窗要用户确认,先自信地执行,再备好撤销。
敢点的心理机制(防御心理、控制感)在心理学篇有一整节,这里放跳转卡,不重教。
跨章引用 · 防御心理:用户不是不会用,是不敢用可逆性怎么给用户控制感、为什么误触一次就再也不敢碰,心理学篇第 6 节讲透了,点这里跳过去。第 15 章的排序很清楚:错误信息写得再好,也比不过让错误发生不了。检查 AI 产出时先看这三板斧用上没有,三样都便宜,AI 也都会做,前提是你提了。
三板斧防住大半,剩下的交给可逆性。于是问题来了:真到删除这种动作上,AI 最常给的方案是确认弹窗,它到底顶不顶用?做个实验。
左右两个通讯录,数据一样。左边用 AI 最爱的确认弹窗,右边用立即删除 + 可撤销 toast。请你两边各删一条,然后试着把删掉的救回来,体感会替你下结论。
产品 · 138****2201删除
设计 · 139****8842删除
运营 · 137****0917删除
产品 · 138****2201删除
设计 · 139****8842删除
运营 · 137****0917删除
你可能不服:弹窗好歹拦了一下,怎么就最弱?Cooper 的解释是习惯化:在常规位置反复出现的确认框,用户很快就看也不看地点掉,等真正的危险到来,手指比脑子快。这个实验 20 秒,亲自验证一次。
三板斧加可逆性都齐了,上手改造。三个场景全出自 AI 产出的常见毛病,每个场景选一种最对症的防错手段,选错有解释,选到对的为止。
用户在探索,别当犯错处理:撤销是洞口的绳梯,它挂在那里,用户才敢往深处走(Cooper,《About Face 4》第 15 章)。
防错三板斧:禁用不可用项并说明、危险操作拉开距离、默认值选最安全的。报错的最高境界是无错可报。
确认弹窗是最弱的防线:狼来了效应,常规弹窗被无脑点掉,真危险来时它早已失效。做,不要问,然后备好撤销。
给 AI 提需求的话术:「删除立即生效,弹出可撤销的 toast,保留 5 秒」比「删除要有确认」产出好一个档次。流程里的多余步骤怎么砍,下一节讲。
内容来源:小山学堂「交互工程」专题原创;部分交互原则整理自《About Face 4:交互设计精髓》。
流程克制:每多一步掉一批人
上一节管住了危险按钮,这一节看整条路:用户从进来到办完事,中间有多少步在伺候软件而没在办他的事。AI 生成的流程有个通病:太完整。你来当一回流程审计员,把一个五步注册砍到两步。
《About Face 4》第 12 章把用户的操作分成两类。一类直接推进目标,比如开车上班这件事里的踩油门、打方向。另一类在伺候工具:开车库门、热车、等红灯,这些动作一步也没让你离办公室更近。第二类,Cooper 叫它负担(excise)。
软件里的负担长这样:你想发一条动态,先登录、找入口、点掉引导气泡、翻过一个升级弹窗。发动态是目标,前面四步都是税。Cooper 把这笔税拆成四种:
Alan Cooper 把这句列为设计原则,还补了一刀:界面里的负担,是用户对软件不满的头号原因。
判据只有一条,很好记:把这一步删掉,用户的目标还能达成吗?能,它就是负担。带着这条判据,来看 AI 交付的流程。
让 AI 生成一个注册页,它大概率给你一个五步向导:邮箱、手机验证、完善资料、兴趣标签、确认提交,一步不少。它在训练数据里见过太多「规范」的注册流程,就把最全的那套端给你,每一步单看都有道理,合起来是一条收税走廊。
Cooper 对向导这种形式本来就没好话:向导把过程写死成一问一答,用户很快学会只点「下一步」,脑子全程没参与。他给的替代方案是把活直接干完,用合理的默认值兜底,事后允许用户改。放到 AI 时代,这条要由你写进需求里,它自己想不起来。
砍之前先认脸。第 12 章点名的负担源里,有三个在 AI 产出里出现得最密,点开每张卡看病征和给 AI 的话术:
下面是一个 AI 生成的会员注册流程,五步俱全,右边的漏斗按每步 78% 的通过率算给你看:1000 个人进门,走完五步只剩 289 个。请你拿着那条判据逐步清点,把没在推进目标的步骤砍掉。砍对了漏斗上涨,砍错了它会告诉你为什么砍不得。
注册只是最好算的例子。下单、发布、报名、提交工单,凡是有流程的地方都有这只漏斗。拖动滑块改步骤数,看完成的人怎么变。流失率取 22% 只是演示口径,真实数字因产品而异,但方向从来一致:步骤和留存是反着走的。
砍步骤有理论撑腰。《About Face 4》第 11 章讲「流」(flow):心理学家米哈里·契克森米哈赖提出的概念,人全神贯注做事时会进入一种高产出的状态,察觉不到时间。Cooper 的推论:交互设计的任务是保住这个状态,好的交互应该「透明」,用户直接面对自己要办的事,感觉不到软件的存在。
流的天敌是打断。每多一步、每弹一个框、每换一个页面,用户都要从状态里出来一次,回去要重新酝酿。这也解释了漏斗为什么掉人:掉的多半就发生在被打断的那一下,用户抬头一想「我为什么要填这个」,就把页面关了。
Alan Cooper,《About Face 4》第 11 章。同章还有一条更直接的原则:不要愚蠢地打断进程。
验收 AI 产出时的走查法:亲手把核心流程从头走一遍,每一步问两个问题。第一,这步删掉目标还能达成吗?第二,这步有没有把我从状态里拽出来?两个问题都过关的流程,才配上线。
拿一个外卖 App 的下单流程练练手感。四步里藏着一步典型负担,用判据挑出来。
负担的判据一句话:删掉这一步,用户的目标还能达成吗?能,就是负担(Cooper,《About Face 4》第 12 章)。认知、记忆、视觉、体力,四种税都要清。
三大负担源认清脸:导航(换页翻菜单)、打断(弹框和报告)、重复输入(报软件已知的事)。AI 的产出三样俱全,等你点名来砍。
步骤和留存反着走:五步注册砍到两步,走完的人翻一倍。掉人的位置多半在被打断的那一下,好流程让人待在状态里(第 11 章编配与流)。
给 AI 的话术:「注册只收邮箱和密码,其余资料进产品后再补;反馈用页内轻提示;填过的信息要记住。」流程管住了,下一节看 AI 发明的新交互怎么坑人。
内容来源:小山学堂「交互工程」专题原创;部分交互原则整理自《About Face 4:交互设计精髓》。
习惯用法:别让 AI 发明新交互
流程砍利索了,还有一种病藏得更深:AI 有时会发明看着新颖、没人会用的交互。这一节讲两个词,习惯用法(idiom)和能供性(affordance),学完你能一眼认出哪个控件在装创新,还能说清为什么用户学不会。
《About Face 4》第 13 章把界面分成三种路数:按程序内部结构长的(实现中心),靠画得像现实物件的(隐喻),还有靠学的(习惯用法)。Cooper 的立场很干脆:现代图形界面基本靠第三种撑着。窗口、滚动条、下拉菜单、超链接,没有一个靠直觉,全是用户一个个学来的。
他举的例子是鼠标:没有人看一眼鼠标就知道它控制屏幕上的光标,得有人教,或者自己摸索半分钟。但学会之后一辈子忘不掉。滚动、双击、拖放、下拉刷新、左滑删除,都是这样:学一次,到处用。
Alan Cooper,《About Face 4》第 13 章。
这条对做产品的人来说是天大的便宜:全世界的产品已经替你把用户教好了,你直接用现成的习惯用法,学习成本为零。麻烦在于 AI 有时不领这个情,它把训练数据里的花样拼一拼,就能发明出一个谁也没学过的控件。
顺手把第二条路数也埋了。图形界面刚火起来那几年,功劳被记在「画得像」头上:桌面画成桌面、文件夹画成文件夹,用户看图识意。Cooper 在第 13 章不买账:隐喻界面让用户在图标和功能之间连线猜谜,简单功能还能猜,稍微抽象一点就画不出来了。「批量重命名 50 个文件」,你打算画成什么?
更麻烦的是隐喻会赖着不走。用户学会基本操作之后,那些拟真的皮革纹理、翻页动画就从帮手变成拖累,占地方、限制交互,还把机械时代的规矩带进来。苹果自己也认了:iOS 6 上那本皮质日历,到 iOS 7 被清得干干净净。
所以习惯用法赢在轻装:它没打算让你猜,直接让你学,学起来还快。下面看看这套词汇是怎么搭起来的。
第 13 章里有一张倒金字塔,解释习惯用法为什么容易学:整套图形界面的交互词汇分三层,越往下越少、越简单。点每一层看它装着什么。
用户能把这套词汇从别的产品搬进你的产品,靠的是心智模型:他默认你的界面和他用过的一万个界面遵守同一套规则。模型对不上时用户有多懵,心理学篇讲过了,放跳转卡,不重教。
跨章引用 · 心智模型:用户脑子里那张图用户拿着旧产品的模型来套你的界面,错配一次就迷路一次。模型从哪来、错配怎么修,心理学篇第 7 节讲透了,点这里跳过去。下面是 AI 生成的云盘设置页,功能都能跑,界面也不丑,但里面藏着三个自作聪明的发明,每一个都打破了一条学好的习惯用法。把它们逐个点出来,点中会给判词。
顺便解释一下 AI 为什么会干这种事。它的训练数据里什么都有:正经产品、获奖概念稿、设计社区里炫技的作品集。让它「做个有设计感的设置页」,它就把几种来源的花样搅在一起端出来,语法上都通,规则上互相打架。
它还有一样东西永远学不到:你的用户学过什么。习惯用法长在用户的经验里,AI 看得见控件长什么样,看不见三十年的教学史。所以这道关只能你来把:凡是需要配一行小字解释怎么用的控件,都值得怀疑。
第二个词来自诺曼的《设计心理学》:能供性(affordance),东西的样子透露它怎么用。Cooper 在第 13 章把定义修得更锋利:能供性管的是你以为它能干什么,和它实际能干什么分开算。门旁边装个小圆钮,人人都当它是门铃,哪怕按下去触发的是别的,它的能供性仍然是门铃。
经典例子是门把手:门上横着装一根金属杆,形状高度都在喊「拉我」,结果这扇门要推。于是店家贴上「推」的标字,没用,人们照拉。手能读懂的信号,比字大声。
在屏幕上,这件事变成一纸契约:你画一个按钮,就是向用户承诺它能点、点了有反应、干的是标签上写的事。毁约的控件,Cooper 叫它诱饵式能供性(bait-and-switch)。
他还点了扁平化的名:早年的界面靠阴影和立体感喊「来按我」,扁平风把这些全刮掉了,视觉上是清爽,能供性跟着受了伤。所以扁平界面里可点的元素更要守纪律:同一种颜色、同一种形状,专门留给能点的东西,谁都别客串。
下面两个会员中心,同一块升级卡片两种画法,点你认为守约的那个。
能供性有个零成本的检验法:把界面截图发给一个没用过它的人,只给 5 秒,让他指出哪里能点。他指错的每一处,都是一起能供性事故。这个测试对 AI 生成的界面尤其管用,因为 AI 画界面时压根没想过这个问题。
讲到这里容易得出一个错误结论:交互永远抄现成的,谁创新谁死。Cooper 给的尺子精确得多:
Alan Cooper,《About Face 4》:让用户重学一遍的改动,收益必须大到肉眼可见。
导航、保存、表单这些基础操作,用户每天在别的产品里练几百遍,你换花样等于逼人重新学走路,而且给不出像样的回报,这里就该用最烂大街的模式。创新预算留给核心差异点:你的产品独有的那个能力,那里没有现成习惯用法可抄,做好了轮到别人抄你。
用这把尺子量一道题。AI 给一个批量文件管理工具加了四个「亮点设计」,哪个创新花对了地方?
最后备一张速查表。下面这些习惯用法,用户早在别的产品里学到滚瓜烂熟,你的产品照抄就是白得的易用性。验收 AI 产出时对着查,右列的话术可以整段抄进提示词。
| 习惯用法 | 用户在哪学的 | 给 AI 的默认要求 |
|---|---|---|
| 下拉刷新 | 每一个信息流 App | 列表刷新用下拉,别自创刷新浮层 |
| 左滑删除 | 系统邮件、微信聊天列表 | 列表项删除用左滑或明确按钮,别藏进长按菜单 |
| 底部导航栏 | 手机 App 的标配位 | 主导航用底部标签栏,图标配文字,3 到 5 个 |
| 购物车 | 电商三十年的教学成果 | 多选加结算沿用购物车模型,别发明新比喻 |
| 拖放上传 | 网盘和邮箱附件 | 上传区域支持拖放,同时保留「点击选择文件」 |
| Ctrl / Cmd + Z | 桌面软件的老规矩 | 编辑类功能必须支持撤销快捷键 |
| 蓝字下划线链接 | Web 的第一课 | 链接保持可识别样式,单击直达 |
| 放大镜搜索框 | 浏览器和每个内容 App | 搜索入口用放大镜图标加占位提示文字 |
| 红点角标 | 手机通知系统 | 未读提醒用角标数字,别自创闪烁标记 |
表里没有一项需要用户学,这正是它们的价值。省下来的学习预算,按上一节的尺子,投给你的核心差异点。
界面靠习惯用法运转:滚动、双击、拖放没有一个靠直觉,全是学来的。好的习惯用法学一次用一辈子,全世界的产品已经替你把用户教好了(Cooper,《About Face 4》第 13 章)。
能供性是契约:控件长什么样,就得干什么事。画一个按钮等于承诺能点、点了有反应;长得像按钮的东西点不动,赔上的是整页控件的信用。
创新要花在刀刃上:导航和基础操作用最烂大街的模式,创新预算留给核心差异点。重大改变必须显著优秀,给不出回报的新花样就是负担。
给 AI 的话术:「导航、表单、基础按钮一律用最常见的标准模式,不要发明新交互;可点的元素必须长得可点。」抓手讲完四个,下一节进细节:控件本身怎么选。
内容来源:小山学堂「交互工程」专题原创;部分交互原则整理自《About Face 4:交互设计精髓》,能供性概念出自唐纳德·诺曼《设计心理学》。
控件选对了吗:单选、多选、开关与下拉
前面四节看的是流程和状态,这一节钻进界面最小的零件。控件是用户和产品之间的通用语言,用错一个,用户就要多点一次、多猜一次。选用规则四句话就讲完,AI 不知道这四句,你得替它把关。
让 AI 生成一张表单,控件八成是随手抓的:三个选项也塞进下拉,单选多选看心情,再顺手给每个动作都配一个弹窗。这些毛病单看都不大,叠在一张表单里,用户每一步都在多花力气。
| 典型病 | 现场 | 用户多付的成本 |
|---|---|---|
| 三个选项也用下拉 | 发票类型就三种,藏进「请选择」里 | 多点一次才能看见选项,选项之间没法直接比较 |
| 单选多选随缘 | 互斥的选项给了复选框,能多选的给了单选钮 | 勾出矛盾数据,或者想多选却选不了,只能撞一次错 |
| 什么都爱弹框 | 保存成功弹一个,切换页签也弹一个 | 每个弹窗都是一次打断,手在页面上,心思被拽走 |
Cooper 在《About Face 4》第 21 章把这些零件逐个讲过一遍,规则清楚得能背下来。这一节先背口诀,再连连看练手,最后把规则抄成提示词。
第 21 章把选择类控件的分工划得很清楚。单选钮的名字来自老式汽车收音机:司机按下一个电台键,前一个键自动弹起,眼睛不用离开路面。互斥、必选一个,就是它的地盘。四句口诀对应四种控件,先认脸再认规则。
Alan Cooper,《About Face 4》第 21 章:每种控件都有自己的分工,让控件干别人的活,用户就要重学一遍。
口诀背完练手感。下面六个场景都出自真实表单,每个场景从四种控件里挑一个最对症的。选错有纠错判词,可以继续选到对为止。
四种控件里最常被 AI 滥用的就是下拉,值得单独算笔账。第 21 章讲列表控件时点破了它的先天缺陷:初始状态只显示上次选中的条目,其余选项全部不可见。选项看不见,用户就没法比较,也预估不了这一步要花多久。下面是同一个外卖下单页,点你愿意用的那个。
平铺方案还偷偷用上了一招:把「立即送出」设成默认值。选项可见加默认合理,多数用户一秒通过这一步,这正是上一章防错三板斧里「默认值兜底」在控件层的样子。
第 21 章给对话框的定位讲了一个厨房比喻:应用是厨房,对话框是食品储藏室,它推动情节,但当不了主角。主要的交互操作要放在主窗口里,对话框只装主流程之外的东西:危险的、少用的、需要把一个主题的信息集中到一处的。还有一条容易忽视的细节:功能对话框的标题要用动词,让用户一眼知道自己在确认什么。
AI 的习惯正相反:成功也弹、提示也弹、确认也弹。下面五个场景,逐个判断该弹还是不该弹。
规则记在你脑子里没用,要写进给 AI 的需求里。先收一张速查表,再把下面那段约束话术一键复制,生成任何带表单的界面时贴在提示词末尾。
| 控件 | 什么时候用 | AI 常见误用 |
|---|---|---|
| 单选钮 | 互斥、必选一个、选项一屏放得下 | 该用它的地方给了下拉或复选框 |
| 复选框 | 可多选,或单个的「勾 / 不勾」标记 | 互斥选项也给复选框,勾出矛盾数据 |
| 开关 | 二选一且立即生效的设置项 | 用在要跟表单一起提交的字段上 |
| 下拉 | 选项超过一屏,屏幕装不下的妥协 | 三五个选项也藏进去,凭空加一次点击 |
| 对话框 | 主流程之外:危险、少用、集中一个主题 | 成功提示、常规确认也弹,逢事必弹 |
第 21 章还点名了一种要避开的控件:状态切换按钮。音乐播放器那颗「播放 / 暂停」合体键就是代表,图标显示三角时你点它,音乐响起,图标变成两道竖条。Cooper 认为它的毛病出在哪?
四句口诀:互斥选一个用单选钮,可勾多个用复选框,立即生效用开关,选项超一屏才考虑下拉(Cooper,《About Face 4》第 21 章)。
下拉是妥协方案:它初始只露一项,看选项就要付点击。三五个选项先平铺,配上合理默认值,多数用户一秒通过。
对话框是打断:主交互放主窗口,弹窗只装主流程之外的危险、少用、需要集中的功能;成功提示用非模态轻反馈,功能对话框标题用动词。
把规则写给 AI:速查表的约束话术贴进提示词,控件就不再靠 AI 掷骰子。控件说对了,文案也得说人话,下一节讲界面怎么开口。
内容来源:小山学堂「交互工程」专题原创;部分交互原则整理自《About Face 4:交互设计精髓》。
界面会说话:用户怎么理解你的文案
控件选对了,界面还得开口说话。按钮上的两个字、弹窗里的一句话,就是产品和用户的全部对话。微文案是交互的一半:写对了,用户不用想;写错了,控件再标准也白搭。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 当场变样。
左边这个删除确认弹窗出自 AI 产出的真实水平:标题「提示」、正文含糊、按钮「确定 / 取消」。右边三处逐条点「说人话」,每改一处,弹窗当场更新,三处全改完再做遮正文测试。
危险的定义先说清:用户没读懂也会点下去的那种,才叫危险。上一节的狼来了实验演过,用户处理弹窗的平均耗时读不完一行字,文案模糊的弹窗等于在盲点里放了一把刀。下面两个弹窗都在删客户数据,点你敢把用户交给的那个。
按钮练完练名词。下面五条都是 AI 爱直接端上界面的系统语,每条从两个翻译里挑出真正的人话。小心,有个别选项只是把系统语打扮了一下,骨子里还是日志。
聊到这里你可能想起第 2 节的错误文案改写器:发生了什么、为什么、怎么办。那套三要素管错误信息的骨架,这一节管的是骨架里每个词的选法,两边拼起来才是完整的文案功。三要素不重教,跳转卡在这。
本章引用 · 状态三件套:loading、空态、错误态错误信息三要素(发生了什么、为什么、怎么办)和三条弱文案的完整改写,第 2 节讲透了,点这里跳过去。最后一道综合题,把这一节的按钮功和上面的三要素合在一起考。
按钮携带后果:「删除这 3 条」替掉「确定」,「留着」替掉「取消」。验收标准:遮住正文只看标题和按钮,还能安全作答。
用用户的词:Session、字段名、错误码都是实现模型的词,别端给用户(Cooper,《About Face 4》第 14 章)。翻译要翻到用户能行动为止。
出错是程序的责任:用户的输入可以有错,把错讲成听得懂、改得动的话,是程序分内的事。措辞不责备用户,三要素骨架在第 2 节。
给 AI 提需求的话术:「按钮文案写明动作和数量,禁用『确定 / 取消』配对;界面文案禁止出现字段名、错误码、Session 等系统词」。界面细节到此讲完,下一节开始把这些要求翻译给 AI 听。
内容来源:小山学堂「交互工程」专题原创;部分交互原则整理自《About Face 4:交互设计精髓》。
目标导向:用目标描述需求,别用功能清单
前七节教你识别好交互,这两节教你把要求翻译给 AI 听。第一句翻译心法来自《About Face 4》的开篇方法论:先说清用户是谁、要完成什么,功能让 AI 自己推。给它开清单,你会收到一个柜台;给它讲场景,你会收到一个工具。
跟 AI 提需求,多数人的第一反应是列功能:「要有上传、要有表单、要有导出」。清单看着专业,其实把最重要的信息漏掉了:这些功能凑在一起,到底要帮谁完成什么。AI 拿到清单只能逐项照做,每一项都做了,合起来却谁的问题都没解决。
《About Face 4》第 1 章把这件事定成方法论的地基:交互设计先研究用户的目标,再从目标推导功能。Cooper 强调目标和任务是两种东西:目标是对最终状态的预期,任务只是达成目标的中间步骤。目标几十年不变(把报销交出去、让老板知道我干完了),任务隔几年就换一茬(从贴发票到拍照识别)。盯着任务提需求,AI 给你的是旧任务的电子版;盯着目标提需求,它才有机会把任务本身省掉。
Alan Cooper,《About Face 4》第 1 章。先问为谁、为什么,再问做什么。
同一个报销工具,左边把功能清单喂给 AI,右边把人物和场景喂给 AI,下面是两份提示词和它们各自换回的界面。先别看判词,自己选:哪边你愿意每月底用一次?
支持批量,金额和类别自动识别
识别为「交通」,点错可改 已识别
注意一个细节:B 的提示词里一个控件名都没提,产出里的拖放、自动识别、撤回反而都是 A 清单里没有的。功能是从目标里长出来的,你把土壤给够,AI 自己会结果。
要用目标提需求,先得会认目标。判据就一条,来自第 1 章:目标是终点状态,任务是走向终点的步骤。追问一句「做这个是为了什么」,还答得上来的是任务,答不上来(它本身就是答案)的是目标。六道题,逐条判。
目标得有主人。第 3 章的工具是人物模型(persona):从真实用户里提炼出一个有名字、有职业、有目标的具体人,设计时所有取舍都拿他当裁判。Cooper 反复敲打的一点是每个界面只伺候一位首要人物:想讨好所有人,界面就会变成什么都摆一点的柜台,谁来了都得先找半天。
次要人物的需求可以做,但只能在不挤占首要人物的前提下塞进角落。不信邪的话,下面这个实验演给你看「每个人都照顾一点」的下场。
人物和目标就位后,第 4 章的最后一件工具是情境场景:不谈技术、不点名控件,像讲故事一样写这个人从头到尾怎么达成目标。场景一写,哪些功能必须有、哪些纯属想象,自己就浮出来了。这也正是喂给 AI 最好的格式:它读得懂故事,也补得出故事里缺的零件。
下面是一张典型的功能清单,四条全是「要有什么」。逐条点击,看每一条翻译成场景语言长什么样。
目标是终点,任务是步骤:追问「为了什么」还答得上来的是任务。用目标提需求,AI 才有机会把多余的任务整个省掉。
一个界面只伺候一位首要人物:次要人物的需求塞角落,谁都想照顾的界面最后谁都用不顺。
喂 AI 的最佳格式是场景:人物 + 目标 + 从头到尾走一遍的故事,控件和状态让它自己推,你只验收目标达没达成。
模板一句话:「用户是__,目标是__。走一遍场景:__。界面细节你来定,以帮用户达成目标为准。」
内容来源:小山学堂「交互工程」专题原创;目标导向设计、人物模型与情境场景的方法整理自《About Face 4:交互设计精髓》第 1、3、4 章(Alan Cooper 等)。
把状态机和边界写进提示词
上一节把「要什么」翻译成了目标和场景,这一节补上「别糊弄」的部分。规律很简单:AI 只认真写你提到的状态,没提到的一律按晴天想象。所以状态要列全,边界要说死,防错要写明,这三样合起来就是交互规格。
你说「做一个订单列表页」,AI 脑补的画面永远是:网络通畅、数据正好一屏、用户不会点错。它不是偷懒,是你给的描述里只有晴天。本章第 2 节讲过界面的状态三件套(加载、空、错误),第 3 节讲过防错与可逆,那两节教你识别,这一节教你把识别出的要求变成提示词里白纸黑字的条款。
跨章引用 · 状态三件套与错误信息三要素加载、空、错误各自长什么样才合格,错误信息怎么说人话,第 2 节已经玩过一遍,这里直接引用它的结论。下面这段提示词是典型的晴天版,右边的状态板上五个格子还全是问号。点下方的状态芯片,逐个把状态写进提示词,看规格一条条长出来。
规格里那句「空态给引导」到底值多少?下面是同一个订单页在新用户眼里的两个版本:左边的提示词没提空态,右边多写了一句。点你觉得留得住新用户的那边。
状态列全之后,还有一批藏得更深的边界情况。它们共同的特点是演示时永远碰不到,上线第一周全都来报到。抽一个看看 AI 默认会怎么糊弄,以及提示词里该补哪句。
状态和边界要写到多细,取决于界面的姿态。《About Face 4》第 9 章把产品分成几种姿态,最常用的两种抄给你。写提示词时先报姿态,AI 对状态密度的拿捏会准很多。
姿态报错的典型翻车:给用完就走的请假页配上主权级的筛选器和统计图,或者给整天盯着的监控后台配上大字报式的单屏流程。密度跟着姿态走,姿态跟着使用频率走。
审美篇的积木机拼的是视觉规格,这一台拼交互规格。五组条款自由开关,右侧预览实时更新;哪组选了「不提」,预览里会标出 AI 将在哪里自由发挥。拼好复制,贴在你生 UI 提示词的末尾。
AI 只写你提到的状态:加载、空、错误、弱网、成功,五态点名列全,没点名的就是白屏和 alert 的温床。
边界要说死:列表为空时、网络失败时、重复提交时、权限不足时,每个「时」后面接一句明确要求。
先报姿态再谈密度:主权姿态的界面状态可以密,临时姿态的界面要少而醒目,别拿错剧本。
规格拼好当附件:目标场景(上一节)打头,交互规格(这一节)殿后,两段合起来就是喂 AI 的完整需求。
内容来源:小山学堂「交互工程」专题原创;错误与状态的原则整理自《About Face 4:交互设计精髓》第 15 章,界面姿态整理自第 9 章(Alan Cooper 等)。