universal-industry

通用动画原则

将迪士尼的 12 项原则作为灵活的基础，并通过合理的默认设置适配任何行业场景。

12 项原则的应用

1. 挤压与拉伸

• 默认：交互元素进行轻微压缩
• 根据以下因素调整：品牌个性（活泼 = 更多，严肃 = 更少）
• 通用规则：绝不扭曲数据或重要内容

2. 预备动作

• 默认：重要操作前短暂停顿
• 根据以下因素调整：操作的重要性（操作越重大，预备动作越明显）
• 通用规则：不可逆操作前始终发出提示

3. 演出布局

• 默认：主要操作在视觉上占据焦点
• 根据以下因素调整：内容层级和用户目标
• 通用规则：每个屏幕状态只有一个主要焦点

4. 逐帧动画与关键姿势动画

• 默认：UI 使用关键姿势动画，数据使用逐帧动画
• 根据以下因素调整：内容类型和交互模式
• 通用规则：根据内容的可预测性选择合适的方法

5. 跟随动作与重叠动作

• 默认：相关元素依次播放动画
• 根据以下因素调整：视觉复杂度和元素之间的关系
• 通用规则：主要元素完成动画后，次要元素再完成

6. 慢入与慢出

• 默认：大多数过渡使用 ease-in-out
• 根据以下因素调整：UI 场景（进入 = ease-out，退出 = ease-in）
• 通用规则：UI 动效绝不使用线性缓动

7. 弧线运动

• 默认：使用细微的曲线实现自然运动
• 根据以下因素调整：界面的正式程度（越轻松，弧线越明显）
• 通用规则：数据使用直线，角色使用曲线

8. 次要动作

• 默认：每个主要操作搭配一个辅助动画
• 根据以下因素调整：时刻的重要性和品牌表达
• 通用规则：次要动作绝不盖过主要动作

9. 时间节奏

• 默认：标准交互持续 200-300ms
• 根据以下因素调整：行业节奏和用户预期
• 通用规则：频繁发生的操作更快，重要操作更慢

10. 夸张

• 默认：适度夸张，比字面效果增强 10-20%
• 根据以下因素调整：品牌个性和场景适宜性
• 通用规则：强化成功效果，弱化失败效果

11. 扎实绘制

• 默认：始终保持一致的视觉语言
• 根据以下因素调整：平台惯例和品牌指南
• 通用规则：保持透视和比例

12. 吸引力

• 默认：动效简洁、精致且富有明确意图
• 根据以下因素调整：目标受众和品牌个性
• 通用规则：动画不应让人感觉是偶然发生的

通用时间默认值

操作	持续时间	缓动
微交互	100-150ms	ease-out
标准过渡	200-300ms	ease-in-out
复杂动画	300-500ms	ease-in-out
强调时刻	400-600ms	自定义
页面过渡	300-400ms	ease-in-out

适配框架

按品牌个性

• 专业：减少挤压与拉伸，尽量避免夸张
• 活泼：增加弹跳效果，加入次要动作
• 高端：延长动画时间，采用精致的缓动曲线
• 充满活力：缩短动画时间，采用更具动感的运动

按用户场景

• 工作：尽量减少动画，最大限度提高效率
• 浏览：利用动效增强探索体验
• 庆祝：放大积极时刻的效果
• 学习：利用动效辅助理解

核心原则

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