الدرس الخامس: Layout & Spacing (ترتيب العناصر والمسافات)
يُعد هذا الدرس من أهم الدروس في UI/UX، لأن التصميم الاحترافي لا يعتمد على كثرة الألوان أو المؤثرات، بل على تنظيم العناصر والمسافات.
قد تجد تصميمًا بسيطًا جدًا لكنه يبدو احترافيًا، والسبب غالبًا هو الـ Layout.
ما هو Layout؟
Layout هو طريقة ترتيب جميع عناصر الصفحة، مثل:
- العناوين.
- الصور.
- الأزرار.
- القوائم.
- بطاقات المنتجات.
الهدف هو أن يعرف المستخدم أين ينظر أولًا، ثم أين ينتقل بعد ذلك.
ما هي المسافات (Spacing)؟
المسافات هي الفراغات بين العناصر.
هناك نوعان مهمان:
1. Margin (الهامش الخارجي)
هو المسافة خارج العنصر.
مثال: إذا كان لديك زران، فإن المسافة بينهما تُعد Margin.
2. Padding (الحشوة الداخلية)
هي المسافة داخل العنصر.
مثال: داخل الزر، يجب ألا يكون النص ملاصقًا للحواف، بل يحيط به فراغ من جميع الجهات.
مثال
زر مكتوب فيه:
تسجيل الدخول
إذا كان النص ملاصقًا للحافة، فالتصميم سيبدو سيئًا.
أما إذا تركت:
- 16px من اليمين.
- 16px من اليسار.
- 12px من الأعلى.
- 12px من الأسفل.
فسيبدو الزر أنيقًا ومريحًا.
White Space (المساحات البيضاء)
ليست المقصود بها اللون الأبيض، بل الفراغ.
وجود فراغ مناسب بين العناصر يجعل التصميم:
- أسهل في القراءة.
- أكثر احترافية.
- أقل إزعاجًا للعين.
❌ لا تحاول ملء كل الشاشة بالعناصر.
نظام الشبكات (Grid System)
الشبكة تساعدك على ترتيب العناصر بشكل متناسق.
في تصميم المواقع غالبًا تُستخدم شبكة من 12 عمودًا.
أما في تصميم تطبيقات الهاتف، فتركّز أكثر على:
- محاذاة العناصر.
- مسافات ثابتة.
- توزيع متوازن.
قاعدة 8px
من أشهر القواعد في التصميم.
اجعل المسافات مضاعفات الرقم 8، مثل:
- 8px
- 16px
- 24px
- 32px
- 40px
- 48px
هذا يجعل التصميم متناسقًا وسهل التطوير برمجيًا.
المحاذاة (Alignment)
كل عنصر يجب أن يكون له مكان واضح.
مثلًا:
- العنوان يبدأ من نفس خط بداية الحقول.
- الأزرار لها نفس العرض.
- الصور مصطفّة مع النصوص.
❌ لا تضع كل عنصر في مكان مختلف عشوائيًا.
التسلسل البصري (Visual Hierarchy)
يجب أن يرى المستخدم العناصر بهذا الترتيب:
- العنوان.
- الصورة.
- الوصف.
- الزر.
إذا كان الزر أكبر من العنوان أو كانت العناصر متداخلة، فسيتشتت المستخدم.
مثال عملي
شاشة تسجيل دخول:
مرحبًا بك
سجل الدخول للمتابعة
[ البريد الإلكتروني ]
[ كلمة المرور ]
[ تسجيل الدخول ]
هل نسيت كلمة المرور؟
المسافات بين العناصر:
- بين العنوان والوصف: 16px.
- بين الوصف والحقل الأول: 24px.
- بين الحقول: 16px.
- بين آخر حقل والزر: 24px.
ستلاحظ أن التصميم أصبح مريحًا للعين.
أخطاء شائعة
❌ عناصر متلاصقة دون مسافات.
❌ أحجام أزرار مختلفة في نفس الصفحة.
❌ نصوص غير مصطفة.
❌ استخدام مسافات عشوائية (13px، 19px، 27px...).
❌ عدم وجود فراغ كافٍ حول المحتوى.
تمرين عملي
في Figma، صمّم شاشة تسجيل دخول تحتوي على:
- عنوان.
- وصف.
- حقلي إدخال.
- زر.
- رابط "نسيت كلمة المرور؟".
ثم تأكد من:
- استخدام مسافات 8 أو 16 أو 24 بكسل.
- محاذاة جميع العناصر على نفس الخط.
- وجود فراغ مريح حول كل عنصر.
نصيحة احترافية
إذا شعرت أن تصميمك "غير جميل"، فلا تبدأ بتغيير الألوان. اسأل نفسك أولًا:
- هل العناصر مصطفة؟
- هل المسافات متساوية؟
- هل هناك فراغ كافٍ؟
في كثير من الأحيان، تحسين الـ Layout وحده يجعل التصميم يبدو احترافيًا.
ما تعلمته اليوم
✅ الفرق بين Margin وPadding.
✅ أهمية White Space.
✅ قاعدة 8px.
✅ المحاذاة الصحيحة.
✅ التسلسل البصري.
✅ أساسيات Grid System.
الدرس السادس (بداية الاحتراف)
في الدرس القادم سنتعلم أساسيات UX Design، وسنغطي:
- كيف تفكر مثل مصمم UX.
- كيفية فهم المستخدم قبل التصميم.
- إنشاء Persona (شخصية المستخدم).
- تحديد Pain Points (مشكلات المستخدم).
- رسم User Flow (مسار المستخدم).
من هذه المرحلة سنبدأ بالانتقال من مجرد "رسم واجهات" إلى تصميم تجربة مستخدم احترافية، وهي المهارة التي تبحث عنها الشركات الكبرى.
تعليقات
إرسال تعليق