用户注意不到操作反馈、错过成功/错误状态时…

当用户重复点击、追问“成功了吗”、错过成功或错误状态、表单提交后困惑时，用来让交互反馈变得无法忽视。

适用场景

解决思路

1. Anticipation（预期）：动作完成前缺少铺垫时，立即显示 loading/processing 状态，让用户知道输入已被接收。
2. Follow Through（跟随动作）：反馈出现后消失太快时，让反馈停留——成功消息至少展示 2-3 秒，并添加 settle 落定动画。
3. Staging（舞台布置）：反馈出现在用户焦点之外时，把反馈显示在触发点附近；如果点击的是按钮，反馈就出现在按钮上或按钮附近。
4. Exaggeration（夸张）：反馈太微妙时，增加对比度、尺寸变化或动效幅度，让反馈足以与用户的任务专注度竞争。
5. Secondary Action（次要动作）：只有单一反馈通道时，组合多个通道——视觉 + 动效 + 颜色；错误 = 红色 + 抖动，成功 = 绿色 + 对勾 + 脉冲。
6. 立即确认：在 100ms 内显示出某种反馈。
7. 让触发元素动起来：按钮本身要有可见的响应。
8. 颜色和动效一起用：形成冗余信号。
9. 把反馈保持在视口内：位置靠近用户的当前焦点。
10. 在支持的设备上添加触觉反馈（haptic feedback）。
11. 自查清单：反馈是否在动作后 100ms 内出现？
12. 自查清单：反馈是否处在用户当前焦点区域？
13. 自查清单：反馈在余光/周边视觉中是否也能被注意到？
14. 自查清单：是否调动了多种感官（视觉、动效）？
15. 自查清单：反馈持续时间是否长到足以读完？
16. 自查清单：错误反馈是否比成功反馈更醒目？
17. 自查清单：用户不读文字能否判断操作是否成功？
18. 自查清单：找真实用户测试，直接问“刚才那个操作成功了吗？”
19. CSS 代码模式：.button:active { transform: scale(0.95); } 给出按压反馈。
20. CSS 代码模式：.button.loading { pointer-events: none; } 禁用重复点击。
21. CSS 代码模式：.button.success { animation: successPulse 300ms ease-out; }，@keyframes successPulse 在 50% 时 transform: scale(1.05) 并把 background 设为 var(--success)。
22. CSS 代码模式：@keyframes errorShake 在 25% 时 transform: translateX(-4px)、75% 时 translateX(4px)，用于错误抖动。