مجموعة من الاحتمالات: دليل ألوان Go-to UI

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

عندما تم تحدي المشاركين في دراسة حديثة تركز على العلامة التجارية لرسم شعارات 10 شركات أيقونية ، تمكن 16٪ فقط من تذكر الأشكال الدقيقة وميزات التصميم. ومع ذلك ، عندما طُلب منك تحديد لوحة ألوان العلامة التجارية ، ارتفع عدد الردود الصحيحة إلى 80٪.

يلعب اللون أيضًا دورًا مؤثرًا في عالم تصميم واجهة المستخدم. تعتمد المنتجات الرقمية التي نتفاعل معها يوميًا على الاستخدام الاستراتيجي للون لتوصيل المعلومات المهمة ، لذلك من المهم أن يفهم مصممو UX و UI كيفية استخدام الألوان بحكمة.

في هذا الدليل ، سنقوم بما يلي:

• إزالة الغموض عن أساسيات نظرية الألوان ،
• توفير مبادئ صلبة للعمل بالألوان في الواجهات الرقمية ،
• مشاركة الموارد المفيدة لبناء الوعي بالألوان ، و
• تمكين مصممي واجهة المستخدم من إنشاء مخططات الألوان الرائعة الخاصة بهم.

الهدف من هذا الدليل هو كفاءة الألوان ، تليها الثقة في اللون ، كل ذلك من أجل تنفيذ ألوان مذهل في واجهات المستخدم التي نواجهها كل يوم.

دورة مكثفة: نظرية الألوان لمصممي واجهة المستخدم

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

لاستخدام اللون بهذه الطريقة ، يجب أن يتمتع مصممو واجهة المستخدم بفهم قوي لمفاهيم نظرية الألوان الأساسية هذه:

• اللون نسبي.
• يقتل الحمل الزائد للتشبع حيوية اللون.
• التباين المتزامن له إيجابيات وسلبيات.
• أنظمة الألوان الأساسية هي الأفضل.
• تؤثر الصبغة دائمًا على القيمة.

دعونا نحفر.

اللون نسبي

اللون لا يقف وحيدًا أبدًا. نظرًا لأن العين البشرية والدماغ يعملان معًا لرؤية اللون ، فهما دائمًا يتأثران بما يلي:

• الضوء الساطع على اللون
• الألوان الأخرى المحيطة باللون

تحقق من هذا المثال من الطبيعة:

ج: يعمل الدماغ والعين معًا لمساعدتنا على فهم أن الزهرة ككل هي في الواقع حمراء زاهية.

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

إليك مثال آخر يوضح كيف يمكن أن يكون اللون خادعًا:

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

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

يقتل فرط التشبع حيوية اللون

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

التباين المتزامن له إيجابيات وسلبيات

يحدث التباين المتزامن عندما يتم وضع مكملات اللون بنفس القيمة بجوار بعضها البعض. يكون التأثير شديدًا لدرجة أنه يتسبب في اهتزاز أو اهتزاز النقطة التي يلتقي فيها اللونان.

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

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

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

أنظمة الألوان الأساسية هي الأفضل

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

فيما يلي خطتان مضمونتان لبناء مخطط ألوان أساسي لواجهة المستخدم:

1. مخططات ألوان واجهة المستخدم المتشابهة

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

2. مخططات ألوان واجهة المستخدم التكميلية

• تعتمد أنظمة الألوان التكميلية على التفاعل بين تكامل الألوان الباردة والدافئة الموجودة مقابل بعضها البعض على عجلة الألوان.
• يتم تحقيق تنوع الألوان من خلال تغيير التشبع والسطوع بين الأطراف التكميلية.
• يؤدي استخدام الكثير من الألوان الزاهية عالية التشبع إلى تقويض تأثير المخططات التكميلية.

تؤثر الصبغة دائمًا على القيمة

قد يبدو هذا غريبًا ، لكن الألوان لها قيم رمادية مقابلة. هذا دليل:

في الصورة أعلاه ، لدينا مجموعة من درجات السطوع والتشبع بنسبة 100٪ ، ولكن انظر إلى ما يحدث عندما يتم تحويل هذه الألوان إلى درجات رمادية:

فقاعة! تم الكشف عن مجموعة كاملة من القيم الرمادية. لماذا هذا مهم لمصممي واجهة المستخدم؟ كلمة واحدة: التباين .

بدّل عقلك إلى التدرج الرمادي للحظة. إذا كنت تبحث عن تباين ، فهل ستستخدم قيمة رمادية بنسبة 40٪ بالإضافة إلى 50٪؟ بالطبع لا ، ولكن هذا هو بالضبط ما يُخاطر عند ترك تدرج الألوان خارج معادلة تباين الألوان.

تذكر أن الصبغة تؤثر دائمًا على القيمة.

