FEEDBACK & OVERLAY
轻提示Toast Notification
角落里冒出来、几秒后自己消失的小通知条。不打断、不阻塞、看完即走。
效果预览
✓已保存到云端
✕网络中断，稍后重试
适合用在哪
操作成功的反馈、后台任务完成、非关键错误提醒。
容易踩的坑
- 3 秒自动消失却没有 role="status" 或 aria-live，读屏用户完全感知不到结果。
- 错误信息也用自动消失的 toast，用户还没读完就没了，问题无从排查。
- 移动端放在顶部被刘海或状态栏遮挡，未考虑 safe-area-inset-top。
设计提示词 · Prompt
轻提示（Toast）：出现在右上角或底部居中，宽 300-400px，结构：状态图标（圆形 20px，成功绿/失败红/信息品牌色）+ 一句话标题 + 可选描述 + 关闭按钮。入场从边缘滑入 + 淡入（cubic-bezier(.22,1,.36,1) 300ms），停留 3-5s 自动消失，悬停时暂停倒计时。同位置多条垂直堆叠（最多 3 条）。成功提示可配轻微的进度条倒计时可视化。错误类 Toast 不自动消失，必须用户手动关闭——别让用户错过重要信息。
Toast: appears in the top-right corner or bottom center, 300-400px wide, structured as: status icon (20px circle, success green / failure red / info brand color) + a one-line title + optional description + close button. Enters by sliding in from the edge + fading in (cubic-bezier(.22,1,.36,1) 300ms), stays for 3-5s then dismisses automatically, pausing the countdown on hover. Multiple toasts at the same position stack vertically (at most 3). Success toasts can include a subtle progress-bar countdown visualization. Error toasts do not dismiss automatically and must be closed manually — don't let users miss important information.
常见搭配
同一页面里经常和「轻提示」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-toastwrap"> <div class="d-toast"><span class="d-toast__ic d-toast__ic--ok">✓</span><span>已保存到云端</span></div> <div class="d-toast"><span class="d-toast__ic d-toast__ic--err">✕</span><span>网络中断，稍后重试</span></div> </div>