Notification Center
通知中心
Aliases:通知中心消息中心站内信消息盒子通知列表页消息提醒页铃铛点开的页面未读消息在哪看
What is it
A page aggregating alerts into a scannable list, with tabs for all, unread and mentions and rows showing icon, title, snippet and time plus bulk mark-as-read.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- The system produces many kinds of alerts continuously
- Users need to review and triage later, not be interrupted now
- Alerts must be managed across devices and channels
✕ When not to use
- One-off critical alerts needing immediate action — use a modal or banner
- Very few updates that can fold into a timeline or activity feed
- Marketing pushes to visitors — use a landing page or email
Variants
Notification List
通知列表
Reverse-chronological single column, the general default
Split Inbox
收件箱分栏
List left, detail right — efficient on desktop
Grouped Notifications
分组通知
Grouped by source or subject to cut repeated noise
Page structure
- 01
Header
Title, mark-all-read and notification settings, pinned above the scroll area.
- 02
View tabs
All, unread, mentions and system groups, with unread counts shown as badges.
- 03
Notification list
Newest first, unread rows visually emphasized, loading more as you scroll.
- 04
Notification item
Source icon, title, a one-line snippet, relative time and inline read/archive actions.
- 05
Bulk actions
Appears after entering multi-select — mark read, archive or delete.
- 06
Detail pane
In the split variant, shows the full body and a link to the source.
Implementation
flexgridoverflow-y: autoposition: stickyFlex column for header, tabs and list; the split variant adds a grid with list and detail columns. Unread counts use badges, and rows flip their background via a conditional class. Trigger loading with IntersectionObserver, keep the bulk bar sticky above the list, and show a positive all-caught-up empty state instead of a blank.
Related concepts
A row of switchable labels that divide one region into mutually exclusive views: the tab headers stay visible and clickable, and only the active tab's panel shows while the rest stay hidden. Packs several tightly related contents into one area to switch in place instead of full-page navigation. Arrow-key navigation between tabs makes it a classic accessibility showcase.
ComponentsContainsA small status marker attached to an element's corner or inline: a dot, a count or a short label. It signals unread counts, status (new, deprecated) or category; non-interactive and visually subordinate to its host element.
ComponentsContainsA small round or rounded-square image representing a user or organisation: photo, initials or an icon placeholder. Appears with names in navs, comments and member lists; can carry a status dot or stack several people together.
ComponentsContainsReplaces pagination with automatic loading: as the user scrolls to the bottom, the next page of content appends seamlessly, bridged by a loading indicator or sentinel element. It solves the broken browsing rhythm of hunting for a "next page" button — attention stays on the feed while long lists arrive in imperceptible chunks.
PatternsUses patternWhen a list or page has no data, don't leave a void — fill it with an illustration, one sentence of explanation and a clear next action. It solves the "blank screen" problem where users can't tell what happened or what to do next, turning dead space into a starting point: onboarding for first use, a way out for fruitless searches.
PatternsUses pattern