اللون

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

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

إرشادات سريعة (باختصار شديد)

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

الألوان والتدرجات

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

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

أيقونة التنبيه
تصميم المواد
استخدام الألوان ولوحات الألوان

نظام تشغيل السيارات أندرويد، لوحة ألوان رمادية

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

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

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

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

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

لون مميز

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

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

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

مخططات قيمة الشفافية

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

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

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

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

قيم عتامة اللون الأبيض

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

قيم شفافية اللون الأبيض للنص

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


مقابلة

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

التباين يفعل

يفعل

تأكد من أن نسبة التباين لا تقل عن 4.5:1 لجميع المحتويات المقروءة والقابلة للتنفيذ.
التباين لا

لا

لا تدع نسبة التباين تنخفض عن 4.5:1، فهذا يقلل من سلامة السائق.

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

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

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

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

حجب الخلفيات بشاشات شفافة

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

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

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

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

التعرف البصري على الألوان

يفعل

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

يفعل

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

يفعل

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

لا

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

إنشاء تسلسل هرمي بصري

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

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

يفعل

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

لا

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