اذهب الي المحتوي
منتديات ياللا يا شباب
nonesaid123

مبدأ التوازن فى تصميم واجهات الإستخدام للمواقع Websites Balance

Recommended Posts

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

balance-300x150.jpg

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

Human-body-anatomy-balance-300x188.jpg


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

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

كيف يحسب الدماغ الوزن البصرى للعناصر ؟ … الاجابة: اعيننا تصنع محور عمودى وهمى يفصل التصميم لنصفين متساويين عندما نشاهد اى صورة او مشهد و تبدأ فوراً في حساب الوزن البصرى لكل عنصر على جانبى المحور الوهمى، ثم تحسب النتيجة … فاذا كان مجموع الوزن البصرى لعناصر الجانب الأيمن = مجموع الوزن البصرى لعناصر الجانب الأيسر، اذا الصورة متوازنة والا فإن هذة الصورة بها مشكلة.
لو افتضرنا ان هناك مقياس للتوازن Measure of balance من ٥ درجات واعطينا لكل شكل من الاشكال التالية درجة على مقياس التوازن، كالتالى:-
shapes-balance-300x150.jpg
الآن لنحسب الوزن البصرى للعناصر على الجانبين الايسر والأيمن للتصميم التالى:-

calculate-balance-300x150.jpg

النتيجة ان التصميم متوازن، كيف ؟ … على الرغم من ان الاشكال ليست متماثلة على جانبى التصميم …
  • فالجانب الأيمن به ثلاث عناصر الدائرة + المربع + المثلث
  • الجانب الأيسر به عنصرين فقط و هما النجمة + المثلث
ولكن بسبب ان النجمة لها درجتين على الميزان البصرى، اصبحت العناصر على الجانبيبن للتصميم متوازنة بصرياً.
كيف يتم تحديد قيمة الوزن البصرى للعناصر ؟

Measure-of-balance-300x150.jpg

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

Symmetrical-Balance-300x150.jpg

التوازن المتماثل هو ابسط انواع التوازن البصرى، وفية توزع عناصر التصميم بالتساوى على جانبي المحور الافتراضى الذي تضعه العين، العناصر التى على يمين التصميم تكرر مثلها على يسار التصميم تماماً وبالتالى يصبح الميزان البصرى متعادل، ولا يعتمد هذا النوع من التوازن على الابداع كثيرا ولا يعتمد ايضا على حساب الوزن البصرى لكل عنصر من عناصر التصميم، الصورة التالية توضح نموذج لواجهة موقع صممت بمبدأ التوازن المتماثل …
exa-host-300x164.jpg
 ثانيا: التوازن الغير متماثل

Asymmetrical-Balance-300x150.jpg

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

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

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

redial-Balance-300x150.jpg

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

 

شارك هذه المشاركه


رابط المشاركه
شار ك علي موقع اخر

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

زائر
اضف رد علي هذا الموضوع....

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • اضف...

Important Information

By using this site, you agree to our Terms of Use, اتفاقيه الخصوصيه, قوانين الموقع, We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue..