motion-principles
اصول طراحی موشن را برای انیمیشن‌های معنادار، روان و سازگار با سیستم‌های طراحی یاد بگیرید.
این Skill فلسفه و اصول موشن در Material Design 3، Fluent 2، Carbon و Apple HIG را جمع‌بندی می‌کند. با آن می‌توانید برای هر انیمیشن، هدفی روشن مانند بازخورد، راهنمایی، نمایش تغییر وضعیت یا حفظ پیوستگی تعریف کنید.
همچنین به شما کمک می‌کند مدت‌زمان، easing و شدت حرکت را آگاهانه انتخاب کنید، به reduced motion احترام بگذارید و از الگوهایی مثل حرکت تزئینی، پرش بیش‌ازحد و مسدودکردن تعاملات دوری کنید.
چه چیزی می‌گیرید
- چارچوبی برای تصمیم‌گیری درباره هدف و نقش هر انیمیشن
- مقایسه اصول موشن در M3، Fluent 2، Carbon و Apple HIG
- راهنمای دسته‌بندی انیمیشن‌ها به Feedback، Guidance، State، Continuity و Expression
- فهرست Anti-patternهای رایج در UI motion و راه‌های پیشگیری از آن‌ها
- اصول کاربردی برای حفظ سازگاری، عملکرد 60fps و پشتیبانی از reduced motion
برای چه کاری خوب است
- طراحان محصول و UX که برای رفتار حرکتی رابط کاربری تصمیم می‌گیرند
- توسعه‌دهندگانی که می‌خواهند انیمیشن‌ها را با یک Design System هماهنگ کنند
- تیم‌هایی که در حال تعریف Motion System یا استاندارد انیمیشن محصول هستند
- بررسی و بهبود transitionها، micro-interactionها و تجربه onboarding
برای چه کاری نیست
- ساخت مستقیم فایل‌های انیمیشن، کد اجرایی یا ویدیو
- پروژه‌هایی که فقط به اجرای تکنیکی GSAP، CSS یا Remotion نیاز دارند
- مواردی که انیمیشن صرفاً تزئینی است و هدف تجربه کاربر اهمیت ندارد
دربارهٔ این اسکیل
Motion Principles
Foundational motion philosophy from industry design systems.
Standards Reference
| System | Documentation |
|---|---|
| Material Design 3 | m3.material.io/styles/motion/overview |
| Fluent 2 | fluent2.microsoft.design/motion |
| Carbon | carbondesignsystem.com/guidelines/motion/overview |
| Apple HIG | developer.apple.com/design/human-interface-guidelines/motion |
M3 Motion Principles
Informative
Motion shows spatial relationships between elements and available actions.
Focused
Motion focuses attention on what's important without distraction.
Expressive
Motion celebrates moments and adds personality while remaining functional.
Fluent 2 Principles
Functional
Motion serves a purpose — guiding users, providing feedback.
Natural
Motion feels physically plausible and intuitive.
Consistent
Similar actions use similar motion patterns.
Appealing
Motion adds polish without being gratuitous.
Carbon Principles
Productive Mode
- Efficient, quick feedback
- Minimal distraction
- Task-focused
Expressive Mode
- More personality
- Longer durations
- Marketing, onboarding contexts
Apple HIG Principles
Purpose
Motion should have meaning, not decoration.
Continuity
Preserve context during transitions.
Fluidity
Motion should feel smooth and natural.
Universal Truths
Across all systems:
- Motion has purpose — Never animate for decoration alone
- Physical plausibility — Respect real-world physics
- User control — Respect reduced motion preferences
- Consistency — Similar actions = similar animations
- Performance — 60fps minimum, optimize for jank-free
Animation Categories
| Category | Purpose | Example |
|---|---|---|
| Feedback | Confirm action | Button press ripple |
| Guidance | Direct attention | Error shake |
| State | Show change | Toggle switch |
| Continuity | Preserve context | Page transition |
| Expression | Add personality | Success celebration |
Anti-Patterns
Avoid:
- Animation without purpose
- Overly long durations (>600ms for UI)
- Excessive bouncing/overshooting
- Blocking interactions during animation
- Ignoring reduced motion preference
See references/design-system-principles.md for detailed comparisons.
See references/12-principles-animation.md for Disney's 12 principles.