5 تقنيات لضبط دقيق مع UX
اللون هو أحد العناصر الرئيسية في أي نظام تصميم. في مواقع الويب أو التطبيقات ، يمكن استخدام الألوان بعدة طرق: في بعض الأحيان يمكن استخدام اللون لإنشاء نقطة بؤرية من خلال التباين أو من خلال تحديد اللون إلى نقطة محددة ؛ يمكن أن يساعد اللون أيضًا في إنشاء التسلسل الهرمي وبالتالي التأثير في مكان ظهور المستخدم.
في هذه المقالة ، سنتحدث عن كيفية استخدام اللون بشكل استراتيجي.
1. إنشاء نقطة تركيز من خلال النسب
مثال جيد على نسب اللون هو تصميم Viporte . أثناء التمرير لأسفل على الصفحة الرئيسية ، تم تزيين كل قسم بحرف كبير في المركز. تمتلئ الرسالة بلون جميل قبل تشغيل الرسوم المتحركة للأقسام. لون الصور المختلفة التي ترتبط بها تتناسب مع لون الحروف. النقطة المحورية هي بالتأكيد في وسط الأقسام ويرجع الفضل في ذلك جزئياً إلى الاستخدام المركز للألوان. تختلف النسب - في بعض الأحيان يكون هناك القليل من اللون وأحيانا يكون هناك الكثير من ذلك. وفي كلتا الحالتين ، تستخدم النسب لجذب الانتباه إلى نقطة محورية. إذا كان اللون أكثر وضوحًا في كل مكان داخل كل قسم ، فلن يكون مركز التنسيق واضحًا.
2. جذب الانتباه من خلال التباين
شيء آخر يمكن للون أن يتلاعب به هو التباين. عندما تكون ألوان التصميم العام هادئة أو هادئة ، فإن إضافة لون متباين سوف يجذب الكثير من الانتباه للصور.
هذا بالضبط ما يحدث داخل تصميم Thinx . في الصفحة الرئيسية ، يكون نظام الألوان الكلي للواجهة باللونين الأبيض والأسود. ومع ذلك ، يعتمد التصميم بشكل كبير على العديد من الصور. خاصة في الجزء العلوي من الصفحة الرئيسية ، تحتوي صور الملابس الداخلية على خلفية حمراء داكنة. بالمقارنة مع كل شيء آخر على الصفحة ، هذا جريء جدًا. لا شك أن الشيء الذي يبرز هنا هو الأحمر الداكن. الأحمر له تباين أعلى بكثير من نظام الألوان الأسود والأبيض. أنا أحب استخدام Thinx كمثال لأنه يذهب لإظهار أن الألوان النيون المشرقة ليست الوحيدة المناسبة لجذب انتباه شخص ما من خلال التباين. إنه فعلاً مجرد توازن من لونين سيسمحان لأحدهما بالوقوف.
3. استخدام اللون لإنشاء أنماط UX
أفضل طريقة لإنشاء أنماط مرئية هي من خلال الاتساق. تعمل الأنماط ، بدورها ، على إنشاء علاقات يمكن للمستخدم التعود عليها. إنها نفس الطريقة التي يتم بها استخدام المستخدمين لرموز certina المرتبطة بإجراءات معينة ، أي أن المهملات تعني الحذف. الألوان أكثر شخصية لأن كل موقع أو تطبيق يمكن أن يكون له معنى خاص به للألوان.
لنأخذ العلاقة مع اللون الأزرق على موقع Underbelly محفظة . إنه مثال بسيط وهو مثالي لإثبات وجهة نظري. أي شيء يمكن النقر عليه في موقع Underbelly هو الأزرق. بعد أن استخدمنا موقع الويب لبضع ثوان ، يتضح بسرعة أن روابطه باللون الأزرق. وهذه هي الطريقة التي تصنع بها الأنماط من خلال اللون. تعتبر الأنماط جيدة لأنها تسمح للمستخدمين والزوار بالتعرف على شيء بسهولة. يصبح الاعتراف الأسهل ، كلما قل الناس يفكرون والآن نعرف جميعًا مدى سعادة ذلك ستيف كروج .
4. إنشاء التسلسل الهرمي من خلال اللون
يمكن أن يكون لون آخر جيدًا هو إعداد تسلسل هرمي. على صفحة منتج Skore ، عن كل قسم يحتوي على عناصر من الأخضر إليها. ليس فقط التكرار الأخضر - الذي يخلق نمطًا معروفًا - بل يساعد أيضًا على تمييز الأجزاء المهمة في أي قسم معين. في كثير من الأحيان يكون من السهل شرح التسلسل الهرمي من خلال حجم حجم الخط هذا. لكن كثافة اللون ، بالإضافة إلى استخدام لون في الاستخدام يمكن أن تكون رائعة في وضع التسلسل الهرمي أيضًا.
في مثال Skore ، الأخضر له تباين جيد مع النص الرمادي والخلفية البيضاء. أنها تبرز. بالإضافة إلى ذلك ، لا يعتمد نظام ألوانها على ألوان تمييز أخرى مما يجعل اللون الأخضر الأساسي. كل ذلك يساهم في طريقة كل قسم لعرض التسلسل الهرمي. لذلك ، يساعد اللون الأخضر في توجيه أعين المستخدم نحو العناصر المهمة التي توفر تسلسلاً هرميًا لطيفًا داخل كل قسم. تخبر العناصر الخضراء المستخدم بمكان النظر أولاً.
5. استخدام أوجه التشابه في اللون
من بين جميع الأشياء المختلفة التي نقوم بها باستخدام الألوان كمصممين ، فإننا نستخدمها في الغالب ونعيد استخدامها من أجل الحفاظ على الاتساق في مكانه داخل التصميم. دعونا نلقي نظرة على نهاية InVision في العام الصفحة المقصودة. يوجد في الجزء العلوي من الصفحة تدرج وردي وبنفسجي يستخدم كصورة خلفية. مزيد من أسفل الصفحة وتستخدم الوردي والبنفسجي للزر الألوان أيضا. بالإضافة إلى ذلك ، تعيد الصفحة المقصودة إلقاء الضوء الأبيض على الخلفيات ذات الألوان الوردية والأرجوانية. كما يعيد استخدام لون النص الأسود والرمادي على الخلفيات البيضاء. إذا كانت الألوان مختلفة في كل مرة ، فإنها لن تبدو كبيرة.
دعونا نلقي نظرة على مثال آخر ، على وجه التحديد شارك في الحركة . على صفحتهم الرئيسية ، يستخدم الاستوديو الإبداعي بعض الألوان المختلفة. لكنهم جميعا متشابهون بما يكفي في نغمتهم لتوفير تدفق متماسك. في هذا المثال ، لا يوجد شيء يبرز على وجه التحديد والذي يمكن أن يكون أيضًا هدفًا جيدًا. في هذه الحالة ، يتم التركيز باستخدام اللون على تدفق جيد ومتماسك للصفحة ، حيث تحاول إبقاء المستخدم مشغولاً ومتصفحًا.
استنتاج
يمكن أن يكون اللون أداة رائعة في المساعدة على تحقيق أهداف التصميم المختلفة. يمكن أن يساعد اللون على تحديد وإنشاء تسلسل هرمي وتوفير نقطة تركيز. تركيز اللون يأتي في أشكال مختلفة. في كلتا الحالتين ، يمكن العمل مع اللون يكون الكثير من المرح. يمكن أن يكون التأثير على مكان زيارة المستخدم أو الزائر أسهل بمساعدة نظام ألوان إستراتيجي.