用途:Notification 模式帮助团队可靠地传递及时的系统反馈,并控制紧急程度,不打断用户当前的主要任务。最适用于成功与错误 toast 提示。
适用场景:成功与错误 toast;系统警告与横幅;操作后的撤销与重试提示。
应避免:事件过于次要、不值得打断任务时,应使用更安静的状态;用户之后必须能重新查看的事件,不要用瞬时反馈;没有层级规则时,不要在多渠道重复同一条消息。
实施流程:先确认该模式与问题和约束匹配,再复制示例;从 references/pattern.md 中的结构与示例入手,选择最小可行变体;在叠加视觉打磨前,先应用无障碍、性能和交互护栏;使用测试指南验证键盘、屏幕阅读器、响应式和失败场景下的行为。
无障碍护栏:键盘方面,确认仅用键盘即可完成通知操作,模式打开、更新或显示额外 UI 时保持焦点顺序合理,并保留在高倍缩放下仍可读的可见焦点状态。屏幕阅读器方面,优先使用语义元素,仅在语义不足时添加 ARIA;在正确位置以恰当礼貌级别播报错误、加载或完成等状态变化;必要时用 aria-describedby 或结构化标题连接标签、提示和状态文本。视觉无障碍方面,不要仅靠颜色传达严重程度、完成或选中状态。
常见错误:过度提示,即所有状态都用强烈颜色、动效和声音,导致用户不再关注,应建立严重程度阶梯,把最强处理留给真正需要打断的状态;时机与任务不匹配,短任务用重加载 UI 显得迟缓,长任务无进度指引显得被遗弃,应按等待时长选择最轻反馈并如实说明已知程度;跳过播报策略,屏幕阅读器用户会因 live-region 行为不一致或缺失而错过瞬时变化,应定义每个状态的播报方式,并用真实辅助技术测试 polite 与 assertive 更新。
相关模式:https://uxpatterns.dev/patterns/content-management/modal、https://uxpatterns.dev/patterns/forms/form-validation、https://uxpatterns.dev/patterns/user-feedback/loading-indicator。完整实现细节、示例和测试说明见 references/pattern.md。模式页面:https://uxpatterns.dev/patterns/user-feedback/notification。