术语图鉴/UI/UX 设计/轻提示
←→切换Esc返回

轻提示 Toast / Snackbar

你可能会说

保存成功后弹个小提示「已保存」,几秒后自动消失。

操作后短暂弹出的小消息条(如「保存成功」「复制成功」),几秒后自动消失,不打断用户操作。

操作后短暂弹出的小消息条(如「保存成功」「复制成功」),几秒后自动消失,不打断用户操作。

也常被叫作Toast / Snackbar

生活类比

像服务员上菜时说的那句「您的菜齐了」——通知你一下就走,不站在旁边等。

🎮 动手试试

点击按钮触发 Toast

Toast 出现几秒后自动消失,不打断用户操作。比弹窗(Modal)轻量得多。

选择题选择一个你认为最合适的答案

关于「轻提示」,以下哪个描述最准确?

你可以这样告诉 AI

帮我在操作完成后弹出轻提示:保存成功绿色打勾、失败红色叉号,2 秒自动消失,位置在页面右上角。

容易混淆?这样区分

轻提示 Toast / Snackbar≠
弹窗 Modal

轻提示自动出现、自动消失、不打断操作;弹窗需要用户手动关闭并阻断当前流程后才可继续。

什么时候用

需要操作反馈通知

用户完成保存、删除、复制等操作后,用 Toast 给出轻量确认反馈——告知结果但不打断当前工作流。

和 AI 协作时

想让 AI 加 Toast 提示时,说「保存成功后顶部弹出绿色 Toast 写保存成功、2 秒后自动消失」,AI 会生成完整代码。

什么时候不用

需要用户确认决策

涉及不可逆操作(如删除账号、支付确认)时,Toast 自动消失的特性不够——必须用弹窗让用户主动确认。

与没有用户界面的服务无关

后端数据处理、定时任务、消息队列等没有界面的系统,Toast 提示无处显示,用日志记录即可。

组成结构 · Anatomy

1
核心概念Core

操作后短暂弹出的小消息条(如「保存成功」「复制成功」),几秒后自动消失,不打断用户操作。

2
实际表现In Practice

像服务员上菜时说的那句「您的菜齐了」——通知你一下就走,不站在旁边等。

3
与 AI 的关联AI Context

和 AI 沟通时提到「操作完弹个提示」,通常就是 Toast。

典型使用场景

加操作反馈
告诉 AI「用户保存成功后右上角弹个绿色 Toast 写'已保存',2 秒自动消失,失败弹红色提示」
想弄懂概念时
告诉 AI「用大白话给我解释什么是轻提示,举个生活中的例子」

延伸阅读