تصميم الواجهات — من الفكرة إلى نموذج تفاعلي

1. UI مقابل UX — الشكل والتجربة

الهدف: تشرح الفرق بين واجهة المستخدم وتجربة المستخدم بأمثلة.

**UI (User Interface):** ما تراه — أزرار، ألوان، خطوط، تخطيط.
**UX (User Experience):** ما تشعر به — سهولة، وضوح، سرعة إنجاز المهمة.

مثال تطبيق توصيل:
• UI جميل لكن زر «اطلب» مخفي = UX سيء
• UI بسيط + 3 خطوات واضحة = UX جيد

التصميم الجيد يخدم **المهمة** — ليس الزينة فقط.

سؤال Mesue دائماً: «ماذا يريد المستخدم أن يفعل هنا؟»

• UI = مظهر، UX = تجربة كاملة
• الجمال بلا وظيفة يُحبط المستخدم
• ابدأ بالمهمة لا بالألوان
• اختبر مع أشخاص حقيقيين

 UI: شكل
 UX: رحلة
      \ /
   منتج ناجح

2. أساسيات Figma — إطار وشاشة

الهدف: تنشئ ملف Figma وإطار هاتف وعناصر أساسية.

Figma = أداة تصميم واجهات في المتصفح (مجاني للتعلم).

**أول خطوات:**
1) ملف جديد → Frame iPhone 14 (393×852)
2) مستطيلات (Rectangle) للأقسام
3) نص (Text) للعناوين
4) أزرار (Frame + نص)
5) طبقات (Layers) — سمِّ كل شيء
6) Auto Layout — ترتيب تلقائي (للمتقدمين)

**عادات:**
• 8px grid للمسافات
• مجموعات (Groups) للعناصر المرتبطة
• نسخ Components للأزرار المتكررة

لا تطلب الكمال — wireframe رمادي أولاً.

• Frame = حجم الشاشة
• سمِّ الطبقات — توفّر وقتك
• ابدأ رمادياً ثم ألوان
• Figma مجاني للتعلم

 Figma
   |
 Frame هاتف
   |
 عناصر + طبقات

3. الألوان — تناسق وقراءة

الهدف: تبني لوحة ألوان بسيطة: أساسي، ثانوي، محايد، تنبيه.

لوحة Mesue البسيطة:

• **أساسي Primary** — هوية العلامة (زر رئيسي)
• **ثانوي Secondary** — تمييز أقل
• **محايد Neutral** — خلفيات، نصوص (رمادي، أبيض)
• **تنبيه** — نجاح أخضر، خطر أحمر، تحذير برتقالي

**تباين (Contrast):** نص داكن على خلفية فاتحة — أو العكس. ضعيف = صعب القراءة.

أدوات: coolors.co، Adobe Color.

**لا أكثر من 3–4 ألوان قوية** — الباقي محايد.

فكّر في daltonism — لا تعتمد على اللون وحده للمعنى.

• لوحة صغيرة متناسقة
• تباين للقراءة
• ألوان محايدة للخلفيات
• لا ألوان صارخة في كل مكان

 أساسي + ثانوي
       +
    محايد
       +
    تنبيه

4. الخطوط — هرمية وقراءة

الهدف: تختار خطوطاً عربية/إنجليزية وتبني هرمية نصوص.

هرمية النص:

• **H1** — عنوان الصفحة (أكبر)
• **H2** — أقسام
• **Body** — الفقرات (16px+ للقراءة)
• **Caption** — تلميحات صغيرة

خطوط عربية ويب شائعة: Cairo، Tajawal، Noto Sans Arabic.

**قواعد:**
• خطان كحد أقصى غالباً (عربي + إنجليزي)
• لا 5 أحجام عشوائية — نظام 4 مستويات
• مسافة سطر 1.4–1.6 للفقرات
• محاذاة RTL للعربية

في Figma: أنماط نص (Text styles) لإعادة الاستخدام.

• هرمية توجّه العين
• 16px+ للنص الأساسي
• خطان كافيان
• RTL للعربية

 H1 كبير
   |
 H2
   |
 Body
   |
 Caption

5. Wireframes — هيكل بلا زينة

الهدف: ترسم 3 شاشات wireframe رمادية لمسار مستخدم.

Wireframe = رسم هيكلي أبيض/رمادي — **بدون ألوان نهائية**.

الهدف: أين العناصر؟ ما الترتيب؟ أين الزر؟

**مسار مثال — تطبيق وصفات:**
1) قائمة وصفات
2) تفاصيل وصفة
3) قائمة تسوق

استخدم مستطيلات رمادية للصور، خطوط للنص، X للأماكن الفارغة.

**لا تضيع وقتاً في الجمال** — 30 دقيقة لـ 3 شاشات.

راجع مع صديق: «هل تفهم أين تضغط؟»

• الهيكل قبل الجمال
• رمادي = تركيز على التخطيط
• 3 شاشات لمسار واحد
• اختبار مبكر رخيص

 ش1 ----> ش2 ----> ش3
 قائمة   تفاصيل  إجراء

