motion-audit

ممیزی جامع انیمیشن برای کیفیت، دسترس‌پذیری، عملکرد و هماهنگی برند

این Skill پیاده‌سازی‌های انیمیشن را به‌صورت نظام‌مند بررسی می‌کند؛ از اصول ۱۲گانه Disney و زمان‌بندی گرفته تا دسترس‌پذیری، پایداری 60fps، مصرف Paint و هماهنگی با توکن‌های برند.

خروجی آن فهرستی اولویت‌بندی‌شده از ایرادها، سطح شدت هر مشکل و پیشنهادهای اصلاحی است تا پیش از انتشار یا در جریان Code Review، تجربه‌ی حرکتی محصول قابل‌اعتمادتر و حرفه‌ای‌تر شود.

چه چیزی می‌گیرید

• شناسایی و دسته‌بندی همه‌ی عناصر متحرک و مسیرهای مهم تجربه
• بررسی رعایت اصول Disney مانند Anticipation، Staging، Follow-Through و Slow In/Out
• ارزیابی prefers-reduced-motion، فلش‌های خطرناک، Focus، ناوبری صفحه‌کلید و زمان خواندن محتوا
• بررسی عملکرد شامل 60fps، جلوگیری از layout thrashing و استفاده‌ی درست از transform و opacity
• گزارش ایرادها با سطح Critical، Major، Minor یا Enhancement و پیشنهاد اقدام

برای چه کاری خوب است

• تیم‌های Frontend که می‌خواهند انیمیشن‌های UI را پیش از انتشار یا در هر PR بازبینی کنند
• محصولاتی که به WCAG، prefers-reduced-motion و عملکرد مناسب روی دستگاه‌های ضعیف نیاز دارند
• طراحان و تیم‌های Design System که به هماهنگی Motion با توکن‌ها و شخصیت برند اهمیت می‌دهند

برای چه کاری نیست

• ساخت انیمیشن از صفر یا تولید کد اجرایی بدون داشتن پیاده‌سازی قابل بررسی
• ممیزی تخصصی امنیت، منطق کسب‌وکار یا تست کامل عملکرد غیرمرتبط با Motion

دربارهٔ این اسکیل

Motion Audit Checklist

Systematic review process for ensuring animations meet quality standards across Disney principles, accessibility, performance, and brand.

Audit Process

1. Identify - List all animated elements
2. Categorize - Classify by type and importance
3. Evaluate - Check against each criteria
4. Document - Record findings and recommendations
5. Prioritize - Rank issues by severity

Disney Principles Checklist

Core Principles

• ☐ Squash & Stretch - Applied to impacts, volume preserved
• ☐ Anticipation - Wind-up before major actions (15-25%)
• ☐ Staging - One clear focal point per animation
• ☐ Follow-Through - Secondary elements lag behind
• ☐ Slow In/Out - Proper easing (no linear)
• ☐ Arcs - Physical objects move in arcs
• ☐ Secondary Action - Supporting animations at 30-50%
• ☐ Timing - Durations match token scale
• ☐ Exaggeration - Appropriate for brand
• ☐ Appeal - Motion feels polished

Accessibility Checklist

Reduced Motion

• ☐ prefers-reduced-motion is respected
• ☐ Alternative exists (opacity fade, instant)
• ☐ No essential information only in animation

Timing & Seizures

• ☐ No flashing > 3 times/second
• ☐ User can pause/stop animations
• ☐ Duration allows content to be read

Focus & Navigation

• ☐ Focus states are animated appropriately
• ☐ Keyboard navigation is smooth
• ☐ Screen readers announce changes

Performance Checklist

Frame Rate

• ☐ Maintains 60fps on target devices
• ☐ No jank during scroll animations
• ☐ Low-end device testing performed

Paint & Layout

• ☐ Uses transform/opacity only (GPU)
• ☐ No layout thrashing (width, height, top, left)
• ☐ will-change used sparingly

Bundle Size

• ☐ Animation library is code-split
• ☐ Lottie files are optimized
• ☐ No unused animation utilities

Brand Consistency Checklist

Token Usage

• ☐ All durations from token scale
• ☐ All easings from token library
• ☐ No hardcoded magic numbers

Personality

• ☐ Motion matches brand adjectives
• ☐ Consistent across touchpoints
• ☐ Appropriate for audience

Issue Severity Levels

Audit Frequency

Related Skills

• motion-principles/ - Disney 12 principles reference
• accessibility/ - WCAG compliance details
• testing-patterns/ - Automated testing for audits
• tools/ - Tool-specific audit considerations

See references/ for audit scoring templates and ESLint/Stylelint rules.

دانلود ZIP