طراحی حرکت و انیمیشن های رابط

1) چرا انیمیشن در محصول

• روابط علی را توضیح می دهد (جایی که ناپدید شد، جایی که عنصر از آن آمده است)،
• توجه به عمل اصلی،
• نتیجه (بازخورد) را تایید می کند و بار شناختی را کاهش می دهد،
• تغییرات قابل پیش بینی و «ملموس» است.

قانون شماره 1: معنی> سبک. هر انیمیشن به این سوال پاسخ می دهد که «چه اتفاقی افتاده است و چگونه به من مربوط می شود ؟» ».

2) اصول اساسی

1. سلسله مراتب حرکت: ظروف ابتدا حرکت می کنند، سپس محتویات، سپس قطعات.
2. ثبات: الگوهای مشابه برای اقدامات مشابه.

3. صرفه جویی: حداقل خواص، حداقل فریم ؛ کوتاه تر و واضح تر

4. فیزیک واقع گرایانه: شتاب در آغاز، کاهش سرعت در پایان ؛ هيچ «عوضي» اي وجود نداره.
5. برگشت پذیری: «عقب» احساس آینه مانند «جلو».
6. قابلیت دسترسی: به تنظیمات سیستم کاهش انیمیشن احترام بگذارید.

3) مدت زمان و منحنی (توصیه ها)

3. 1 مدت زمان (دسکتاپ/تلفن همراه)

شناور: 120-180 میلی ثانیه

تمرکز/فشرده: 80-120 мс

نکته ابزار/نان تست: ورودی 180-240ms، خروجی 120-160ms

مدول/درور: 200-320 میلی ثانیه

انتقال صفحه نمایش: 240-360 میلی ثانیه

پیمایش/اختلاف منظر: ≤ 200ms در هر بخش، جلوگیری از حلقه های بی نهایت

3. 2 منحنی

اصلی: 'cubic-bezier (0. 2, 0. 0, 0. 2، 1) - سرعت «مواد» طبیعی

ورودی سریعتر، خروجی نرمتر: 'cubic-bezier (0. 05, 0. 7, 0. 1, 1)`

کشش (نادر، لهجه): 'مکعب bezier (0. 2, 0. 8, 0. 2, 1. 2) 'با حد مجاز ≤ 8px/8 °

قانون: از درونیابی خطی برای حرکات و کدورت همزمان استفاده نکنید - احساس «مکانیکی بودن».

4) رقص انتقال

ظاهر: مقیاس نور 0. 98→1. 0 + محو شدن در، 8-16 پیکسل افست در امتداد محور مبدا.
ناپدید شدن: سفارش معکوس، سریعتر از ورود (− 20-30٪).
تبدیل/تغییر زبانه ها: به طور کلی «پایه» (ظرف) 16-24 پیکسل منتقل می شود ؛ برگه فعال قبل از شروع حرکت مشخص شده است.
لیست ها: آبشار را شل کنید (20-40 میلی ثانیه/عنصر، بیش از 6-8 عنصر).

5) میکرو تعاملات (الگوهای)

دکمه (شناور/مطبوعات): سایه + زیر صفحه نمایش نور/مقیاس 0. 98; پرش های فشرده ≤ 80 میلی ثانیه.
تمرکز: حلقه کنتراست بدون تاری ؛ به جای درخشش، ضخامت/شفافیت را تحریک کنید.
ورودی ها: نور حمل/میدان در تمرکز ؛ خطاها - تکان دادن ≤ 6 پیکسل، ≤ 140 میلی ثانیه، 1 چرخه.
زدن ضامن/جعبه چک: ضربه محکم و ناگهانی به موقعیت نهایی، تاخیر بیش از 60-80 MS کلیک کنید.
اسکلت/بار: روشن و خاموش شدن 1200-1600 میلی ثانیه، دامنه روشنایی ≤ 20٪، بدون چشمک می زند تیز.

6) وضعیت محتوا

در حال بارگذاری → موفقیت/خالی/خطا: یک «کانال» حرکت ؛ جهت های مختلف را مخلوط نکنید.
نان تست/هشدارها: از طرف منبع رویداد وارد شوید (به عنوان مثال پایین سمت راست برای اقدامات کاربر).

برای تازه کردن بکشید: تنش بهار الاستیک ؛ زمان بازگشت ≤ 250 میلی ثانیه

7) دسترسی (A11y) و امنیت

Support «prefers-reduced-motion: reduce»: حرکات را با محو شدن/مقیاس ≤ 1٪ یا انتقال استاتیک جایگزین کنید.
اجتناب از فلاش> 3 در ثانیه و فلاش کنتراست بزرگ (صرع حساس به نور).
از پارالاکس/زوم قوی در کاربران با سابقه بیماری حرکت استفاده نکنید. گزینه Disconnect را انتخاب کنید.
سبک های فوکوس همیشه بدون انیمیشن قابل مشاهده هستند (نه فقط رنگ/حرکت).

8) عملکرد (60 FPS به عنوان هدف)

پویانمایی فقط کدورت و تبدیل) ترجمه/مقیاس/چرخش (؛ اجتناب از «بالا/چپ/عرض/ارتفاع».
شامل ترکیب: «transform: translateZ (0)» یا «will-change: transform, opacity».
به حداقل رساندن رسم مجدد با متحرک سایه تاری بزرگ و فیلتر بر روی عناصر متعدد.
انتقال های بزرگ را به دسته ها بشکنید از requestAnimationFrame استفاده کنید.
برای لیست ها، مجازی سازی خارج از صفحه/دوباره طرح.

9) نشانه های حرکت در سیستم طراحی

