الدرس السادس عشر: Responsive Design (التصميم المتجاوب) – كيف تصمم لكل الأجهزة
هذا الدرس من أهم المهارات التي يبحث عنها أصحاب العمل. في المشاريع الحقيقية لن يُطلب منك تصميم شاشة للهاتف فقط، بل ستصمم تجربة متكاملة تعمل على الهواتف والأجهزة اللوحية وأجهزة الكمبيوتر.
ما هو Responsive Design؟
هو تصميم واجهة تتكيف مع أحجام الشاشات المختلفة مع الحفاظ على سهولة الاستخدام.
بدل أن تصمم نسخة واحدة، تفكر في كيفية تغير الواجهة حسب الجهاز.
أنواع الأجهزة
📱 Mobile
- أصغر مساحة.
- يعتمد على اللمس.
- غالبًا يستخدم بيد واحدة.
💻 Tablet
- مساحة أكبر.
- يمكن عرض معلومات أكثر.
- مناسب للتطبيقات التعليمية والإنتاجية.
🖥 Desktop
- أكبر مساحة.
- يعتمد على لوحة المفاتيح والفأرة.
- يسمح بعرض بيانات كثيرة في نفس الوقت.
كيف تفكر كمصمم؟
لا تسأل:
كيف أجعل التصميم يدخل في الشاشة؟
بل اسأل:
ما أهم شيء يحتاجه المستخدم على هذا الجهاز؟
مثال عملي
صفحة متجر إلكتروني
على الهاتف
- شعار
- بحث
- المنتجات في عمود واحد
- قائمة سفلية
على الجهاز اللوحي
- المنتجات في عمودين
على الكمبيوتر
- المنتجات في 4 أعمدة
- قائمة جانبية للتصنيفات
- فلاتر ظاهرة دائمًا
Grid System (نظام الشبكات)
الشبكات تساعد على تنظيم العناصر.
مثال:
- الهاتف: 4 أعمدة
- التابلت: 8 أعمدة
- سطح المكتب: 12 عمودًا
نقاط التوقف (Breakpoints)
هي الأحجام التي عندها يتغير التصميم.
لا تحفظ أرقامًا فقط، بل افهم الفكرة:
- شاشة صغيرة → واجهة بسيطة.
- شاشة متوسطة → معلومات أكثر.
- شاشة كبيرة → استغلال المساحة.
قواعد Responsive Design
1. الأولوية للمحتوى
اسأل:
ما أهم معلومة؟
ضعها أولًا.
2. لا تنقل كل شيء كما هو
على الهاتف:
قد تخفي القائمة الجانبية داخل زر.
على الكمبيوتر:
تظهرها كاملة.
3. الصور
يجب أن:
- تتغير أبعادها.
- لا تخرج خارج الشاشة.
- تبقى واضحة.
4. الأزرار
في الهاتف:
- كبيرة.
- سهلة اللمس.
في الكمبيوتر:
يمكن أن تكون أصغر قليلًا لأن المستخدم يستخدم الفأرة.
Auto Layout في Figma
إذا استخدمت Auto Layout بشكل صحيح:
- ستتغير أحجام العناصر تلقائيًا.
- سيصبح تعديل التصميم أسرع.
- سيكون الانتقال بين المقاسات أسهل.
Constraints
في Figma، استخدم Constraints لتحدد كيف يتحرك العنصر عند تغيير حجم الشاشة.
أمثلة:
- يلتصق باليمين.
- يبقى في المنتصف.
- يتمدد مع الإطار.
مثال عملي
لديك زر "شراء الآن".
على الهاتف:
- يعرض بعرض الشاشة تقريبًا.
على الكمبيوتر:
- يكون بعرض مناسب داخل البطاقة، وليس بعرض الصفحة كلها.
أخطاء شائعة
❌ تصميم نسخة الهاتف ثم تكبيرها للكمبيوتر مباشرة.
❌ ازدحام الواجهة على الهاتف.
❌ عدم اختبار التصميم على أكثر من حجم شاشة.
❌ تجاهل المسافات عند تغيير المقاس.
Workflow احترافي
في المشاريع الحقيقية:
- تبدأ بتصميم الهاتف (Mobile First) إذا كان أغلب المستخدمين يستخدمون الهواتف.
- تنتقل للتابلت.
- ثم لسطح المكتب.
لكن في بعض الأنظمة الداخلية (مثل لوحات التحكم)، قد تبدأ بتصميم سطح المكتب أولًا لأن المستخدمين يعملون من أجهزة الكمبيوتر.
تمرين عملي
خذ مشروع المتجر الإلكتروني الذي صممته.
ثم أنشئ ثلاث نسخ:
- نسخة للهاتف.
- نسخة للتابلت.
- نسخة لسطح المكتب.
قارن بينها:
- ما العناصر التي تغيرت؟
- ما الذي بقي ثابتًا؟
- لماذا؟
ما تعلمته اليوم
✅ مفهوم Responsive Design.
✅ الفرق بين تصميم الهاتف والتابلت والكمبيوتر.
✅ استخدام Grid System.
✅ فهم Breakpoints.
✅ استخدام Auto Layout وConstraints.
الدرس القادم (من مستوى الخبراء)
سنتعلم Micro Interactions، وهي التفاصيل الصغيرة التي تجعل التطبيق يبدو احترافيًا، مثل:
- حركة الأزرار عند الضغط.
- تأثير الإعجابات.
- مؤشرات التحميل.
- رسائل النجاح والخطأ.
- الانتقالات الدقيقة التي تجعل تجربة المستخدم أكثر سلاسة.
هذه التفاصيل هي ما يميز التطبيقات الاحترافية عن التطبيقات العادية.
تعليقات
إرسال تعليق