المسافة البيضاء (أو "المساحة السلبية") هي مساحة فارغة بين كائنات الصفحة وحولها. عناصر المساحة البيضاء في واجهات المستخدم الرسومية هي:

  • الهوامش ، والأعمدة ، والمزاريب
  • الفضاء حول الصور والكائنات الرسومية
  • تباعد الأسطر وتباعد الأحرف داخل محتوى النص

على الرغم من أن بعض الأشخاص قد يعتبرون المساحة البيضاء مضيعة لملء الشاشة ، إلا أنه عنصر أساسي في التصميم. في الواقع ، تكون المسافات البيضاء بنفس أهمية المحتوى. كما قال جان تسشيكهولد:

يجب اعتبار المساحة البيضاء كعنصر نشط وليس خلفية سلبية

تتضمن جميع واجهات المستخدم الجيدة قيم whitespace سليمة في جميع عناصر الصفحة من أعلى إلى أسفل. يمكن أن تكون المساحة البيضاء في الصفحة ذات أهمية كبيرة مثل المساحة التي تشغلها عناصر واجهة المستخدم لأن النصوص والأزرار والشعارات وغيرها من الكائنات تحتاج إلى مساحة للتنفس.

في هذه المقالة ، ستجد كيفية استخدام المسافات البيضاء في تصميماتك لمنحها شعورًا نظيفًا وغير مرتب:

1. تحسين قراءة النص

يمكن لـ Whitespace أن تجعل القراءة أسهل بكثير عن طريق تقليل حجم النص الذي يراه الزوار في الحال. عدم وجود فراغ أبيض (صفحة مزدحمة) لا يجعل المستخدمين يرغبون في قراءة المحتوى. من ناحية أخرى ، فقد ثبت أن المسافات البيضاء المستخدمة بشكل صحيح تزيد من استيعاب النص حتى 20٪ ، كما هو مشار إليه ديمتري فادييف .

هناك أمران مهمان يجب مراعاتهما عند تحسين محتوى النص الخاص بك هما هوامش الفقرة وتباعد الأسطر (المسافة بين كل سطر في النص). هذا الأخير يمكن أن تحسن بشكل كبير وضوح مجموعة النص. بشكل عام ، كلما كان التباعد أكبر ، كلما كانت تجربة المستخدم أفضل أثناء القراءة (على الرغم من أن تباعد الأسطر المفرط يمكن أن يجعل الخطوط غير متصلة).

2. توضيح العلاقات

ينشأ التخطيط بالكامل من مجموع أجزائه ويتم تعريف علاقات المحتوى بالمساحة البيضاء المحيطة. ينص قانون التقارب على أن الأشياء القريبة من بعضها تبدو متشابهة. يعمل whitespace كإشارة مرئية في هذه الحالة. انظر للصورة ادناه:

1

تنص قوانين الجشطالت على أن الأشياء القريبة ستظهر "وحدة" واحدة ؛ الفضاء الأبيض بمثابة جديلة بصرية.

يلاحظ كل شخص يشاهد هذه الصورة تقريبًا مجموعتين من الدوائر ، وليس مجرد 12 دائرة. الدوائر كلها متطابقة والفرق الوحيد بينهما هو مقدار المساحة البيضاء التي تفصل بينهما.

من الممكن تجميع العناصر معًا من خلال تقليل المسافة بينها وزيادة المساحة بينها وبين العناصر الأخرى في الصفحة.

بالنسبة إلى واجهات المستخدم ، فإن هذا يعني أن الكائنات القريبة ستظهر كـ "وحدة" واحدة. على سبيل المثال ، في سياق نماذج الويب ، من الأفضل وضع تسميات قريبة من الحقول ذات الصلة لإنشاء كائن. عندما يتم وضع العلامات بالقرب من الحقول ، فإن هذا يجعل العلاقة بينهما واضحة تمامًا للمستخدمين.

2

يتم توصيل المعلومات بشكل أكثر وضوحًا عندما يتم وضع العلامات بالقرب من الحقول التي ترتبط بها.

3. جذب الانتباه

يمكن للمصممين استخدام المسافات البيضاء للتواصل ما هو الأكثر أهمية في لمح البصر. هناك علاقة بين المسافة والانتباه. أكبر المسافة يجبر الانتباه. لن يؤدي عدم وجود عناصر أخرى إلا إلى جعل العناصر الموجودة أكثر بروزًا. من الممكن استخدام مسافة بيضاء لمصلحتك - لرسم العينين المتجولة على عناصر صفحة معينة. إن الحشو الإضافي حول جزء معين من المحتوى يجذب انتباه المستخدمين إلى تلك المنطقة ببساطة لأنه لا يوجد شيء آخر على الشاشة لجذب الانتباه. وهكذا ، كلما زادت المسافة البيضاء حول الجسم ، كلما زادت العين.

3

4. إنشاء التسلسل الهرمي المرئي

عندما يتم استخدام المسافات البيضاء بشكل مناسب ، فإنها تسمح للصفحة بإنشاء تدفق عام وتوازن ، وهذا بدوره يساعد على توصيل القصد من التصميم. يمكن أن تدعم المسافة البيضاء التسلسل الهرمي الكلي. وتنتج إما التماثل أو عدم التماثل.

التماثل يخلق الذاكرة والانسجام:

4

كما أن ما تشيمب ، هو من كبار المدافعين عن الفضاء الأبيض في تصاميمهم. عندما يبحث الزوار في الصفحة الرئيسية ، فإن زر "اشترك مجانًا" يجذب انتباههم على الفور تقريبًا. باستخدام التناظر ، من الممكن إنشاء تخطيط متوازن مع أجزاء يمينية ويسرى على نفس القدر من الأهمية.

في حين أن عدم التماثل يلفت الانتباه:

5

يعد عدم التماثل أمرًا رائعًا لجذب الانتباه إلى منطقة معينة من الصفحة.

6

عندما يستخدم عنصر الفضاء غير المتماثل ، فإنه يبرز ضد العناصر المحيطة الأخرى.

استنتاج

المساحة البيضاء ليست مساحة مهدرة ، إنها أداة تصميم قوية. يمكن أن يكون مهما بقدر أهمية المساحة التي تشغلها الصور أو النص أو أي كائن آخر لواجهات المستخدم لأن حتى المساحة الفارغة تخدم غرضًا وتدعم التكامل البصري للتخطيط.

على الرغم من أنه يبدو موضوعًا بسيطًا ، إلا أنه قد يكون من الصعب التحكم في المسافة البيضاء لأن تطبيق المساحة البيضاء هو عبارة عن الفن والعلم. لا بد من التفهم الفعلي لكيفية استخدام المساحة البيضاء لإنشاء تخطيط جيد.