json
{
"motion": {
"duration": { "xs": 100, "sm": 160, "md": 220, "lg": 280, "xl": 340 },
"easing": {
"standard": "cubic-bezier(0. 2, 0. 0, 0. 2, 1)",
"emphasis": "cubic-bezier(0. 05, 0. 7, 0. 1, 1)",
"decelerate": "cubic-bezier(0. 0, 0. 0, 0. 2, 1)",
"accelerate": "cubic-bezier(0. 4, 0. 0, 1, 1)"
},
"stagger": { "listItem": 30, "maxItems": 8 }
}
}

Именование: 'motion. {duration' easing 'stagger}. {role} -' hover ',' focus ',' overlayIn ',' pageTransition ',' list 'item'.

10) پیاده سازی (CSS/JS/React)

css
:root {
--motion-dur-sm: 160ms;
--motion-dur-md: 220ms;
--motion-ease: cubic-bezier(0. 2, 0, 0. 2, 1);
}
@media (prefers-reduced-motion: reduce) {
{ animation: none! important; transition-duration: 0. 01ms! important; }
}

tsx import { motion, AnimatePresence } from "framer-motion";

export function Modal({ open, children }) {
return (
<AnimatePresence>
{open && (
<motion. div initial={{ opacity: 0 }}
animate={{ opacity: 1, transition: { duration: 0. 22 } }}
exit={{ opacity: 0, transition: { duration: 0. 16 } }}
className="fixed inset-0 bg-black/50"
>
<motion. div initial={{ y: 16, scale: 0. 98, opacity: 0 }}
animate={{ y: 0, scale: 1, opacity: 1, transition: { duration: 0. 24, ease: [0. 2,0,0. 2,1] } }}
exit={{ y: 8, scale: 0. 99, opacity: 0, transition: { duration: 0. 18 } }}
className="m-auto max-w-lg rounded-2xl bg-white p-6"
>
{children}
</motion. div>
</motion. div>
)}
</AnimatePresence>
);
}

Lottie/SVG: استفاده برای حالت های خالی تصویری و onboarding ؛ نه برای کنترل انتقادی. بهینه سازی و کش

11) الگوهای بارگیری

اسکلت به جای یک اسپینر که در آن ساختار محتوا شناخته شده است.
پیشرفت: نوار قطعی اگر پیشرفت شناخته شده است ؛ نامشخص - با سرعت یکنواخت، بدون «حرکات تند و سریع».
اجتناب از «شناور» اسکلت در هنگام بازسازی - ابعاد قفل.

12) انتقال صفحه/صفحه

نگه داشتن نقطه توجه (انتقال عنصر مشترک) - کارت «گسترش یافته» به بخش.
ناوبری «عمیق» به جلو/راست/بالا، «عقب» - عقب ؛ جهت برای پلت فرم یکسان است.
بستر پس زمینه به 40-60٪ در پوشش تیره می شود.

13) ویژگی های iGaming

چرخش/آشکار: یک شتاب کوتاه (≤ 200 میلی ثانیه) + چرخش یکنواخت + تضعیف نرم ؛ ممنوعیت چرخههای نامحدود بدون عمل.
برنده/برنده تمام پولها: چلپ چلوپ نور ≤ 500 میلی ثانیه، بدون بارق ؛ صدای دوگانه در حجم کم ؛ متن پیروزی قابل خواندن است (AAA در مقابل).
مسابقات/رتبه بندی: افزایش حساب - شمارنده با اعداد جدولی و گام نور 40-60 ms/واحد (دسته)، بدون طرح «جهش».
بازی مسئولانه: اطلاعیه ها و محدودیت ها بدون اثرات منحرف کننده ؛ انیمیشن حداقل است، تاکید بر خوانایی.

14) ضد الگوهای

تاخیر> 120ms به پاسخ کلیک کنید.
«آسانسور» از کدورت + مقیاس 0. 9→1. 05→1. 0 با پرش بیش از حد برای هر چیز کوچک.
اختلاف منظر پس زمینه که با اسکرول در تضاد است.
بی نهایت سوسو زدن/پالس.
ویژگی های طرح/رنگ متحرک («ارتفاع»، «چپ»، «فیلتر: تاری ()») در مجموعه ای از عناصر.
منحنی های غیر ثابت و مدت زمان برای اقدامات مشابه.

15) فرآیند و QA

• نمونه های اولیه با زمان بندی/منحنی ؛ رقص در سطح قاب.
• کاتالوگ نشانه های حرکت و نمونه هایی برای اجزای سازنده.

• تست های دید/حالت واحد (انتقال به عنوان انتظار می رود).
• تست های بصری (عکس های فوری از پایان انیمیشن ها).
• عملکرد/جدول زمانی در صحنه با حداکثر بار.

• 'prefers-reduced-motion' پشتیبانی می شود.
• فقط تبدیل/کدورت.
• مدت زمان و منحنی مربوط به نشانه.
• بدون فلاش> 3/ثانیه و بارق قوی.
• اسکلت به جای اسپینر در صورت امکان.
• تغییرات برگشت پذیر و قابل پیش بینی است.

16) مستندات در سیستم طراحی

نشانه حرکت: مدت زمان/کاهش/تلو تلو خوردن با نمونه.
«الگوهای انتقال»: مودال ها، لیست ها، زبانه ها، صفحات.
«A11y و عملکرد»: راهنمای کاهش حرکت و ترکیب.
«انجام دهید/انجام ندهید»: کلیپ های کوتاه با نمونه های خوب/بد.

خلاصه ای کوتاه

طراحی حرکت زبان علت و معلول است. نگه داشتن زمان کوتاه، منحنی سازگار و خواص ارزان برای رندر. احترام به در دسترس بودن، نشانه های سند و بررسی عملکرد. سپس انیمیشن UX را تقویت می کند و با سرعت و وضوح رابط کاربری تداخل نخواهد داشت.