healthcare-medical

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Healthcare & 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.

动效绝对不能引发焦虑或困惑。需优先保证清晰性、可访问性，营造沉稳的氛围。拿不准的时候，就少用动效。