user-feedback-clarity

用户反馈清晰度

运用 Disney 的原则，让反馈动画清晰可见、令人无法忽视。

问题迹象

• 用户多次点击（没有看到反馈）
• 用户询问“成功了吗？”
• 用户错过成功或错误状态
• 表单提交令人困惑
• 状态变化未被察觉

按原则诊断

预备动作

问题：操作完成前没有铺垫
修复：立即显示加载／处理中状态。用户应该知道系统已收到输入。

跟随动作

问题：反馈出现后消失得太快
修复：让反馈多停留一会儿。成功消息至少显示 2-3 秒。添加稳定动画。

演出布局

问题：反馈出现在用户注意力之外
修复：在触发位置附近显示反馈。如果用户点击了按钮，反馈就应该显示在按钮上或附近。

夸张

问题：反馈太过细微
修复：增加对比度、尺寸变化或动态效果。反馈必须能与用户当前专注的任务相竞争。

次要动作

问题：反馈渠道单一
修复：结合多种渠道：视觉 + 动态效果 + 颜色。错误 = 红色 + 抖动。成功 = 绿色 + 勾号 + 脉冲效果。

快速修复

1. 立即确认 - 在 100ms 内显示反馈
2. 为触发元素添加动画 - 按钮应有明显的响应
3. 同时使用颜色和动态效果 - 提供冗余信号
4. 让反馈保持在视口内 - 靠近用户的注意力所在区域
5. 添加触觉反馈 - 在支持的设备上

故障排查清单

• 反馈是否在操作后 100ms 内出现？
• 反馈是否位于用户当前的注意力区域？
• 用户是否能通过周边视觉注意到反馈？
• 是否调动了多种感官（视觉、动态效果）？
• 反馈持续时间是否足以让用户读完？
• 错误反馈是否比成功反馈更醒目？
• 测试：用户不读文字，能判断操作是否成功吗？
• 与用户进行测试——询问“刚才成功了吗？”

代码模式

/* Button feedback */
.button:active {
  transform: scale(0.95);
}

.button.loading {
  pointer-events: none;
}

.button.success {
  animation: successPulse 300ms ease-out;
}

@keyframes successPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); background: var(--success); }
  100% { transform: scale(1); }
}

/* Error shake */
@keyframes errorShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}