تصميم الحركة والرسوم المتحركة للواجهة

1) لماذا الرسوم المتحركة في المنتج

• يفسر العلاقات السببية (حيث اختفت، من حيث جاء العنصر)،
• يوجه الانتباه إلى الإجراء الرئيسي،
• يؤكد النتيجة (التعليقات) ويقلل من العبء المعرفي،
• يجعل التحولات قابلة للتنبؤ و «ملموسة».

القاعدة رقم 1: تعني> الأسلوب. أي رسوم متحركة تجيب على السؤال "ماذا حدث وكيف يرتبط بي ؟ ».

2) المبادئ الأساسية

1. التسلسل الهرمي للحركة: تتحرك الحاويات أولاً، ثم المحتويات، ثم الأجزاء.
2. الاتساق: نفس الأنماط لنفس الإجراءات.
3. الوفورات: الحد الأدنى من الخصائص، الحد الأدنى من الأطر ؛ أقصر وأوضح.
4. الفيزياء الواقعية: التسارع في البداية، التباطؤ في النهاية ؛ لا يوجد «حمقى».
5. القابلية للانعكاس: «الظهر» يشبه المرآة «إلى الأمام».
6. إمكانية الوصول: احترام إعدادات نظام تقليل الرسوم المتحركة.

3) المدد والمنحنيات (التوصيات)

3. 1 فترات (سطح المكتب/الهاتف المحمول)

تحوم: 120-180 م

التركيز/الضغط: 80-120 мс

Tooltip/Toast: مدخل 180-240 مللي ثانية، إخراج 120-160 مللي ثانية

Modals/Drouers: 200-320 ms

انتقالات الشاشة: 240-360 مللي ثانية

التمرير/Parallax: 200 مللي ≤ لكل جزء، تجنب الحلقات اللانهائية

3. 2 منحنيات

الرئيسي: 'مكعب بيزير (0. 2, 0. 0, 0. 2، 1) '- السرعة «المادية» الطبيعية

إدخال أسرع، إخراج أكثر ليونة: "مكعب بيزير (0. 05, 0. 7, 0. 1, 1)`

المرونة (نادرة، لهجة): 'مكعب بيزير (0. 2, 0. 8, 0. 2, 1. 2) 'مع حد تجاوز ≤ 8px/8 °

القاعدة: لا تستخدم الاستيفاء الخطي للحركات والتعتيم في نفس الوقت - الشعور بـ «الميكانيكية».

4) تصميم الرقصات الانتقالية

المظهر: مقياس ضوئي 0. 98→1. 0 + fade-in، 8-16 px عوض على طول محور الأصل.
الاختفاء: النظام العكسي، أسرع من الدخول (− 20-30٪).
علامات تبويب التحويل/التغيير: يتم تحويل «القاعدة» العامة (الحاوية) بمقدار 16-24 بكسل ؛ يتم إبراز علامة التبويب النشطة قبل بدء الحركة.
القوائم: فك السلسلة (ترنح 20-40 مللي ثانية/عنصر، لا يزيد عن 6-8 عناصر).

5) التفاعلات الدقيقة (الأنماط)

زر (تحوم/اضغط): ظل + شاشة فرعية خفيفة/مقياس 0. 98; ارتداد مضغوط ≤ 80 مللي متر.
التركيز: حلقة التباين بدون ضبابية ؛ السماكة/الشفافية المتحركة بدلاً من التوهج.
المدخلات: النقل/الإضاءة الميدانية عند التركيز ؛ أخطاء - اهتزاز ≤ 6 px، ≤ 140 ms، دورة 1.
تبديل/Checkbox: انطلق إلى الموضع النهائي، انقر فوق التأخير الذي لا يزيد عن 60-80 مللي ثانية.
الهيكل العظمي/الحمل: لامع 1200-1600 مللي ثانية، سعة السطوع ≤ 20٪، بدون ومضات حادة.

6) ينص المحتوى

تحميل → نجاح/فارغ/خطأ: «قناة» واحدة للحركة ؛ لا تخلط اتجاهات مختلفة.
الخبز المحمص/التنبيهات: الوصول من جانب مصدر الحدث (على سبيل المثال أسفل اليمين لإجراءات المستخدم).
اسحب للتحديث: توتر الربيع المرن ؛ وقت العودة ≤ 250 مللي ثانية.

7) إمكانية الوصول (A11y) والأمن

دعم «prefers-reduced-motion: reduce»: استبدل الحركات بتلاشي/مقياس ≤ 1٪ أو انتقال ثابت.
تجنب الومضات> 3 في الثانية ومضات التباين الكبيرة (الصرع الحساس للضوء).
لا تستخدم تكبير/تكبير قوي في المستخدمين الذين لديهم تاريخ دوار الحركة ؛ جعل خيار فصل الاتصال.
تكون أنماط التركيز مرئية دائمًا بدون رسوم متحركة (وليس فقط اللون/الحركة).

