باستخدام طريقة معالجة البشر للمعلومات المرئية في تصميم المواقع
أصبح تصميم مواقع الويب وواجهة المستخدم أسهل في السنوات القليلة الماضية. هناك العديد من الأدوات التي يمكنك استخدامها والتي تجعل من العبث البدء من نقطة الصفر عند تطوير واجهات المستخدم (راجع مجموعة واجهة المستخدم الجديدة). لكنني لست هنا للحديث عن وفاة تصميم الويب.
بدلاً من ذلك ، ما سأفعله هو محاولة شرح المفاهيم الأساسية القائمة على علم النفس وراء عدد كبير من أدوات التصميم المرئي (من مجموعات CSS الأساسية إلى أكثر السمات المميزة تقدماً). أنت لن تستخدمها فحسب ، بل ستفهمها أيضًا. أنا واثق من أن هذا سيجعل من السهل أيضًا تعديل التعديلات الموجودة بنجاح.
دعنا ننظر إلى كيفية عمل العقل والجسم البشري عندما يتعلق الأمر بمعالجة المعلومات المرئية وكيف يتم تفسير هذه المعرفة على أنها تصميم للويب.
مبادئ التنظيم الحسي
وفقا لعلم النفس الجشطالت, الكل يختلف عن مجموع أجزائه. يزعم أتباع هذه المدرسة الفكرية أن هناك بعض المبادئ حول كيفية اعتراض مجموعات العقل البشري. هذه ليست مجرد نظريات ، مانع لك ، ولكن الحقائق العملية الفعلية حول تنظيم المجموعات البصرية.
ستجد أدناه بعض القوانين والاستخدامات الأكثر شعبية والأكثر شهرة لهذه المبادئ. قد تكون قادرًا على العثور على بعض الأفكار الجديدة لتصميمك التالي.
قانون التشابه
المبدأ الأول ينص على ذلك الأشياء الصغيرة المتشابهة تعتبر كمجموعة, بدلاً من مثيلات متعددة من نفس الكائن الصغير. قد يستند التشابه إلى الشكل أو اللون أو التظليل أو بعض الجودة الأخرى. هذا المبدأ هو أساس تصميم نمط وكذلك العديد من تصاميم الشعار الهندسي وأضيق الحدود.
على سبيل المثال ، تظهر هذه الصورة كشعار دائري بدلاً من مثلثات منفصلة. الشكل الثلاثي في قاع النسر يجعلنا نعتقد أن الشكل هو أيضًا جزء من الصورة.
من المحتمل أنك استخدمت هذا القانون أيضًا بشكل غير معروف عند إنشاء عدد قليل منه, مربعات المحتوى المميز بنفس الحجم لموقع الويب الخاص بك. إذا كنت ترغب في إظهار أن بعض عناصر المحتوى لها نفس الأهمية أو تشترك في معلومات مماثلة, إنشاء شكل محدد فقط لهذا الغرض. بهذه الطريقة ، سيقوم المستخدم الخاص بك على الفور بربط هذا الشكل المحدد بمنطقة معينة من المعلومات.
قانون القرب
حسب هذا القانون الكائنات التي هي أقرب لبعضهم البعض تعتبر من نفس المجموعة. عند إنشاء المربعات نفسها بجوار بعضها البعض في مكان قريب ومنتظم ، تخلق شعورًا بالتجمع.
تم استخدام هذا المبدأ إلى حد كبير على الويب مؤخرًا ، خاصةً عند العمل معه حلقات المحتوى, مثلا على بلوق و webshops.
يمكنك على الفور تجميع العنوان والصورة المميزة والبيانات الوصفية والمقتطفات معًا حتى بدون أي حدود أو خلفيات. قد تكون قادرًا على إزالة الخطوط والألوان غير الضرورية من التصميم الخاص بك لجعله أكثر دقة ، ومع ذلك لا يزال مفهومًا تمامًا.
لراحتك ، سأقتبس ويكيبيديا كذلك تنص على:
قانون حسن النموذج
المعروف أيضًا باسم قانون Pragnanz أو Good Gestalt ، ينص هذا القانون على أننا نميل إلى تجميع الأشياء معًا إذا كانت تشكيل نمط بسيط ومنتظم ومنظم. يحاول أذهاننا الفصل بين الأشكال المعقدة والصعبة الإدراكية في العديد من المجموعات ذات الأشكال البسيطة ؛ هذا يؤدي إلى أهمية الإيجاز.
هذا هو أيضا أحد الأسباب المحتملة وراء نجاح تصميم قائم على الشبكة وهذا جعل من هياكل الويب القائمة على أساس الجداول والإطار (أشياء لحسن الحظ من العصور المظلمة للتصميم) شائعة للغاية.
إذا أبقيت هذا المبدأ في الاعتبار ، فربما لن ينتهي بك الأمر إلى إنشاء موقع ويب مليء بالأشكال المعقدة من كتل المحتوى التي سيتم ربطها في الاعتبار عبر القوانين الأخرى المذكورة أعلاه. لا يزال ، يمكنك ذلك مجموعة الأشياء الخاصة بك معا بطريقة مثيرة للاهتمام, مثلا في شكل الماس أو طائرة ورقية ، لأن تلك لا تزال ينظر إليها على أنها أشكال منظمة وموجزة.
نظرية اللون والإدراك والاستخدام
رؤية اللون وتصور اللون ذاتية إلى حد كبير مرتكز على كيف تتفاعل أدمغة المشاهدين إلى موجات الضوء التي تنعكس على الأشياء الملونة أو الأشكال. القاعدة هي أن الأشخاص المختلفين ، حتى من دون أي إعاقات بصرية ، يرون الشيء نفسه بلون مختلف (قد تتذكر الفستان).
خصائص اللون
لا يزال هناك ثلاث خصائص موضوعية للألوان ؛ مسحة, القيمة و الشدة.
مسحة هو اسم اللون كما هو موضح على عجلة اللون أو في قوس قزح. هناك ستة (أو اثنا عشر ، بناءً على من تتحدث) الأشكال الأساسية: الأحمر والبرتقالي والأصفر والأخضر والأزرق والبنفسجي.
الأصفر والأزرق والأحمر هي ابتدائي, البرتقالي والأخضر والبنفسجي ثانوي الأشكال. أيضا هناك بعد الثانوي الأشكال التي هي المزج المباشر بين الأشكال الأساسية والثانوية (مثل الأصفر والأخضر والبنفسجي الأحمر).
القيمة هو خفة أو ظلام اللون ، المشار إليها باسم قيمة عالية للألوان الخفيفة أو قيمة منخفضة للألوان الداكنة.
الشدة بالعودة الى سطوع أو خفت من لون. هذا يعني أنه لا يزال من الممكن أن يظل لونًا ساطعًا بنفس اللون وتدرج فيه نفس القيمة من خلال تغيير الكثافة وإنشاء مخرجات ألوان مختلفة..
أعلى كثافة لكل لون هي الصبغة التي تظهر على عجلة الألوان (انظر أدناه) ، بينما اللون الأدنى هو اللون الرمادي.
تباين اللون
بالإشارة إلى قوانين التشابه المذكورة أعلاه ، تخلق عقول المدربين مجموعات من الأشياء الصغيرة التي يشاهدونها بناءً على خصائص متشابهة ومختلفة - الألوان غالبًا.
عندما تختار لوحة الألوان الخاصة بك لموقع الويب الخاص بك ، خاصةً إذا كنت تتبع نهجًا بسيطًا أو إذا قمت بتصميم منطقة محتوى ثقيل النص ، على سبيل المثال بلوق أو الإعلانات ، يجب عليك أن تكون على بينة من تباينات الألوان المختلفة قد يساعدك ذلك في العثور على قيم الألوان المناسبة للحصول على أفضل نتيجة.
هناك 7 تباينات في اللون وفقًا لـ Johan Itten ، على الرغم من أنني سأذكر فقط 3.
1. على النقيض من هوى
الأصفر والأحمر والأزرق بكثافة كاملة هي تناقضات مباشرة وحية. تضفي الأشكال الثانوية تمييزًا أقل حدة ، ولكنها لا تزال تعمل ، تمامًا كما تفعل الأشكال الثالثة ، على الرغم من عدم إنتاج أي منها نتائج رهيبة كما هو الحال مع الأشكال الأولية.
2. النقيض التكميلي
يكون اللونان في تناقض تكميلي إذا تم خلطهما معًا ، فإنهما يخلقان رمادية محايدة. وتسمى هذه أيضا أزواج غريبة. إذا كانت متجاورة ، فإنها تعزز الحدة والكثافة ، بينما تختلط معًا فإنها تلغي بعضها البعض. كل لون له واحد ومكمل واحد فقط. على عجلة الألوان ، أزواج عكس قطريا لبعضها البعض.
3. ضوء الظلام التباين
إذا كنت ترغب في تجربة موقع ويب أحادي اللون, باستخدام قيم مختلفة من هوى نفسه قد تسفر عن نتائج رهيبة. غالبًا ما يتم استخدامه في تصميم الويب المصغّر ، يمكنك أيضًا تقديم نتائج رائعة استنادًا إلى التباين الفاتح الداكن إذا كنت تريد توفير خيارات ألوان السمات للمستخدم. يستخدم هذا التباين أيضًا في تصميم درجات الرمادي.
إذا كنت تريد متابعة تباينات الألوان الأربعة المتبقية ، فيمكنك العثور عليها هنا.
إنشاء لوحات والتحقق من التناقضات
معرفة النظرية رائعة ، وتفسير أفكارك شيء آخر تمامًا. لا يجب أن تقلق ، على شبكة الإنترنت يوفر دعما كبيرا لاحتياجات شعوذة الألوان الخاصة بك. هناك عدد كبير من الأدوات التي تساعدك على إنشاء أنماط ألوان مخصصة تستند إلى قواعد تباين الألوان ، على سبيل المثال Paletton أو Adobe Kuler.
لأغراض الويب ، قد ترغب في التحقق من التناقضات التي اخترت استخدامها في webAIM ، أو في موقع Jonathan Snook أو تنزيل مثيل من Color Contrast Analyzer بواسطة The Paciello Group هنا.
استنتاج
عندما تبدأ العمل بموضوع جديد أو تبدأ في تعديل السمات الموجودة ، حاول التفكير في مبادئ الإدراك لتنظيم المحتوى الخاص بك وتذكر مراعاة قواعد الألوان عند إعطاء التصميم الخاص بك شكله النهائي وصبغته..
ملحوظة المحرر: هذا الضيف هو مكتوب ل Hongkiat.com من قبل مارتون فيكيتي. Marton هو مطور موقع مجري مدمن مخدرات مؤخرًا على WordPress. إنه متحمس لإعادة التصميم وكاتب محتوى مستقل يحب لعب ألعاب RPG في وقت فراغه.
