返回知识库

产品与设计 · 界面体验

错误状态Error State

出错时让用户看到原因、影响和可恢复的下一步。

换错误场景,看物件如何给原因和下一步

一个真实的发布操作物件:选错误场景点发布,错误徽章、字段、按钮和结果卡随之变化;网络重试第 2 次会成功,校验填值后成功,权限/致命给申请或联系,静默与甩堆栈是反例可揭示、重写。

发布项目 · 错误恢复实验台

同一个发布操作,选不同错误场景点发布:在错误物件(徽章、字段、按钮、结果卡)上看它如何显示原因和下一步、能否恢复。网络重试第 2 次会成功,校验填值后成功,权限/致命给申请或联系;静默与甩堆栈是反例,可揭示或重写对照。

错误场景
发布项目 · 操作物件未发布

选好上面的错误场景,点「发布项目」。错误物件会在这里显示原因下一步——结果长在物件上,不是只在底部说明里。

下一步对照:选场景点发布:错误物件会显示原因和下一步,对照正例与反例的差别。

从刚才的操作里提炼

你在实验台上触发过的那些错误物件,对应错误状态设计的核心边界。

  • 错误 = 原因 + 影响 + 下一步:结果卡写明「发生了什么、影响哪个对象、怎么恢复」;只说「失败」或只甩一个状态码都不够。
  • 分类决定恢复路径:网络/服务可重试,输入校验回到字段,权限去申请,致命给联系——不能全部塞同一个红色弹窗和「重试」。
  • 严重度用颜色 + 文字 + 图标区分:阻塞红、可修正琥珀、不可恢复深红、成功绿;颜色只加强,request id 和「不可重试」之类的关键结论必须有文字。
  • 不静默、不甩堆栈、不伪装成功:实验台里静默反例装作没事、堆栈反例甩 TypeError——对照正例就能感受用户为什么卡住。
  • 保留上下文 + 幂等重试:校验错误保留输入,重试不会重复扣款或重复发布;危险操作的重试要先确认或带幂等键。

什么时候关注错误状态

从用户信号判断,也要清楚它和相邻状态的边界。

  • 用:任何可能失败的操作——网络请求、表单提交、权限校验、资源查找、写入与发布。
  • 用:把加载、空、错误三类状态分开设计与验收,互相不伪装(加载失败不是空态,搜索无结果不是错误)。
  • 不用:同步即时反馈(按钮 active、本地校验提示)——那不需要完整错误状态。
  • 不用:可预期的确认结果(删除成功、已保存)——那是成功反馈,不是错误。

怎么用:从分类到恢复的最短路径

让错误可理解、可恢复,并把结果落在出错物件上。

  1. 按错误类型选恢复路径:可重试(网络/超时)、可修正(校验)、可申请(权限)、不可恢复(致命),别一律「重试」。
  2. 错误就地落在出错物件上:表单错误贴字段,发布错误贴发布按钮与结果区,并设 aria-invalidrole="status" 播报。
  3. 用颜色 + 文字 + 图标共同表达严重度;记 request id、时间供排查,敏感堆栈只写进安全日志,不推给用户。
  4. 重试保留上下文并避免重复副作用(幂等键或先确认);致命错误禁用重试,提供联系入口与 request id。

正反例:同一次发布失败,只改错误反馈

围绕同一个发布请求失败,只改变「错误时给用户什么」,看用户后果如何不同。

正例物件显示原因 + 下一步,重试真的恢复

发布按钮位置就地显示「暂时无法发布 · 服务超时」,给「重试发布」并保留输入;失败记 request id 进日志,不把堆栈推给用户。用户知道发生了什么、能做什么。

反例静默吞错 / 甩堆栈 / 伪装成已发布

控制台报了错界面却毫无提示,用户以为发布成功;或把 TypeError 堆栈整段塞进结果区,用户看不懂也无法恢复;甚至把「写入失败」显示成「已发布」——数据其实没保存,用户继续往下走才暴露。

快速自测

用户点「删除项目」时接口返回 403,前端拿到的报错是「Permission denied: requires admin role」。下面哪种错误状态设计最扛得住?

继续查证

术语的技术定义和行为以这些一手或权威资料为准。

下一步学

和本知识点经常一起出现的概念。