Cette page a été traduite par l'API Cloud Translation.

Couleur

Le principe de base de la stratégie couleur du système d'exploitation Android Automotive est celui de « construire à partir du noir ». L'utilisation du noir pour les couleurs de l'interface offre une expérience utilisateur plus cohérente, sans changement radical entre les thèmes jour et nuit.

L'utilisation de matériaux noirs assure également une meilleure harmonie avec les composants internes, car les matériaux sombres sont souvent utilisés dans les intérieurs et les tableaux de bord des voitures.

Conseils en bref (TL;DR)

Choisissez vos couleurs à partir du noir pour une conduite aussi bien de jour que de nuit.
Maintenez un rapport de contraste d'au moins 4,5:1 entre l'arrière-plan et les icônes ou le texte.

Utilisez la couleur avec parcimonie et à dessein.
Afficher l'altitude en niveaux de gris
Utilisez la transparence et l'opacité pour guider la mise au point visuelle.

Palettes et dégradés

Le thème sombre de l'interface d'Android Automotive OS repose sur une palette de gris. Idéalement, les couleurs supplémentaires devraient être d'intensité réduite, comme dans les variantes sombres des couleurs des palettes Material Design.

Cette section comprend des informations sur la palette et l'opacité, ainsi que des graphiques fournissant les valeurs en niveaux de gris pour les niveaux d'élévation associés à chaque composant.

Conception matérielle

Utilisation des couleurs et palettes

Palette de gris du système d'exploitation Android Automotive

La palette de gris du système d'exploitation Android Automotive est utilisée pour des éléments tels que le texte et les icônes, et elle est conçue pour répondre aux exigences spécifiques de l'environnement de conduite.

Cette palette doit être suffisamment diversifiée pour :

Couvrir tous les différents cas d'utilisation de l'interface utilisateur en mode sombre
Fournir une gamme suffisante pour définir la hiérarchie par des différences tonales

palette de couleurs Grayscle — Cette palette de gris est la palette de couleurs principale d'Android Automotive OS, prenant en charge le thème sombre de l'interface.

Les variations de tons créent l'illusion de profondeur, même sur des fonds noirs profonds où les ombres sont imperceptibles. Pour offrir des nuances suffisantes, la palette de gris d'Android Automotive OS inclut des gris moyens. Les gris de Material Design, à partir du gris 900, se rapprochent trop rapidement des couleurs vives ; un gris deux tons plus clair, le gris 700, est trop clair pour un contexte automobile.

Carte d'élévation des composants — Ce graphique illustre les niveaux d'altitude auxquels se trouvent les différents composants. Chaque niveau d'altitude est associé à une valeur de gris.

niveaux d'élévation en niveaux de gris en mode jour et nuit — Ce graphique illustre les valeurs de gris associées aux différents niveaux d'altitude en mode jour et nuit.

Couleur d'accent

Outre la palette de gris qui constitue le cœur de l'interface du système d'exploitation Android Automotive, d'autres couleurs peuvent être utilisées avec parcimonie, notamment pour attirer l'attention.

Actuellement, Android Automotive OS ne possède qu'une seule couleur d'accentuation officielle : une nuance de bleu appelée « couleur d'accentuation de voiture » dans la documentation. Pour une saturation et une vivacité accrues, ce bleu diffère légèrement du bleu standard de Google. Ce décalage permet aux couleurs de mieux ressortir sur une surface sombre.

La couleur bleue « accentuée par la voiture » dans le système d'exploitation Android Automotive est plus saturée que le bleu standard de Google, conçue pour bien fonctionner dans l'interface à thème sombre, de jour comme de nuit.

Graphiques opacité-valeur

La transparence donne une impression de profondeur et renforce le modèle spatial de Material Design. Pour l'utiliser efficacement, choisissez des valeurs d'opacité claires ou foncées selon votre cas d'utilisation.

valeurs d'opacité sombre

L'utilisation la plus courante des valeurs d'opacité foncées est la création de filtres (superpositions).

Valeurs d'opacité du noir pour les superpositions

valeurs d'opacité du blanc

Ces valeurs sont principalement utilisées pour le texte. Elles sont particulièrement efficaces lorsque le fond est coloré. Utiliser du gris uni sur un fond foncé et coloré donne un résultat trop terne.

