مبدأ “التوازن Balance” في تصميم المواقع

كتبه أحمد مجدي 2 أبريل 2012

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

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

مفهوم التوازن في التصميم

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

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

الانسان بطبيعته كائن ثنائى واحساسنا بالتوازن فطري، لو ألقينا نظرة مقربة على أجسادنا لاكتشفنا ذلك

الإنسان بطبيعته مخلوق ثنائي : اعضاء الجانب الايمن لجسم الانسان = أعضاء الجانب الأيسر
الإنسان بطبيعته مخلوق ثنائى: أعضاء الجانب الايمن لجسم الانسان = أعضاء الجانب الأيسر

آلية حساب الوزن البصرى لكل عنصر

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

كيف يحسب الدماغ الوزن البصري للعناصر ؟ … الاجابة: أعيننا تصنع محور عمودي وهمي يفصل التصميم لنصفين متساويين عندما نشاهد أي صورة أو مشهد و تبدأ فوراً في حساب الوزن البصري لكل عنصر على جانبي المحور الوهمي، ثم تحسب النتيجة … فإذا كان مجموع الوزن البصري لعناصر الجانب الأيمن = مجموع الوزن البصري لعناصر الجانب الأيسر، إذا الصورة متوازنة وإلا فإن هذه الصورة بها مشكلة.

لو افتضرنا أن هناك مقياس للتوازن Measure of balance من ٥ درجات وأعطينا لكل شكل من الاشكال التالية درجة على مقياس التوازن، كالتالي:-

كل الاشكال اخدت درجة واحدة علي مقياس التوزان عدا النجمة اخذت درجتين
كل الاشكال اخدت درجة واحدة علي مقياس التوزان عدا النجمة اخذت درجتين

الآن لنحسب الوزن البصري للعناصر على الجانبين الايسر والأيمن للتصميم التالى:-

علي الرغم من ان الاشكال علي جانبي التصميم ليست متماثلة ، الا ان التصميم متوازن ، السبب يكمن في ان كل عنصر له وزن بصري مختلف عن الآخر
علي الرغم من أن الاشكال علي جانبي التصميم ليست متماثلة ، إلا أن التصميم متوازن، السبب يكمن في أن كل عنصر له وزن بصري مختلف عن الآخر

النتيجة أن التصميم متوازن، كيف ؟ … على الرغم من أن الاشكال ليست متماثلة على جانبي التصميم …

  • فالجانب الأيمن به ثلاث عناصر الدائرة + المربع + المثلث
  • الجانب الأيسر به عنصرين فقط و هما النجمة + المثلث

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

كيف يتم تحديد قيمة الوزن البصري للعناصر؟

معايير الوزن البصري للعناصر علي الميزان البصري Measure of balance
معايير الوزن البصري للعناصر علي الميزان البصري Measure of balance

السؤال الذي يجب ان تسأله … لماذا أخذت النجمة درجتين على الميزان البصري على خلاف المثلث والدائرة والمربع؟ … هذا يقودنا إلى تحديد المعايير وراء رفع أو خفض قيمة اي عنصر على الميزان البصرى، الوزن البصرى لكل عنصر يحدد بعدد من المعايير:-

  • الحجم Size: بديهياً العناصر الأكبر حجماً له وزن بصري أعلى من العناصر الأقل حجماً.
  • اللون Colors، والصخب اللوني Color Noise: هذا المعيار ليس له أسباب واضحة إلا انه مؤثر جداً في الوزن البصرى لأي عنصر فهو يعتمد بالأساس على الحس الفني للمصمم، فاللون الاحمر يبدوا أثقل على الميزان البصري من اللون الاصفر.
  • مكان العنصر Element Position: القرب والبعد عن المحور الوهمي الذي تخلقه العين، يؤثر على وزن العنصر بصرياً.
  • التعقيد الداخلي للعنصر (العناصر المتداخلة، مثال: الدوائر المتداخلة) Complexity: تجميع أكثر من عنصر داخل حيز عنصر واحد يزيد من وزنه بصرياً عن بقية العناصر الموجودة في نفس الحيز.

أنواع التوازن البصري

التوازن البصري كما هو معروف في علوم الهندسة والتصميم الداخلي Interior Design له ثلاث أنواع:-

أولاً: التوازن المتماثل

البطاقة التعريفية بالتوازن المتماثل
البطاقة التعريفية بالتوازن المتماثل

التوازن المتماثل هو أبسط أنواع التوازن البصري، وفية توزع عناصر التصميم بالتساوي على جانبي المحور الافتراضي الذي تضعه العين، العناصر التي على يمين التصميم تكرر مثلها على يسار التصميم تماماً وبالتالي يصبح الميزان البصري متعادل، ولا يعتمد هذا النوع من التوازن على الابداع كثيراً ولا يعتمد أيضاً على حساب الوزن البصري لكل عنصر من عناصر التصميم، الصورة التالية توضح نموذج لواجهة موقع صممت بمبدأ التوازن المتماثل …

