状态设计 · 同一界面四种状态

同一块"消息列表",点右侧按钮切换 正常 / 加载 / 空 / 错误 四种状态。
下方还有"发消息状态机"小演示,跑一遍微信秒回的流转。
消息 正常
消息列表
发消息状态机(点发送试试)
输入消息…
发送

四种状态切换

正常
加载中
错误

发消息状态机

点"发送"→ 气泡变灰出沙漏(发送中)→ 自动变成功;再发一次走"失败 → 点重试 → 成功"的救回路。

只画正常态是新手通病。真实 APP 每天都有加载、空、错误——每种都要"有说明 + 有出路"。上面四态,只有正常态是"数据都在",其余三种都不该让用户对着白屏干瞪眼。