استخدم الألوان للتعبير عن الأسلوب وتوصيل المعنى. يمكن أن يكون ضبط ألوان تطبيقك حاسمًا للتخصيص، وتحديد الغرض الدلالي، وبالطبع تحديد هوية العلامة التجارية.
الخلاصات
- لضمان إمكانية الوصول:
- تحقق من تباين الألوان وتجنب إقران الألوان بألوان متشابهة.
- ضع في اعتبارك أن الأحمر والأخضر من الأنماط الشائعة، ولكن أيضًا لا يمكن الوصول إليها من قبل المستخدمين الذين يعانون من أنواع معينة من عمى الألوان.
- تدرب على استخدام الألوان بشكل هادف: يمكن أن تكون التطبيقات نابضة بالحياة ومعبرة، ولكن التزم بمجموعة من الألوان. قد يكون توسيع المخطط باستخدام عدد كبير جدًا من الألوان الدلالية أمرًا مربكًا، بينما قد يكون وجود الكثير من الألوان الزخرفية مربكًا.
- يمكن أن يكون للألوان أنماط، لذا كرر أنماط الألوان المحددة. في حالة استخدام ألوان دلالية في تطبيقك، استخدم ألوانًا متسقة.
- للسماح لتطبيقك بالعمل بشكل جيد في سياقات مختلفة، أنشئ نظامًا بلون فاتح وداكن (واحرص على تباين المظاهر).
- تعيين ألوان بالرموز المميزة للإشارة إلى دور لون العنصر، بدلاً من استخدام قيمة ذات ترميز ثابت.
- يمكن أن تأتي الألوان من مصادر ديناميكية وثابتة مختلفة، ولكن تجنب خلط عدد كبير جدًا من العناصر في طريقة العرض نفسها.
- عند استخدام لون المحتوى الديناميكي، حاول تجنب سحب الألوان من أجزاء متعددة من المحتوى.
مساحة اللون على نظام التشغيل Android
لفهم كيفية تطبيق Android للألوان على واجهة المستخدم بشكل صحيح، من المهم أولاً التعرّف على كيفية عرضها على الجهاز.
كيفية عرض الألوان على جهاز
يتم عرض تطبيقك على شاشة ذات إضاءة خلفية تستخدم ألوانًا رقمية وتلتزم بنماذج وقواعد معيّنة تساعد أعيننا على إدراك هذا اللون. اللون الرقمي هو لون إضافي، يتم إنشاؤه عن طريق "إضافة" أو مزج أضواء مختلفة لإنشاء مجموعة كاملة من الألوان. يمكن أن تختلف الطريقة التي ينظر بها البشر للألوان من شاشة إلى أخرى بشكل كبير اعتمادًا على معايرة ألوان الجهاز ونوع الشاشة والإعدادات ومساحة اللون.
عند تصميم تطبيق ما، ضع في اعتبارك أن الألوان المستخدمة قد لا تكون متطابقة بسبب هذه العوامل، ناهيك عن تصورات الألوان الفريدة للمستخدمين الفرديين.
لمحة عن مساحات الألوان
مساحة اللون هي مجموعة من الألوان تستخدم نموذج ألوان. نموذج أحمر أخضر أزرق هو نموذج ألوان إضافي ينشئ طيف ألوان من خلال الأحمر والأخضر والأزرق، بينما نموذج الألوان CMYK المستخدَم في الطباعة هو محتوى فرعي. لهذا السبب، يستخدم المصممون التفاعليون عادةً نموذج أحمر أخضر أزرق أو نماذج مماثلة لاختيار الألوان.
قدّمت المادة 3 (M3) HCT، وهي مساحة لون جديدة تستخدم تدرج اللون والكروما والدرجة اللونية لتحديد الألوان الدقيقة للغاية مقارنة بالنماذج الأخرى مثل HSL
لمعرفة المزيد حول علم الألوان وتطوير HCT، اقرأ علم الألوان والتصميم.
تدرج اللون واللون والدرجة اللونية
يسمح HCT باستخدامات أكثر تخصيصًا ومرونة للألوان تبقى ضمن معلمات النظام. يصمم HCT الألوان باستخدام تدرج اللون والكروما والدرجة اللونية:
- تدرج اللون: تشبه درجة اللون الصفة التي قد يستخدمها مستخدم فردي لوصف اللون، على سبيل المثال "أحمر" أو "بنفسجي كهربائي". تتراوح قيمة HCT لتدرج اللون من 0 إلى 360.
- الكروما: تعبر كروما عن ألوان الألوان وتتراوح من الرمادي المحايد إلى الحيوية الكاملة. في مساحة لون HCT، يبلغ الحد الأقصى للكروما حوالي 120.
- درجة اللون: درجة اللون هي سطوع اللون أو سطوعه. يستخدم HCT النبرة لإنشاء التباين. لا يمكن الوصول إلى الألوان التي تم تعيينها على قيمة النغمة نفسها لسياقات معينة لإمكانية الوصول. الدرجات المنخفضة القيمة أغمق، والدرجات الأعلى قيمة أكثر إشراقًا.
عملية نظام الألوان
تم تصميم ألوان M3 حول نموذج HCT لاستخلاص أنظمة ألوان متناغمة يمكن الوصول إليها والمساعدة في ميزات الألوان الديناميكية. يبدأ نظام ألوان M3 من لون المصدر. تتم ترجمة لون المصدر هذا إلى خمسة ألوان رئيسية: المتغير الأساسي والثانوي والثالث والمحايد والمحايد. تنشئ هذه الألوان الخمسة الرئيسية لوحات ألوان تتكون من أجزاء من درجات لونية لكل لون رئيسي.
وإذا قمت بتعيين لون رئيسي يدويًا، لاحظ صفاء المدخل ودرجة لونه، حيث قد لا تكون درجة اللون هي قيمة الدرجات اللونية لدور اللون.
يعتمد نظام الألوان M3 على Material Color U اشتراكs (أدوات لون المواد) (MCU)، وهي مجموعة من مكتبات الألوان التي تحتوي على خوارزميات وأدوات مساعدة تسهّل عليك تطوير مظاهر الألوان وأنظمة الألوان في تطبيقك.
يصف الفيديو التالي كيفية اشتقاق مخططات الألوان.
حدود الألوان
قيود اللون هي الحدود المادية للون - سواء كانت الفيزياء الفعلية أو قيود الصورة البيولوجية الخاصة بنا أو قيود عرض الألوان على الشاشة. على سبيل المثال، لا يمكن أن توجد بعض تدرجات اللون مع كروما أو درجات لونية معينة. قيود الألوان هي السبب وراء عدم إمكانية استخدام ألوان مثل الأزرق الفاتح أو الأحمر الفاتح. يجب أن يكون تعيين لون التدرج متسقًا عبر جميع قيم التدرج.
يوضح الشكل السابق ثلاثة مخططات مختلفة لتعيين تدرج اللون لقيم تدرج اللون H105 وH25 وH285.
الرسم البياني 1–تدرج اللون 105 (الأصفر). يشير إلى توفر الألوان. تعمل Chroma and Tone مثل الرسم البياني. يحتوي تدرج اللون الأصفر على لون محدود بألوان معينة على طول الرسم البياني، بينما لا يتميز اللون الأصفر بنطاق واسع من الحيوية مع الدرجات اللونية المنخفضة.
الرسم البياني 2–تدرج اللون 25 (أحمر). عرض خيارات لونية أكثر من تدرج اللون 105 (اللون الأصفر). في خريطة الدرجات اللونية هذه، تكون نقطة أعلى درجة للألوان بمستوى نغمة أقل.
الرسم البياني 3–hue 285 (أزرق). توضح أن أعلى درجة من اللون متوفرة بدرجة أغمق. وعلى الجانب الآخر، تُفقد سعة الكروما بدرجة أفتح.
النمط اللوني
نظام الألوان هو مجموعة من علامات التشكيل والأسطح المستمدة من درجات لونية محددة ومخصصة لأدوار الألوان، والتي يتم تعيينها بعد ذلك إلى عناصر واجهة المستخدم والمكونات. تشير أدوار اللون إلى استخدام اللون بدلاً من تدرج اللون. على سبيل المثال، على الشبكة الأساسية بدلاً من الأزرق.
تم تصميم أنظمة الألوان لتكون متناغمة، وتضمن النص الذي يمكن الوصول إليه، وتميز عناصر واجهة المستخدم والأسطح عن بعضها البعض. أزواج أدوار الألوان (المكونة من أدوار الحاوية وأدوار الحاوية) لها قيم درجات لونية توفّر تباينًا يمكن الوصول إليه.
يتم إنشاء المخططات الفاتحة والداكنة ولها تعيينات درجات لونية خاصة بها.
يوفر نظام ألوان Material والمخططات المخصصة قيمًا افتراضية للون كنقطة انطلاق للتخصيص.
تعرَّف على المزيد من المعلومات حول نظام الألوان M3.
للحصول على نظام ألوان قابل للتخصيص، يمكنك الاطّلاع على Android UI Kit.
تطبيق اللون على واجهة المستخدم
يتألف لون واجهة المستخدم من ألوان التمييز والدلالة وألوان السطح.
- تشير ألوان التمييز إلى الألوان الأساسية التي تكون عادةً جزءًا من لوحة ألوان علامة Android التجارية.
- الألوان الدلالية (أو الألوان المخصصة داخل المادة 3)، هي ألوان ذات معنى خاص.
- تشير ألوان السطح إلى أي ألوان مشتقة محايدة تُستخدم لألوان الخلفية.
لون التمييز
عادةً ما تُظهر ألوان التمييز الأكثر تعبيرًا في واجهة المستخدم، سواء كان ذلك للعلامة التجارية أو إبراز الإجراءات أو التعبير الشخصي أو تعبير المستخدم.
يتم توفير كل لون تمييز (أساسي وثانوي وثلاثي) في مجموعة من أربعة إلى ثمانية ألوان متوافقة من درجات مختلفة للإقران وتحديد التوكيد والتعبير المرئي.
ألوان ديناميكية
يمكن تحديد ألوان التمييز من مصادر ديناميكية.
بدءًا من نظام التشغيل Android 12 (المستوى 31 لواجهة برمجة التطبيقات)، يسمح اللون الديناميكي للنظام باستخراج لون مصدر من خلفية المستخدم أو المحتوى داخل التطبيق، مثل مادة عرض لوحة مفاتيح أساسية. يستخدم اللون الديناميكي خوارزميات وعمليات MCU لإنشاء مخططات وتنفيذها بأقل جهد ممكن. لتطبيق لون ديناميكي على تطبيقك، اطّلِع على المقالة السماح للمستخدمين بتخصيص تجربة الألوان في تطبيقك.
يمكنك تجربة الدرس التطبيقي حول الترميز الخاص بـ تمثيل اللون الديناميكي للحصول على نظرة عملية على اللون الديناميكي.
ثابت
المخطط الثابت هو مخطط له قيم غير متغيرة (أو نسبية). تتمثل الطريقة الشائعة لإنشاء مخطط ثابت في ألوان العلامة التجارية، ومواءمة الألوان الأساسية والثانوية والثلاثية مع لوحة الألوان الرئيسية للعلامة التجارية.
حتى إذا كنت تستخدم ألوانًا ديناميكية، ننصحك بشدة بإنشاء مخطط ثابت كعنصر احتياطي إذا كان اللون الديناميكي غير متاح لجهاز المستخدم. وبخلاف ذلك، يستخدم النظام نظام اللون الأرجواني الأساسي.
باستخدام Material Theme Builder، يمكنك تطبيق خوارزمية ألوان MCU لإنشاء مظهر ثابت مخصّص. ينتج عن ذلك ألوان اخترتها، ولكن تتماشى مع الرموز المميزة لنظام ألوان M3 ومبادئ إمكانية الوصول المتناغمة.
لا يزال من الممكن إنشاء مخطط ثابت مخصص بالكامل. للقيام بذلك، قم بتعيين قيم مختلفة داخل أنماط الألوان (color.kt أو color.xml)، أو
قم بتصدير ملف المظهر من Material Theme Builder لـ Figma بعد تحديث خصائص نمط Figma.
الاستخدام
تحتوي مكونات Material على أدوار لونية معينة مسبقًا، ولكن يمكنك استخدام الرموز المميزة للألوان في جميع أنحاء واجهة المستخدم والعناصر المخصصة. استخدم جميع ألوان التمييز بحرص، مع الأخذ في الاعتبار أن عين الإنسان تنجذب بشكل خاص إلى الألوان النابضة بالحياة.
كما هو الحال مع الكتابة، يطبق النظام اللون في تسلسل هرمي، مع اللون الأساسي وأدواره الخاصة التي يتم إسنادها إلى العبارات المهمة التي تحث المستخدم على اتخاذ إجراء (CTA). نوصي بتولي أدوار أساسية باستخدام مكونات مثل أزرار الإجراءات العائمة (FAB).
عند اختيار اللون الأساسي، من الجيد تعيين اللون الأساسي لعلامتك التجارية. بدلاً من ذلك، يمكنك تحديد لون لتمثيل المكونات التفاعلية، مما يسمح باستخدام ألوان علامتك التجارية باعتدال. تستمر الألوان الثانوية والثالثية في أسفل التسلسل الهرمي لإبراز الأهمية.
يمكن أن يؤدي المظهر المفرط التشبع إلى استخدام أدوار اللون الأساسية فقط سواء أكانت أساسية أو ثانوية أو ثالثية. للمساعدة في التسلسل الهرمي للألوان، يمكنك تطبيق مخططات الألوان لتضمين ألوان الحاويات الأقل حيوية وأدوار المخطط التفصيلي.
لضمان تجربة مستخدم أفضل، استخدِم ألوانًا أساسية أكثر حيوية للإشارة إلى الإجراءات ذات البروز الأكبر في التسلسل الهرمي المرئي لتطبيقك. في الشكل التالي، يحتوي FAB في الصورة الأولى على لون هادئ بنفس الدرجة والصفاء مثل التنقل، مما يجعله يندمج. تُظهر الصورة الثانية زر FAB الذي يجذب المزيد من الاهتمام إلى نفسه بلون أساسي نابض بالحياة.
لإلقاء نظرة عملية على اللون الديناميكي، يمكنك تجربة الدرس التطبيقي للرموز البرمجية تخصيص لون المواد.
اللون الدلالي
اللون الدلالي هو الألوان التي تحمل معانٍ محددة. على سبيل المثال، خطأ هو لون دلالي.
كن متسقًا مع معنى اللون - إذا أنشأت نمطًا، كرره في جميع أنحاء التطبيق. على سبيل المثال، إذا أنشأت اللون الأرجواني للإشارة إلى ميزة العضوية، فاستخدم اللون الأرجواني لجميع حالات ميزة الاشتراك هذه.
في المثال التالي، يستخدم أحد التطبيقات اللون الأحمر للإشارة إلى خطأ في أحد حقول النص، والأرجواني للحقل الآخر - وهذا من شأنه أن يتسبب في حدوث ارتباك عند تصفح نموذج.
على الرغم من أنّ نظام ألوان Material يوفر لون error الدلالي، يتم إنشاء ألوان دلالية إضافية من خلال ألوان مخصّصة لتوسيع نظام الألوان لديك. اطّلِع على مزيد من المعلومات عن الألوان المخصّصة.
يوفر التوافق طريقة لمواءمة الألوان الديناميكية التي ينشئها المستخدمون مع الألوان المخصصة داخل تطبيقك لإنشاء لوحات ألوان أكثر تناغمًا.
ألوان السطح
تم تصميم ألوان السطح لعناصر الخلفية مثل حاويات المكونات والأوراق والأجزاء، وتمثل معظم ألوان تطبيقك. لا تخجل من استخدام مساحة كبيرة من السطح؛ عين الإنسان تحتاج إلى مساحة للاسترخاء. تساعد مساحات العرض أيضًا في تضمين المحتوى وتوجيه القارئ.
قدم M3 مفهوم أسطح درجات اللون، مما يعني أن جميع الألوان مشتقة من لوحات الألوان. تخلق النغمات كلاً من العمق والتباين للمساعدة في سهولة الوصول. لمزيد من المعلومات حول الأدوار المعروضة في الواجهة، يُرجى الاطّلاع على إرشادات الأدوار على السطح M3.
إمكانية الوصول والألوان
يرى الأشخاص اللون بطرق مختلفة حسب حدة بصرهم. نظرًا لأن بعض القراء مصابين بعمى الألوان، فأنت بحاجة إلى التحقق من مجموعات الألوان لضمان عدم انسجام عناصر واجهة المستخدم معًا. على الرغم من أن التعتيم والوزن قد لا يكونان التدرج الحرفي للون، إلا أن لهما تأثير مرئي قوي على كيفية إدراك المستخدمين للون.
تباين الألوان هو الفرق بين سطوع عناصر المقدمة والخلفية، والذي يتم تقديمه بتنسيق نسبة. يتم إعطاء معايير النسبة هذه درجات. على سبيل المثال، يساعد قياس التباين بين النص على زر وحاويته في تحديد سهولة قراءة النص. يتم تقسيم إرشادات تباين الألوان إلى نص وغير نص، ولكل منها مجموعة خاصة من الدرجات. يمكنك الاطّلاع على مقالة التصميم باستخدام ألوان يسهل الوصول إليها لمعرفة مزيد من التفاصيل.
لا تجعل اللون العنصر أو المؤشر الوحيد لأحد الإجراءات المتاحة. استخدم زر مكون أو تغيير في سُمك الخط أو حتى أيقونة للمساعدة في إبلاغ المستخدم أنه يمكنه التفاعل مع العنصر.
تنفيذ اللون
الرموز المميزة هي تمثيلات دلالية متغيرة صغيرة لبيانات التصميم. إنها قابلة للتكرار وتستبدل القيم الثابتة، مثل الأكواد السداسية للون، بأسماء واضحة بذاتها. لتعيين دور اللون لعنصر ما، استخدم الرموز المميزة بدلاً من قيم الألوان الثابتة.
اطلع على نموذج Figma الآن في Android للحصول على أمثلة لتعيين دور اللون.
يتم ضبط قيم الألوان داخل ملف الألوان color.kt باستخدام ميزة Compose (أو
color.xml باستخدام "طرق العرض"). هذه الألوان المعينة كأنماط هي جزء من مظهر. يمكنك الاطّلاع على المزيد من المعلومات حول هذا الموضوع في مقالة التصميمات لمظاهر الأجهزة الجوّالة التي تعمل بنظام التشغيل Android.
لضبط قيم الألوان على Android، يمكنك استخدام الكود السداسي العشري الذي يمثل نموذج أحمر أخضر أزرق بتنسيق مكوَّن من 6 أرقام. للحصول على التعتيم، ألحق القيمة بالمقدمة لإنشاء رمز مكوّن من 8 أرقام.
استخدام "أداة إنشاء مظاهر المواد":
يمكنك إنشاء مخططات ألوان فاتحة وداكنة مخصصة باستخدام أداة إنشاء مظاهر المواد (MTB).
يتيح لك MTB إمكانية عرض ألوان ديناميكية وإنشاء رموز مميزة للتصميم متعدد الأبعاد وتخصيص أنظمة الألوان لديك.
يمكن تخصيص نظام الألوان بالكامل من خلال تحديث خصائص النمط داخل لوحة عارض Figma. يتم تصدير هذه القيم المعدَّلة.
