通知中心
Notification Center
别名:通知中心消息中心站内信消息盒子通知列表页消息提醒页铃铛点开的页面未读消息在哪看
这是什么
把系统产生的提醒按来源与时间聚合成可浏览列表的页面，顶部用标签区分全部、未读、提及等视图， 每条通知展示图标、标题、正文摘要与时间，支持一键已读、批量处理与跳转原文。 它替代零散的弹窗提醒，让用户主动回看而不是被动打断。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 系统会持续产生类型多样的提醒
- 用户需要回看、分类处理而不是被打断
- 通知要跨设备、跨渠道集中管理
✕ 不适用场景
- 只有一次性、必须立刻处理的紧急警报（用模态或顶部横幅）
- 提醒极少且可并入时间线或活动流
- 面向访客的营销推送（用落地页或邮件）
常见形式
通知列表
Notification List
按时间倒序的单列流，最通用
收件箱分栏
Split Inbox
左侧列表 + 右侧详情，桌面处理高效
分组通知
Grouped Notifications
按来源或对象聚合，减少重复噪音
页面结构
- 01
顶栏
标题、全部已读与通知设置入口，固定在滚动区之上。
- 02
视图标签
全部、未读、提及、系统等分组，未读数量用徽标提示。
- 03
通知列表
按时间倒序排列，未读项加背景强调，滚动到底自动加载。
- 04
单条通知
来源图标 + 标题 + 一句摘要 + 相对时间 + 行内已读与归档。
- 05
批量操作
进入多选后浮现，支持已读、归档与删除。
- 06
详情面板
分栏变体下展示完整正文与跳转原文按钮。
实现要点
flexgridoverflow-y: autoposition: sticky外层 flex 分「顶栏 + 标签 + 列表」三段，分栏变体再包一层 grid 分成列表与详情两列。 未读计数用徽标组件，列表项用 :has(未读) 或条件类切换背景。滚动加载用 IntersectionObserver 触发， 批量操作条吸附在列表顶部；空状态给「已全部读完」的正向反馈而非空白。
相关概念
用一排可切换的标签把同一区域的内容分成互斥视图：标签头常驻可点击，仅当前 标签对应的面板可见，其余隐藏。适合把高度相关的几类内容压缩在同一区域内 就地切换，避免整页跳转。键盘上用左右方向键在标签间移动，是可访问性的经典范例。
组件包含组件附着在元素角落或行内的小型状态标记：圆点、数字计数或短文字标签。用于表达未读数量、 状态（新、已废弃）或分类；不参与交互，视觉上从属于宿主元素。
组件包含组件以圆形或圆角方形小图代表用户或组织：照片、姓名首字母或图标占位。 常与姓名一起出现在导航、评论与成员列表，可附在线状态点或多人叠加。
组件包含组件用"滚动到底自动追加下一页"取代传统分页：用户持续下滑，新内容不断出现， 底部以加载指示或哨兵元素衔接。它解决的是浏览节奏被打断的问题—— 用户不必寻找"下一页"按钮，注意力始终停留在内容流上，长列表被拆成一次次无感的追加。
交互模式使用模式当列表或页面没有数据时，不留一片空白，而是用插图、一句说明和一个明确的下一步操作填充。 它解决的是"用户面对空白不知道发生了什么、也不知道该做什么"的问题—— 把空档变成引导起点：首次使用教用户开始，搜索无结果给出路。
交互模式使用模式