أساسيات تصميم واجهات المستخدم UI: مبادئ ونصائح عملية

أساسيات تصميم واجهات المستخدم UI

واجهة المستخدم (UI) هي كل ما يراه المستخدم ويتفاعل معه — الأزرار، الألوان، الخطوط، التخطيط. واجهة جيدة تجعل الاستخدام سهلاً وممتعاً.

مبادئ التصميم الأساسية

• التسلسل الهرمي: أهم المعلومات أكبر وأبرز
• الاتساق: نفس الألوان والأسلوب في كل الصفحات
• المسافات البيضاء: لا تكدّس — التنفس يسهل القراءة
• المحاذاة: كل عنصر في مكانه المنظم
• التباين: نص غامق على خلفية فاتحة (والعكس)

تطبيق عملي مع Figma

# Figma مجاني وأفضل أداة تصميم UI:
# figma.com — يعمل في المتصفح

# اختصارات أساسية:
R → مستطيل
T → نص
F → إطار (Frame)
Ctrl+D → تكرار
Ctrl+G → تجميع
Shift+A → Auto Layout (ترتيب تلقائي)

# إنشاء زر:
1. ارسم مستطيل (R)
2. Corner Radius: 8
3. Fill: #e94560
4. أضف نص: "اشترِ الآن"
5. حدد المستطيل والنص → Shift+A (Auto Layout)
6. Padding: 12 horizontal, 24 vertical

# إنشاء بطاقة:
1. Frame (F): 320 × 400
2. Fill: white
3. Border Radius: 12
4. Shadow: X:0 Y:4 Blur:12 Color:#00000015
5. Auto Layout: Vertical, Gap: 16, Padding: 0
6. أضف: صورة + عنوان + وصف + سعر + زر

نظام تصميم (Design System)

# أنشئ نظام تصميم للاتساق:

# الألوان:
Primary: #0f3460
Secondary: #e94560
Success: #27ae60
Warning: #f39c12
Error: #e74c3c
Background: #f8f9fa
Text: #333333
Text Light: #666666

# الخطوط:
العربي: Cairo أو Tajawal
اللاتيني: Inter أو Poppins
أحجام:
  H1: 32px / Bold
  H2: 24px / Bold
  H3: 20px / Semi-bold
  Body: 16px / Regular
  Small: 14px / Regular
  Caption: 12px / Regular

# المسافات (Spacing):
4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px

# Border Radius:
Small: 4px (أزرار صغيرة)
Medium: 8px (بطاقات)
Large: 12px (حاويات)
Full: 9999px (دائري)

التصميم المتجاوب

# أحجام الشاشات:
# Mobile: 375px
# Tablet: 768px
# Desktop: 1440px

# في Figma:
1. صمم Mobile First (375px)
2. ثم Tablet (768px)
3. ثم Desktop (1440px)

# قواعد التجاوب:
- أزرار: 44×44px كحد أدنى على الموبايل
- خط: 16px كحد أدنى
- هوامش: 16px على الموبايل, 32px+ على الديسكتوب
- الأعمدة: 1 موبايل → 2 تابلت → 3-4 ديسكتوب

ملخص المهارات المكتسبة

• تطبيق مبادئ التصميم الأساسية
• استخدام Figma لتصميم واجهات
• إنشاء نظام تصميم متسق
• التصميم المتجاوب لكل الأجهزة

الخطوة التالية: افتح Figma وصمم صفحة هبوط كاملة باستخدام نظام التصميم أعلاه.