اللون

ترتكز استراتيجية الألوان الخاصة بنظام التشغيل Android Automotive على فكرة "المبنى من الأسود". يؤدي تركيب ألوان الواجهة على اللون الأسود إلى توفير تجربة مستخدم أكثر اتساقًا بدون تغيير كبير بين المظاهر نهارًا وليلاً.

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

الحصول على إرشادات سريعة

  • ابنِ بخيارات الألوان التي تتنوّعها من الأسود لتسهيل القيادة ليلاً ونهارًا
  • الحفاظ على نسبة تباين 4.5:1 على الأقل بين الخلفية والرموز أو النص
  • استخدام الألوان بشكل بسيط
  • إظهار الارتفاع عبر وضع تدرّج الرمادي
  • استخدام الشفافية والتعتيم لتوجيه التركيز البصري

لوحات الألوان والتدرجات اللونية

يستند المظهر الداكن لواجهة نظام التشغيل Android Automotive إلى لوحة تدرّج الرمادي. من الناحية المثالية، يجب أن تكون أي ألوان إضافية ذات كثافة منخفضة، كما في المتغيرات الداكنة للألوان في لوحات Material Design.

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

لوحة تدرّج الرمادي لنظام التشغيل Android Automotive

تُستخدم لوحة التدرج الرمادي لنظام التشغيل Android Automotive مع عناصر مثل النصوص والرموز، وهي مصمّمة لتلبية المتطلبات الفريدة لبيئة القيادة.

يجب أن تكون لوحة الألوان هذه متنوعة بما يكفي لتحقيق ما يلي:

  • تغطية جميع حالات الاستخدام المختلفة لواجهة مستخدم المظهر الداكن
  • توفير نطاق كافٍ لتحديد التسلسل الهرمي من خلال الاختلافات في الدرجات اللونية
لوحة الألوان الرمادية
هذه لوحة التدرج الرمادي هي لوحة الألوان الرئيسية لنظام التشغيل Android Automotive، وتتوافق مع المظهر الداكن للواجهة.

إنّ الاختلافات في درجات الألوان تخلق خدعة العمق حتى على الخلفيات السوداء الحقيقية التي يصعب فيها إدراك الظلال. لتوفير اختلافات كافية في الدرجات اللونية، تحتوي لوحة التدرج الرمادي لنظام التشغيل Android Automotive على درجات رمادية متوسطة. يقترب اللون الرمادي في Material Design، بدءًا من Grey 900، من الألوان الساطعة بسرعة كبيرة، أما اللون الأفتح بخطوتين فهو الرمادي 700، وهو ساطع للغاية بالنسبة للسياق التلقائي.

مخطط مسقط رأسي للمكوّن
يعرض هذا الرسم البياني مستويات الارتفاع التي تستقر عندها المكوّنات المختلفة. كل مستوى ارتفاع له قيمة رمادية مرتبطة به.
مستويات ارتفاع التدرج الرمادي في الوضعَين النهاري والليلي
يعرض هذا الرسم البياني القيم الرمادية المرتبطة بمستويات الارتفاع المختلفة في الوضع النهاري والليلي

لون التَشدِيد

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

في الوقت الحالي، يحتوي نظام التشغيل Android Automotive على لون تمييز رسمي واحد، وهو ظل أزرق يُشار إليه في مكتبة الدعم باسم "لهجة السيارة". لزيادة التشبع والحيوية، يتم تغيير هذا اللون الأزرق قليلاً من اللون الأزرق القياسي من Google. يساعد هذا التغيير في جعل الألوان أكثر راحة على الأسطح الداكنة.

مثال على لون تمييز السيارة الأزرق
يكون لون "مظهر السيارة" الأزرق في نظام التشغيل Android Automotive أكثر تشبعًا من اللون الأزرق العادي لـ Google، وهو مصمّم ليتناسب تمامًا مع الواجهة ذات المظهر الداكن أثناء القيادة في النهار والليل.

الرسوم البيانية لقيمة التعتيم

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

قيم التعتيم الداكن

تتمثّل حالة الاستخدام الأكثر شيوعًا لقيم التعتيم الداكن في إنشاء إطارات شبكية.

قيم تعتيم اللون الأسود للتراكبات

قيم تعتيم الأبيض

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

قيم تعتيم النص الأبيض

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


التباين

لتلبية إرشادات الأمان الأساسية لنظام التشغيل Android Automotive، يجب أن تكون نسبة التباين بين الخلفية والرموز أو النص 4.5:1 على الأقل. لمعرفة تفاصيل حول كيفية تطبيق نِسب التباين على عناصر محدَّدة من واجهة المستخدم في السيارة، يُرجى الاطّلاع على تسهيل قراءة المحتوى.

توفير التباين

الإجراءات المقترَحة

التأكد من أنّ التباين يلبّي الحد الأدنى لنسبة العرض إلى الارتفاع 4.5:1 لكل المحتوى القابل للقراءة والقابل للتنفيذ
التباين ليس

الإجراءات التي يجب تجنّبها

لا تدع التباين يقل عن 4.5:1، ما يقلل من سلامة السائق

الإرشادات والأمثلة

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

يقدّم هذا القسم إرشادات وأمثلة لتطبيق الشفافية والتعتيم واللون لتحقيق مجموعة متنوعة من الأهداف. وتشمل هذه الأهداف ما يلي:

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

إخفاء الخلفيات باستخدام أدوات الحروق

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

التمويه الكامل في الوضع اليومي
حاجب كامل (خلف بطاقة مربع الحوار) في الوضع النهاري
التمويه الكامل في الوضع الليلي
حاجب كامل (خلف بطاقة مربع الحوار) في الوضع الليلي
حاجب جزئي في وضع اليوم
تمويه جزئي (خلف الإشعار) في الوضع النهاري
حاجب جزئي في الوضع الليلي
تمويه جزئي (خلف إشعار) في الوضع الليلي

الحفاظ على الاتساق مع اللون

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

التعرُّف على الألوان المرئية

الإجراءات المقترَحة

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

الإجراءات المقترَحة

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

الإجراءات المقترَحة

استخدِم اللون السائد لغلاف الألبوم أو اللون المخصّص له على العناصر ذات الصلة كعنصر مرئي دائم. هنا، الدائرة حول زر الإيقاف المؤقت مميَّزة باللون الأخضر من Spotify.
تقييد استخدام الألوان

الإجراءات التي يجب تجنّبها

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

تأسيس تسلسل هرمي مرئي

استخدم قيم تعتيم الأبيض لإنشاء تسلسل هرمي مرئي متناسق وقوي. تحتوي قيم التعتيم 88 و72 و56 على تباين كافٍ لتلبية متطلبات إمكانية الوصول مع إنشاء بيئة قراءة مريحة على خلفية داكنة. يمكنك استخدام معدل تعتيم 96% على جميع درجات اللون الأبيض في الوضع الليلي.

مثال على التعتيم والتباين للحفاظ على التسلسل الهرمي المرئي

الإجراءات المقترَحة

استخدِم قيم مختلفة للتعتيم والتباين للحفاظ على تسلسل هرمي مرئي.
تقييد التعتيم والتباين

الإجراءات التي يجب تجنّبها

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