通知中心系统 是做什么的？
目的
通知中心系统为应用内通知中心、信息流或收件箱提供了一个结构化且可重用的设计框架。在现代Web应用中，特别是SaaS工作空间、社区门户、协作编辑器和电商账户，通知能让用户及时了解异步事件（例如，提及、评论、系统警报、工作流状态更新、任务完成）。
如果没有专用的通知中心，应用将被迫依赖侵入式的覆盖层（模态框）或短暂易忽略的通知（Toast/横幅）。此系统集中管理这些更新，控制其视觉层次、交互状态（已读与未读）、上下文分组和响应式适配，同时确保完全的键盘和屏幕阅读器可访问性（WCAG AA）。
使用场景
- 协作工作区： 聚合文档评论、共享文件夹、任务分配和提及（例如，Slack, Notion, Figma）。
- 异步工作流： 跟踪长时间运行的操作，如数据导出、后台报告、构建部署或批处理。
- 事务更新： 跟踪电商配送更新、订阅续订提醒或支付确认。
- 社交与社区信息流： 管理点赞、回复、关注、群组邀请和活动更新。
- 账户安全与健康： 通知用户新的登录位置、密码更改或存储配额警告。
何时不应使用
- 关键阻塞事件： 如果某个事件必须阻止用户完成当前任务（例如，支付失败、会话过期、无效数据提交），则应使用
overlay-and-dialog-system（模态框/警告对话框）。 - 临时的、单个任务的反馈： 对于直接操作的即时确认（例如，“链接已复制”、“设置已保存”），应使用Toast（参见
toast-and-snackbar-system）。 - 全局停机公告： 对于全站、高优先级的系统警报（例如，“计划维护，30分钟后开始”），应使用全局横幅（参见
banner-and-alert-system）。 - 独立的转化落地页： 独立落地页应尽量减少外部链接和干扰。全局通知图标会适得其反。
输入
- 信息架构（通知模式）：
- 元数据： 作者头像/缩写、事件来源、动作类型。
- 内容： 标题（发生了什么）、正文文本（附加细节/上下文）、时间戳。
- 状态： 已读与未读、高/中/低优先级、已归档。
- 操作： 主要目标链接、内联快速操作（例如，“批准”、“标记为已读”、“静音线程”）。
- 显示上下文与密度： 界面是高度密集的SaaS仪表板（需要节省空间的弹出列表项）还是比较宽敞的平台（可以使用侧边抽屉或页面）？
- 触发器图标： 视觉锚点（通常是铃铛图标）和通知徽章设计（数字计数与简单的圆点指示器）。
- 交互操作布局： 可用的批量操作（例如，“全部标记为已读”、“清除全部”、“通知设置”）。
输出
- 触发器徽章结构： 标题图标、数字徽章计数和静默指示器圆点的具体设计标准。
- 容器布局规范： 尺寸、边界、定位和容器行为（下拉菜单、侧边抽屉或专用页面）。
- 通知卡片结构： 明确的内部布局（头像、正文、时间戳、未读指示器圆点、快速操作触发器）。
- 状态转换矩阵： 未读与已读状态、悬停状态、激活状态、焦点环和加载骨架的不同样式。
- 键盘与屏幕阅读器规范： Focus-trap参数、漫游tabindex结构、live-region公告定义和自定义aria描述。
工作流
1. 设计头部触发器与徽章指示器
通知中心的入口点几乎普遍位于全局实用标题栏（右侧）中。
- 铃铛图标： 选择一个简洁的铃铛图标。
- 未读计数徽章：
- 在铃铛图标的右上象限放置一个圆形徽章。
- 将徽章计数限制在
99+（或在极其紧凑的布局中为9+），以避免容器溢出。 - 如果计数为0，则必须从DOM中移除徽章或使用
display: none隐藏它（切勿在红色气泡中显示0）。 - 包含一个
aria-label或隐藏的屏幕阅读器文本，明确说明未读通知的数量（例如，<span class="sr-only">，4条未读通知</span>）。
2. 选择容器布局模式
根据密度、目标设备和所需的交互量选择布局：
- 模式 A：下拉弹出框（桌面默认，适用于中等内容密度）
- 相对于触发器定位。
- 推荐尺寸：最小宽度
320px，最大宽度420px。高度限制为500px，并带有可滚动容器（overflow-y: auto）。 - 使用标准的弹出机制（或原生Popover API）锚定弹出窗口，以确保它出现在顶层堆叠上下文中。
- 模式 B：侧边抽屉（最适合高内容密度或复杂操作流程）
- 从屏幕右侧滑入，占据整个视口高度。
- 推荐宽度：
360px至480px。 - 使用微妙的背板覆盖层（遮罩层）使页面背景变暗。
- 模式 C：专用通知页面（移动视口或复杂收件箱管理的备选方案）
- 全屏视图，适用于排序、搜索、过滤和批量管理深度通知存档。
3. 建立内部卡片层级与结构
每条单独的通知都是一张卡片（一个列表项<li>，放在<ol>或<ul>内）。它必须遵循严格的垂直和水平网格层级：
+-------------------------------------------------------------+
| (•) [头像] **张三** 在 _项目X_ 中提到了你 (x) |
| “请查看修改后的UI草图。” |
| [ 3小时前 ] [ 批准 ] [ 拒绝 ] |
+-------------------------------------------------------------+
- 未读指示器圆点（水平锚点）： 在最左侧放置一个小的、高对比度的、主要颜色的圆点（例如蓝色或紫色）。这是扫描未读项目最快的锚点。
- 头像/图标区域： 在指示器旁边放置一个圆形头像（用于用户生成的事件）或一个放置在彩色背景中的分类实用图标（用于系统事件）。
- 文本块（垂直流）：
- 标题/头部： 加粗文本，突出显示行为者和动作。
- 摘要： 较小的、颜色柔和的文本，显示次要内容（例如，评论文本、错误描述）。最多限制为2行文本，使用CSS
line-clamp。 - 时间戳： 颜色柔和的、小号文本（例如
12px），显示相对时间（例如，“5分钟前”、“昨天”）。
- 快速操作（上下文触发器）：
- 将快速操作按钮放置在文本摘要下方（例如，“接受邀请”、“查看评论”）。
- 在右上角提供微妙的次要触发器（例如，溢出菜单按钮或直接的“标记为已读”勾选按钮），在悬停/聚焦时显示。
- 关闭/消除图标（X）应位于右上角，尺寸至少为
24x24px，以适应触摸交互。
4. 创建清晰的状态转换
提供不同的状态以反映用户交互：
- 未读状态： 浅色背景、粗体文本、可见的蓝色指示器圆点。
- 已读状态： 淡化未读背景，将文本粗细改为常规，隐藏指示器圆点。
- 悬停/聚焦状态： 略微改变背景颜色（例如，从白色变为柔和的浅灰色），并显示次要的内联触发器（例如，“归档”、“标记为已读”）。
- 聚焦状态： 通过键盘导航到单个项目时，显示高对比度的焦点环。保持焦点可见且清晰（至少2px轮廓带偏移）。
- 禁用状态： 如果正在处理某个操作卡片（例如，点击“批准”），应用内联加载微调器，将不透明度降低到
0.5，并将按钮属性设置为disabled，以防止重复点击。
5. 定义批量操作和空状态
- 底部导航： 始终提供指向“查看所有通知”（链接到专用页面）或“全部标记为已读”的底部链接。
- 空状态： 当没有通知，或所有通知都被清除时，显示一个空状态，包含一个鼓励性的视觉元素（例如，勾选标记或铃铛），一个中性标题（“所有都处理完了！”），以及一个指向“通知设置”的次要描述性链接（参见
empty-state-system）。
6. 实现键盘焦点和屏幕阅读器管理
- 触发器切换： 在铃铛图标上按
Enter或Space键可切换弹出窗口。应用aria-expanded="true/false"和aria-controls="notification-panel-id"。 - 焦点陷阱（用于抽屉和弹出框）： 打开时，键盘焦点必须立即移动到面板内第一个可操作的元素（通常是“全部标记为已读”按钮或第一个通知项）。当面板可见时，焦点必须被限制在面板内。按
Escape键必须关闭面板并将焦点直接返回到铃铛图标。 - 漫游Tabindex / 列表导航： 如果有数十个通知项，允许键盘用户使用
ArrowUp和ArrowDown键在卡片之间导航，保持单个Tab停靠点（活动项为tabindex="0"，其他项为tabindex="-1"）。这可以避免键盘用户必须Tab穿过50个链接才能到达页面末尾。 - 屏幕阅读器公告： 使用隐藏的
aria-live="polite"区域，在动态更新未读计数时进行公告（例如，“来自小红的的新通知”）。
决策规则
规则 1：下拉菜单 vs. 侧边抽屉 vs. 页面
使用以下布局网格选择容器结构：
- 选择下拉弹出框，如果： 应用平均少于10-15条通知，大部分是简短更新，并且操作简单（例如，直接链接或快速消除）。
- 选择侧边抽屉，如果： 通知面板包含交互式标签（例如，“全部”、“提及”、“归档”），需要丰富的多行卡片摘要，或者需要复杂的表单字段（例如，直接在通知内回复的文本输入框）。
- 选择专用页面，如果： 用户正在管理通知密集型工作负载（例如，GitHub PR审查收件箱、Zendesk支持工单、Shopify商店警报），这些工作需要强大的搜索过滤器、复选框多选和大规模归档工作流。
规则 2：头像与图标指示器
- 使用用户头像（图片或缩写），如果通知是由特定人员触发的社交或直接协作事件（例如，“小红共享了一个文件”）。
- 使用系统图标（带有状态特定颜色：红色表示警报，黄色表示警告，蓝色表示信息），如果事件是系统生成的（例如，“数据库备份完成”）。
规则 3：标记为已读操作行为
- 点击通知卡片应同时将用户重定向到深层链接目标并将此项目标记为已读。
- 在卡片上提供一个专用的、可见的“标记为已读”勾选图标，使用户可以在不导航离开面板的情况下标记项目为已读。
约束条件
1. 对比度与尺寸（WCAG AA）
- 文本对比度： 确保所有通知副本达到
4.5:1的对比度。时间戳和柔化的摘录不得低于4.5:1（对于大文本则为3:1）。 - 触摸目标： 单个按钮的点击目标（关闭图标、接受/拒绝链接、标记为已读勾选标记）必须满足WCAG 2.2 SC 2.5.8的最小目标尺寸
24x24px。 - 键盘对比度： 焦点环必须与卡片背景至少达到
3:1的对比度。
2. 响应式
- 桌面端： 浮动面板必须智能定位。如果触发器靠近屏幕右边缘，弹出窗口必须对齐到其右侧，以防止裁剪。
- 移动视口（
< 768px）： 将桌面下拉弹出框转换为全屏面板或底部对齐的上滑面板，以确保拇指可及性并防止小的、不可滚动的弹出容器。
3. 动态堆叠
- 确保弹出窗口或抽屉的z-index配置在标准布局元素之上，但在模态触发器之下（例如，
--z-index-popover: 1000,--z-index-modal: 2000）。
常见故障模式
- “无法退出的收件箱”： 在桌面上打开下拉通知弹出框，但未能提供
Escape键关闭监听器。用户被迫寻找并点击一个微小的“X”或点击外部来消除。 - “卡住的徽章”循环： 通知徽章显示
3条未读项目，但打开面板并未在视觉上突出显示哪些卡片未读，也没有提供清晰的方式将其标记为已读。徽章保持卡住状态，导致用户疲劳并最终产生横幅盲视。 - “大杂烩”信息流： 将完整的电子邮件段落、原始数据库日志和营销促销信息塞进一个小小的下拉面板中，导致布局溢出并破坏视觉层级。
- 滚动时布局偏移： 使用静态像素坐标设置样式的弹出窗口，在滚动时未能保持与头部铃铛图标相连，随机浮现在内容之上。
- 双重焦点轮廓： 双层焦点样式，使外部容器卡片和内部深层链接按钮同时捕获焦点，要求键盘用户每个通知需Tab两次。
验证标准
- 徽章计数行为： 如果未读计数为
0，则红点或数字指示器完全从视图中隐藏。 - 状态对比度： 未读卡片在视觉上与已读卡片明显区分（使用背景、文本粗细和指示器圆点）。
- 目标尺寸： 卡片内的每个可点击按钮/链接满足WCAG 2.2 24x24px触摸目标最小值。
- 响应式转换： 在移动视口上，桌面下拉弹出框会转换为全屏面板或底部上滑面板。
- 键盘导航： 打开面板会将焦点限制在其中，
Escape键将其关闭并返回焦点，并且漫游tabindex或箭头键导航正常工作。 - 屏幕阅读器公告： 活动区域宣告新的未读更新，并且所有图标和操作都具有语义描述的aria标签。