Error State
错误状态
WebMobileDesktop上手难度: 中等
出错了——不是「暂无数据」，是真的出错了，而且要告诉用户能怎么办。
Live Demo
真的可以点没能加载照片
请检查网络连接后重试。
详细信息
HTTP 503 · upstream timeout
你刚才看到的这个：「网络连接失败，请检查网络后重试」+「重试」按钮，出现在列表本该有内容的位置上。
它到底是什么
Error State 和 Empty State 是两回事。Empty State 是「本来就没有」，Error State 是「本来应该有但没拿到」。后者必须给重试入口和原因说明，不能只放一个哭脸。
错误态error state出错状态失败状态error page空错误
Anatomy · 它由什么组成
Icon图标
警告/断线符号，弱化处理
Title标题
说人话，不报错码
Reason原因
可展开的技术细节
Recovery恢复操作
「重试」「去设置」
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 数据请求失败 | 用 |
| 权限被拒绝（相机、相册） | 用 |
| 设备状态异常（离线、存储不足） | 用 |
| 输入格式错误 | 视情况 |
| 内容本来就不存在 | 不用 |
不要给用户看「Error 500」「ECONNREFUSED」这种技术信息。
权限错误必须给「去设置」的跳转，而不是只说「权限不足」让用户干瞪眼。
Similar Patterns
别搞混一句话区分：出错了——不是「暂无数据」，是真的出错了，而且要告诉用户能怎么办。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
列表加载失败时显示错误态：「没能加载照片」+「请检查网络连接」+「重试」按钮，技术错误码放在可展开的「详细信息」里。
不要只对 AI 说
Bad → Better不要这样对 AI 说
加载失败的时候显示错误提示。
改成这样说
错误态写人话标题 + 原因 + 恢复操作：网络错给「重试」、权限错给「去设置」并调起设置、404 给「返回」，技术错误码放 <details> 默认折叠，重试时按钮显示 loading 防重复点击。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。