设计稿永远是理想状态：图片加载完了、内容填满了、操作都成功。但真实用户遇到的常常是另外几种情况——加载中、没数据、提交失败。
这些"非正常状态"处理得糙，网站给人的感觉就是不专业。
加载状态
等待不可避免，但可以让人知道在等：
- 首屏用骨架屏：显示灰色占位块，比转圈更让人安心
- 局部操作用按钮内加载：按钮变成"提交中"，同时禁用防止重复点
- 超过一秒才显示加载提示：一闪而过的 loading 反而显得卡顿
- 图片渐进式加载：先显示模糊缩略图再变清晰
- 别用全屏遮罩挡住内容：除非真的需要阻塞操作
空状态
栏目下没内容、筛选没结果、搜索无匹配，这些都会遇到：
- 说明为什么是空的："该栏目暂无内容"比一片空白好
- 给出下一步：搜索无结果时推荐热门内容；筛选无结果时提供"放宽条件"
- 后台空状态要给操作入口：还没有产品？点这里添加
- 配个恰当的插图：简单的图标就行，别太花哨
- 错误和空要区分开：加载失败不等于没有数据
第 5 条是常见 bug：接口报错了，页面却显示"暂无数据"，用户以为真的没有。
错误提示
出错时的提示决定用户会不会再试一次：
- 说人话："操作失败，错误码 500"对用户毫无意义
- 说清楚错在哪：表单校验要指到具体字段
- 告诉用户能做什么：重试、换个方式、联系我们
- 保留已填内容：提交失败把表单清空是最招人烦的设计
- 用颜色和文字双重提示：不只靠红色边框
最后一条既是体验要求，也是无障碍要求——只靠颜色区分信息，色觉障碍用户会完全接收不到。
网络异常
- 断网时给出明确提示，别让页面一直转圈
- 提交失败要能重试，最好自动重试一次
- 超时要有上限，别无限等待
- 离线时可以显示缓存内容，至少告诉用户当前状态
404 与 500 页面
改版后一定会有用户点到旧地址，这两个页面要好好做：
- 404 页面：说明页面不存在，给出搜索框、热门栏目入口、返回首页
- 500 页面：说明是服务器问题，提供刷新和联系入口
- 都要有完整的导航，别做成孤岛
- 风格要和整站一致，默认的白底黑字很突兀
一份自查清单
场景 | 是否已处理列表页加载中 | □列表页无数据 | □筛选无结果 | □搜索无匹配 | □表单校验失败 | □提交失败 | □提交成功 | □网络中断 | □404 页面 | □服务器错误页 | □图片加载失败 | □怎么验
验收时专门花半小时过一遍异常场景：断网提交、输入超长内容、搜索一个不存在的词、访问一个不存在的地址。这些场景在演示时没人会给你看，但用户一定会遇到。
正常状态决定网站好不好看，异常状态决定网站靠不靠谱。
—— 一位专做体验细节的设计师