8) الأداء (60 FPS كهدف)

تحريك التعتيم فقط وتحويله (ترجمة/مقياس/دوران) ؛ تجنب «الأعلى/الأيسر/العرض/الارتفاع».
تضمين التركيب: «تحويل: ترجمة Z (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 }
}
}

Именование: "حركة". {مدة 'تسهيل' stagger}. {دور} "-" تحوم "،" تركيز "،" تراكب في "،" انتقال الصفحة "،" قائمة العنصر ".

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: استخدام للحالات الفارغة التوضيحية والصعود على متن الطائرة ؛ ليس للضوابط الحرجة. تحسين وذاكرة التخزين المؤقت.

11) أنماط التحميل

الهيكل العظمي بدلاً من الدوار حيث يُعرف هيكل المحتوى.
التقدم: معيار قطعي إذا كان التقدم معروفا ؛ غير محدد - بوتيرة موحدة، بدون «حمقى».
تجنب الهيكل العظمي «العائم» عند إعادة البناء - أبعاد القفل.

12) انتقالات الصفحة/الشاشة

احتفظ بنقطة الانتباه (انتقالات العناصر المشتركة) - يتم «توسيع» البطاقة إلى الجزء.
تنطلق الملاحة «العميقة» للأمام/اليمين/للأعلى، «للخلف» - للخلف ؛ الاتجاه هو نفسه بالنسبة للمنصة.
ركيزة الخلفية مظلمة إلى 40-60٪ عند التراكب.

13) تفاصيل iGaming

دوران/كشف: تسارع قصير واحد (≤ 200 مللي ثانية) + دوران موحد + توهين ناعم ؛ حظر الدورات اللانهائية دون اتخاذ إجراء.
الفوز/الجائزة الكبرى: رشة خفيفة ≤ 500 مللي ثانية، بدون رداء ؛ الصوت المزدوج بحجم منخفض ؛ نص النصر قابل للقراءة (AAA في المقابل).
البطولات/التصنيفات: زيادة الحساب - العداد بأرقام جدولية وخطوة خفيفة من 40-60 مللي ثانية/وحدة (دفعات)، بدون تخطيط «القفزات».
اللعب المسؤول: الإخطارات والحدود دون آثار مشتتة ؛ الرسوم المتحركة ضئيلة، والتركيز على إمكانية القراءة.

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

تأخير> 120 مللي ثانية للنقر فوق الاستجابة.
«المصعد» من العتامة + المقياس 0. 9→1. 05→1. 0 مع تجاوز لكل شيء صغير.
تشابه الخلفية الذي يتعارض مع التمرير.
وميض/نبضات لانهائية.
خصائص تخطيط/طلاء متحركة («ارتفاع»، «يسار»، «مرشح: طمس ()») على مجموعة من العناصر.
المنحنيات والمدد غير الثابتة لنفس الإجراءات.

15) العملية وتقييم الجودة

• نماذج أولية ذات توقيت/منحنيات ؛ تصميم الرقصات على مستوى الإطار.
• فهرس لرموز الحركة وأمثلة للمكونات.

• رؤية الوحدة/اختبارات الحالة (تنتهي التحولات كما هو متوقع).
• اختبارات بصرية (لقطات لنهاية الرسوم المتحركة).
• الأداء/الجدول الزمني على المشاهد بأقصى قدر من الحمل.

• دعم «يفضل الحركة المخفضة».
• التحويل/التعتيم فقط.
• تتوافق المدد والمنحنيات مع الرموز.
• لا ومضات> 3/ثانية ورداء قوي.
• الهيكل العظمي بدلاً من الدوار حيثما أمكن ذلك.
• الانتقالات قابلة للعكس ويمكن التنبؤ بها.

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

رموز الحركة: المدة/التيسير/الترنح مع الأمثلة.
«أنماط الانتقال»: الوسائط والقوائم وعلامات التبويب والصفحات.
«A11y والأداء»: دليل لتقليل الحركة والتركيب.
«افعل/لا تفعل»: مقاطع قصيرة بها أمثلة جيدة/سيئة.

موجز موجز

تصميم الحركة هو لغة السبب والنتيجة. حافظ على التوقيت قصيرًا، والمنحنيات متسقة والعقارات رخيصة لتقديمها. احترم التوافر وتوثيق الرموز والتحقق من الأداء. ثم ستقوي الرسوم المتحركة UX ولن تتداخل مع سرعة ووضوح الواجهة.