轻提示Toast
你可能会说
就是那种角落冒出来一句“已保存”,过两秒自己消失的小提示。
轻提示是在页面上短暂显示、反馈刚完成操作的提示组件复制链接或保存设置后可显示“已复制”“已保存”。位置和停留时间要避免遮挡当前任务;需要用户处理或记住的信息不能只依赖轻提示。
什么时候用
- 保存 / 提交成功:用简短结果确认操作保存成功
- 复制链接 / 验证码:确认「已复制到剪贴板」https://vibe-ui.dev/x/8fk2复制复制成功
- 轻量失败提示:网络抖动,重试就好网络异常,请重试
- 不想打断当前操作:用简短提示确认结果已复制到剪贴板3 秒后自动消失
什么时候不用
- 需要用户处理后才能继续的错误:使用 弹窗 Modal支付失败取消重新支付
- 内容较多或带跳转入口:使用 通知 Notification审核未通过 查看原因 →
- 连续弹出多条提示:后续内容会被遮挡,用户也难以及时阅读保存成功已同步网络异常
- 成功与失败使用相同样式:应配合明确文字和图标区分状态操作完成这是成功了还是失败了?
组成结构 · Anatomy
保存成功
浮在界面边缘的简短结果提示
用图标或文字帮助辨认结果
保持简短,直接说明操作结果
常见变体 · Variants
成功Success
保存成功
操作成功且不需要用户继续处理
失败Error
网络异常,请重试
小问题失败,用户知道重试就好
普通Info
已复制到剪贴板
不带成功或失败倾向的状态确认
典型使用场景
保存成功反馈
保存成功
复制链接确认
链接已复制到剪贴板
任何获得链接的人都可以查看此文件
网络异常轻提示
网络异常,请稍后重试
批量操作结果
已移动 3 个文件
☑ 📄 首页改版.fig
☑ 📄 设计规范.md
☐ 📄 发布清单.md
延伸阅读 · 权威出处