منتدى استراحات زايد

منتدى استراحات زايد (http://vb.ma7room.com/index.php)
-   منتدى أخبار المواقع والمنتديات العربية والأجنبية (http://vb.ma7room.com/forumdisplay.php?f=183)
-   -   [مقال] مبدأ التوازن Balance في تصميم المواقع (http://vb.ma7room.com/showthread.php?t=1475745)

محروم.كوم 05-07-2014 02:40 PM

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

التوازن هو توزيع عناصر التصميم حسب الوزن البصرى لكل عنصر مما يحقق نظاماً ثابتا غير شاذ، فلو افترضنا أن هناك غرفة للمعيشة ووضعنا خط وهمي يفصل نصف الغرفة الايمن عن الايسر، التوازن -في أبسط صورة- في هذه الحالة يعني أن يكون الاثاث الموجود في النصف الايمن للغرفة مثل الاثاث بالنصف الايسر للغرفة، فتصبح الغرفة وكأنها مكررة مرتين …
http://www.traidnt.net/vb/images/imgcache/notfound.gif
الانسان بطبيعته كائن ثنائى واحساسنا بالتوازن فطري، لو ألقينا نظرة مقربة على أجسادنا لاكتشفنا ذلك
http://www.traidnt.net/vb/images/imgcache/notfound.gif

آلية حساب الوزن البصرى لكل عنصر
التوازن البصري يعدل بين العناصر، كل منها حسب مساهمته في التصميم أو واجهة الموقع
كيف يحسب الدماغ الوزن البصري للعناصر ؟ … الاجابة: أعيننا تصنع محور عمودي وهمي يفصل التصميم لنصفين متساويين عندما نشاهد أي صورة أو مشهد و تبدأ فوراً في حساب الوزن البصري لكل عنصر على جانبي المحور الوهمي، ثم تحسب النتيجة … فإذا كان مجموع الوزن البصري لعناصر الجانب الأيمن = مجموع الوزن البصري لعناصر الجانب الأيسر، إذا الصورة متوازنة وإلا فإن هذه الصورة بها مشكلة.
لو افتضرنا أن هناك مقياس للتوازن Measure of balance من ٥ درجات وأعطينا لكل شكل من الاشكال التالية درجة على مقياس التوازن، كالتالي:-
http://www.traidnt.net/vb/images/imgcache/notfound.gif
الآن لنحسب الوزن البصري للعناصر على الجانبين الايسر والأيمن للتصميم التالى:-
http://www.traidnt.net/vb/images/imgcache/notfound.gif
النتيجة أن التصميم متوازن، كيف ؟ … على الرغم من أن الاشكال ليست متماثلة على جانبي التصميم …
  • فالجانب الأيمن به ثلاث عناصر الدائرة + المربع + المثلث
  • الجانب الأيسر به عنصرين فقط و هما النجمة + المثلث
ولكن بسبب أن النجمة لها درجتين على الميزان البصري، أصبحت العناصر على الجانبيبن للتصميم متوازنة بصرياً.
كيف يتم تحديد قيمة الوزن البصري للعناصر؟

http://www.traidnt.net/vb/images/imgcache/notfound.gif
السؤال الذي يجب ان تسأله … لماذا أخذت النجمة درجتين على الميزان البصري على خلاف المثلث والدائرة والمربع؟ … هذا يقودنا إلى تحديد المعايير وراء رفع أو خفض قيمة اي عنصر على الميزان البصرى، الوزن البصرى لكل عنصر يحدد بعدد من المعايير:-
  • الحجم Size: بديهياً العناصر الأكبر حجماً له وزن بصري أعلى من العناصر الأقل حجماً.
  • اللون Colors، والصخب اللوني Color Noise: هذا المعيار ليس له أسباب واضحة إلا انه مؤثر جداً في الوزن البصرى لأي عنصر فهو يعتمد بالأساس على الحس الفني للمصمم، فاللون الاحمر يبدوا أثقل على الميزان البصري من اللون الاصفر.
  • مكان العنصر Element Position: القرب والبعد عن المحور الوهمي الذي تخلقه العين، يؤثر على وزن العنصر بصرياً.
  • التعقيد الداخلي للعنصر (العناصر المتداخلة، مثال: الدوائر المتداخلة) Complexity: تجميع أكثر من عنصر داخل حيز عنصر واحد يزيد من وزنه بصرياً عن بقية العناصر الموجودة في نفس الحيز.
أنواع التوازن البصري

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




http://www.traidnt.net/vb/images/imgcache/notfound.gif
التوازن المتماثل هو أبسط أنواع التوازن البصري، وفية توزع عناصر التصميم بالتساوي على جانبي المحور الافتراضي الذي تضعه العين، العناصر التي على يمين التصميم تكرر مثلها على يسار التصميم تماماً وبالتالي يصبح الميزان البصري متعادل، ولا يعتمد هذا النوع من التوازن على الابداع كثيراً ولا يعتمد أيضاً على حساب الوزن البصري لكل عنصر من عناصر التصميم، الصورة التالية توضح نموذج لواجهة موقع صممت بمبدأ التوازن المتماثل …
http://www.traidnt.net/vb/images/img...014/05/582.jpg
ثانيا: التوازن الغير متماثل

http://www.traidnt.net/vb/images/imgcache/notfound.gif
التوازن الغير متماثل هو ابداع الويب! على عكس التوازن المتماثل فإن هذا النوع يعتمد بشكل كبير على الوزن البصرى لكل عنصر من عناصر التصميم وفقا لمعايير ( اللون، الحجم، التعقيد …. الخ ) وبالتالي فإن هذا النوع يتيح المجال أمام إبداع المصمم في واجهة المستخدم ليوزع العناصر كما يريد مع مراعاة وزنها البصري بحيث لا ينتج تصميماً شاذاً، يجب أن تضع نقطة ارتكاز للتصميم وتبدأ في توزيع العناصر كما يمليها عليك خيالك ثم تتوقف لتشاهد هل التوزيع متوازن أم لا؟ يحتاج هذا النوع من التوازن إلى موهبة حتى تستطيع أن تنتجه بشكل سليم.
أي إنسان يستطيع أن يكتشف ما اذا كان التصميم متوازن أم لا ولكن ليس كل إنسان قادر على صناعة تصميم متوازن.
ثالثاً: التوازن المشع

http://www.traidnt.net/vb/images/imgcache/notfound.gif
هذا النوع من التوازن يأتي من مسماه، فالعناصر في التصميم توزع على محيط دائري حول نقطة إرتكاز وهمية، مثل الاشعة التي تخرج من الشمس، هذا النوع اقل الانواع إستخداماً لإنه يتطلب توزيع دائري مما يتطلب مساحة في الواجهة الخاصة بالموقع.
الخلاصة

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

المقال منقول من معمل الوان لتحقيق الاستفادة



الساعة الآن 02:48 AM

Powered by vBulletin® Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Content Relevant URLs by vBSEO 3.5.2 TranZ By Almuhajir


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227