fitness-wellness
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseFitness & Wellness Animation Principles
健身与健康类产品动画设计原则
Apply Disney's 12 principles to create motivating, energizing experiences that celebrate achievement and support healthy habits.
将迪士尼12项动画原则应用于设计，打造富有激励性、活力满满的体验，既能够庆贺用户取得的成就，也能帮助用户养成健康习惯。
The 12 Principles Applied
12项原则的应用场景
1. Squash & Stretch
1. Squash & Stretch（挤压与拉伸）
- Workout Buttons: Energetic squash on tap
- Progress Rings: Pulse with achievement
- Activity Icons: Bounce with completion
- 运动按钮：点击时产生富有活力的挤压效果
- 进度环：用户达成成就时产生脉动效果
- 活动图标：任务完成时产生弹跳效果
2. Anticipation
2. Anticipation（预期动作）
- Workout Start: Countdown builds energy
- Timer Begin: Ready-set-go sequence
- Goal Completion: Suspenseful approach
- 运动开始：倒计时环节积聚能量感
- 计时器启动：采用准备-就位-开始的序列设计
- 目标达成：趋近目标时营造悬念感
3. Staging
3. Staging（布局呈现）
- Current Exercise: Full focus on active movement
- Stats Display: Supporting role during workout
- Rest Periods: Recovery metrics highlighted
- 当前训练动作：聚焦展示正在进行的动作
- 数据统计展示：运动过程中作为辅助内容呈现
- 休息阶段：高亮展示恢复相关指标
4. Straight Ahead & Pose to Pose
4. Straight Ahead & Pose to Pose（连续动作与关键帧动作）
- Live Workouts: Continuous timer flow (straight ahead)
- Exercise Sequence: Move-by-move progression (pose to pose)
- Meditation Guides: Defined breathing phases
- 直播训练：计时器持续流转（连续动作逻辑）
- 动作序列：按动作逐步推进（关键帧动作逻辑）
- 冥想引导：划分清晰的呼吸阶段
5. Follow Through & Overlapping Action
5. Follow Through & Overlapping Action（跟随动作与重叠动作）
- Workout Complete: Badge lands, then stats appear
- Calorie Counter: Numbers settle with follow-through
- Activity Rings: Animate sequentially with overlap
- 训练完成：先展示徽章落定效果，再展示统计数据
- 卡路里计数器：数值变化伴随跟随动作最终稳定
- 活动进度环：按顺序带动效叠加依次动画
6. Slow In & Slow Out
6. Slow In & Slow Out（慢入慢出）
- High Energy Moments: Quick, punchy timing
- Recovery/Meditation: Slow, calming easing
- Transitions: Match current activity intensity
- 高能量场景：采用短促有力的时间节奏
- 恢复/冥想场景：采用缓慢舒缓的缓动效果
- 过渡动画：节奏匹配当前活动的强度
7. Arc
7. Arc（弧形运动）
- Progress Circles: Smooth arc completion
- Running Routes: Curved path visualization
- Gesture Controls: Natural arced movements
- 进度圆环：沿平滑弧形完成加载
- 跑步路线：采用曲线路径可视化展示
- 手势控制：符合自然的弧形运动规律
8. Secondary Action
8. Secondary Action（次要动作）
- Goal Hit: Fireworks while achievement saves
- Personal Record: Crown appears with celebration
- Streak Maintained: Fire burns while counter updates
- 达成目标：保存成就记录时同步播放烟花效果
- 打破个人记录：庆贺时同步展示王冠标识
- 维持连续打卡 streak：计数器更新时同步展示火焰燃烧效果
9. Timing
9. Timing（时间控制）
- Intense Moments: Fast 100-150ms for energy
- Mindfulness: Slow 500-700ms for calm
- Standard UI: Moderate 200-300ms
- 高强度场景：采用100-150ms的短时长营造活力感
- 正念冥想场景：采用500-700ms的长时长营造平静感
- 标准UI交互：采用200-300ms的中等时长
10. Exaggeration
10. Exaggeration（夸张表现）
- Celebrate Big: Fitness thrives on motivation
- Personal Records: Dramatic achievement reveals
- Streak Milestones: Memorable celebrations
- 放大庆贺效果：健身场景的核心是激励用户
- 个人记录达成：用戏剧化的效果展示成就
- 连续打卡里程碑：打造记忆点深刻的庆贺效果
11. Solid Drawing
11. Solid Drawing（立体绘制）
- Body Mechanics: Accurate movement demonstrations
- Data Visualization: Clear, readable metrics
- Exercise Illustrations: Proper form representation
- 身体力学展示：准确演示动作姿态
- 数据可视化：指标清晰易读
- 训练动作插图：展示标准的动作姿势
12. Appeal
12. Appeal（吸引力）
- Motivational Energy: Uplifting, encouraging motion
- Dual Modes: Intensity for workouts, calm for wellness
- Achievement Focus: Every win feels significant
- 传递激励能量：采用积极正向、鼓舞人心的动效
- 双模式适配：运动场景用高能量动效，健康场景用平静动效
- 聚焦成就反馈：让每一次小胜利都有仪式感
Industry Timing Standards
行业通用时间标准
| Action | Duration | Easing |
|---|---|---|
| Button Press | 150ms | ease-out |
| Ring Complete | 600ms | spring |
| Workout Transition | 250ms | ease-in-out |
| Meditation Fade | 500ms | ease-in-out |
| Achievement Pop | 800ms | custom-bounce |
| 操作 | 时长 | 缓动效果 |
|---|---|---|
| 按钮点击 | 150ms | ease-out |
| 进度环加载完成 | 600ms | spring |
| 训练界面切换 | 250ms | ease-in-out |
| 冥想界面淡入淡出 | 500ms | ease-in-out |
| 成就弹窗弹出 | 800ms | custom-bounce |
Key Principle
核心原则
Match animation energy to activity intensity. Workouts demand energetic, motivating motion while meditation requires calm, breathing-synced animations. Always celebrate progress.
动画的能量感要匹配活动的强度。运动场景需要充满活力、有激励性的动效，而冥想场景则需要平静的、与呼吸同频的动画。始终要对用户的进步给予庆贺。