横幅与提醒系统
目的
横幅与提醒系统提供了一种设计非持续、非覆盖式通信层的方法论。与强制用户停下的模态框不同，横幅和提醒能在允许用户继续当前任务的同时，传达关键信息（状态更新、警告或公告）。该系统确保通知在视觉上清晰可辨、优先级得当且具备可访问性。
使用场景
- 传达全站公告（例如：“计划维护将在2小时后进行”）。
- 在表单内提供上下文反馈（例如：“更改已成功保存”）。
- 警告用户账户问题（例如：“订阅将在3天后过期”）。
- 通知用户不影响整个应用但影响功能的系统错误（例如：“银行同步暂时不可用”）。
- 显示促销或新功能上线的“营销横幅”。
何时不应使用
- 关键阻断： 如果用户必须在执行前操作，请使用
overlay-and-dialog-system（模态框）。 - 被动反馈： 对于短暂、低优先级的状态更新（例如：“链接已复制”），请使用Toast通知（参见
overlay-and-dialog-system）。 - 数据标签： 对于单个项目上的简单状态指示器，请使用
badge-and-tag-system。 - 导航： 不要将横幅用于主要或次要导航链接；请使用
site-navigation-system。
输入项
- 消息严重程度： 这是错误、警告、成功还是信息消息？
- 范围： 这是全局（全站）还是内联（特定于某个部分/页面）？
- 可关闭性： 用户可以隐藏此消息，还是必须保持可见？
- 操作要求： 该消息是否需要后续操作（例如：“更新账单”）？
- 品牌调色板： 状态状态的标准颜色（危险红色、警告琥珀色等）。
输出项
- 提醒结构规范： 图标、文本层级和操作位置的界定。
- 空间逻辑： 横幅出现位置的规则（视口顶部、内容上方、或部分内部）。
- 状态矩阵： 不同消息严重程度的视觉处理方式。
- 可访问性计划： 交互式提醒的ARIA角色和焦点管理规则。
工作流
1. 确定提醒级别（严重程度）
根据意图分配状态：
- 错误（高优先级）： 需要注意但不破坏视图的关键问题。
- 警告（中优先级）： 潜在问题或即将到来的截止日期。
- 成功（低优先级）： 完成操作的确认。
- 信息/公告： 中性信息或营销更新。
2. 选择放置模式
- 全局横幅（顶部栏）： 位于视口最顶部。最适合高优先级、全站公告。
- 页面横幅： 位于全局页眉下方、页面内容上方。最适合页面特定的通知。
- 内联提醒： 直接位于某个部分内部或相关组件旁边（例如：表单内部）。最适合上下文反馈。
3. 设计组件结构
每个提醒应遵循一致的内部层级：
- 图标： 严重程度的视觉速记（例如：勾号表示成功）。
- 标题（可选）： 较长的提醒使用粗体标题。
- 描述： 核心消息。保持简洁。
- 操作： 下一步的按钮或链接。
- 关闭触发器： 如果提醒非关键，则提供一个“X”按钮。
4. 建立交互规则
- 持久性： 确定提醒在操作后消失、超时后消失（不推荐用于横幅），还是仅在手动关闭时消失。
- 布局偏移管理： 确保出现的横幅不会导致突兀的布局偏移（CLS）。使用预留空间或平滑过渡。
5. 定义响应式行为
- 堆叠： 在移动设备上，如果操作无法水平放置，则应移到文本下方。
- 宽度： 全局横幅为全宽；内联提醒跟随容器宽度。
决策规则
- “一次一个”规则： 切勿堆叠超过两个全局横幅。如有多个公告，请将其合并到一个“通知中心”或轮播中。
- 颜色+图标： 切勿仅依靠颜色来传达提醒状态。始终包含图标以确保可访问性。
- 根据上下文放置： 如果提醒是由用户操作（例如：点击“保存”）引起的，则将提醒放置在操作点附近（内联）。如果是系统状态，则将其放置在顶部（全局）。
- 关闭逻辑： 始终允许用户关闭“信息”和“成功”横幅。仅当潜在问题得到解决时，才能关闭“错误”和“警告”横幅。
约束条件
- 可访问性： 对于高优先级错误使用
role="alert"，对于较低优先级的更新使用role="status"。确保文本对比度为4.5:1。如果全局横幅是固定/粘贴的，请确认它永远不会永久遮挡滚动内容中聚焦的元素（WCAG 2.2 SC 2.4.11）。 - 排版： 使用清晰的字体大小（最小14px），对于较长的描述避免全部大写。
- 移动端可触达性： 确保关闭按钮满足WCAG 2.2 SC 2.5.8要求，最小尺寸为24x24px，且在布局允许的情况下大小调整至44x44px。
常见失败模式
- “可忽略的错误”： 对关键错误使用“信息”样式，导致用户错过重要警告。
- 侵入式营销： 使用全局横幅推广低价值促销，令用户反感并降低“提醒”区域的价值。
- 缺少操作： 告知用户有问题（例如：“支付失败”），却没有提供直接修复的链接。
- 布局抖动： 横幅“突然弹出”并推下整个页面内容，导致用户误点。
验证标准
- 每条提醒都使用与其严重程度匹配的图标和颜色组合。
- 全局横幅位于层级顶部。
- 内联提醒放置在与其相关内容的附近。
- 所有交互元素（关闭、CTA）满足WCAG 2.2 24x24px最小触摸目标（2.5.8）。
- 高优先级提醒使用适当的ARIA角色（
alert）。 - 可关闭的横幅记住其状态（或具有重新出现的逻辑）。