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 從公開儲存庫中收錄這些內容。

檢舉或申請下架