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

Default: Subtle compression on interactive elements
Adjust By: Brand personality (playful = more, serious = less)
Universal Rule: Never distort data or important content

默认设置：交互元素使用轻微压缩效果
调整依据：品牌个性（活泼风格 = 效果更强，严肃风格 = 效果更弱）
通用规则：绝不扭曲数据或重要内容

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

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

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

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

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

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

Default: One supporting animation per primary action
Adjust By: Moment importance and brand expression
Universal Rule: Secondary never overshadows primary

默认设置：每个核心操作搭配一个辅助动画
调整依据：场景重要性与品牌表达需求
通用规则：辅助动画绝不能盖过核心操作的风头

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

Default: Subtle, 10-20% beyond literal
Adjust By: Brand personality and context appropriateness
Universal Rule: Exaggerate successes, minimize failures

默认设置：轻微夸张，超出实际效果10-20%
调整依据：品牌个性与场景适配性
通用规则：放大成功时刻的效果，弱化失败时刻的效果

11. Solid Drawing

Default: Consistent visual language throughout
Adjust By: Platform conventions and brand guidelines
Universal Rule: Maintain perspective and proportions

默认设置：全程保持一致的视觉语言
调整依据：平台规范与品牌指南
通用规则：维持透视关系与比例一致性

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

通用动效默认参数

Action	Duration	Easing
Micro-interaction	100-150ms	ease-out
Standard Transition	200-300ms	ease-in-out
Complex Animation	300-500ms	ease-in-out
Emphasis Moment	400-600ms	custom
Page Transition	300-400ms	ease-in-out

操作类型	时长	缓动效果
微交互	100-150ms	ease-out
标准过渡	200-300ms	ease-in-out
复杂动画	300-500ms	ease-in-out
强调时刻	400-600ms	自定义
页面过渡	300-400ms	ease-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.

从合理的默认设置开始，再根据行业预期、品牌个性与用户场景进行调整。如有疑问，优先选择简洁高效的动效。