education-learning

教育与学习动画原则

运用迪士尼的 12 条原则，打造引人入胜、充满鼓励的体验，帮助理解并庆祝进步。

12 条原则的应用

1. 挤压与拉伸

• 答题按钮：选中时友好地挤压
• 吉祥物／角色：通过拉伸展现个性
• 成就徽章：带有弹跳感的角色动画

2. 预备动作

• 测验结果揭晓：显示结果前逐步铺垫
• 下一课：为新内容做好准备
• 提交答案：反馈前的短暂时刻

3. 演出布局

• 学习内容：始终作为主要焦点
• 进度指示器：清晰可见，但不喧宾夺主
• 交互元素：明确的行动号召

4. 连续动作与关键姿势

• 视频课程：连续播放（连续动作）
• 课程进度：按步骤划分模块（关键姿势）
• 互动练习：明确的问题状态

5. 跟随动作与重叠动作

• 答对：勾号落下后，再播放庆祝动画
• 课程卡片：堆叠时带有自然的跟随动作
• 积分计数器：数字更新后平稳落定

6. 慢入与慢出

• 柔和过渡：学习过程中不出现突兀的变化
• 内容揭晓：节奏舒适
• 模态窗口打开：平滑过渡，持续 300-400ms

7. 弧形运动

• 进度路径：弯曲的学习旅程
• 拖动答案：沿自然弧线移动到放置区域
• 奖励动画：彩纸沿弧线飘落

8. 次要动作

• 获得 XP：积分更新时伴随闪光效果
• 连胜保持：计数器更新时播放火焰动画
• 升级：主庆祝动画配合背景特效

9. 时间控制

• 反馈：快速响应，持续 150-200ms
• 庆祝动画：持续较长时间（500-800ms），增强动力
• 过渡：时长适中（300-400ms），确保清晰易懂

10. 夸张

• 庆祝成功：给予充分的正向鼓励
• 温和处理错误：绝不打击学习者
• 里程碑：让成就令人难忘

11. 扎实的绘制

• 插图：友好且风格统一的美术设计
• 示意图：清晰的教育类视觉素材
• 图标：亲切友好，不令人望而生畏

12. 吸引力

• 鼓励人心的个性：温暖且给予支持
• 符合年龄特点：匹配目标学习者
• 激励设计：以奖励为导向的动画

行业时间标准

动作	时长	缓动效果
答题反馈	200ms	ease-out
答对庆祝动画	600ms	spring
课程过渡	350ms	ease-in-out
进度更新	300ms	ease-out
解锁成就	800ms	custom-bounce

核心原则

动画应当鼓励并奖励学习者。慷慨地庆祝进步，温和地处理错误，并通过精心设计的微交互保持学习者的投入，让学习如同一场冒险。