توقيت الرسوم المتحركة وإدراك UX

1) لماذا التوقيت حرج

• والشعور بالاستجابة الفورية والثقة في النظام ؛
• ووضوح السبب والنتيجة (الذي انتقل منه العنصر) ؛
• والإرهاق والراحة في الجلسات الطويلة ؛
• دقة الإجراءات (لا سيما على الهاتف المحمول وبمعدلات عالية).

القاعدة: التوقيت يخدم غرضًا. إذا لم تساعد الرسوم المتحركة في فهم «ما حدث»، فإنها تتدخل.

2) الفيزياء النفسية والعتبات

• ≤ 50 مللي ثانية - مدخلات الصدى (الطباعة، تأثير النقر) ؛ تبدو فورية.
• ≤ 100 مللي ثانية - أول تعليقات بصرية عن طريق العمل (الزر «مضغوط»).
• 120-180 مللي ثانية - تحوم/تركيز، انتقال الحالة الناعمة.
• 180-280 mm - modals/panels ؛ يُنظر إليه على أنه مظهر «طبيعي».
• 300-500 ملليمتر مكعب - عنصر مشترك، تقدم إلى الأمام.
💡 700 مللي ثانية - مخاطر «البطء» ؛ لا تترك إلا إذا كانت منطقية (على سبيل المثال، تأكيد الفوز).
• ≈ 1200-1600 مللي ثانية - الهيكل العظمي/الدورة المتلألئة ؛ أطول - متعب.

3) التيسير ومنحنيات الوزن

• المعيار: 'مكعب بيزير (0. 2, 0, 0. 2، 1) - ديناميكيات «مادية» محايدة.
• مضغوط: 'مكعب بيزير (0. 4، 0، 1، 1) - تسجيل الدخول السريع، نقرة قصيرة.
• تراكب خارج: 'مكعب بيزير (0، 0، 0. 2، 1) - ناعم.
• لهجة خطية (نادرة): "مكعب بيزير (0. 2, 0. 8, 0. 2, 1. 2) 'تجاوز с ≤ 8 px.

بصريات الوزن: كلما زاد المكون (بطاقة، درج)، طالت المدة (+ 40-80 مللي ثانية إلى القاعدة).

4) المراحل وتصميم الرقصات

1. البدء (10-40 م): الضوء يتلاشى/مقياس 0. 98→1 - إشارة البدء.

2. النقل (المرحلة الرئيسية): الانتقال/الافتتاح.

3. مسودة (20-60 مللي ثانية): فرامل صغيرة، وتثبيت حلقة الظل/التركيز.

• القوائم: 20-40 مللي ثانية/عنصر، الحد الأقصى 6-8 عناصر على التوالي.
• النماذج: لا سلسلة تعاقبية ؛ كل شيء يظهر في نفس الوقت حتى لا يتداخل مع المدخلات.

القابلية للانعكاس: «ظهر» مرايا «للأمام» وأسرع بنسبة 15-30٪.

5) التوقيت حسب نوع التفاعل

6) إدراك الوقت: كيفية «التسريع» دون تسريع حقيقي

التكلفة الفورية: تغيير فوري للمؤشرات/نمط مضغوط ≤ 100 مللي ثانية حتى قبل الشبكة.
إخفاء التعقيد: عمليات تنزيل موازية ؛ سحب البيانات الأساسية قبل فتح اللجنة.
المرساة الحسية: يقلل العنصر المشترك واتجاه الحركة من التكلفة المعرفية للانتظار.
تحديثات متفائلة: واجهة المستخدم «جاهزة» على الفور، يؤكد الخادم أو يتراجع.

7) التعب ونظافة الرسوم المتحركة

تجنب النبضات التي لا تنتهي ؛ ويجب أن تكون أي دورة متقطعة أو غير متصلة.
قم بعمل تأثيرات دقيقة على مصفوفات العناصر (الجدول، الشبكة) بدون ضبابية/ظل صندوق على كل عقدة.
دعم "prefers' حركة مخفضة: تقليل: اترك تختفي فقط ≤ 100 مللي متر أو مفتاح حالة ثابت.

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 }
}
}

التسمية: 'الحركة. المدة. {دور} حركة 'и'. التيسير. {دور} - المكونات و Figma هي نفسها للمحرك.

