ما أهمية المساحات البيضاء Whitespace في التصميم؟
نظريما هي المساحة البيضاء (White Space) ؟
تشير المساحة البيضاء إلى أي نوع من المساحات المحيطة بعناصر مثل الصور والنصوص والأزرار. وتُعد المساحة البيضاء مهمة في التصميم لأنها تساعد على تحقيق التوازن بين العناصر الموجودة على الصفحة.
لنلقِ نظرةً على بعض الأمثلة التي توضح كيفية استخدام المساحات البيضاء بفعالية في التصميم.
تحسين عبارات الحث على اتخاذ إجراء (CTAs)
لنتناول مثالاً على زر "الدعوة لاتخاذ إجراء" (CTA). تُستخدم هذه الأزرار لتشجيع المستخدمين على القيام بإجراء محدد، مثل الاشتراك في نشرة إخبارية أو إتمام عملية شراء.
على الصفحة الرئيسية لموقع freeCodeCamp، يظهر زر الدعوة لاتخاذ إجراء (CTA) منفصلاً بصرياً عن العناصر الأخرى؛ وتُظهر الصورة أدناه هذا الزر مع وجود مساحة محددة تحيط به.
من خلال الاستخدام الفعال للمساحات البيضاء، يمكننا المساعدة في جعل زر "الدعوة لاتخاذ إجراء" (CTA) أكثر بروزاً وتشجيع المستخدمين على النقر عليه.
أنواع المساحات البيضاء (White Space)
لنلقِ الآن نظرة فاحصة على الأنواع المختلفة للمساحات البيضاء.
-
المساحة البيضاء الكبيرة (Macro) : هي المساحة الفاصلة بين العناصر الأكبر حجماً، مثل الصور وكتل النصوص والأزرار.
-
المساحة البيضاء النشطة (Active) : هي المساحة التي يتم إنشاؤها عمداً للمساعدة في توجيه عين المستخدم ولفت الانتباه إلى عناصر محددة في الصفحة.
-
المساحة البيضاء السلبية (Passive) : هي المساحة المتبقية بعد وضع جميع العناصر على الصفحة.
-
المساحة البيضاء الدقيقة (Micro) : هي المسافة الفاصلة بين الأحرف الفردية في سطر من النص.
تُظهر الصورة أدناه قسم "الأسئلة الشائعة" (Frequently Asked Questions) في الصفحة الرئيسية لموقع freeCodeCamp، حيث تتيح هذه المسافات قراءة كل سؤال وإجابة بسهولة.
تُعد المساحات البيضاء الدقيقة (Micro white space) مهمة لأنها تساعد في تحسين سهولة القراءة ووضوح النص، مما يسهل على المستخدمين تصفح المحتوى واستيعابه.
قانون التقارب The Law of Proximity
عند تصميم صفحات الويب، ينبغي عليك دائمًا مراعاة "قانون التقارب"؛ إذ ينص هذا القانون على أن العناصر المتقاربة تُدرَك على أنها مترابطة، بينما تُدرَك العناصر المتباعدة على أنها غير مترابطة.
يمكنك استخدام المساحات البيضاء للمساعدة في تجميع العناصر المترابطة معاً وتوجيه المستخدمين عبر محتوى صفحتك.
أسئلة :
ما هي المساحة البيضاء الكبيرة (Macro White Space) ؟
1. المسافة بين الأحرف الفردية في سطر من النص. ❌
2. المسافة المحيطة بالصور فقط. ❌
3. المسافة المحيطة بالنص فقط. ❌
4. المسافة بين العناصر الأكبر حجماً، مثل الصور وكتل النصوص والأزرار. ✅
ما هي المساحة البيضاء النشطة (active white space) ؟
1. مساحة مخصصة لعناصر النصوص فقط في الصفحة. ❌
2. مساحة مخصصة للعناصر المصوَّرة (الأشكال) في الصفحة. ❌
3. مساحة مخصصة لعناصر القوائم في الصفحة. ❌
4. مساحة مُنشأة عمداً للمساعدة في توجيه عين المستخدم ولفت الانتباه إلى عناصر محددة في الصفحة. ✅
ما هي المساحة البيضاء السلبية (passive white space) ؟
1. المساحة المتبقية بعد وضع جميع العناصر على الصفحة. ✅
2. المساحة المخصصة للعناصر النصية فقط على الصفحة. ❌
3. المساحة المخصصة للعناصر المصوَّرة على الصفحة. ❌
4. المساحة المخصصة لعناصر التنقل على الصفحة. ❌