轻提示Toast
提示与状态反馈短暂反馈刚刚完成的轻量操作
轻提示适合告诉用户已经保存、复制或完成某个小操作,通常几秒后自动消失。需要用户处理、查看详情或记住的重要错误,不能只用轻提示说明。
保存成功
保存
上面是画出来的,点这个玩真的
什么时候用
- 保存 / 提交成功:一句「保存成功」就够保存成功
- 复制链接 / 验证码:确认「已复制到剪贴板」https://vibe-ui.dev/x/8fk2复制复制成功
- 轻量失败提示:网络抖动,重试就好网络异常,请重试
- 不想打断当前操作:自动消失,不用用户动手已复制到剪贴板3 秒后自动消失
什么时候不用
- 必须用户处理的错误 → 用 弹窗 Modal支付失败取消重新支付
- 内容多、带跳转 → 用 通知 Notification审核未通过 查看原因 →
- 连珠炮式连弹好几条 → 后面的全被忽略保存成功已同步网络异常
- 成功失败一个样 → 用户猜不出结果操作完成这是成功了还是失败了?
组成结构 · Anatomy
保存成功
1提示条本体Toast顶部居中弹出的小条,自动出现自动消失
2状态点Icon绿成功 / 红失败,一眼分辨结果
3文案Message一句话说清结果,别超过一行
常见变体 · Variants
成功Success
保存成功
操作成了,轻报一声不用用户处理
失败Error
网络异常,请重试
小问题失败,用户知道重试就好
普通Info
已复制到剪贴板
不好不坏的确认,如已复制、已加入
典型使用场景
保存成功反馈
保存成功
复制链接确认
链接已复制到剪贴板
任何获得链接的人都可以查看此文件
网络异常轻提示
网络异常,请稍后重试
批量操作结果
已移动 3 个文件
☑ 📄 首页改版.fig
☑ 📄 设计规范.md
☐ 📄 发布清单.md