الدرس العاشر: Prototype (تحويل التصميم إلى تجربة تفاعلية)
اليوم نصل لمرحلة مهمة جدًا في UI/UX:
جعل التصميم “يشتغل” ويتحرك مثل تطبيق حقيقي.
ما هو Prototype؟
الـ Prototype هو نسخة تفاعلية من التصميم تسمح لك بـ:
- التنقل بين الصفحات
- الضغط على الأزرار
- تجربة التطبيق قبل البرمجة
يعني بدل ما يكون التصميم “صور ثابتة”، يصبح تجربة حقيقية قابلة للاستخدام.
لماذا نستخدم Prototype؟
- لاختبار تجربة المستخدم قبل البرمجة.
- لاكتشاف الأخطاء في التصميم.
- لإقناع العميل أو الشركة بالفكرة.
- لفهم كيف سيتحرك المستخدم داخل التطبيق.
مثال بسيط
في تطبيق متجر:
بدل أن ترى فقط شاشة “المنتجات”، يمكنك:
- الضغط على المنتج
- الانتقال لصفحة التفاصيل
- الضغط على “شراء”
- الذهاب للسلة
أنواع التفاعل في Prototype
1. Click (نقرة)
عند الضغط على زر ينتقل لصفحة أخرى.
2. Hover (مرور)
يغير شكل العنصر عند المرور عليه (يستخدم أكثر في المواقع).
3. Drag (سحب)
مثل سحب الصور أو العناصر.
4. Scroll (تمرير)
عند التمرير داخل الصفحة.
كيف تعمل Prototype في Figma؟
الخطوة 1
افتح مشروعك في Figma.
الخطوة 2
اذهب إلى تبويب Prototype في اليمين.
الخطوة 3
اختر زر مثل:
- “Login”
- “Buy”
- “Next”
ثم اسحب السهم الأزرق إلى الصفحة التي تريد الانتقال إليها.
الخطوة 4
اختر نوع الحركة:
- Instant (انتقال مباشر)
- Smart Animate (حركة سلسة)
- Dissolve (تلاشي)
- Slide (انزلاق)
الخطوة 5
اضغط على Present ▶️ لتجربة التطبيق.
مثال عملي
شاشة تسجيل الدخول
- زر “Login” → ينقلك إلى الصفحة الرئيسية.
- زر “نسيت كلمة المرور” → ينقلك لصفحة استعادة الحساب.
Smart Animate (السحر الحقيقي)
هذه أهم ميزة في Figma.
إذا كان لديك عنصر في صفحتين بنفس الاسم:
- يتحرك بشكل سلس بين الصفحات.
مثال:
- صورة تنتقل من صفحة إلى أخرى.
- زر يكبر أو يتغير تدريجيًا.
User Flow داخل Prototype
يمكنك الآن تحويل:
Login → Home → Product → Cart → Checkout
إلى تجربة حقيقية يمكن الضغط عليها.
أخطاء شائعة
❌ عدم ربط الصفحات ببعض
❌ جعل كل الأزرار تذهب لنفس الصفحة
❌ استخدام حركة مبالغ فيها
❌ تجاهل تجربة المستخدم
❌ عدم اختبار التصميم بعد الربط
نصائح احترافية
1. اجعل كل زر له وظيفة واضحة
لا تربط كل شيء بشكل عشوائي.
2. اجعل التنقل منطقي
المستخدم يجب أن يشعر أنه داخل تطبيق حقيقي.
3. لا تكثر من الحركات
الحركة الجميلة = بسيطة وسريعة.
4. اختبر دائمًا
اضغط على التصميم وكأنك مستخدم حقيقي.
تمرين عملي
في Figma:
- خذ تصميم UI من الدرس السابق.
- اربط:
- زر تسجيل الدخول → Home
- المنتج → صفحة التفاصيل
- السلة → Checkout
- استخدم:
- Smart Animate في صفحة واحدة على الأقل.
- شغّل Present وشاهد التجربة كاملة.
الهدف من هذا الدرس
بعده ستصبح قادرًا على:
- إنشاء تطبيق كامل تفاعلي.
- عرض مشروعك بشكل احترافي للعميل.
- اختبار UX قبل البرمجة.
ما تعلمته اليوم
✅ ما هو Prototype
✅ كيفية ربط الصفحات
✅ أنواع التفاعل
✅ Smart Animate
✅ تجربة تطبيق حقيقي داخل Figma
الدرس الحادي عشر (نقطة الاحتراف)
في الدرس القادم سنتعلم:
- Design System المتقدم
- Components + Variants بشكل احترافي
- Auto Layout بعمق
- بناء مكتبة تصميم كاملة مثل الشركات
هنا ستبدأ تصمم مثل المصممين في الشركات الكبيرة وليس كمبتدئ.
تعليقات
إرسال تعليق