6. المكونات — أزرار وبطاقات

الهدف: تصمّم مكونات قابلة لإعادة الاستخدام: زر، بطاقة، حقل إدخال.

مكون (Component) = عنصر تصممه مرة وتنسخه.

**زر:**
• Primary / Secondary / Ghost
• حالات: عادي، hover، معطّل
• ارتفاع لمس ~44px للهاتف

**بطاقة Card:**
• صورة + عنوان + وصف + إجراء
• ظل خفيف أو حدود

**حقل Input:**
• تسمية فوق الحقل
• placeholder توضيحي
• رسالة خطأ تحت الحقل

في Figma: أنشئ Component — Instances للنسخ.

اتساق المكونات = منتج يبدو «محترفاً».

• صمّم مرة، استخدم كثيراً
• 44px هدف لمس للأزرار
• حالات الزر مهمة
• التسميات فوق الحقول

 Button
  Card
  Input
     \ | /
   Component

7. Mobile-first — الهاتف أولاً

الهدف: تصمّم للشاشة الصغيرة ثم توسّع للتابلت/سطح المكتب.

معظم المستخدمين على الهاتف — ابدأ به.

**Mobile-first:**
1) عمود واحد
2) أزرار كبيرة أسفل الإبهام
3) قوائم مختصرة — همبرغر إن لزم
4) صور متجاوبة
5) نص قصير — لا جدران نص

**ثم التوسع:**
• Tablet: عمودان
• Desktop: sidebar + محتوى

في Figma: أطر متعددة بجانب بعض — 393، 768، 1440.

اختبر بإبهامك: هل تصل للأزرار بسهولة؟

• الهاتف أولوية
• عمود واحد للبداية
• أزرار في متناول الإبهام
• أطر متعددة لكل مقاس

 393px هاتف
     |
 768 تابلت
     |
 1440 سطح مكتب

8. إتاحة الوصول — للجميع

الهدف: تطبّق أساسيات a11y: تباين، تسميات، حجم لمس.

إتاحة الوصول (Accessibility / a11y) = منتج يستخدمه أكثر ناس.

**أساسيات:**
• تباين نص/خلفية كافٍ (WCAG)
• لا معلومة باللون فقط («الحقل الأحمر خطأ» + نص)
• تسميات للأزرار والحقول (لقارئ الشاشة)
• حجم لمس 44px
• لا نص داخل صورة فقط — alt نص
• دعم RTL للعربية

**اختبار سريع:**
• كبّر الخط 200% — هل ينكسر التخطيط؟
• أغمض عينيك — هل التسميات واضحة بصوت؟

الإتاحة ليست «إضافة لاحقة» — بل من البداية.

• تباين وتسميات
• لا لون وحده للمعنى
• حجم لمس كافٍ
• RTL جزء من الإتاحة العربية

 تباين + تسميات
        +
    حجم لمس
        =
    للجميع

9. النماذج التفاعلية — اربط الشاشات

الهدف: تبني prototype في Figma بروابط بين الشاشات.

Prototype = محاكاة ضغط الأزرار والانتقال.

**في Figma:**
1) تبويب Prototype
2) اسحب من زر إلى الشاشة التالية
3) اختر انتقال: Instant / Dissolve / Slide
4) Present — جرّب كمستخدم

**سيناريو اختبار:**
«أنت مستخدم جديد — سجّل ثم اطلب منتجاً»

سجّل ملاحظات:
• أين تردد؟
• أي زر لم يُفهم؟
• كم خطوة للهدف؟

5 مستخدمين تجريبيين كافون للبداية — حتى أصدقاء العائلة.

• Prototype قبل البرمجة
• اختبر سيناريو حقيقي
• لاحظ نقاط التردد
• عدّل التصميم ثم أعد الاختبار

 شاشة أ
   | نقرة
   v
 شاشة ب
   | نقرة
   v
 شاشة ج

10. المشروع النهائي — نموذج أولي كامل

الهدف: تسلّم مشروع UI: wireframes، تصميم، prototype، وملاحظات اختبار.

المشروع النهائي — حزمة تصميم:

1) **وثيقة UX** — جملة مشكلة + مستخدم مستهدف
2) **User flow** — 5–7 خطوات نصية أو رسم
3) **3+ wireframes** رمادية
4) **تصميم ملون** — لوحة ألوان + خطوط + مكونات
5) **Mobile + مقاس ثانٍ** (tablet أو desktop)
6) **Prototype** — 3 شاشات مربوطة على الأقل
7) **اختبار 2 أشخاص** — 3 ملاحظات + تحسين واحد نفّذته
8) **قائمة a11y** — ما طبّقت
9) **لقطات + رابط Figma** للمشاركة

المشروع يمكن أن يكون: تطبيق مدرسة، متجر صغير، تطبيق هواية.

• الحزمة الكاملة أهم من شاشة واحدة فاخرة
• اختبار المستخدم دليل حقيقي
• وثّق التحسينات
• جاهز للمسار البرمجي التالي

 UX → Wire
      |
   Design
      |
 Prototype → Test