يستخدم إطار عمل الألوان في Material 3 Expressive تنسيق ألوان ديناميكيًا استنادًا إلى لونَين أساسيَين تم ربطهما بنظام الألوان HCT (الصبغة والتشبع والدرجة).
العبارات الأساسية
- دور اللون
- مثل "الأرقام" على لوحة الرسم حسب الأرقام، يتم تعيين أدوار الألوان لعناصر محددة في واجهة المستخدم. وتحمل هذه الحِزم أسماء مثل primary وon primary وprimary container. يتم استخدام دور اللون نفسه لكلٍ من المظهر الفاتح والداكن. الاطّلاع على كل أدوار الألوان
- HCT
- يشير اختصار HCT إلى تدرج اللون والتشبع والدرجة.
تحديد الألوان باستخدام تدرّج اللون ودرجة التشبّع ونبرة اللون (HCT)
أداة إنشاء الألوان باستخدام نموذج HCT لإنشاء مجموعة من لوحات الألوان من لون أساسي واحد لإنشاء نموذج ألوان ثلاثي الأبعاد يحدّد الألوان استنادًا إلى تدرّج ألوانها (اللون) ودرجة تشبعها (التشبع) ونغمتها (السطوع)
هناك ثلاثة ألوان رئيسية لتمييز العناصر: اللون الأساسي والثانوي والثالثي. إنّ درجات الألوان المحايدة، مثل درجات اللون الرمادي المختلفة مع لمسة من اللون الأساسي، مثالية للاستخدام كألوان للحاويات التي تتضمّن محتوى غنيًا بسبب طبيعتها الأحادية اللون.
تدرج اللون
درجة اللون هي إدراك لون معيّن، مثل الأحمر والبرتقالي والأصفر والأخضر والأزرق والviolet. يتم قياس درجة اللون من خلال رقم يتراوح بين 0 و360، وهو طيف دائري (القيمة 0 والقيمة 360 هما درجة اللون نفسها).
كروما
ويشير إلى مدى حيوية اللون أو حياده (رمادي أو أسود أو أبيض). يتم قياس كثافة اللون باستخدام رقم يتراوح بين 0 (رمادي أو أسود أو أبيض تمامًا) وإلى ما لا نهاية (اللون الأكثر حيوية)، على الرغم من أنّ قيم كثافة اللون في HCT لا تتجاوز 120 تقريبًا.
بسبب القيود البيولوجية والقيود المتعلقة بعرض الشاشة، سيكون للألوان الأساسية المختلفة والدرجات المختلفة قيم مختلفة للتشبع.
الأسلوب
درجة اللون هي مدى سطوع اللون أو قتامه. يُشار أحيانًا إلى درجة اللون باسم السطوع. يتم قياس درجة اللون من خلال رقم يتراوح بين 0 (أسود خالص، بدون luminance) و100 (أبيض خالص، luminance كامل).
إنّ درجة اللون مهمة لتسهيل الاستخدام المرئي لأنّها تحدّد التباين. تؤدي الألوان التي تختلف اختلافًا كبيرًا في الدرجة اللونية إلى زيادة التباين، في حين تؤدي الألوان التي تختلف اختلافًا بسيطًا إلى انخفاض التباين.
الألوان الديناميكية (مظاهر الألوان)
ينفِّذ نظام التشغيل Wear OS نظامًا لتنسيقات الألوان متوافقًا مع إرشادات أدوات تمكين الوصول إلى محتوى الويب (WCAG)-AAA، والتي يتم استخراجها من سلسلتَين أساسيتَين للألوان. على وجه التحديد، تُستخدَم ألوان البذرة هذه كأساس للوحات الألوان الأساسية والثانوية. باستخدام هذين اللونَين الأوّلَين، ينشئ النظام لوحة ألوان شاملة تتضمّن لوحات ألوان أساسية وثانوية وثالثية ولوحة ألوان السطح. بعد ذلك، يتم تطبيق هذا المظهر الذي تم إنشاؤه على مكونات Wear OS وعناصر واجهة مستخدم النظام وشاشات المعلومات والتطبيقات.
استنادًا إلى إعداداتك المفضّلة، يمكنك استخدام لون بذرة معيّن أو لون العلامة التجارية لإنشاء اللون الديناميكي.
من لون البذرة
سيؤدي استخدام ميزة "الألوان الديناميكية" إلى إنشاء مخطط ألوان سهل الاستخدام تلقائيًا استنادًا إلى لون أساسي معيّن.
بما أنّ واجهة المستخدم قد تنتهي بأي عدد من ألوان المصدر المختلفة، من المفضّل التصميم في البداية باستخدام نظام الألوان الأساسي حتى تتمكّن من التأكّد من ربط أدوار الألوان المناسبة بالمكونات المناسبة في منتجك. استخدِم أداة إنشاء المظاهر في Material Theme للاطّلاع على شكل نماذج واجهة المستخدم في مجموعة من ألوان المصدر وتعديل الإعدادات حسب الحاجة.
لوحة الألوان (من ألوان شاشة الساعة الأساسية)
مظهر ملوّن تم تطبيقه على مربّع
مظهر ملوّن تم تطبيقه على شاشة تطبيق
من لون العلامة التجارية
على غرار الطريقة التي يتعامل بها مظهر Material 3 Expressive مع أدوار الألوان، يطبّق نظام التشغيل Wear OS اللون على التجارب الفردية باستخدام تعبيرات ألوان ديناميكية وسهلة الاستخدام. يستخدم نظام التشغيل Wear OS المظهر الداكن فقط لأنّ واجهة الجهاز القابل للارتداء مبنية على خلفية سوداء. بما أنّ نظام Wear OS يعمل على الأجهزة التي تعمل باللمس، فهو يتضمّن أيضًا لوحة ألوان محدودة، لأنّه لا يتطلّب الكثير من حالات التمرير فوق العناصر والتركيز عليها. استخدِم أدوات إنشاء مظاهر الألوان المخصّصة لنظام التشغيل Wear OS لإنشاء مظهر مخصّص لعلامتك التجارية وإنشاء لوحات الألوان المرجعية الكاملة و أدوار الألوان المحدّدة التي تتوافق مع الرموز المخصّصة لتصميم Material Design ومصمّمة للعمل بسلاسة مع مكوّنات واجهة مستخدم النظام.
لوحة الألوان (من ألوان العمل الفني الأساسية)
مظهر ملوّن تم تطبيقه على مربّع
مظهر ملوّن تم تطبيقه على شاشة تطبيق