المساحة البيضاء هي أكثر من المساحة الفارغة بين عناصر موقع الويب. في الحقيقة ، إنها أداة قوية يمكن استخدامها بذكاء لتزويد المستخدم بالراحة وتركيز انتباهه وتسهيل رحلتك.
اكتشف كيف.
هناك العديد من الأساليب المختلفة لتصميم الويب - من البساطة إلى التصميم المسطح وتصميم المواد والاستخدام الإبداعي للتباين. أداة أخرى مهمة بشكل لا يصدق في تصميم الويب هي المساحة البيضاء.
الفضاء الأبيض يشجع على البساطة والتوازن. يمكنه أيضًا تحسين تجربة المستخدم عن طريق ، على سبيل المثال ، إنشاء فواصل فقرات ومسافات لتسهيل القراءة.
ومع ذلك ، يجب أن يتم استخدام المساحات البيضاء بشكل مسؤول وصحيح. استخدم القليل جدًا ويمكن أن تؤثر بشكل كبير على سهولة قراءة موقع الويب وقابليته للاستخدام. استخدم الكثير وستخاطر بإرسال رسالة خاطئة.
في هذه المقالة ، سنناقش ماهية المساحة البيضاء ، وأنواعها المختلفة ، ولماذا يجب عليك استخدامها ، والأهم من ذلك ، سنعرض لك أمثلة على تنفيذ جيد للمساحة البيضاء.
ما هي المساحة البيضاء؟
الفضاء الأبيض ، أو الفضاء السلبي ، هو مصطلح تصميم نستخدمه للإشارة إلى الفراغ حول أو داخل عناصر التصميم.
إذا نظرت إلى الصفحة الرئيسية لموقع الويب الخاص بـ ونيويوركر، سترى أمثلة على ذلك في كل مكان:
المساحات الكبيرة التي يؤطر شعار نيويوركر:
المسافات المتساوية التي تفصل بين روابط التنقل:
حتى اختيار الاتجاه وتتبع الطباعة يظهر فائدة المساحة البيضاء في تصميم موقع الويب.
ألقِ نظرة على موقع الويب لعام 2008 وسترى كيف تُحدث المساحة البيضاء فرقًا كبيرًا:
توجد مساحة بيضاء ، على الرغم من أنها ليست أنيقة أو إستراتيجية مثل ما نراه على الموقع اليوم.
من أين تأتي المساحة البيضاء؟
مصطلح "الفضاء الأبيض" مضلل إلى حد ما. في حين أن بعض الأمثلة على المساحات البيضاء بيضاء بالفعل (مثل مثال New Yorker أعلاه) ، فإن هذا ليس هو الحال عادةً.
لفهم سبب حصول الفضاء الأبيض على اسمه ، نحتاج إلى النظر إلى مصدره.
على الرغم من عدم وجود أي شخص اسمه في إنشاء المساحة البيضاء ، يمكننا أن نعزوها إلى الأجزاء التالية:
الأول هو الفنانين والخطاطين الصينيين في القرن العشرين. لم يتم التعامل مع المساحات الفارغة على ورق الأرز الأبيض الذي عملوا عليه على أنها مساحة ضائعة. وجدوا معنى في الفراغ واعتقدوا أنه ساهم في الفهم العام للصورة بأكملها.
أطلقوا عليه اسم "تصميم الأبيض".
كارول دوغلاس يشرح قيمة المساحة البيضاء في الفن الصيني:
"في الفن الصيني ، من المتوقع أن تنقل المساحة الفارغة المعلومات بسبب افتقارها الشديد للصور. الأحجام والخطوط العريضة للأشكال الفارغة تخلق الإيقاع والوحدة. الأشكال الصلبة تعطي معنى للفراغ والعكس صحيح.
أصبحت المساحة البيضاء فيما بعد عنصرًا أساسيًا في تصميم الطباعة بفضل الحداثة ، والتي ركزت على البساطة والشبكات المنظمة والمساحة السلبية.
لذلك من المحتمل أيضًا أن نسميها مساحة بيضاء بسبب الورق الأبيض الذي كتب عليه الحداثيون أو بسبب اللوحات البيضاء التي رسموا عليها.
الأنواع المختلفة من المساحات البيضاء التي تحتاج إلى معرفتها
عادةً ما نقسم المساحة البيضاء إلى فئتين مختلفتين:
مايكرو مقابل الفضاء الأبيض. دقيق
لا تحدد المساحة البيضاء الصغيرة والكبيرة المساحة البيضاء بناءً على الحجم.
مساحات صغيرة بيضاء الرجوع إلى المساحات الأصغر والمخازن المؤقتة المبنية حول المحتوى. على سبيل المثال ، يمكن العثور على مسافة صغيرة بيضاء بين:
- الرسائل
- الكلمات
- الفقرات
- روابط التنقل
- الصور أو المحتوى في الشبكة
- حقول النموذج
الغرض من المساحة البيضاء الصغيرة هو تحسين إمكانية قراءة المحتوى الخاص بك.
أما بالنسبة للمساحة البيضاء الكبيرة ، فهي تشير إلى مساحات أكبر خالية من المحتوى. على سبيل المثال ، يمكن العثور على مساحة بيضاء ماكرو:
- على هامش الموقع
- حول الشعار في الرأس
- بين أقسام الصفحة
- في صور البطل
- في فصل المحتوى الرئيسي والشريط الجانبي
- في الصور
- حول أزرار CTA
الغرض من المساحة البيضاء الكلية هو تحسين تخطيط موقع الويب وتسهيل فهمه والتنقل فيه.
مساحة بيضاء سلبية ومساحة بيضاء نشطة
يمكن أيضًا تقسيم المساحات البيضاء إلى فئات سلبية ونشطة.
المساحات البيضاء السلبية تشير إلى الفجوات التي تظهر بشكل طبيعي في التصميم أو الطباعة. يمكنك التحكم في حجم هذه المساحات من حيث الشكل الجمالي ، لكنها ستكون موجودة مع أو بدون وضعها هناك.
مساحة بيضاء نشطة يشير إلى المساحات الفارغة المضافة عمدًا إلى الصفحة لسهولة الحركة. الهدف هو توجيه عيون الزائر إلى أسفل الصفحة أو من خلال عملية حتى يصلوا إلى النتيجة الحتمية ويقومون بالتحويل.
لماذا يجب عليك استخدام المساحات البيضاء على مواقع الويب
فيما يلي بعض أهم الأسباب التي تجعل المساحات البيضاء مدمجة في كل موقع تقوم بتصميمه:
إنه كلاسيكي
الاتجاهات المتباينة في تصميم الويب والتي قد تبدو جيدة فقط أو تكون ذات صلة لفترة قصيرة ، تعد المساحة البيضاء كلاسيكية دائمة. ما عليك سوى إلقاء نظرة على المدة التي مرت بها وكيف تطورت من الخط الصيني إلى الأعمال الحداثية - والآن إلى الويب.
إذا كنت ترغب في جعل تصميمات الويب الخاصة بك مستدامة ، فيجب أن تكون المساحة البيضاء واحدة منها.
يؤدي إلى واجهات أكثر جاذبية
إن الدخول إلى موقع ويب يشبه إلى حد ما الدخول إلى منزل شخص ما. كل ما تحتاجه هو بضع ثوان لتشعر بالراحة التي ستشعر بها.
باستخدام المقدار المناسب من المساحة البيضاء ، يمكنك إنشاء التباين المثالي بين المحتوى والمساحة.
لكن الأمر متروك لك لتحديد النسبة الصحيحة. بالنسبة إلى علامة تجارية مثل Google ، تعمل هذه المساحة البيضاء:
ومع ذلك ، بالنسبة لعلامة تجارية أخرى ، يمكن لواجهة المستخدم المبسطة بشكل مفرط أن تجعل موقع الويب فارغًا جدًا والعلامة التجارية خالية من القيمة. ولكن إذا وجدت التوازن الصحيح ، فإن اختيارك للمساحة البيضاء يمكن أن يساعد بالتأكيد في جعل موقع الويب جذابًا لمستخدميه المستهدفين.
يجعل مواقع الويب أسهل في الاستخدام
إذا درست مبادئ تصميم الويب ، فستلاحظ أن تحديد المواقع والتباعد يتميزان بقوة داخلها.
عندما تقوم بتطبيق مبادئ التصميم هذه على مواقع الويب ، فأنت تستفيد من سيكولوجية المستخدم لإنشاء واجهات مستخدم ورحلات يسهل فهمها ومتابعتها.
خذ هذا المثال من قانون فيتس:
لا تعمل المسافات حول المحتوى والروابط وزر الحث على الشراء فقط على تحسين مظهر هذه الصفحات. يمكنهم أيضًا تحسين ثقة المستخدم والنقر فوق الدقة.
يحسن التركيز
عندما تلقي الكثير من المحتوى على الزائرين في وقت واحد ، يمكن أن يغرقوا ويصعب عليهم التركيز على شيء واحد.
إنها ظاهرة يفسرها قانون هيك :
كلما زاد عدد المحفزات في وقت واحد ، كلما استغرق تفاعل الناس معها وقتًا أطول. وفي حالة موقع الويب ، قد يكون ذلك كافيًا لمنعهم من اتخاذ قرار.
من خلال إنشاء مساحة حول كل منطقة من صفحة الويب الخاصة بك ، سوف تسمح للزائرين بأخذ لحظة للتنفس والتفكير فيما يبحثون عنه. هذا يبطئ عملية صنع القرار ... ولكن بطريقة جيدة.
إنه مفيد لـمنظمة
عندما يكون لديك الكثير من المحتوى لتضمينه على موقع ويب ، فمن السهل جدًا معرفة كيفية تقسيمه إلى أقسام وصفحات مختلفة. ومع ذلك ، فإن مجرد وضع المحتوى في حاويات مختلفة لا يكفي.
عندما تضيف مساحة حول المحتوى أو حاويته ، فإنك ترسل إشارة حول أهمية هذا المحتوى ومدى ارتباطه بما يحيط به.
Le مجموعة نيلسن نورمان يشرح كيف يعمل:
في هذا الرسم البياني ، لا ترى 20 نقطة. ترى قسمًا أكبر من النقاط على اليسار وقسمًا أصغر على اليمين. إنها المسافات المتساوية بين النقاط المجمعة والأكبر بين المجموعات التي تسمح لنا برؤيتها كوحدات مرتبطة بدلاً من النقاط الفردية.
يحسن قراءة المحتوى الخاص بك
إذا كان نصًا قصيرًا في ملف صورة البطلأو مشاركة مدونة طويلة أو صفحة منتج وصفية للغاية ، فأنت تريد من الزائرين قراءة المحتوى هناك.
سيساعد تحديد حجم الخط في لفت الانتباه إلى كلماتك ، ولكن التباعد حول الأحرف والكلمات والفقرات هو الذي يضمن إمكانية قراءتها بسهولة.
تعتقد مجموعة Nielsen Norman Group أن تباعد الطباعة هو أحد العوامل الثلاثة التي تجعل التصميم جميلًا:
يوضح هذا الرسم الطرق المختلفة التي يتم بها تحسين قابلية القراءة نتيجة لذلك.
11 مثالًا ملهمًا للمساحات البيضاء في تصميم الويب
نظرًا لوجود العديد من الطرق لاستخدام المساحات البيضاء لتحسين موقع الويب ، سأقدم 11 مثالًا تستخدم أنواعًا مختلفة من المساحات البيضاء بشكل جيد.
حديقة حيوان بيتسبرغ وشعار PPG Aquarium
إذا كان عليك إلقاء نظرة سريعة على شعار حديقة حيوان بيتسبرغ، من المحتمل أن ترى الشجرة البيضاء والطيور تحلق حولها أولاً. ومع ذلك ، عند الفحص الدقيق ، سترى صورة مخفية في مساحة سلبية: غوريلا تواجه أسدًا.
هذا الاستخدام المبتكر للمساحة البيضاء يجعل هذا الشعار وعلامته التجارية لا تنسى تمامًا. بالإضافة إلى ذلك ، تعد المفاجأة المخفية طريقة رائعة لإحداث انطباع أول قوي لدى الزوار.
معرض صور البطل حوالي 1886
يجب أن تكون الصورة الرئيسية على موقع الويب قادرة على جذب انتباه الزائر بشكل فعال. هناك عدة طرق للقيام بذلك. يمكنك تصميم صورة البطل باستخدام الألوان والأشكال في الغالب للسماح للطباعة بالتألق. أو يمكنك القيام بذلك حوالي 1886 والسماح لصورك بأخذ مركز الصدارة.
لاحظ كيف يستخدم هذا المعرض الأطباق البيضاء ، والبياضات البيضاء ، والأواني الزجاجية الشفافة ، وأدوات المائدة اللامعة لتأطير الموضوع الرئيسي لكل صورة. هذه المساحة البيضاء الحرفية تحافظ على التركيز على الطعام ، وليس مشتتات انتباه المطعم أو رواد المطعم من حوله.
صور شركة فلوريان شولز للإنتاج
هذا هو الموقع التنظيمي للمصورين وصانعي الأفلام في فلوريان وإميل شولز. كما قد تتوقع ، فإن الموقع مليء بصور الطبيعة اللافتة للنظر.
إنه دليل على أن المساحة البيضاء ليست مجرد شيء يعمل على تحسين تصميم موقع الويب. باستخدام الصور التي تستفيد بشكل جيد من المساحة البيضاء ، ستتمكن من توجيه أعين الزائرين إلى أهدافك بشكل أكثر فعالية.
في المثال أعلاه ، نرى كيف تعمل الكتلة المظلمة من الراي اللساع كمساحة بيضاء وتسمح للراي اللساع بالتحرك في المياه الخضراء ليكون التركيز الأساسي.
روابط التنقل الزائدة
قد لا تعتقد أنه يمكنك احتواء 13 رابط تنقل بدقة متتالية ، ولكن موقع الويب الخاص بـتكدس يثبت أنك مخطئ. هنا نرى كيف يمكن للمساحة الصحيحة بين الروابط أن تجعل من السهل التنقل في قائمة بهذا الحجم.
بالإضافة إلى ذلك ، لا يجبر بائع التجزئة على إخفاء فئاته ضمن قائمة الفئات الضخمة أو تحت رمز قائمة الهامبرغر (الذي يفعله الكثيرون هذه الأيام).
تباعد أسطر Udemy
ألق نظرة على كيفية تقسيم الوحدات والدروس Udemy. يتيح الجمع بين الكتل ذات الألوان الفاتحة والعناوين الجريئة والمسافات الوفيرة حول كل صف للمتعلم التنقل بسرعة في الدورة التدريبية.
عندما يكون هناك أكثر من 150 دورة تدريبية متاحة على موقع ويب ، يحتاج المستخدمون إلى أن يكونوا قادرين على تقييم ما إذا كانت الدورة التدريبية مناسبة لهم بسرعة. وسيساعد قدر كبير من الفسحة - ولكن ليس كثيرًا - في ذلك.
واجهة مستخدم منظمة Meetup
ميتوب هو موقع ويب يساعد السكان المحليين في العثور على مجموعات من الأشخاص لديهم اهتمامات مماثلة والتخطيط لأحداث من حولهم. في المدن الكبيرة ، قد يصبح موقع ويب مثل هذا مربكًا للمستخدمين الذين يبدو أن لديهم عددًا كبيرًا جدًا من المجموعات والأحداث للاختيار من بينها.
بفضل واجهة المستخدم المنظمة جيدًا والمساحة البيضاء التي تقسمها ، يمكن للمستخدمين تصفية الخيارات بسرعة أعلى موقع الويب والشريط الجانبي على اليمين. ثم يمكنهم تحويل انتباههم إلى النتائج اليومية المخفضة في المركز.
هوامش ميزون دي لا لوز
ميزون دي لا لوز هو فندق بوتيكي فاخر في نيو أورلينز. موقعه المصور بشكل جميل ليس الشيء الوحيد الذي سيبهر ضيوفه.
في صفحة "حول" ، سيرى الزائرون أولاً رسمًا توضيحيًا للجزء الداخلي للفندق. أثناء قيامهم بالتمرير لأسفل ، فإنه يحاكي كيف يمكن أن تتحرك نظراتهم لأعلى ولأسفل أثناء الإعجاب بالفندق شخصيًا. حتى بدون الرسوم المتحركة ، يبدو هذا التخطيط جذابًا للغاية بفضل الهوامش الضيقة للرسم في النص أدناه.
محور منتجات Apple
ابل كانت موجودة منذ فترة طويلة لدرجة أنها بالكاد تحتاج إلى قول كلمة واحدة عن منتجاتها. هذا هو السبب في أن غالبية موقعه على الويب يسمح للمنتجات بالتحدث.
حتى عند وجود النسخ و CTAs ، فإنها تشغل مساحة صغيرة مقارنة بالمنتجات والكميات الكبيرة من المساحة البيضاء التي تجذب انتباه الزوار إليها.
عبارات CTA الخاصة بـ ركود
يلعب زر الحث على اتخاذ إجراء دورًا مهمًا في رحلة المستخدم. إنه يجبرهم على أخذ قسط من الراحة ، والتفكير فيما تعلموه حتى الآن ، وتحديد ما إذا كانوا مستعدين لاتخاذ الخطوة التالية.
من أجل جعل الناس يلاحظون CTA ، ستحتاج إلى أكثر من موضع جيد أو تطبيق ملون لإبرازه. تتيح لك المساحة البيضاء الوفيرة حول CTA وضع كل شيء آخر جانبًا بينما يقوم الزائر باختياره.
كتل سعر دولاب الموازنة
إذا كان لديك الكثير من التفاصيل لمشاركتها مرة واحدة ، فيمكنك استخدام الحجم لإنشاء تسلسل هرمي والتباعد لتجميع التفاصيل ذات الصلة معًا. سيؤدي ذلك إلى جعل عملية اتخاذ القرار أكثر سلاسة للزائرين حيث لن يكون لديهم مجرد جدار نصي للنظر فيه.
بينما ما ننظر إليه هنا هو مثال على كتل السعر دولاب الموازنة، هذا النوع من التباعد الهوائي مفيد لأي نوع من المنتجات أو تصميم قوالب المحتوى.
تخطيط نموذج Salesforce
بغض النظر عن نوع أشكال التي يستخدمها موقع الويب الخاص بك ، فأنت تريد أن تكون ملؤها سهلة. في النموذج التجريبي المجاني 'سايلزفورس ' نرى كيف يمكن للمسافات الصحيحة أن تجعل النموذج أكثر جاذبية.
تساعد المساحة البيضاء حول كل حقل المستخدمين على التركيز على مجال واحد في كل مرة. هناك سبب آخر يجعل هذا التباعد الكافي مفيدًا. عندما يبدأ شخص ما في ملء الحقول ، ينتقل كل تصنيف إلى الأعلى. وفي حالة حدوث خطأ ، تظهر الرسالة المناسبة أدناه.
استخدم المساحات البيضاء بمهارة لإنشاء مواقع ويب أفضل
يمكن أن تشير المساحة البيضاء إلى فراغ موقع الويب ، ولكن هناك الكثير من المعنى والغرض الذي يعيش في هذا الفراغ.
من خلال التحكم في التباعد على موقع ويب ، يمكنك إنشاء تجربة أفضل لكل من يدخلها.
بينما أوضحنا لك بعض الطرق للقيام بذلك ، فإن تطبيقه على تصميماتك يعد قصة أخرى.
لكن لا تقلق. ال باني الصفحة يجعل Elementor من السهل إضافة مسافة بيضاء إلى تصميماتك.
احصل على Elementor Pro الآن!
وفي الختام
هنا ! هذا كل شيء في هذه المقالة المخصصة للمساحات البيضاء في تصميم الويب. إذا كانت لديك أية مخاوف بشأن كيفية الوصول إلى هناك ، فاسمحوا لنا أن نعرف في تعليقات.
ومع ذلك ، يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...