إنه ليس سراً أن يستخدم اللون على نطاق واسع فى جميع جوانب التصميم.

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

وفقا لـKissmetrics، أنه عندما نرى لوناً ما، فإن أعيننا تُرسل رسالة لمنطقة فى العقل تسمى المهاد “hypothalamus”، والتى تقوم أيضا بإرسال المزيد من الإشارات إلى الغدة النخامية “pituitary gland” ثم إلى الغدرة الدرقية “thyroid glands”. ثم يتم الاشارة إلى إفراز الهرمونات التى تسبب تقلبات فى مزاجنا وعاطفتنا وكذلك سلوكنا.

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

العين > المهاد > الغدة النخامية > الغدة الدرقية > إفراز الهرمونات > إثارة المشاعر > تشكيل الحكم أو الرأى.

ماذا تعنى الألوان ؟

كل لون له معنى عند كل شخص، ويختلف هذا المعنى حسب تفضيلاتنا الشخصية والخلفية الثقافية.

لبيان ذلك، نلقى نظرة على الرسم البيانى الآتى :

و الصورة السفلى توضح الألوان المفضلة للرجال والنساء :

علم النفس للون ليس علما بالمعنى الدقيق حيث أثبت الدراسات أنه يتأثر بالتصورات الفردية. كما أن الإعتبارات الإجتماعية مثل الجنس “gender” أيضاً يمكن أن يكون له تأثير على كيفية النظر إلى اللون. كما وُجدت أيضاً دراسات أخرى، تقول أن اللون ليس وحده الذي يمكن أن يخلق تأثيراً، فإن كيفية تناسب شعور المستخدم مع اللون الذي يُستخدم فى العلامة التجارية الذي يستخدمها يمكنها أيضاً خلق التأثير.

مثال : إذا كنت تصمم للنساء فإن اللون البنفسجى جيد جدا لنساء العالم بأكملٍ ولكنه أيضاً غير مناسب للرجال بصفة عامة. فى الصورة السفلى لموقع “Women’s Health Magazine” حيث إستخدم فى البانر الأعلى اللون الوردى “pink” فقط ولم يستخدم فى بقية الصفحة أية ألوان أخرى واعتمد على الصور والقائمة العريضة ” bold navigation” فقط.

بادئ ذي بدء، اللون الوردى “pink” نمطى جدا عندما يستهدف الموقع النساء، بما أن رسالة الموقع هى أنه يتحدث عن الصحة الأُنثوية، فمن الممكن أن تضيع الرسالة بسبب هذا. 😀

بالطبع لابد لون رأس الصفحة الرئيسية “header color” يُستخدم فى كل صفحة، ولكن عندما تتصفح أكتر فى الموقع في مثلاً قسم تخفيف الوزن ( موضح فى الصورة السفلى ).

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

تحديد نظام اللون :

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

لابد، أن تأخذ الحيطة والحذر وأنت تقوم بخلط الألوان معاً، ولكى تتمكن من خلط الألوان بسهولة يمكنك الإستعانة بثلاث خطوات أساسية لخلط الألوان  :

1- التكامل الثلاثى “Triadic” : 

وهذه أهم قاعدة وطريقة متوازنة، والتى تستخدم اللون الحيوي والمتكامل. أولاً تحتاج أن تستخدم عجلة الـ12 لون، ثانياً يمكنك إختيار أى ثلاثة ألوان تقع على بعد 120 درجة عن بعضها البعض من أجل الخلفية، والمحتوى، والقائمة ” background, content,  navigation”. كما هو موضح فى الصورة.

2- المركَب “Compound ” :

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

3- المتماثل “Analogous” :

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

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

ألقى نظرة فى الصورة السفلى وأنظر ماذا تقول للمستخدم.

Image source: Codementor

1- لون الخلفية – لون الخلفية الأسود يدل على الطبقة، والتميز، والشكلية وايضاً على المُشاع، وتشير الشكلية إلى تعلم مرتبط، بينما المُشاع يشير أن المستخدم قد لا يتعلم شفرة على سبيل الهواية بل على سبيل التقدم فى حياته المهنية.

2- ألوان الزر- لاحظ أن الموقع يستخدم اللون الأحمر لأزار الـCTA التى تظهر بشكل واضح على الخلفية السوداء من أجل تشجيع “تسجيل الدخول”. بينما يستخدم اللون الأسود مع الحدود البيضاء لأزرار أقل أهمية، وذلك لكى يتماشى مع الخطة الشاملة.

3- لون النص- يوفر اللون الأبيض جميع التباينات المهمة. فإن الأيقونات المُبيّنة باللون الأبيض ( وأزرار الظل البيضاء) وُضعت لتشجيع المستخدم للإنتقال للأسفل للحصول على المزيد من المعلومات إذا لزم الأمر.

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

  ما هى الألوان التى يجب تجنبها ؟

تلك الأعمال البُنية لشركة “UPS” التى تريد (الشركة) من خلالها أن تنقل رسالة قوية وهى “أنه يمكنك الإعتماد علينا”.

مع ذلك، ملابس رياضية وُصِفت بأنها الأسوأ على الإطلاق فى كلية كرة القدم الأمريكية، بفضل القطاع المبين فى الصورة، والذي ينتمى لفريق كلية “Wyoming “. والجزء المثير هو أن البنى يُشير للـ “غلظة” لذلك يمكنك الإعتقاد بأنه أستخدم لهذا السبب (الغلظة) عندما يقترن مع مثل هذه الرياضة العدوانية، ولكن لم يحدث ذلك فى هذه الحالة، ربما لأن الرجال لا يُحبون “البنى”.

الخلاصة : لابد أن تراعى الألوان المفضلة للرجال والألوان المراد تجنبها هى التى يكرهها الرجال إذا كان تصميمك يستهدف الرجال، وكذلك الحال بالنسبة للنساء.

أدوات ستساعدك فى إختيار الألوان المناسبة :

* Adobe Color CC– هذا زيادة موثوقة بها لمستخدمى الأدوبى.

* Paletton– منتقى ألوان بسيط للمبتدئين.

* Flat UI Color Picker– لخلق التصاميم المسطحة الملونة.

* Mudcube Color Sphere– يقدم مجموعة مميزة من الموضوعات “themes ” ويوفر أرقام HEX.

* Check My Colours– للتحقق من تركيبات الألون بالنسبة للخلفية والأمامية “foreground – background”، ويحتوى على التباين الصحيح لتسهيل الإستخدام بالنسبة للأشخاص الذين يعانون من عمى الألوان “colorblindness”.

* Color– يسمح لك بإختيار اللون عن طريق تحريك الماوس عبر الشاشة، إضبط التشبع ثم أحصل على رموز الـHEX.

الخلاصة :

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

نعم يوجد علاقة بين اللون وعلم النفس …وهى دراسة مايقوم به اللون فى الموقع تجاه الأشخاص.

لمعلومات أكتر…

كما يمكنك التعرف على 6 طرق لزيادة التركيز البصرى على العناصر…