Back to Details

attention-management

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Attention Management

注意力管理

Direct user focus correctly using Disney's principles.
运用迪士尼的原则正确引导用户的注意力。

Problem Indicators

问题表现

  • Users miss important content
  • Decorative elements steal focus
  • CTAs don't stand out
  • Users look at wrong things first
  • Information hierarchy is unclear
  • 用户错过重要内容
  • 装饰性元素抢占焦点
  • 行动召唤按钮（CTA）不够突出
  • 用户首先关注到错误的内容
  • 信息层级不清晰

Diagnosis by Principle

基于原则的诊断

Staging

分阶段呈现

Issue: Multiple elements compete for attention Fix: One thing moves at a time. Animate the most important element; keep others still.
问题：多个元素争夺注意力 解决方法：同一时间只让一个元素动起来。为最重要的元素添加动画，其他元素保持静止。

Timing

时序控制

Issue: Everything animates at same speed Fix: Primary content: faster animation. Secondary: slower or delayed. Speed implies importance.
问题：所有元素的动画速度一致 解决方法：主要内容：更快的动画速度。次要内容：更慢或延迟的动画。速度意味着重要性。

Exaggeration

夸张表现

Issue: Uniform motion across hierarchy Fix: Important elements get more dramatic animation. Background elements get subtle motion.
问题：层级中的动画效果统一 解决方法：重要元素使用更具戏剧性的动画，背景元素使用细微的动画。

Anticipation

预期引导

Issue: No buildup directs eyes Fix: Use anticipation to guide attention. A small movement can draw eyes before the main action.
问题：没有前置动作引导视线 解决方法：使用预期动作来引导注意力。在主要动作前，一个小的移动就能吸引用户的目光。

Appeal

吸引力设计

Issue: Wrong elements are visually interesting Fix: Make important elements the most visually appealing. Animation should enhance hierarchy, not fight it.
问题：错误的元素在视觉上更具吸引力 解决方法：让重要元素成为视觉上最具吸引力的对象。动画应强化层级，而非与之冲突。

Quick Fixes

快速修复方案

  1. One animation at a time - Sequence, don't parallelize
  2. Stagger by importance - Most important animates first
  3. Reduce decorative motion - Background should be calm
  4. Increase CTA animation contrast - Stands out from surroundings
  5. Use motion to guide reading order - Top-to-bottom, left-to-right
  1. 同一时间仅一个动画 - 按顺序执行，而非并行
  2. 按重要性错开动画 - 最重要的元素先执行动画
  3. 减少装饰性动画 - 背景应保持简洁
  4. 提升CTA动画的对比度 - 使其与周围环境区分开
  5. 用动画引导阅读顺序 - 从上到下、从左到右

Troubleshooting Checklist

故障排查清单

  • What do users look at first? (Eye tracking or testing)
  • Does animation sequence match importance hierarchy?
  • Are decorative animations subtle enough?
  • Does primary CTA have strongest motion?
  • Count simultaneous animations (should be 1-2)
  • Test: Hide animation—does hierarchy still work?
  • Is motion guiding or distracting?
  • Does stillness create emphasis where needed?
  • 用户首先关注什么？（可通过眼动追踪或测试获取）
  • 动画顺序是否与重要性层级匹配？
  • 装饰性动画是否足够细微？
  • 主要CTA是否有最强烈的动画效果？
  • 统计同时进行的动画数量（应控制在1-2个）
  • 测试：隐藏动画后，层级结构是否依然清晰？
  • 动画是在引导注意力还是分散注意力？
  • 静态效果是否在需要的地方创造了强调效果？

Code Pattern

代码示例

css
/* Stagger by importance */
.hero-title {
  animation: fadeInUp 400ms ease-out;
}

.hero-subtitle {
  animation: fadeInUp 400ms ease-out 100ms backwards;
}

.hero-cta {
  animation: fadeInUp 400ms ease-out 200ms backwards,
             pulse 2s ease-in-out 1s infinite;
}

/* De-emphasize background */
.background-element {
  animation: subtleDrift 20s linear infinite;
  opacity: 0.3;
}
css
/* Stagger by importance */
.hero-title {
  animation: fadeInUp 400ms ease-out;
}

.hero-subtitle {
  animation: fadeInUp 400ms ease-out 100ms backwards;
}

.hero-cta {
  animation: fadeInUp 400ms ease-out 200ms backwards,
             pulse 2s ease-in-out 1s infinite;
}

/* De-emphasize background */
.background-element {
  animation: subtleDrift 20s linear infinite;
  opacity: 0.3;
}

Hierarchy Through Motion

用动画构建层级

PriorityAnimation Style
PrimaryFast, prominent, potentially looping
SecondaryMedium speed, one-time
TertiarySlow, subtle, or static
BackgroundVery slow or no animation
优先级动画风格
主要快速、突出、可循环
次要中等速度、单次播放
tertiary缓慢、细微或静态
背景极慢或无动画