9) التنفيذ: CSS وحركة Framer

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 مللي ثانية بين عناصر وثيقة الصلة في نفس الكتلة.

11) التوقيت والمحتوى

النص: لا تحرك حرفا/كلمة بكلمة في المنتجات ؛ إنها تقنية تسويق.
الأرقام/العدادات: الخطوة 40-60 ms batchami، بدون تخطيط jitter (جدول nums).
الرسومات: السلسلة الافتتاحية 180-240 مللي ثانية، تسليط الضوء ≤ 120 مللي ثانية.

12) إمكانية الوصول والخطأ الإدراكي

يجب أن تظهر أنماط التركيز دون تأخير.
تحذيرات/أخطاء - الحد الأدنى من الرسوم المتحركة (≤ 120 مللي ثانية)، لا اهتزاز إذا كان المستخدم مع AT (تقنية مساعدة).
تجنب الومضات> 3/ثانية وومضات التباين الكبيرة.

13) تفاصيل iGaming

• Press ≤ 100 mm ؛ وضع 'مشغول' على الفور ؛ نخب/مؤشر نهائي - لا تأخير.
• توقيت استجابة واجهة المستخدم أكثر أهمية من تأكيد الرسوم المتحركة: التأكيد قصير 120-160 مللي ثانية.

• ابدأ ≤ 200 مللي ثانية، دورة موحدة، بكبح 300-500 مللي ثانية ؛ لا وميض لا نهاية له.
• Win-burst ≤ 500 ms، no strobe ؛ نص المبلغ هو AAA.

• التحديثات على دفعات (250-1000 مللي ثانية) ؛ ≤ 160 مللي ثانية ؛ بدون قفزات تخطيط.
• على التحليق/التركيز - فضح الضوء الخلفي 80-120 مللي ثانية حتى لا «يرمش».

14) الأنماط المضادة

المنحنيات الخطية للحركات (الشعور «الميكانيكي»).
المدة> 400 مللي ثانية لحالات الزر البسيط.
Cascade 100 + ms وفقًا لقائمة من عشرات العناصر (الجر).
ظلال/ضبابية على مئات العناصر في الرسوم المتحركة.
عدم الاتساق: نفس الإجراءات مع توقيتات مختلفة في نفس المنتج.
تأخر التركيز أو التأخير في تنشيط لوحة المفاتيح.

15) قائمة توقيت QA المرجعية

الاتساق

• يتم أخذ التوقيت والمنحنيات من الرموز، نفس الشيء لنفس الإجراءات.

الرد

• الضغط/التحليق/التركيز يتناسب مع مقياس 80-180 مللي ثانية.
• أول استجابة بصرية ≤ 100 مللي ثانية.

تصميم الرقصات

• المدخلات والمخرجات متناظرة ؛ الناتج أسرع بنسبة 15-30 في المائة من المدخلات.
• السلسلة التعاقبية لا تتجاوز 8 عناصر و 40 مللي ثانية.

A11y

• دعم «يفضل الحركة المخفضة» ؛ دون تأخير.
• لا وميض> 3/ث.

الأداء

• يتم تحريك «التحويل/التعتيم» فقط ؛ لا ضبابية كتلية/ظلال.

16) التوثيق في نظام التصميم

«رموز الحركة»: المدة/التيسير/الترنح + خريطة التطبيق (الزر، التراكب، علامة التبويب، القائمة).
«Rhythm & Phasing»: Cascade and Reversibility Schemes.
«تقليل الحركة»: قواعد وأمثلة التدهور.
«افعل/لا تفعل»: مقاطع قصيرة بها رموز زمنية ومقاييس مستهدفة (INP/First Feedback).

موجز موجز

التوقيت الجيد هو استجابة فورية وتصميم رقصات مفهوم ومنحنيات اقتصادية. احتفظ بفترات قصيرة للحالات الدقيقة، وامتد فقط حيث يضيف المعنى، وحافظ على تقليل الحركة، ولا تحرك الخصائص «باهظة الثمن». ثم تبدو الواجهة مفعمة بالحيوية والموثوقية - خاصة في سيناريوهات الوقت الفعلي والمخاطر العالية.