ux-friction

用户体验摩擦

诊断那些阻碍、困惑或令用户沮丧的动画。

问题迹象

• 用户等待动画结束
• 不清楚发生了什么
• 动画播放期间反复点击或轻触
• 用户跳过或放弃任务
• 出现“这东西去哪儿了？”的时刻

按原则诊断

时长

问题：动画对于当前情境来说太慢
解决方案：根据用户意图调整时长。微交互：100-200ms。过渡：200-400ms。绝不阻止用户输入。

预期

问题：操作发生前没有预兆
解决方案：在重大变化发生前添加细微的预示效果。按钮按下后，应先显示反馈，再呈现结果。

后续动作

问题：动画结束得太突然
解决方案：让元素自然稳定下来。突然停止会让人觉得出了问题。添加轻微的过冲和回稳效果。

舞台安排

问题：重要变化发生在焦点之外
解决方案：将注意力引向变化发生的位置。如果内容移动，用动态效果引导视线。

吸引力

问题：动画显得随意
解决方案：每个动画都应有明确的目的。如果用户会问“为什么要弹跳？”，就移除它。

快速修复

1. 让动画可以跳过 - 点击或轻触即可完成或跳过动画
2. 将时长缩短 30% - 大多数动画都太慢
3. 添加进度指示器 - 用于时长超过 400ms 的动画
4. 在用户的关注区域播放动画 - 不要移动用户视野边缘的元素
5. 移除装饰性动画 - 没有帮助就只会造成干扰

故障排查清单

• 用户能否在动画播放期间进行交互？
• 过渡动画的时长是否低于 400ms？
• 动画是否传达了状态变化？
• 如果动画较长，是否可以跳过？
• 动画是否正确引导注意力？
• 用户输入是否会得到反馈？
• 移除动画是否会影响理解？
• 使用不耐烦的用户进行测试（快速连续点击）

模式

// Allow interaction during animation
element.style.pointerEvents = 'auto';

// Make animation skippable
element.addEventListener('click', () => {
  element.getAnimations().forEach(a => a.finish());
});