状态三件套: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:交互设计精髓》。