跳到主要内容
前端术语库

UI 组件 · 消息

通知中心

Notification Center

也叫：消息中心、通知面板、通知列表、站内信、Notification Panel、Inbox

集中查看所有站内通知的地方：点铃铛打开一个列表，按时间排着评论、@我、系统消息，未读的带小圆点，可以一键全部已读。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

在顶部导航栏右侧做一个通知中心：铃铛图标按钮 36px，右上角红色徽标显示未读数（超过 99 显示 99+）。点击后在铃铛下方弹出 360px 宽、最高 480px 的面板：标题「通知」，右侧「全部已读」文字按钮；下面是「全部 / @我 / 系统」三个标签。每条通知高约 64px：左侧 32px 头像或类型图标，中间一两行文字（人名加粗）和灰色的相对时间「5 分钟前」；未读的左侧有 6px 蓝色圆点、背景浅蓝，点击跳到对应页面并标为已读。列表按「今天」「更早」分组，滚到底加载更多；没有通知时显示插图和「暂时没有新通知」。底部固定「查看全部通知」链接和设置图标。

发给

01判断

你的内容是这样吗？

对照两列，确认通知中心是不是你要找的。

符合这些情况，用通知中心

  • 产品里有评论、@提及、审批、订单状态变化等多种消息，需要一个地方集中查看
  • 用户可能错过了实时弹出的提醒，事后需要回来翻看
  • 协作、社区、后台类产品，通知需要区分已读和未读

是这些情况，换成别的

  • 只是反馈刚才操作的结果（保存成功、复制成功），用轻提示即可，不需要存进通知中心

    改用轻提示

  • 一对一的聊天对话，应该做成独立的消息或聊天页面

  • 需要用户马上处理的紧急事项，用对话框或页面顶部的警告提示，不要只藏在铃铛里

    改用对话框警告提示

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    所有通知一个样子，不分已读未读、没有时间，也没有「全部已读」，只能一条条点开

  2. 02

    通知点了没有反应，不能跳到对应的评论、订单或审批页面

  3. 03

    把历史通知都用右上角的通知提醒框一次性弹出来，堆满整个屏幕

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由带未读数的铃铛入口和通知列表面板组成；面板里有标题和「全部已读」、分类标签、按时间分组的通知条目（图标或头像、内容、时间、未读标记），以及底部的「查看全部」和设置入口。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1右上角一个铃铛图标，上面有红色数字或小红点
  2. 2点开后下方是一列带头像或图标的消息，每条旁边有「5 分钟前」这样的时间
  3. 3列表上方有「全部已读」，部分条目前面有小圆点或底色更深

04解释

详细解释

通知中心通常由两部分组成：导航栏上的铃铛图标（带未读数 徽标），和点开后的通知列表。列表可以是铃铛下方的浮层面板，也可以是从右侧滑出的 抽屉，或者一个完整的「消息中心」页面。每条通知有图标或头像、一句话内容（谁对什么做了什么）和时间，未读的带小圆点或浅色底；上方有「全部 / @我 / 系统」这样的分类和「全部已读」，底部是「查看全部」和通知设置入口。

它和 通知提醒框 的区别：通知提醒框是事情发生的那一刻从屏幕角落弹出来、几秒后自动消失的一条提醒；通知中心是事后翻看的「收件箱」，所有通知都存在这里，包括用户当时没看到的。它和 轻提示 也不同：轻提示只反馈刚才那一下操作的结果（「保存成功」），不会进通知中心。

每条通知都要能点进对应的页面（评论、订单、审批），点了自动标为已读。按「今天 / 更早」分组，太旧的分页加载。没有通知时显示一个友好的空状态，而不是一片空白。未读数超过 99 显示「99+」；通知种类多时，给用户分别开关各类通知的设置。

开发者信息
术语 ID
component-notification-center
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • .rnf-notification-feed
  • .rnf-notification-feed-popover
  • [aria-label*="notification" i]:is([role="dialog"], [role="region"], section, aside)
  • [aria-label*="通知"]:is([role="dialog"], [role="region"], section, aside)
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • notification-center
  • notification-panel
  • notifications-panel
  • notification-list
  • notifications-list
  • notification-dropdown
  • notifications-dropdown
  • notification-popover
  • notice-center
  • message-center
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • NotificationCenter
  • NotificationPanel
  • NotificationList
  • NotificationDropdown
  • NotificationFeed
  • NotificationInbox
  • NoticeIcon
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 浮在内容上
  • 重复子项
优先级
3 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30