设计通知与错误恢复时如何选择提示模式并保证用户总有出路

在设计错误状态、成功确认、异步反馈、就地编辑等需要向用户传达状态变化的界面时，选择合适的通知模式并提供恢复路径。

适用场景

解决思路

1. 按场景选择模式：Toast 用于用户操作的瞬时结果（已保存、已发送、已删除），自动消失 4–6 秒并可手动关闭；Inline error 用于字段级校验和表单错误，纠正后清除；Alert banner 用于影响当前上下文的持续性问题，手动关闭或问题解决后消失；Modal/dialog 用于需要先决策才能继续的阻塞性错误，必须用户操作；Empty state 用于尚无数据时引导用户完成第一个操作；Skeleton/loading 用于异步内容加载中，被内容替换；In-place confirmation 用于内联编辑已保存、行已更新、项已切换，2–3 秒后自动清除。
2. Toast 放置位置用底部居中或底部右侧，绝不用顶部居中（会与页面内容和导航竞争）。
3. Toast 时长：信息类 4–6 秒；错误应持续到用户关闭，让用户有时间阅读和操作。
4. Toast 结构为 [图标] 消息文本 [操作] [×]：图标按颜色编码（绿色 ✓ 成功、红色 ✗ 错误、橙色 ⚠ 警告、蓝色 ℹ 信息）；消息一句话、平实语言；操作可选且最多一个（如 Undo、Retry、View）；错误必须始终有关闭按钮，成功可选。
5. 绝不同时显示多个 toast，应排队一次只显示一个。
6. 表单校验在 blur（离开字段）时进行，不要每次按键都校验（太吵）；提交时校验整个表单。
7. 内联错误显示在字段正下方，红色并带图标；字段边框改为 --color-error；错误消息通过 aria-describedby 关联给屏幕阅读器，例如 <input id="email" aria-describedby="email-error" aria-invalid="true"> 配 <p id="email-error" role="alert">Enter a valid email address.</p>。
8. 就地编辑时在字段旁显示保存/取消控件；保存后显示短暂成功提示（如 ✓ Saved）2 秒后淡出，不要跳转页面；出错时在字段下方显示内联错误并提供重试；取消时立即恢复原值。
9. Alert banner 用于服务降级、需要操作的账户问题（如订阅 3 天后到期 [Renew]）、持续同步错误（如更改未保存 [Retry]）、与当前页面相关的重要公告。
10. Banner 放在受影响区域的顶部，除非问题确实是全局的才放整页顶部；结构为 [图标] [描述问题及其范围的消息] [操作] [×]；每个区域一次只显示一个 banner，避免告警疲劳；除非条件阻塞否则应可关闭；颜色遵循状态约定：红（错误）、橙（警告）、蓝（信息）、绿（成功/已解决）。
11. 每个错误状态都必须有出路，设计错误消息时同时设计恢复操作。
12. 重试：用于瞬时失败（网络、超时、限流），显示如 "Could not load results." [Try again]；重试按钮触发同一操作；失败 3 次后升级为 "Still having trouble? [Contact support]"；重试期间显示 spinner，防止用户多次点击。
13. 撤销：用于破坏性或不可逆操作（删除、归档、发送），显示如 "Message sent. [Undo] ×"；撤销窗口 5–10 秒，toast 在此期间保持；窗口关闭后操作即最终生效；低风险操作优先用撤销而非确认对话框，更快且干扰更小。
14. 自动保存与草稿恢复：用于长表单输入（表单、文档、编辑器）；每 30–60 秒静默自动保存；保存失败时提示 "Autosave failed — your changes are stored locally. [Retry save]"；崩溃或关闭后返回时提示 "You have unsaved changes from [time]. [Restore] [Discard]"。
15. 优雅降级：当某功能失败但产品其余部分仍可用时，只对失败区域显示错误状态，不要整页空白；提供回退方案，如 "Could not load recommendations. [Browse all products →]"；静默记录错误，只向用户展示其需要知道的内容。
16. 加载状态设计：内容密集型页面用骨架屏展示布局形状；针对性异步操作（按钮加载、内联刷新）用 spinner；已知时长的长操作（文件上传、多步处理）用进度条；加载时绝不显示空白屏幕。骨架屏比 spinner 更能降低感知等待时间，骨架形状要与实际内容布局匹配。
17. 通知中心要易于到达且易于控制：用户几乎不用翻找就能进入通知偏好（铃铛图标 → 中心 → 设置）；控制模型保持粗粒度，最多 1–3 个类别，每类一个简单级别：Off (0) 关闭该类、Minimal 只保留重要的、All/granular 全部；不要做一墙的逐事件开关，重点满足两个真实需求——全部静音，或保留一两个类别，提供显眼的 mute all / mark all read 加 1–3 个类别开关。
18. 通知中心要减少阅读：它是被扫视而非被阅读的；按类别分组，每项以可识别图标和实体/动作开头（而非一段文字），清晰显示未读状态，并支持一键清空整个列表。
19. 无障碍：错误用 role="alert" 让屏幕阅读器立即播报；状态更新用 role="status" 礼貌播报（当前语音之后）；toast 必须可被键盘访问，关闭按钮不要用 pointer-events: none；自动消失的 toast 时长要充足（prefers-reduced-motion 用户可能需要更多阅读时间）。
20. 按检查清单复核：每个错误是否都有恢复操作（重试、撤销、联系支持）；toast 是否成功自动消失、错误持续显示；是否从不同时显示多个 toast；内联错误是否紧邻字段而非表单顶部；表单错误是否通过 aria-describedby 关联到输入；alert banner 是否出现在受影响区域顶部而非总是整页；长表单输入是否有自动保存或草稿恢复；加载状态是否内容用骨架屏、针对性操作用 spinner；错误是否用 role="alert" 播报、状态更新是否用 role="status" 播报。

适用边界 · 注意事项

• 不要用顶部居中的 toast（会与页面内容和导航竞争）。
• 不要同时显示多个 toast 或多个 banner（造成告警疲劳）。
• 不要为低风险操作使用确认对话框（撤销更快且干扰更小）。