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