通知中心（Notification Center）是什么：效果预览与 AI 设计提示词

效果预览

通知3 条未读

💬

小林评论了你的设计稿2 分钟前

🚀

部署成功 · production18 分钟前

⭐

你的模板被收藏了昨天

适合用在哪

顶部栏铃铛点开的面板、团队协作工具的活动提醒、系统公告归档。

容易踩的坑

未读徽章超过 99 仍显示完整数字，胶囊被撑宽遮挡铃铛图标。
点开面板就把全部标为已读，用户来不及看的通知再也找不回。
每条新通知都用 assertive 播报，打断读屏用户正在进行的操作。

设计提示词 · Prompt

通知中心（Notification Center）：标题行左侧是 11px 加粗「通知」，右侧是一个红色未读数量胶囊。列表按时间倒序，每条 flex 布局：左侧 22px 圆角图标位（不同事件类型用不同底色，如新增/警告/成功），中间两行（9.5px 加粗事件摘要 + 8.5px 浅灰时间），未读条目整行用极浅主色底（#f5f3ff）标注。面板建议限高并内部滚动，顶部提供「全部标为已读」。空态要专门设计（不要显示空白面板）。实时新增时用 aria-live="polite" 播报条数变化。

Notification Center: the title row has an 11px bold "Notifications" on the left and a red unread-count pill on the right. The list is in reverse chronological order, each item in a flex layout: a 22px rounded icon slot on the left (different background colors per event type, e.g. new / warning / success), two lines in the middle (9.5px bold event summary + 8.5px light-gray timestamp); unread items get a very light primary background on the whole row (#f5f3ff). Cap the panel height and scroll internally, with "Mark all as read" at the top. Design a dedicated empty state (never show a blank panel). When new items arrive in real time, announce the count change with aria-live="polite".

常见搭配

同一页面里经常和「通知中心」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

气泡浮层Popover 实时播报ARIA Live Region 筛选标签Filter Chips 空状态Empty State

演示 HTML 结构

<div class="s d-center">
  <div class="lc-notif">
    <div class="lc-notif__hd"><b>通知</b><em>3 条未读</em></div>
    <div class="lc-notif__i is-new"><em>💬</em><div><b>小林 评论了你的设计稿</b><span>2 分钟前</span></div></div>
    <div class="lc-notif__i is-new"><em>🚀</em><div><b>部署成功 · production</b><span>18 分钟前</span></div></div>
    <div class="lc-notif__i"><em>⭐</em><div><b>你的模板被收藏了</b><span>昨天</span></div></div>
  </div>
</div>