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