هل هذة أول زيارة لك ؟
هــذة المدونــة تتحــدث عـــن فلسفيــات الويب ، السبب وراء نجاح المواقـع الكبـري وعن قابلية إستخـدام المواقـع. كما تتناول بعـض الموضوعـات عـن تصميم وتطوير محتوي المواقع علي الويب.
يمكن أن تبدأ بقراءة :
الاقسام
- البنوك الالكترونية ( 1 )
- الربح من الانترنت ( 2 )
- الشبكات الاجتماعية ( 5 )
- تحليلات جوجل ( 6 )
- تصميم تجربة المستخدم ( 10 )
- تطوير محتوى المواقع ( 15 )
- تفاصيل صغيرة كبيرة !! ( 3 )
- تلميحات سريعة ( 7 )
- جديد التقنية ( 6 )
- قوانين استخدام شبكة الانترنت ( 1 )
- معتقدات خاطئة عن تجربة المستخدم ( 5 )
- نصائح ( 1 )
- نظرية التصميم للويب ( 16 )
ارشيف Web-King
-
▼
2013
(
57
)
-
▼
أغسطس
(
57
)
- ثورة الفيس بوك على الموبايل
- الشبكات الاجتماعية و محركات البحث … في ويب المستقبل
- ليس كل ما تراه عينك يفهمه عقلك !
- تلميحات سريعة(٤): كيف تخبر زائر الموقع ان هناك محت...
- الدليل المبسط لإستخدام قائمة الاختيار Select Menu ...
- عشر حقائق مثيرة عن جوجل
- بعد إيقاف تطبيق فايبر، هنا مجموعة من البدائل
- عشرة أخطاء قد تكلفك مليارات الدولارات
- ما يجب معرفته عن الطباعة ثلاثية الأبعاد
- مصادر لتعلم برمجة تطبيقات الأندرويد
- قوقل تدخل عالم التلفاز بـ 35 دولارا فقط
- ما هي المواد التي يحاكم على أساسها قراصنة المعلوما...
- جوجل : سياسة الاستغباء و حقيقة التجسس و انتهاك خصو...
- ٣ مجموعات من المهارات لتصميم جيّد لخبرة المستخدم
- 5 أنماط تصاميم لمواقع إلكترونيّة تشجّع المستخدمين ...
- خمس نصائح لتبرع في كتابة طلب لوظيفة
- خمس نصائح لتزيد معدل الضغط على إعلانات موقعك
- كيف ترصد تقدم موقعك عبر تحليلات جوجل
- عشر نصائح مهنية تتمنى لو كنت تعلمها عندما كنت في س...
- عشرة أمور يقوم بها الرياديون البارعون
- ۩۞۩ البنوك المغربية و باي بال ۩۞۩
- إعداد وضبط منصة WAMP للتطوير
- HTML 5 الثورة القادمة في عالم الويب
- (javascript server-side (node.js - هل تستعملها؟ ولما؟
- طريقة جديدة تمكنك من الربح عن طريق الإنترنت
- برمجة وتصميم مواقع الانترنت
- عشرة نصائح لجعل شيفرتك البرمجية أفضل أداءاً
- بعض القواعد لاختيار اسم النطاق
- هل تصميم المواقع بلغة HTML5 هي الحل؟
- برمجة المواقع العامل الخفى لنجاح موقعك
- علامتك التجارية هي ما تميزك عن الاخرين.
- أهم 10 مشاريع للربح من الانترنت
- لا تبالغ في تصميم موقعك
- LTE تعرف علي تقنية
- معتقد خاطئ (٢): المستخدم يجب ان يصل لأى صفحة بالمو...
- ملخص فيديو : ما يجب ان تعلمة عن الكلمات المفتاحية ...
- مبدأ ” التوازن Balance ” في تصميم المواقع
- مفهوم ” التسلسل الهرمى البصرى” لتصميم المواقع، الن...
- التوجية البصرى فى المواقع: أيها الزائر أنظر هنا!
- مقدمة فى انقرائية النصوص على الويب
- معتقدات خاطئة عن تجربة المستخدم (١): الزائر يقرأ م...
- معتقد خاطئ (٢): المستخدم يجب ان يصل لأى صفحة بالمو...
- تلميحات سريعة(٢): بريد الجميل Gmail وتطبيقة لمفهوم...
- تلميحات سريعة(٣): لا تغفل النسخ الإحتياطى الدورى ل...
- تلميحات سريعة(٤): كيف تخبر زائر الموقع ان هناك محت...
- تلميحات سريعة(٥): الطريقة الصحيحة لإدارة عملية تصم...
- افكار ابداعية تعزز من تجربة المستخدم وسهولة تصفح ا...
- كيف تعد سياسة خصوصية لموقعك يقرأها كل المستخدمين؟
- ٨ خطوات سريعة تجعل مدونتك تسقط في الهاوية !
- [دليل عملى] كيف تصنع محتوي افضل لموقع شركتك علي ال...
- الدليل المبسط لإستخدام قائمة الاختيار Select Menu ...
- مازال مستخدمى الويب ينقرون نقراً مزدوجاً علي الروا...
- رئيسية موقع صديقة للمستخدم
- كيف تخبر زائر الموقع من أين يبدأ؟
- ٤٠ مقولة موجزة فى قابلية الإستخدام يجب ان تعرفها ج...
- قابلية الإستخدام للمدونات: أكثر ٢٠ خطأ شائع
- [دليــل شامــل] ١٥ خطوة ضرورية قبل إطلاق موقعك!
-
▼
أغسطس
(
57
)
يتم التشغيل بواسطة Blogger.
جديد المواضيع
-
مفهوم التسلسل الهرمى مصطلح “التسلسل الهرمى” بشكل عام يعنى ترتيب مجموعه من العناصر( اسماء ، قيم ، تصنيفات …الخ) من أعلى لأسفل وفق معيار...
-
يصعب عليك التنافس في سوق العمل عندما تكون في أول مسيرتك المهنية. والحقيقة أن المسيرة لن تكون سهلة وقد تضطر إلى العمل في وظيفة لا تحبها، ...
-
هذا المقال سيعرض بعض الخطوات الهامة والضرورية قبل افتتاح أى موقع بصورة رسمية للجمهور، هذة الخطوات غالباً ما يتم اهمالها او تجاهلها من قبل ...
-
من خلال عملي كمرشدة للشركات الناشئة، ألتقي بالكثير من مؤسسي هذه الشركات في المنطقة العربية وفي كل أنحاء العالم. استمعت لعدد من التسجي...
-
نحن نصمم المواقع من اجل ان ندفع المستخدمين والزوار الي القيام بشئ محدد… كأن ندفعهم لشراء شيء ما، الاستمرار في قراءة المزيد من محتوي الموقع...
-
السلام عليكم. كما لا يخفى على متابعي توجهات الويب أن javascript بدأت تنتشر بشكل كبير لكل من جهة المستخدم (client-side) ومن جهة الخاد...
-
قبل بضعةِ أيَّامٍ مَضَت، جاءتنا الأخبار حول فريق من العلماء استخدمته شركة فيس بوك لأداء تجربة على مُستخدمي شبكتها الاجتماعية، تَهْدُفُ إ...
-
انقرائية النصوص واحدة من أهم العوامل التى تدعم قابلية استخدام المواقع، المحتوى النصى اذا لم يكن مكتوب ومنسق بطريق تدعم قراءته فإنه سيؤثر ع...
-
بعيداً عن متاهات التسويق الشبكى التى وصلت إلى حد "النصب" فى الفترة الأخيرة، هناك طريقة جديدة تمكنك من الربح عن طريق الإنترنت...
-
لازال عدد كبير لا يؤمن بأهمية الانترنت في حياتنا. فالانترنت يمكن أن يكون بالفعل بيئة للمشروعات وماكينة در المال فعلًا، ولكن هناك الكثي...
3:41 م
|
تعديل الرسالة
في هذا المقال سنتعرف على مبدأ التوازن فى تصميم واجهات الإستخدام للمواقع Websites Balance، مبدأ التوازن ليس مبدأ خاص بتصميم المواقع فقط، ولكن هذا المبدأ يوجد فى كل ما يحيط بنا فى الحياة، على سبيل المثال فى النظام البيئى كل عناصر الطبيعة يجب ان تتبع مبدأ التوازن فإذا حدث خلل ما بالنظام فإن الطبيعة تصحح من نفسها مرة أخرى حتى تعود لنقطة الثبات المتوازن. الإنسان نفسة اذا لم يرى العناصر المحيطة به متوازنة فإنه سيشعر بأن هناك شيئاً ما خطأ و يجب ان يتم تعديلة.
كذلك التصميم للويب يخضع لنفس المبدأ الذى تسير علية الطبيعة، يجب ان يكون تصميم الموقع متوازناً بصرياًحتى لا يُكون نظاماً شاذاً غير متوازن فيشعر المستخدم ان هناك شيئاً ما خطأ.
مفهوم التوازن فى التصميم
التوازن هو توزيع عناصر التصميم حسب الوزن البصرى لكل عنصر مما يحقق نظاماً ثابتا غير شاذ، فلو افترضنا ان هناك غرفة للمعيشة ووضعنا خط وهمى يفصل نصف الغرفة الايمن عن الايسر، التوازن – في ابسط صورة – فى هذة الحالة يعنى ان يكون الاثاث الموجود فى النصف الايمن للغرفة مثل الاثاث بالنصف الايسر للغرفة. فتصبح الغرفة وكأنها مكررة مرتين …
الانسان بطبيعته كائن ثنائى واحساسنا بالتوازن فطرى، لو القينا نظرة مقربة على اجسادنا لاكتشفنا ذلك
آلية حساب الوزن البصرى لكل عنصر
التوازن البصرى يعدل بين العناصر، كل منها حسب مساهمته في التصميم او واجهة الموقع
كيف يحسب الدماغ الوزن البصرى للعناصر ؟ … الاجابة: اعيننا تصنع محور عمودى وهمى يفصل التصميم لنصفين متساويين عندما نشاهد اى صورة او مشهد و تبدأ فوراً في حساب الوزن البصرى لكل عنصر على جانبى المحور الوهمى، ثم تحسب النتيجة … فاذا كان مجموع الوزن البصرى لعناصر الجانب الأيمن = مجموع الوزن البصرى لعناصر الجانب الأيسر، اذا الصورة متوازنة والا فإن هذة الصورة بها مشكلة.
لو افتضرنا ان هناك مقياس للتوازن Measure of balance من ٥ درجات واعطينا لكل شكل من الاشكال التالية درجة على مقياس التوازن، كالتالى:-
الآن لنحسب الوزن البصرى للعناصر على الجانبين الايسر والأيمن للتصميم التالى:-
النتيجة ان التصميم متوازن، كيف ؟ … على الرغم من ان الاشكال ليست متماثلة على جانبى التصميم …
- فالجانب الأيمن به ثلاث عناصر الدائرة + المربع + المثلث
- الجانب الأيسر به عنصرين فقط و هما النجمة + المثلث
ولكن بسبب ان النجمة لها درجتين على الميزان البصرى، اصبحت العناصر على الجانبيبن للتصميم متوازنة بصرياً.
كيف يتم تحديد قيمة الوزن البصرى للعناصر ؟
السؤال الذى يجب ان تسألة … لماذا اخذت النجمة درجتين علي الميزان البصرى على خلاف المثلث والدائرة والمربع؟ … هذا يقودنا الي تحديد المعايير وراء رفع او خفض قيمة اى عنصر على الميزان البصرى، الوزن البصرى لكل عنصر يحدد بعدد من المعايير:-
- الحجم Size: بديهياً العناصر الاكبر حجماً له وزن بصرى اعلى من العناصر الأقل حجماً.
- اللون Colors، والصخب اللونى Color Noise: هذا المعيار ليس له اسباب واضحة الا انه مؤثر جدا في الوزن البصرى لأى عنصر فهو يعتمد بالأساس على الحس الفنى للمصمم، فاللون الاحمر يبدوا اثقل على الميزان البصرى من اللون الاصفر.
- مكان العنصر Element Position: القرب والبعد عن المحور الوهمى الذي تخلقة العين، يؤثر على وزن العنصر بصرياً.
- التعقيد الداخلي للعنصر (العناصر المتداخلة، مثال: الدوائر المتداخلة) Complexity: تجميع اكثر من عنصر داخل حيز عنصر واحد يزيد من وزنه بصرياً عن بقية العناصر الموجودة فى نفس الحيز.
انواع التوازن البصرى
التوازن البصرى كما هو معروف فى علوم الهندسة و التصميم الداخلى Interior Design له ثلاث انواع:-
أولاً: التوازن المتماثل
التوازن المتماثل هو ابسط انواع التوازن البصرى، وفية توزع عناصر التصميم بالتساوى على جانبي المحور الافتراضى الذي تضعه العين، العناصر التى على يمين التصميم تكرر مثلها على يسار التصميم تماماً وبالتالى يصبح الميزان البصرى متعادل، ولا يعتمد هذا النوع من التوازن على الابداع كثيرا ولا يعتمد ايضا على حساب الوزن البصرى لكل عنصر من عناصر التصميم، الصورة التالية توضح نموذج لواجهة موقع صممت بمبدأ التوازن المتماثل …
ثانيا: التوازن الغير متماثل
التوازن الغير متماثل هو ابداع الويب! على عكس التوازن المتماثل فإن هذا النوع يعتمد بشكل كبير على الوزن البصرى لكل عنصر من عناصر التصميم وفقا لمعايير ( اللون، الحجم، التعقيد …. الخ ) وبالتالى فإن هذا النوع يتيح المجال امام ابداع المصمم فى واجهة المستخدم ليوزع العناصر كما يريد مع مراعاة وزنها البصرى بحيث لا ينتج تصميماً شاذاً. يجب ان تضع نقطة ارتكاز للتصميم وتبدأ فى توزيع العناصر كما يمليها عليك خيالك ثم تتوقف لتشاهد هل التوزيع متوازن ام لا؟ يحتاج هذا النوع من التوازن الى موهبة حتى تستطيع ان تنتجة بشكل سليم.
اى انسان يستطيع ان يكتشف ما اذا كان التصميم متوازن ام لا ولكن ليس كل انسان قادر على صناعة تصميم متوازن.
ثالثاً: التوازن المشع
هذا النوع من التوازن يأتى من مسماه، فالعناصر فى التصميم توزع على محيط دائرى حول نقطة ارتكاز وهمية، مثل الاشعة التى تخرج من الشمس، هذا النوع اقل الانواع استخداما لانه يتطلب توزيع دائرى مما يتطلب مساحة فى الواجهة الخاصة بالموقع.
الخلاصة
التوازن فى التصميم هو العنصر الأهم. التصميم المتوازن يساعد على تقديم انطباع ثابت للمستخدم ويشعرة بأن كل شئ على مايرام فى الواجهة وان لا يوجد شئ شاذاً. يجب ان تتدرب عين صانع واجهة الموقع على اكتشاف العناصر الاثقل وزنا بصرياً من غيرها اعتمادا على المعايير المحددة سلفاً، التوازن هو ما يجعل بعض التصميمات تتفوق على بعضها على الرغم من ان العناصر المستخدمة واحدة.
هل تعتقد ان تصميم واجهة مدونة معمل ألوان متوازن بصريا؟ والى اي أنواع التوازن تنتمى؟
اذا اعجبتك هذه التدوينة فلا تنسى ان تشاركها وتساعدنا على نشر المدونة ، كما يسعدنا ان تنضم الى قائمة المشاركين في Web-King من خلال (نشرات rss)
التسميات:
نظرية التصميم للويب
0 التعليقات :
إرسال تعليق
رأيك مهم بالنسبه لنا ، فلا تحرمنا منه