Healthcare Medical

dylantarre/animation-principles/skills/08-by-industry/healthcare-medical

作者 dylantarre83597134ba8f无许可证99 个星标收录于 2026年10月8日更新于 2026年10月8日仓库9个月前更新

Use when designing animations for medical apps, patient portals, telehealth, or health tracking interfaces

仅含说明Design & Creative
AI 生成的概览

为医疗、远程医疗和健康追踪界面设计平静、可信动画提供指导。

功能
该技能提供设计指导,将迪士尼十二项动画原则应用于医疗应用、患者门户、远程医疗和健康追踪等医疗健康界面。它把每项原则对应到具体界面场景,包括呼吸练习、预约挂号、检验结果、警报和仪表盘。它还给出常见操作的推荐时长与缓动曲线表,如页面切换、弹窗打开、警报、数据刷新和成功反馈。
适用场景
在为医疗、面向患者或健康监测产品规划或评审动效与过渡设计时使用。它适合那些清晰度、可访问性和减少焦虑比活泼或表现性动画更重要的场景。
运行要求
无需任何工具、软件包或凭据;仅为说明性指令,不附带脚本。

Healthcare & Medical Animation Principles

Apply Disney's 12 principles to create calming, trustworthy experiences that prioritize clarity and reduce anxiety.

The 12 Principles Applied

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

  • Appointment Booking: Brief preparation before confirmation
  • Test Results: Thoughtful pause before revealing sensitive data
  • Medication Reminders: Gentle fade-in, never jarring

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

  • 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

  • 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

  • All Transitions: Gentle easing, never abrupt
  • Modal Reveals: Soft fade-in for sensitive information
  • Navigation: Smooth 400-500ms transitions

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

  • Confirmation Checkmarks: Gentle pulse after booking
  • Loading States: Calming animations during data fetch
  • Success States: Subtle color transitions

9. Timing

  • Slower Overall: 400-600ms for calm, measured feel
  • Critical Alerts: Faster 200ms to ensure attention
  • Data Entry: Responsive 150ms feedback

10. Exaggeration

  • Avoid in Most Cases: Medical context requires restraint
  • Emergency Only: Reserved for urgent alerts
  • Celebrations: Subtle for health milestones

11. Solid Drawing

  • Anatomical Accuracy: Correct body representations
  • Chart Clarity: Legible graphs at all sizes
  • Accessibility: High contrast, readable animations

12. Appeal

  • Calm Professionalism: Trust through restraint
  • Warm Colors: Soft blues, greens for comfort
  • Human Touch: Gentle transitions feel caring

Industry Timing Standards

ActionDurationEasing
Page Transition400-500msease-in-out
Modal Open350msease-out
Alert Appearance200msease-out
Data Refresh300msease-in-out
Success Feedback400msease-out

Key Principle

Animations must never cause anxiety or confusion. Prioritize clarity, accessibility, and a calming presence. When in doubt, animate less.

来源与署名

来源:dylantarre/animation-principles位于skills/08-by-industry/healthcare-medical提交8359713

许可证: 无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架