الدرس الأول: مقدمة إلى UI/UX
ما هو UI؟
UI اختصار لـ User Interface، أي واجهة المستخدم.
هي كل ما يراه المستخدم ويتفاعل معه داخل التطبيق أو الموقع، مثل:
- الأزرار.
- القوائم.
- الصور.
- الأيقونات.
- الألوان.
- الخطوط.
- مربعات إدخال البيانات.
مثال: عندما تفتح تطبيق واتساب، فإن زر إرسال الرسالة، قائمة المحادثات، وأيقونة الكاميرا كلها عناصر من واجهة المستخدم (UI).
ما هو UX؟
UX اختصار لـ User Experience، أي تجربة المستخدم.
وهو يهتم بسهولة استخدام التطبيق ومدى راحة المستخدم أثناء التنقل بين الصفحات.
مثال: إذا احتاج المستخدم دقيقة كاملة ليجد زر "تسجيل الدخول"، فهذا يعني أن تجربة المستخدم سيئة.
أما إذا وجد الزر مباشرة واستطاع استخدام التطبيق بسهولة، فتجربة المستخدم جيدة.
الفرق بين UI و UX
| UI | UX |
|---|---|
| يهتم بالشكل | يهتم بالتجربة |
| الألوان والخطوط | سهولة الاستخدام |
| الأزرار والأيقونات | سرعة الوصول للمعلومات |
| التصميم المرئي | راحة المستخدم |
تذكر دائمًا:
- UI = كيف يبدو التطبيق؟
- UX = كيف يعمل التطبيق؟
كيف يعمل مصمم UI/UX؟
عندما تطلب شركة إنشاء تطبيق جديد، فإن مصمم UI/UX لا يبدأ بالرسم مباشرة، بل يمر بعدة مراحل:
- فهم فكرة المشروع.
- دراسة المستخدمين المستهدفين.
- تحليل التطبيقات المنافسة.
- رسم مخطط أولي (Wireframe).
- تصميم الواجهة (UI).
- إنشاء نموذج تفاعلي (Prototype).
- تسليم التصميم للمبرمج.
الأدوات التي ستستخدمها
- Figma (الأداة الأساسية لتصميم الواجهات).
- Photoshop (اختياري).
- Illustrator (اختياري).
- ChatGPT للمساعدة في الأفكار وتحسين العمل.
مثال عملي
تخيل أنك تريد تصميم تطبيق لطلب الطعام.
UI:
- لون الأزرار.
- شكل الصفحة.
- صور الوجبات.
- الخطوط.
UX:
- هل يستطيع المستخدم طلب الطعام خلال أقل من دقيقة؟
- هل زر "إضافة إلى السلة" واضح؟
- هل عملية الدفع سهلة؟
مصطلحات يجب حفظها
- UI = User Interface = واجهة المستخدم.
- UX = User Experience = تجربة المستخدم.
- Wireframe = مخطط أولي.
- Prototype = نموذج تفاعلي.
- Design System = نظام تصميم موحد.
- Component = عنصر قابل لإعادة الاستخدام.
- Frame = مساحة العمل في Figma.
واجب اليوم
- افتح أي ثلاثة تطبيقات في هاتفك (مثل واتساب، إنستغرام، ويوتيوب).
- في كل تطبيق، حاول تحديد:
- 5 عناصر UI (مثل الأزرار أو الأيقونات).
- 3 أمثلة على UX جيدة أو سيئة (مثل سهولة الوصول إلى ميزة معينة).
اكتب ملاحظاتك، وسنناقشها في الدرس القادم.
تعليقات
إرسال تعليق