INTERACTION
通知堆叠Notification Stack
多条通知像扑克牌一样层层叠起，越往后越小越淡——空间减半信息不减。
效果预览
💬周报已生成刚刚
✅部署成功2 分钟前
👤新用户注册5 分钟前
适合用在哪
消息中心、实时通知流、系统事件面板。
容易踩的坑
- 新通知插入时没有 aria-live，读屏用户完全不知道有新消息。
- 堆叠后层卡片仍可被 Tab 聚焦，键盘焦点落到看不见的通知上。
- 高频推送时每条都触发 FLIP 动画，短时间几十条会让界面持续抖动。
设计提示词 · Prompt
通知堆叠（Notification Stack）：通知条垂直堆叠，第 n 条 scale(1 - n×0.04) + opacity 递减，形成"往远处排"的透视。新通知从顶部插入并推开旧通知（FLIP 动画）。每条：类型图标 + 标题 + 相对时间。可折叠为一条"查看全部 N 条"汇总条。配已读/未读状态（未读加品牌色圆点）。实时场景配合 WebSocket。堆叠展示 3 条封顶，再多就折叠——通知的价值在"未读的紧迫感"，不在数量。
Notification Stack: Notification items stack vertically; the nth item gets scale(1 - n×0.04) + decreasing opacity, creating a "receding into the distance" perspective. New notifications insert from the top and push old ones aside (FLIP animation). Each item: type icon + title + relative time. Can collapse into a single "View all N" summary bar. Include read/unread states (unread gets a brand-color dot). Real-time scenarios pair with WebSocket. Cap the visible stack at 3; fold the rest — a notification's value lies in "the urgency of unread," not in quantity.
常见搭配
同一页面里经常和「通知堆叠」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-notifstack"> <div class="d-notifstack__n"><i>💬</i>周报已生成<span class="d-notifstack__t">刚刚</span></div> <div class="d-notifstack__n"><i>✅</i>部署成功<span class="d-notifstack__t">2 分钟前</span></div> <div class="d-notifstack__n"><i>👤</i>新用户注册<span class="d-notifstack__t">5 分钟前</span></div> </div>