Back to Details

universal-industry

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Universal Animation Principles

通用动画设计原则

Apply Disney's 12 principles as flexible foundations that adapt to any industry context with sensible defaults.
将迪士尼的12条动画原则作为灵活基础，结合合理的默认设置，适配任何行业场景。

The 12 Principles Applied

12条原则的实际应用

1. Squash & Stretch

1. Squash & Stretch

  • Default: Subtle compression on interactive elements
  • Adjust By: Brand personality (playful = more, serious = less)
  • Universal Rule: Never distort data or important content
  • 默认设置：交互元素使用轻微压缩效果
  • 调整依据：品牌个性（活泼风格 = 效果更强，严肃风格 = 效果更弱）
  • 通用规则：绝不扭曲数据或重要内容

2. Anticipation

2. Anticipation

  • Default: Brief pause before significant actions
  • Adjust By: Action importance (bigger action = more anticipation)
  • Universal Rule: Always signal before irreversible actions
  • 默认设置：重要操作前添加短暂停顿
  • 调整依据：操作重要性（操作越关键，预演效果越明显）
  • 通用规则：不可逆操作前必须给出明确提示

3. Staging

3. Staging

  • Default: Primary action takes visual focus
  • Adjust By: Content hierarchy and user goals
  • Universal Rule: One main focus per screen state
  • 默认设置：核心操作占据视觉焦点
  • 调整依据：内容层级与用户目标
  • 通用规则：每个屏幕状态仅保留一个核心焦点

4. Straight Ahead & Pose to Pose

4. Straight Ahead & Pose to Pose

  • Default: Pose to pose for UI, straight ahead for data
  • Adjust By: Content type and interaction pattern
  • Universal Rule: Match approach to content predictability
  • 默认设置：UI动效采用关键帧过渡（Pose to Pose），数据动效采用逐帧绘制（Straight Ahead）
  • 调整依据：内容类型与交互模式
  • 通用规则：根据内容的可预测性选择合适的制作方式

5. Follow Through & Overlapping Action

5. Follow Through & Overlapping Action

  • Default: Related elements animate in sequence
  • Adjust By: Visual complexity and element relationships
  • Universal Rule: Primary element completes before secondary
  • 默认设置：关联元素按顺序执行动画
  • 调整依据：视觉复杂度与元素关联度
  • 通用规则：核心元素动画完成后，再执行次要元素动画

6. Slow In & Slow Out

6. Slow In & Slow Out

  • Default: ease-in-out for most transitions
  • Adjust By: UI context (entrances = ease-out, exits = ease-in)
  • Universal Rule: Never use linear for UI motion
  • 默认设置：大多数过渡使用ease-in-out缓动效果
  • 调整依据：UI场景（入场动效 = ease-out，退场动效 = ease-in）
  • 通用规则：UI动效绝不使用线性缓动

7. Arc

7. Arc

  • Default: Subtle curves for natural movement
  • Adjust By: Interface formality (casual = more arc)
  • Universal Rule: Straight lines for data, curves for character
  • 默认设置：自然运动采用轻微曲线轨迹
  • 调整依据：界面正式程度（休闲风格 = 曲线更明显）
  • 通用规则：数据展示使用直线，角色类元素使用曲线

8. Secondary Action

8. Secondary Action

  • Default: One supporting animation per primary action
  • Adjust By: Moment importance and brand expression
  • Universal Rule: Secondary never overshadows primary
  • 默认设置：每个核心操作搭配一个辅助动画
  • 调整依据：场景重要性与品牌表达需求
  • 通用规则：辅助动画绝不能盖过核心操作的风头

9. Timing

9. Timing

  • Default: 200-300ms for standard interactions
  • Adjust By: Industry pace and user expectations
  • Universal Rule: Faster for frequent, slower for significant
  • 默认设置：标准交互动效时长为200-300ms
  • 调整依据：行业节奏与用户预期
  • 通用规则：高频操作动效更快，重要操作动效更慢

10. Exaggeration

10. Exaggeration

  • Default: Subtle, 10-20% beyond literal
  • Adjust By: Brand personality and context appropriateness
  • Universal Rule: Exaggerate successes, minimize failures
  • 默认设置：轻微夸张，超出实际效果10-20%
  • 调整依据：品牌个性与场景适配性
  • 通用规则：放大成功时刻的效果，弱化失败时刻的效果

11. Solid Drawing

11. Solid Drawing

  • Default: Consistent visual language throughout
  • Adjust By: Platform conventions and brand guidelines
  • Universal Rule: Maintain perspective and proportions
  • 默认设置：全程保持一致的视觉语言
  • 调整依据：平台规范与品牌指南
  • 通用规则：维持透视关系与比例一致性

12. Appeal

12. Appeal

  • Default: Clean, refined motion that feels intentional
  • Adjust By: Target audience and brand personality
  • Universal Rule: Animation should never feel accidental
  • 默认设置：简洁、精致且意图明确的动效
  • 调整依据：目标受众与品牌个性
  • 通用规则：动效绝不能给人一种偶然触发的感觉

Universal Timing Defaults

通用动效默认参数

ActionDurationEasing
Micro-interaction100-150msease-out
Standard Transition200-300msease-in-out
Complex Animation300-500msease-in-out
Emphasis Moment400-600mscustom
Page Transition300-400msease-in-out
操作类型时长缓动效果
微交互100-150msease-out
标准过渡200-300msease-in-out
复杂动画300-500msease-in-out
强调时刻400-600ms自定义
页面过渡300-400msease-in-out

Adaptation Framework

适配框架

By Brand Personality

按品牌个性适配

  • Professional: Reduce squash/stretch, minimize exaggeration
  • Playful: Increase bounce, add secondary actions
  • Premium: Slower timing, refined easing curves
  • Energetic: Faster timing, more dynamic motion
  • 专业风格：减少Squash & Stretch效果，弱化夸张表现
  • 活泼风格：增加弹跳效果，添加辅助动效
  • 高端风格：更慢的时长，精细化缓动曲线
  • 活力风格：更快的时长，更具动感的动效

By User Context

按用户场景适配

  • Working: Minimize animation, maximize efficiency
  • Browsing: Enhance discovery with motion
  • Celebrating: Amplify positive moments
  • Learning: Support comprehension with motion
  • 工作场景：尽量减少动效，最大化效率
  • 浏览场景：用动效增强内容发现体验
  • 庆祝场景：放大积极时刻的动效
  • 学习场景：用动效辅助内容理解

Key Principle

核心原则

Start with sensible defaults, then calibrate based on industry expectations, brand personality, and user context. When in doubt, err toward subtlety and efficiency.
从合理的默认设置开始，再根据行业预期、品牌个性与用户场景进行调整。如有疑问，优先选择简洁高效的动效。