选好上面的错误场景,点「发布项目」。错误物件会在这里显示原因和下一步——结果长在物件上,不是只在底部说明里。
换错误场景,看物件如何给原因和下一步
一个真实的发布操作物件:选错误场景点发布,错误徽章、字段、按钮和结果卡随之变化;网络重试第 2 次会成功,校验填值后成功,权限/致命给申请或联系,静默与甩堆栈是反例可揭示、重写。
发布项目 · 错误恢复实验台
同一个发布操作,选不同错误场景点发布:在错误物件(徽章、字段、按钮、结果卡)上看它如何显示原因和下一步、能否恢复。网络重试第 2 次会成功,校验填值后成功,权限/致命给申请或联系;静默与甩堆栈是反例,可揭示或重写对照。
错误场景
下一步对照:选场景点发布:错误物件会显示原因和下一步,对照正例与反例的差别。
从刚才的操作里提炼
你在实验台上触发过的那些错误物件,对应错误状态设计的核心边界。
- 错误 = 原因 + 影响 + 下一步:结果卡写明「发生了什么、影响哪个对象、怎么恢复」;只说「失败」或只甩一个状态码都不够。
- 分类决定恢复路径:网络/服务可重试,输入校验回到字段,权限去申请,致命给联系——不能全部塞同一个红色弹窗和「重试」。
- 严重度用颜色 + 文字 + 图标区分:阻塞红、可修正琥珀、不可恢复深红、成功绿;颜色只加强,
request id和「不可重试」之类的关键结论必须有文字。 - 不静默、不甩堆栈、不伪装成功:实验台里静默反例装作没事、堆栈反例甩 TypeError——对照正例就能感受用户为什么卡住。
- 保留上下文 + 幂等重试:校验错误保留输入,重试不会重复扣款或重复发布;危险操作的重试要先确认或带幂等键。
什么时候关注错误状态
从用户信号判断,也要清楚它和相邻状态的边界。
- 用:任何可能失败的操作——网络请求、表单提交、权限校验、资源查找、写入与发布。
- 用:把加载、空、错误三类状态分开设计与验收,互相不伪装(加载失败不是空态,搜索无结果不是错误)。
- 不用:同步即时反馈(按钮 active、本地校验提示)——那不需要完整错误状态。
- 不用:可预期的确认结果(删除成功、已保存)——那是成功反馈,不是错误。
怎么用:从分类到恢复的最短路径
让错误可理解、可恢复,并把结果落在出错物件上。
- 按错误类型选恢复路径:可重试(网络/超时)、可修正(校验)、可申请(权限)、不可恢复(致命),别一律「重试」。
- 错误就地落在出错物件上:表单错误贴字段,发布错误贴发布按钮与结果区,并设
aria-invalid、role="status"播报。 - 用颜色 + 文字 + 图标共同表达严重度;记
request id、时间供排查,敏感堆栈只写进安全日志,不推给用户。 - 重试保留上下文并避免重复副作用(幂等键或先确认);致命错误禁用重试,提供联系入口与 request id。
正反例:同一次发布失败,只改错误反馈
围绕同一个发布请求失败,只改变「错误时给用户什么」,看用户后果如何不同。
发布按钮位置就地显示「暂时无法发布 · 服务超时」,给「重试发布」并保留输入;失败记 request id 进日志,不把堆栈推给用户。用户知道发生了什么、能做什么。
控制台报了错界面却毫无提示,用户以为发布成功;或把 TypeError 堆栈整段塞进结果区,用户看不懂也无法恢复;甚至把「写入失败」显示成「已发布」——数据其实没保存,用户继续往下走才暴露。
快速自测
用户点「删除项目」时接口返回 403,前端拿到的报错是「Permission denied: requires admin role」。下面哪种错误状态设计最扛得住?
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。