exa-host-colorslab
مثال للتوازن البصرى المتماثل

 ثانيا: التوازن الغير متماثل

البطاقة التعريفية للتواز الغير متماثل
البطاقة التعريفية للتواز الغير متماثل

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

أي إنسان يستطيع أن يكتشف ما اذا كان التصميم متوازن أم لا ولكن ليس كل إنسان قادر على صناعة تصميم متوازن.

ثالثاً: التوازن المشع

التوازن المشع توزع فية الهناصر علي محيط دائري وكأن هناك نقطة ارتكاز للتصميم تلتف حولها العناصر
التوازن المشع توزع فيه العناصر على محيط دائري وكأن هناك نقطة ارتكاز للتصميم تلتف حولها العناصر

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

الخلاصة

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

هل تعتقد أن تصميم واجهة مدونة معمل ألوان متوازن بصريا؟ وإلى أي أنواع التوازن تنتمى؟

عن كاتب المقال

أحمد مجدي

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

تويتر: @ahmedmagdi


كل مقالات الكاتب

اترك تعليقك على المقال 20 تعليق

  • محمود عبد الحميد

    ماشاء الله عليك يا ابو حميد مواضيعك كلها منظمة ومفيدة جدا

  • عبد الله الحامدي

    بصراحة أول موضوع أقرأه في هذه المدونة
    ولكن الموضوع جدا جميل وشرح بصورة بارعة وسهلة

    اتمنالكم التوفيق

    ( لا تنسى صوتلك في المسابقة )

    • أحمد مجدي

      شكرا جزيلا لك عبد الله الحامدي ، اقدر دعمك لمدونة معمل ألوان.

  • كلام في قمة الروعة
    انا كنت فعلا اشعر بعدم التوازن في بعض المواقع
    ولكنني لم اكن اعرف السبب او بالاصح كنت ارى بعض المواقع غير مريحة
    ولم اكن اعرف شيء عن مبدأ التوازن

    الان اصبحت اعرف

    شكرا لك

  • إبن الطيب

    السلام عليكم ورحمة الله وبركاته.
    هل لديكم أمثلة للتوازن الغير متماثل ؟

    شكراً لكم على الموضوع

  • مقال رائع و اختيار الالوان ليست مهمة سهلة, تحتاج وقت و خبرة في التعامل و اعتماد على قاعدة بيانات معرفية مهمة لتناسق الالوان في الطبيعة

  • البوست جميل و رائع , و لكن هذه الصفحة لم أجد بها أي نوع من أنواع التوازن , فالطرغ الأيسر مشبع بالنصوص و الصور في حين الطرف الأيمن يملأه الفراغ

    • مرحبا، المقالات يمكن الا تخضع للتوازن بسبب طبيعة النصوص والمحاذاة، فهذا المقال مكتبو باللغة العربية فهو يبدأ من اليمين وينته بالشمال، ولأن هناك سطور قد تكون مكتملة وبعضها فلا يصبح هناك توازن، وهذا طبيعي، اضافة الا ان معظم هذة القوانين تطبق علي الصفحات التي يتخذ فيها المستخدم القرار كأن يسجل او يبحث او يشتري منتج … الخ.

      لكن انت هنا لتقرأ ! وتوزيع المقال مناسب لهذا الغرض !

  • سعد الشريف

    السلام عليكم ورحمه الله

    إستفسآر:

    هل المواقع المتخصصه في تنسيق الالوان مثل http://www.colorotate.org/ تساعدني جيدا..؟؟

    • وعليكم السلام ورحمة الله وبركاته

      مرحبا، بالطبع هذا النوع من المواقع مفيد في ناحية تنسيق الالوان، لكن التوزيع هو مهمتك الرئيسية ولا توجد خدمة تقوم بهذا الدور عنك …

  • مقالة رائعة جدا أخي

    سبحان الله الذي وضع ميزان يعمل بطريقة تلقائية لدى البشر

    فالناظر مثلا للصورة التالية

    http://blog.colorslab.net/wp-content/uploads/2012/04/balance.jpg

    يحس أن هناك إختلال في التوازن

    حينما لمحت عيني الصورة وجدة عناك إختلال في الصورة و تأكدت من ذلك عن طريق الفوتوشوب

    حيت وجدت ان نسبة البعد عن الخط غير متساوية

    وهذا توضيح بسيط

    http://i.imgur.com/db2NnUV.png

    تحياتي لك

  • محمد عيساني

    اكيد مليون في المية ان تصميمكم هو التصميم غير المتماثل

  • مثالي الاثاث والانسان جعلتني اعود بالذاكرة الى بالتناظر في الكائنات الحية , احد دروس الاحياء التي اخذتها منذ زمن ولا زال عالقاً في رأسي 😀
    _
    كعادتك تَكتب فتُبدع فتُبهر من يتابعك
    وفقك الله <3

  • روووووووووووعة .. جزاك الله كل خير

  • حنظلة أمجد

    شكرا..

  • مقالة جدا رائعة …شكر كبير لك و لجهودك

  • موضوع رائع وقيم