Back to Details

ux-friction

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

UX Friction

用户体验摩擦（UX Friction）

Diagnose animations that block, confuse, or frustrate users.
诊断那些阻碍、迷惑用户或让用户产生挫败感的动画。

Problem Indicators

问题迹象

  • Users wait for animations to finish
  • Confusion about what happened
  • Repeated clicks/taps during animation
  • Users skip or abandon tasks
  • "Where did that go?" moments
  • 用户等待动画完成
  • 对发生的情况感到困惑
  • 动画期间重复点击/轻触
  • 用户跳过或放弃任务
  • 出现“那个东西去哪了？”的时刻

Diagnosis by Principle

基于原则的诊断

Timing

时长

Issue: Animation too slow for the context Fix: Match duration to user intent. Micro-interactions: 100-200ms. Transitions: 200-400ms. Never block input.
问题：动画时长与场景不符，过于缓慢 修复：根据用户意图匹配时长。微交互：100-200毫秒。过渡动画：200-400毫秒。绝对不要阻止输入。

Anticipation

预期性

Issue: Action happens without warning Fix: Add subtle anticipation cues before significant changes. A button press should show feedback before the result.
问题：操作毫无预兆地发生 修复：在重大变化前添加细微的预期提示。按钮被按下后，应先显示反馈再呈现结果。

Follow Through

后续动作

Issue: Animation ends abruptly Fix: Let elements settle naturally. Sudden stops feel broken. Add slight overshoot and settle.
问题：动画突然结束 修复：让元素自然过渡到稳定状态。突然停止会让用户感觉交互出问题了。添加轻微的过冲和稳定效果。

Staging

聚焦引导

Issue: Important changes happen outside focus Fix: Draw attention to where change occurs. If content moves, guide the eye with motion.
问题：重要变化发生在焦点之外 修复：将注意力吸引到变化发生的位置。如果内容移动，用动效引导用户视线。

Appeal

合理性

Issue: Animation feels arbitrary Fix: Every animation should have clear purpose. If users question "why does this bounce?", remove it.
问题：动画显得随心所欲 修复：每个动画都应有明确的目的。如果用户质疑“为什么这个元素会弹跳？”，就移除该动画。

Quick Fixes

快速修复方案

  1. Make animations skippable - Click/tap should complete or skip
  2. Reduce duration by 30% - Most animations are too slow
  3. Add progress indicators - For anything over 400ms
  4. Animate in user's focus area - Don't move things peripherally
  5. Remove decorative animations - If it doesn't help, it hurts
  1. 让动画可跳过 - 点击/轻触应完成或跳过动画
  2. 将时长缩短30% - 大多数动画都过于缓慢
  3. 添加进度指示器 - 时长超过400毫秒的动画都需要添加
  4. 在用户焦点区域内制作动画 - 不要在边缘区域移动元素
  5. 移除装饰性动画 - 无益的动画只会造成干扰

Troubleshooting Checklist

故障排查清单

  • Can users interact during animation?
  • Is duration under 400ms for transitions?
  • Does animation communicate state change?
  • Is the animation skippable if lengthy?
  • Does motion guide attention correctly?
  • Is there feedback for user input?
  • Would removing animation hurt understanding?
  • Test with impatient users (click rapidly)
  • 用户能否在动画播放期间进行交互？
  • 过渡动画时长是否在400毫秒以内？
  • 动画是否能传达状态变化？
  • 若动画时长较长，是否可跳过？
  • 动效是否正确引导了注意力？
  • 用户输入是否有反馈？
  • 移除动画是否会影响理解？
  • 测试急性子用户（快速点击）

Pattern

示例代码

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

// Make animation skippable
element.addEventListener('click', () => {
  element.getAnimations().forEach(a => a.finish());
});
js
// Allow interaction during animation
element.style.pointerEvents = 'auto';

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