هل سبق لك أن نظرت إلى قوس قزح ولاحظت كيف يتلاشى كل لون ببطء في اللون التالي؟ يجب أن تُظهر التدرجات تغير لونها أيضًا لإنشاء تركيبة ملفتة للنظر.
في هذا المقال سنكشف عن أسرار تصميم تدرج رائع لتحسين جودة واجهة المستخدم الخاصة بك بدلاً من تذكير المستخدم بالسنوات الماضية!
عندما تعمل في شركة تصميم في مجال تصميم واجهة المستخدم لفترة طويلة ، فإنك تدرك تدريجياً أن الاتجاهات في هذه الصناعة دورية بطبيعتها! تمامًا مثل الفن أو صناعة الأزياء ، أي نمط يخرج عن الموضة ، يعود في النهاية إلى الموضة بعد بضع سنوات ويستخدمه جميع الناس ، فقط ليخرج عن الموضة مرة أخرى وينساه!
في عالم التصميم الرقمي ، ربما لا يوجد مثال أفضل على صعود وهبوط التدرج. تم اعتبار التدرجات عنصرًا أساسيًا في تصميم تجربة المستخدم في التسعينيات (ربما تتذكر مواقع الويب الخاصة بالمدن الجغرافية التي استخدمت رؤوس كلمة الفن المتدرجة؟!) ، لكن الاتجاه يعود إلى سنوات قبل ذلك.
ضع في اعتبارك الشعار القديم أدناه:
"Back to the Future" هو أفضل مثال على اتجاه التصميم هذا ، والذي عاد مؤخرًا إلى الموضة وشوهد أيضًا في إعادة تصميم شعار إنستقرام 2016 وأيقونة قائمة التشغيل Spotify. أصبحت التدرجات تدريجيًا شائعة جدًا في عالم تصميم واجهة المستخدم ، وبالطبع هناك أسباب وجيهة لهذه الشعبية ؛ يضخون مزيدًا من العمق والملمس في واجهة المستخدم ؛ إنهم يلعبون أدوارًا فريدة وحتى متناقضة ، ويعكسون بشكل واقعي الألوان الطبيعية من حولنا (نادرًا ما نواجه لونًا رتيبًا في العالم الحقيقي) ، وبالطبع يمكن استخدامها لإنشاء خلفيات ملونة لم نرها من قبل.
التدرج طريقة قوية في التصميم ومع القوة الكبيرة تأتي مسؤولية كبيرة. عندما لا يتم استخدام اتجاه التصميم المتدرج بشكل صحيح ، فإنه يؤدي إلى كارثة في التصميم. التدرج يمكن أن يكسر القالب. يشتت انتباه المستخدم ويفسد جمال واجهة المستخدم.
ابدأ بأساس قوي!
يكون أي تدرج لوني بنفس قوة ألوانه الأساسية ، بغض النظر عما إذا كان ثنائي اللون أو متعدد الألوان. كما هو الحال مع جميع خيارات التصميم ، يمكنك استخدام عجلة الألوان عند اختيار الألوان المناسبة.
لا تقلق؛ ليس عليك أن تكون خبيرًا في نظرية الألوان لتقوم باختيارات الألوان المناسبة لتدرجك اللوني. القاعدة العامة هي: اختيار الألوان القريبة من بعضها حتى تمتزج معًا بشكل طبيعي. يحتوي. UX Planet على مخطط جيد جدًا حول هذا الأمر ؛ لاحظ مدى دقة الانتقال من الأصفر إلى البرتقالي مقارنةً بالانتقال من اللون الأخضر إلى اللون الأرجواني!
هل تساءلت يومًا عن سبب جاذبية الألوان المجاورة على عجلة الألوان بصريًا؟ ربما يرجع السبب في ذلك إلى أنها التدرجات الأكثر حدوثًا بشكل طبيعي وسر تجاري رائع لمصممي واجهة المستخدم ؛ استخدم الطبيعة للحصول على الأفكار والإلهام!
التدرجات في الطبيعة
نحن نتعامل مع التدرجات باستمرار في حياتنا اليومية: السماء وغروب الشمس والبحار والأنهار هي أفضل الأمثلة وأكثرها وضوحًا! بغض النظر عن مكان وجودك في العالم ؛ يمكن أن تكون السماء وحدها أفضل مصدر للتدرج. قد تكون السماء أكثر مصادر التدرجات المتوفرة بسهولة ، ولكن لا يوجد حد مطلقًا للعينات الطبيعية.
ربما يوجد تدرج طبيعي بجوارك الآن! لا يقع لون الحياة الحقيقي بين السطور ؛ بدلا من ذلك ، يتم دمجها بشكل غير محسوس!
زيادة مستوى جودة التدرج اللوني
لنفترض أن ألوان علامتك التجارية الحالية ليست مناسبة للتدرجات. ربما لا يعمل التدرج اللوني الحالي مع علامتك التجارية. لا تقلق؛ تعد إضافة ألوان جديدة إلى التدرج اللوني الحالي حلاً جيدًا لتحسين المظهر المرئي وإبراز واجهة المستخدم الخاصة بك.
كما يمكنك أن تتخيل ، تمتزج الألوان التكميلية بشكل أفضل إذا تم اختيارها من منتصف عجلة الألوان (بين اللون الأول والأخير).
فقط ضع في اعتبارك أنه كلما زاد عدد الألوان التي تضيفها ، كلما أصبح التدرج اللوني أكثر تعقيدًا ، ونتيجة لذلك ، سيتعين عليك القيام بأعمال تصميم أكثر صعوبة لتحقيق التوازن بينها. يمكنك استهداف أعلى وتصميم تدرج متعدد الطبقات مثل شعار Instagram ؛ ولكن إذا تجاوزت الأمر ، فقد ينتهي بك الأمر بشيء مثل التصميم القبيح المتعمد لموقع MTV على الويب!
منبع نور و شکل
حتى بعد اختيار مزيج مثالي من الألوان ، تظل المهمة الرئيسية لتنفيذ هذا التدرج في التصميم قائمة. أولاً ، عليك التفكير في المهام الأساسية:
يجب تنسيق التدرجات بشكل جيد مع القالب ؛ تتلاشى بمهارة وتوجه عين المستخدم إلى الغرض من موقع الويب. بالنسبة للمضلعات (المربعات ، المثلثات ، المستطيلات ، الخماسيات ، إلخ) ، يعني هذا المبدأ عادةً تدرجًا خطيًا ؛ لكن المناطق المستديرة تحتاج إلى تدرج نصف قطري.
يفضل بعض مصممي واجهة المستخدم التفكير في مصدر ضوء وهمي للشاشة بنفس الطريقة التي يتخيل بها الرسام مصدر ضوء وهمي لرسم منظر طبيعي. تساعدهم هذه الطريقة في تحديد كيفية ضبط التدرج اللوني. بطبيعة الحال ، يجب أن يكون الجانب المشرق من التدرج اللوني قريبًا من مصدر الضوء ويجب أن يكون الجانب المظلم بعيدًا. تساعد فكرة مصدر الضوء في تحديد العناصر الرسومية الأخرى للصفحة كما تعمل أيضًا كمركز اهتمام للصفحة.
في واجهة المستخدم أدناه ، المتعلقة بتطبيق الموسيقى ، لاحظ مصدر الضوء في الزاوية اليسرى العليا من الشاشة. عندما يتم تحديد كل هذه العناصر المختلفة بشكل صحيح ، فإنها تصبح تدرجًا لونيًا جميلًا ولافتًا للنظر ، ويمثل التدرج بدوره ميزة رائعة لواجهة المستخدم بأكملها.
الكلمة الأخيرة
تعد إضافة التدرج اللوني إلى واجهة المستخدم أسهل طريقة وأفضل طريقة لتحديث النظام الأساسي الخاص بك. تأكد من أنك تستخدم أداة التصميم القوية هذه بشكل صحيح باتباع النصائح الواردة في هذه المقالة:
- اختر الألوان الأساسية الصحيحة باستخدام تركيبة ألوان علامتك التجارية وعجلة الألوان.
- عندما تكون في شك ، ابحث عن أفكار في الطبيعة.
- قم بتحويل التدرج اللوني الخاص بك عن طريق إضافة ألوان جديدة ولكن احرص على عدم المبالغة في ذلك.
- اختر الشكل والموقع المناسبين في واجهة المستخدم الخاصة بك وتذكر أن عين المستخدم ستتبع التدرج اللوني.
مثل جميع اتجاهات تصميم واجهة المستخدم ، فإن التدرجات اللونية ستخرج عن الأنماط وتطيح بأكبر بدعة تالية ؛ لكن في الوقت الحالي ، فهي أحد أعمدة تصميم واجهة المستخدم الحديثة ؛ لذا استخدمهم بقدر ما تستطيع.
