healthcare-medical
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseHealthcare & Medical Animation Principles
医疗健康领域动效设计原则
Apply Disney's 12 principles to create calming, trustworthy experiences that prioritize clarity and reduce anxiety.
运用迪士尼12条动画原则，打造以清晰性为核心、能缓解焦虑感的沉稳可靠体验。
The 12 Principles Applied
12条原则的具体应用
1. Squash & Stretch
1. 挤压与拉伸（Squash & Stretch）
- Minimal Use: Avoid playful squash on health data
- Breathing Exercises: Gentle expand/contract for guided breathing
- Heart Rate: Subtle pulse matching actual rhythm
- 谨慎使用：避免在健康数据上使用诙谐的挤压效果
- 呼吸引导：为呼吸引导功能设计平缓的扩张/收缩动效
- 心率展示：设计与真实心率节奏匹配的细微脉动效果
2. Anticipation
2. 预备动作（Anticipation）
- Appointment Booking: Brief preparation before confirmation
- Test Results: Thoughtful pause before revealing sensitive data
- Medication Reminders: Gentle fade-in, never jarring
- 预约确认：完成预约前添加简短的过渡预备效果
- 检测结果展示：披露敏感数据前设置合理的停顿
- 服药提醒：采用平缓淡入效果，避免突兀感
3. Staging
3. 舞台呈现（Staging）
- Critical Alerts: Center stage with clear hierarchy
- Vital Signs: Most important metrics prominently displayed
- Privacy First: Blur or hide sensitive info until focused
- 关键提示：将关键提示置于视觉中心，明确层级关系
- 生命体征：最重要的指标需突出展示
- 隐私优先：敏感信息默认模糊或隐藏，聚焦时再清晰显示
4. Straight Ahead & Pose to Pose
4. 逐帧绘制与关键帧绘制（Straight Ahead & Pose to Pose）
- Health Journeys: Step-by-step progress (pose to pose)
- Real-time Monitoring: Continuous data streams (straight ahead)
- Onboarding: Clear sequential steps
- 健康历程：采用关键帧绘制方式呈现分步进度
- 实时监测：采用逐帧绘制方式展示连续数据流
- 新手引导：设计清晰的分步引导流程
5. Follow Through & Overlapping Action
5. 跟随动作与重叠动作（Follow Through & Overlapping Action）
- Dashboard Load: Cards appear in logical health order
- Prescription Updates: Medicine icon settles before details
- Chart Animations: Data points connect sequentially
- 仪表盘加载：按照健康数据的逻辑顺序依次显示卡片
- 处方更新：药品图标稳定后再显示详情内容
- 图表动效：数据点按顺序依次连接
6. Slow In & Slow Out
6. 慢入慢出（Slow In & Slow Out）
- All Transitions: Gentle easing, never abrupt
- Modal Reveals: Soft fade-in for sensitive information
- Navigation: Smooth 400-500ms transitions
- 所有过渡：采用平缓的缓动效果，避免生硬切换
- 弹窗展示：敏感信息弹窗采用淡入效果
- 导航切换：设置400-500ms的平滑过渡时长
7. Arc
7. 弧线运动（Arc）
- Progress Indicators: Circular arcs for completion
- Body Diagrams: Smooth paths between body regions
- Timeline Navigation: Curved paths through health history
- 进度指示器：用圆形弧线展示完成进度
- 人体示意图：在身体部位间设计平滑的路径动效
- 时间线导航：通过弧形路径浏览健康历史
8. Secondary Action
8. 次要动作（Secondary Action）
- Confirmation Checkmarks: Gentle pulse after booking
- Loading States: Calming animations during data fetch
- Success States: Subtle color transitions
- 确认标记：预约完成后，对勾选标记添加细微脉动效果
- 加载状态：数据获取时显示舒缓的加载动效
- 成功状态：采用细微的颜色过渡效果
9. Timing
9. 时间节奏（Timing）
- Slower Overall: 400-600ms for calm, measured feel
- Critical Alerts: Faster 200ms to ensure attention
- Data Entry: Responsive 150ms feedback
- 整体偏缓：设置400-600ms的动效时长，营造沉稳感
- 关键提示：200ms快速动效，确保用户注意
- 数据输入：150ms的即时反馈
10. Exaggeration
10. 夸张表现（Exaggeration）
- Avoid in Most Cases: Medical context requires restraint
- Emergency Only: Reserved for urgent alerts
- Celebrations: Subtle for health milestones
- 多数场景禁用：医疗场景需克制，避免夸张
- 仅用于紧急情况：仅在紧急提示中使用夸张效果
- 里程碑庆祝：健康里程碑采用细微的庆祝动效
11. Solid Drawing
11. 扎实绘制（Solid Drawing）
- Anatomical Accuracy: Correct body representations
- Chart Clarity: Legible graphs at all sizes
- Accessibility: High contrast, readable animations
- 解剖准确性：人体部位的展示需符合解剖学规范
- 图表清晰度：所有尺寸下的图表都需清晰可读
- 无障碍性：采用高对比度、易识别的动效
12. Appeal
12. 吸引力（Appeal）
- Calm Professionalism: Trust through restraint
- Warm Colors: Soft blues, greens for comfort
- Human Touch: Gentle transitions feel caring
- 沉稳专业：通过克制的设计传递信任感
- 温暖配色：使用柔和的蓝色、绿色营造舒适感
- 人文关怀：平缓的过渡动效传递关怀感
Industry Timing Standards
行业动效时长标准
| Action | Duration | Easing |
|---|---|---|
| Page Transition | 400-500ms | ease-in-out |
| Modal Open | 350ms | ease-out |
| Alert Appearance | 200ms | ease-out |
| Data Refresh | 300ms | ease-in-out |
| Success Feedback | 400ms | ease-out |
| 操作类型 | 时长 | 缓动效果 |
|---|---|---|
| 页面切换 | 400-500ms | ease-in-out |
| 弹窗打开 | 350ms | ease-out |
| 提示框出现 | 200ms | ease-out |
| 数据刷新 | 300ms | ease-in-out |
| 成功反馈 | 400ms | ease-out |
Key Principle
核心原则
Animations must never cause anxiety or confusion. Prioritize clarity, accessibility, and a calming presence. When in doubt, animate less.
动效绝对不能引发焦虑或困惑。需优先保证清晰性、可访问性，营造沉稳的氛围。拿不准的时候，就少用动效。