4 مبادئ أساسية للألوان للواجهات الرقمية

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

1. العلاقة بين النص واللون أمر بالغ الأهمية.
2. لا يمكن تجاهل إمكانية الوصول إلى الألوان.
3. التباين ضروري ، لكنه ليس علاجًا تصميميًا للجميع.
4. يعمل اللون بشكل أفضل عند تطبيقه بشكل متناسب.

العلاقة بين النص واللون حاسمة

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

حافظ على علاقة نص / لون صحية باتباع هذه الإرشادات البسيطة:

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

لا يمكن تجاهل إمكانية الوصول إلى الألوان

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

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

بالإضافة إلى ذلك ، يواجه بعض الأشخاص صعوبة في رؤية مكونات واجهة المستخدم المهمة ذات تباين ألوان منخفض مع خلفية الواجهة. تسمح مواقع مثل Colorable و Contrast Ratio للمصممين باختبار مجموعة من أزواج الألوان بسرعة لإمكانية الوصول إلى التباين.

التباين ضروري ، لكنه ليس علاجًا شاملًا للتصميم

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

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

يعمل اللون بشكل أفضل عند تطبيقه بشكل متناسب

تخيل تطبيقًا إخباريًا حيث يتم تعيين كل مثيل من النص في حالة العنوان أو موقع ويب للتجارة الإلكترونية مصمم على شبكة صور 9 × 9. كلاهما سيكون فظيع!

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

موارد الألوان للتقدم المستمر

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

لإتقان اللون حقًا ورؤية تأثيره الكامل على تصميم واجهة المستخدم ، يجب على المصممين التدرب. لحسن الحظ ، هناك الكثير من الموارد للمساعدة في التعلم المستمر للألوان وبناء المهارات.

Ctrl + الرسام

إذا كنت مصممًا لواجهة مستخدم تتطلع إلى اكتساب ثقة فورية في اللون ، فابدأ بـ ctrlpaint.com ، وهو موقع ويب مخصص لتعليم الرسم الرقمي. اللوحة الرقمية؟ حقا؟

إطلاقا. يقوم فنان المفهوم المحترف مات كوهر بتعليم استخدام الألوان الرقمية من خلال دروس فيديو سريعة وتمارين عملية. المنهج بسيط بشكل رائع ويركز على "رسم ما تراه" في كل من العالم المادي والخيال.

ابدأ بمكتبة الفيديو المجانية (القسم 11) قبل الانتقال إلى التدريبات الأكثر كثافة في Color Starter Kit .

جوزيف ألبرز وتفاعل تطبيق الألوان

تم استكشاف الفهم المعاصر لنسبية الألوان وتطويرها بشكل كبير من خلال الممارسة - قبل - النهج النظري للفنان / المعلم جوزيف ألبرز.

اقترح ألبرز أن لونًا واحدًا يمكن أن يكون له "وجوه متعددة" وشجع اللعب والتجربة المكثفة بين طلابه على أمل أن "تفتح العيون" لرؤية اللون كما يتصرف حقًا في العالم الحقيقي (على عكس الألوان الرمزية التي نتخيلها في أذهاننا).

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

بالنسبة لمصممي واجهة المستخدم ، يوفر تطبيق Interaction of Color فرصة لتجربة تمارين الألوان التناظرية في بيئة رقمية ومعرفة كيفية تأثير نسبية الألوان على واجهات المستخدم.

أندرو لوميس

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

في كتابيه Creative Illustration و Eye of the Painter (كلاهما متاحان على archive.org) ، يسقط Loomis عددًا من الخطوط الثابتة التي تظل ذات صلة بمجال العصر الحديث لتصميم واجهة المستخدم:

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

سيكون أي لونين متناغمين عندما يحتوي أحدهما أو كلاهما على بعض من الآخر.

اللون يفسح المجال للتجربة أكثر من أي عنصر آخر من عناصر الجمال.

واجهات المصممين الآخرين

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

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

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

اللون مهم جدًا بحيث لا يمكن تجاهله

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

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

إذا كنت مصممًا يكافح لاستخدام الألوان بمهارة أو كنت قد فكرت يومًا ، "ليس لدي موهبة في الألوان" ، فلا تحبط. التصميم بالألوان ليس شكلاً من أشكال السحر الإبداعي أو الهدايا الخاصة ؛ إنه نظام عملي قائم على تقنيات بسيطة يمكن تكرارها وتحسينها.

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

• • •

مزيد من القراءة على مدونة Toptal Design:

1. دور اللون في تجربة المستخدم
2. إنشاء دليل نمط واجهة المستخدم لتجربة مستخدم أفضل
3. UX وأهمية الوصول إلى الويب
4. الفن مقابل التصميم - نقاش أبدي
5. تصميم للبيئات التفاعلية والمساحات الذكية