ممتاز، وصلت الآن إلى مستوى متقدم جدًا. ابتداءً من هذا الدرس سندخل في مواضيع يستخدمها Senior وLead Product Designers في الشركات التقنية.
الدرس الثامن عشر: Motion Design للمصممين (تصميم الحركة)
القاعدة الذهبية:
الحركة ليست للزينة، بل لتوضيح ما يحدث للمستخدم.
إذا كانت الحركة لا تساعد المستخدم على الفهم، فمن الأفضل عدم استخدامها.
ما هو Motion Design؟
هو استخدام الحركة داخل الواجهة لتوضيح:
- انتقال المستخدم بين الصفحات.
- ظهور واختفاء العناصر.
- حالة النظام.
- نتيجة تفاعل المستخدم.
لماذا نستخدم الحركة؟
الحركة تساعد المستخدم على:
- فهم ما حدث.
- معرفة أين ذهب العنصر.
- تقليل الشعور بالمفاجأة.
- جعل التطبيق أكثر سلاسة.
المبادئ الأساسية للحركة
1. الحركة لها سبب
مثال:
ضغط المستخدم على زر "شراء".
الحركة المناسبة:
- الزر يصغر قليلًا عند الضغط.
- يظهر مؤشر تحميل.
- ينتقل إلى صفحة الدفع.
2. الحركة يجب أن تكون قصيرة
يفضل:
- 150–300ms للحركات الصغيرة.
- 300–500ms للانتقالات.
الحركة الطويلة تجعل التطبيق يبدو بطيئًا.
3. المحافظة على السياق
إذا ضغط المستخدم على بطاقة منتج:
بدل أن تختفي فجأة،
يمكن تكبير البطاقة تدريجيًا لتصبح صفحة التفاصيل.
يشعر المستخدم أنها نفس البطاقة انتقلت إلى مكان آخر.
أنواع الحركة
Fade
اختفاء أو ظهور تدريجي.
يستخدم في:
- الرسائل.
- النوافذ.
- التنبيهات.
Slide
انزلاق.
يستخدم:
- الانتقال بين الصفحات.
- القوائم الجانبية.
Scale
تكبير وتصغير.
مثال:
زر الإعجاب يكبر قليلًا عند الضغط.
Smart Animate
في Figma:
إذا كان العنصر بنفس الاسم في صفحتين،
يقوم Figma بتحريكه تلقائيًا.
هذه من أكثر الأدوات استخدامًا.
الحركة في التطبيقات
تطبيق بنك
لا تستخدم حركة كثيرة.
الهدف:
- الثقة.
- الوضوح.
متجر إلكتروني
يمكن استخدام:
- انتقال المنتج.
- إضافة للسلة.
- تحميل الصور.
تطبيق ألعاب
يمكن استخدام حركة أكثر لأنها جزء من التجربة.
مبادئ Disney وتطبيقها في UI
هناك مبادئ للحركة استُخدمت في الرسوم المتحركة ويمكن الاستفادة منها بحذر في واجهات الاستخدام، مثل:
- Ease In / Ease Out: تبدأ الحركة وتنتهي بسلاسة.
- Follow Through: تتحرك العناصر بشكل طبيعي دون توقف مفاجئ.
- Timing: اختيار مدة الحركة المناسبة.
في واجهات الاستخدام، الهدف هو الوضوح وليس الاستعراض.
حالات يجب استخدام الحركة فيها
✅ فتح نافذة.
✅ إغلاق نافذة.
✅ إضافة عنصر.
✅ حذف عنصر.
✅ تحميل البيانات.
✅ نجاح العملية.
حالات لا ينصح فيها
❌ عند كل ضغطة.
❌ في كل انتقال.
❌ حركات طويلة.
❌ مؤثرات تسبب تشتيتًا.
تصميم الحركة في Figma
يمكنك استخدام:
- Smart Animate.
- After Delay.
- Open Overlay.
- Swap Overlay.
لكن تذكر:
ابدأ بتصميم تجربة الاستخدام أولًا، ثم أضف الحركة التي تخدمها.
مثال عملي
في مشروع المتجر الإلكتروني:
عند الضغط على المنتج:
- تكبر البطاقة تدريجيًا.
- تظهر صفحة التفاصيل.
- زر "إضافة إلى السلة" يتحرك بلطف عند الضغط.
- بعد الإضافة، يظهر إشعار صغير:
✔ تمت إضافة المنتج إلى السلة.
تمرين عملي
اختر أحد مشاريعك السابقة وأضف:
- انتقالًا سلسًا بين صفحتين.
- حركة لزر رئيسي.
- شاشة تحميل.
- رسالة نجاح.
- رسالة خطأ.
ثم اسأل نفسك:
هل هذه الحركة تساعد المستخدم، أم أنها مجرد شكل جميل؟
إذا كانت لا تضيف قيمة، فاحذفها.
ما تعلمته اليوم
✅ مفهوم Motion Design.
✅ متى تستخدم الحركة.
✅ أنواع الحركات.
✅ Smart Animate.
✅ تصميم تجربة أكثر سلاسة.
الدرس القادم (مستوى Lead Designer)
سندرس Design Systems المتقدمة، وتشمل:
- Design Tokens.
- Variables في Figma.
- إنشاء مكتبة Components احترافية.
- إدارة الإصدارات (Versioning).
- تنظيم مكتبة تصميم يمكن أن يستخدمها عشرات المصممين والمطورين داخل شركة كبيرة.
بعد هذا الدرس ستكون قريبًا من طريقة العمل الفعلية داخل فرق التصميم في الشركات التقنية الكبرى، وليس فقط في المشاريع الشخصية.
تعليقات
إرسال تعليق