成功错误反馈 · Success / Error Feedback
英文：Success / Error Feedback
动效与交互难度：入门 ★
🗣️一句话大白话
操作成功/失败时的动效反馈：成功打勾弹跳、错误抖动变红、警告闪烁。用户“知道自己做对了没”的关键。反馈动效三态：成功（勾号+轻微弹跳/放大）、错误（抖动+变红）、警告（闪烁/变色）。告诉 AI“提交成功后按钮变绿+勾号弹跳，失败则输入框抖动”即可。要点：反馈要“即时”（≤200ms 出现）且“明确”（形状/颜色/动效至少两样），别只靠颜色（色觉障碍不可靠）；抖动幅度 4-6px、2 次即可，别晃晕。
🎬真实场景
表单提交、登录注册、保存操作、支付结果
📮你可以这样说
「【图像模型版】表单提交成功：按钮变绿+勾号弹跳（放大到 1.1 回 1，300ms）；失败：错误输入框抖动（左右 4px 抖动 2 次）+ 边框变红 + 顶部错误提示条。 【HTML/CSS/JS 版】成功：[按钮] 加 .success 类（绿色 + check 图标 scale 0→1 弹跳）；失败：[输入框] 加 .error 类，keyframes shake（translateX ±4px 两次，300ms）+ 边框红色。」
通过 AI绘图 工作台生成（模型 API 额度由此消耗）；未配置模型密钥时会提示失败原因。
⚠️边界与常见误解
- ▸误解：反馈=颜色变化；颜色+形状+动效至少两样才可靠
- ▸抖动幅度过大/次数多会眩晕
🚫什么时候别用
- ✗无声无感的后台静默操作（不打扰用户）
🧩常见变体
成功弹跳错误抖动警告闪烁横条提示
💡小贴士
- ✦抖动 4-6px×2 次足够；成功配勾号+弹跳更可信
🕸️知识关系图
这个词条与相关术语、AI绘图 知识的连接关系
🔗相关术语
📌素材来源
词条内容参考自 Adrian Punk（X @AdrianPunk115）· WayToAGI 转载 的「《Vibe Coding 网页动效词典（下篇）》」，已按项目「大白话 + 双通道提示词」体例改写与补充。查看原文 ↗