Pour des exemples d'utilisation de l'opacité dans les voiles et les hiérarchies de texte, voir Conseils et exemples .

Contraste

Pour respecter les consignes de sécurité de base du système d'exploitation Android Automotive, le rapport de contraste entre l'arrière-plan et les icônes ou le texte doit être d'au moins 4,5:1. Pour plus de détails sur la façon dont les rapports de contraste s'appliquent aux éléments d'interface utilisateur automobiles spécifiques, consultez la section « Rendre le contenu facile à lire » .

Le contraste ne — Ne laissez pas le contraste descendre en dessous de 4,5:1, car cela réduit la sécurité du conducteur.

Conseils et exemples

L'interface utilisateur sombre d'Android Automotive OS est épurée et simple, avec un usage minimal de la couleur. Outre le choix judicieux des couleurs, des tons et des valeurs d'opacité pour les éléments d'interface (voir Palettes et dégradés ), il est essentiel que chaque utilisation de la couleur et des dégradés soit justifiée.

Cette section fournit des conseils et des exemples d'utilisation de la transparence, de l'opacité et de la couleur pour atteindre divers objectifs. Ces objectifs comprennent :

Masquer les arrière-plans
Maintenir la cohérence
Établir une hiérarchie visuelle qui attire l'attention de l'utilisateur sur les actions principales.
Distinguer les entités dans une liste

Masquer les arrière-plans avec des toiles de fond

Les filtres plein écran (superpositions) servent à masquer l'arrière-plan d'éléments perturbateurs, comme les boîtes de dialogue nécessitant une action de l'utilisateur. Les filtres partiels permettent de mettre en évidence la transition d'éléments tels que les notifications.

Écran complet en mode jour — Fond intégral (derrière le carton de dialogue) en mode jour

Écran complet en mode nuit — Écran complet (derrière le carton de dialogue) en mode nuit

Écran partiel en mode jour — Écran partiel (derrière la notification) en mode jour

Écran partiel en mode nuit — Écran partiel (derrière la notification) en mode nuit

Maintenir une cohérence de couleur

La couleur est un puissant outil pour renforcer la mémoire et la reconnaissance. Utilisez-la pour créer une expérience cohérente d'un écran à l'autre.

reconnaissance visuelle des couleurs — Assurez une continuité visuelle en utilisant la même couleur pour un élément dans plusieurs vues, comme le vert utilisé ici pour les vues de navigation étape par étape.

continuité visuelle des couleurs — Utilisez la couleur pour relier visuellement les éléments et fonctions connexes, comme les boutons d'appel à l'action rouges de type « raccrocher » illustrés ici.

Couleur d'accentuation persistante de l'application — Utilisez la couleur dominante de la pochette de l'album ou la couleur associée à l'application sur les éléments connexes pour créer un repère visuel constant. Ici, le cercle autour du bouton pause est mis en valeur par le vert Spotify.

Restriction d'utilisation des couleurs — N’utilisez pas de couleurs différentes pour différencier arbitrairement les éléments répétés sur un même écran. Soyez prudent avec les couleurs lorsqu’elles n’apportent aucune valeur ajoutée, comme c’est le cas pour ces contours colorés autour des cartes récapitulatives, qui reprennent la couleur de l’icône de l’application.

Établir une hiérarchie visuelle

Utilisez les valeurs d'opacité du blanc pour créer une hiérarchie visuelle cohérente et marquée. Les valeurs d'opacité de 88, 72 et 56 offrent un contraste suffisant pour répondre aux exigences d'accessibilité tout en assurant un confort de lecture optimal sur fond sombre. En mode nuit, appliquez une opacité de 96 % à tous les blancs.

Exemple d'opacité et de contraste pour maintenir la hiérarchie visuelle — Utilisez différentes valeurs d'opacité et de contraste pour maintenir une hiérarchie visuelle.

Opacité et restriction du contraste — N'abusez pas des valeurs d'opacité ou de contraste maximales en les appliquant à un trop grand nombre d'éléments. Un contraste dans les valeurs d'opacité est nécessaire pour différencier les informations principales et secondaires.

Couleur Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.