زمان بندی انیمیشن و درک UX

1) چرا زمان بندی مهم است

• احساس پاسخ فوری و اعتماد به سیستم ؛
• وضوح علت و معلول (از/به که عنصر منتقل شده است) ؛
• خستگی و راحتی در جلسات طولانی
• دقت اقدامات (به ویژه در تلفن همراه و با نرخ بالا).

قانون: زمان بندی در خدمت یک هدف است. اگر انیمیشن به درک «آنچه اتفاق افتاده است» کمک نکند، دخالت می کند.

2) روانشناسی و آستانه

• ≤ 50 ms - ورودی اکو (چاپ، اثر کلیک) ؛ فوری به نظر می رسد.
• ≤ 100 ms - اولین بازخورد بصری با عمل (دکمه «فشرده»).
• 120-180 ms - شناور/تمرکز، انتقال حالت نرم.
• 180-280 میلی ثانیه - ماژول ها/پانل ها ؛ به عنوان یک ظاهر «طبیعی» دیده می شود.
• 300-500 میلی ثانیه - عنصر مشترک، پیشرفت رو به جلو.
💡 700 ms - خطرات «کندی» ؛ ترک تنها اگر آن را حس می کند (به عنوان مثال، تایید یک پیروزی).
• ≈ 1200-1600 میلی ثانیه - چرخه اسکلت/سوسو زدن ؛ طولانی تر - خسته کننده

3) منحنی های کاهش و وزن

• استاندارد: 'cubic-bezier (0. 2, 0, 0. 2، 1) - دینامیک «مواد» خنثی.
• فشار داده شده: 'مکعب bezier (0. 4, 0, 1, 1) '- ورود سریع, کلیک کوتاه.
• پوشش: 'cubic-bezier (0, 0, 0. 2، 1) - خروجی نرم.
• لهجه زیر خط دار (نادر): 'مکعب bezier (0. 2, 0. 8, 0. 2, 1. 2) "с بیش از حد ≤ 8 پیکسل است.

اپتیک وزن: بزرگتر جزء (کارت، کشو)، مدت زمان طولانی تر (+ 40-80 میلی ثانیه به پایه).

4) مراحل و رقص

1. شروع (10-40ms): محو شدن نور/مقیاس 0. 98 → 1 - شروع سیگنال.

2. حمل و نقل (فاز اصلی): در حال حرکت/باز کردن.

3. پیش نویس (20-60 میلی ثانیه): ترمز کوچک، تثبیت کننده حلقه سایه/تمرکز.

• لیست ها: 20-40 میلی ثانیه/مورد، حداکثر 6-8 مورد در یک ردیف.
• فرم ها: بدون آبشار ؛ همه چیز در همان زمان به نظر می رسد به طوری که برای دخالت در ورودی نیست.

برگشت پذیری: «عقب» آینه «به جلو» و سریع تر توسط 15-30٪.

5) زمان بندی بر اساس نوع تعامل

6) ادراک زمان: چگونه «شتاب» بدون شتاب واقعی

مقرون به صرفه فوری: تغییر فوری نشانگر/سبک فشرده ≤ 100 میلی ثانیه حتی قبل از شبکه.
پنهان کردن پیچیدگی: دانلود موازی ؛ کشیدن داده های پس زمینه قبل از باز کردن پانل.
لنگر حس: عنصر مشترک و جهت حرکت هزینه های شناختی انتظار را کاهش می دهد.
به روز رسانی خوش بینانه: UI بلافاصله «آماده» است، سرور تایید یا رول می کند.

7) خستگی و بهداشت انیمیشن

اجتناب از ضربان های بی پایان هر چرخه باید متناوب یا غیر قابل قطع باشد.
انجام اثرات میکرو در آرایه ای از عناصر (جدول، شبکه) بدون تاری/جعبه سایه در هر گره.
پشتیبانی از «prefers-reduced-motion: reduce»: ترک فقط ≤ 100ms یا سوئیچ وضعیت استاتیک محو می شود.

css
@media (prefers-reduced-motion: reduce) {
{ animation: none! important; transition-duration:.01ms! important; }
}

8) نشانه های زمان بندی (سیستم طراحی)

json
{
"motion": {
"duration": { "press": 90, "hover": 160, "focus": 160, "overlayIn": 240, "overlayOut": 180, "tab": 200, "shared": 280 },
"easing": {
"standard": "cubic-bezier(0. 2,0,0. 2,1)",
"accelerate": "cubic-bezier(0. 4,0,1,1)",
"decelerate": "cubic-bezier(0,0,0. 2,1)"
},
"stagger": { "listItem": 30, "maxItems": 8 }
}
}

نام گذاری: حرکت مدت زمان {نقش} حرکت и. easing اجزای سازنده و Figma برای موتور یکسان هستند.

9) پیاده سازی: CSS و Framer Motion

css
:root{
--dur-press:90ms; --dur-hover:160ms; --dur-overlay-in:240ms; --dur-overlay-out:180ms;
--ease-std:cubic-bezier(.2,0,.2,1);
--ease-acc:cubic-bezier(.4,0,1,1);
--ease-dec:cubic-bezier(0,0,.2,1);
}
.button{ transition: transform var(--dur-press) var(--ease-acc), box-shadow var(--dur-hover) var(--ease-std); }
.button:active{ transform: scale(.98); }
.modal-enter{ animation: modalIn var(--dur-overlay-in) var(--ease-std) both; }
.modal-exit { animation: modalOut var(--dur-overlay-out) var(--ease-dec) both; }
@keyframes modalIn{ from{opacity:0; transform:translateY(16px) scale(.98)} to{opacity:1; transform:none} }
@keyframes modalOut{ from{opacity:1} to{opacity:0; transform:translateY(8px) scale(.99)} }

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

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

10) ترکیب زمان: موازی در مقابل دنباله

موازی (محو شدن + ترجمه در همان زمان) - سریع تر در احساس.
توالی (ابتدا ظرف، سپس محتوا) ساختار واضح تر است، اما طولانی تر است. درخواست زمانی که مهم است برای نشان دادن سلسله مراتب.
اجتناب از مراحل> 60 ms بین عناصر نزدیک در همان بلوک.

11) زمان بندی و محتوا

متن: نامه/کلمه به کلمه در محصولات را تحریک نکنید ؛ این یک تکنیک بازاریابی است.
اعداد/شمارنده: مرحله 40-60 میلی ثانیه batchami، بدون طرح jitter (جدول شماره).
گرافیک: سری باز 180-240 میلی ثانیه، شناور برجسته ≤ 120 میلی ثانیه.

12) دسترسی و خطای ادراکی

سبک های تمرکز باید بدون تاخیر ظاهر شوند.
هشدارها/خطاها - انیمیشن حداقل (≤ 120 میلی ثانیه)، بدون تکان دادن اگر کاربر با AT (تکنولوژی کمک) است.
اجتناب از فلاش> 3/s و فلاش کنتراست بزرگ.

13) ویژگی های iGaming

• ≤ را فشار دهید 100 میلی ثانیه ؛ وضعیت 'مشغول' بلافاصله ؛ نان تست نهایی/شاخص - بدون تاخیر.
• زمان پاسخ UI مهم تر از انیمیشن تایید است: تایید کوتاه 120-160 میلی ثانیه است.

• شروع ≤ 200 میلی ثانیه، چرخه یکنواخت، ترمز 300-500 میلی ثانیه ؛ بدون جرقه های بی پایان.
• برنده انفجار ≤ 500 میلی ثانیه، بدون بارق ؛ متن مقدار AAA است.

• به روز رسانی توسط دسته (250-1000 میلی ثانیه) ؛ تفاوت بصری ≤ 160 میلی ثانیه ؛ بدون پرش طرح.
• در شناور/تمرکز - 80-120 میلی ثانیه نور پس زمینه را خنثی کنید تا «چشمک نزنید».

14) ضد الگوهای

منحنی خطی برای حرکات (احساس «مکانیکی»).
مدت زمان> 400 میلی ثانیه برای کشورهای دکمه ساده.
آبشار 100 + ms با توجه به لیستی از ده ها تن از عناصر (کشش).
سایه ها/تاری در صدها عنصر در انیمیشن.
ناسازگاری: اقدامات مشابه با زمان های مختلف در همان محصول.
تاخیر در تمرکز یا تاخیر در فعال سازی صفحه کلید.

15) چک لیست زمان QA

سازگاری

• زمان بندی ها و منحنی ها از نشانه ها گرفته شده است، برای اقدامات مشابه.

پاسخ دادن

• مطبوعات/شناور/تمرکز مناسب به مقیاس 80-180 ms.
• اولین پاسخ بصری 100 میلی ثانیه ≤.

طراحی رقص

• ورودی و خروجی متقارن هستند ؛ خروجی 15-30٪ سریعتر از ورودی است.
• آبشار از 8 عنصر و 40 میلی ثانیه مرحله تجاوز نمی کند.

A11y

• 'prefers-reduced-motion' پشتیبانی می شود ؛ تمرکز بدون تاخیر
• بدون چشمک زدن> 3/s.

عملکرد

• فقط «تبدیل/کدورت» متحرک است ؛ بدون تاری جرم/سایه.

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

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

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

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