Le système de couleurs expressif Wear Material 3 utilise trois couches d'accentuation (primaire, secondaire et tertiaire) pour les composants clés et deux couches de surface neutres. Chaque rôle offre une gamme de valeurs avec un contraste cohérent, ce qui permet des combinaisons de couleurs expressives, mais accessibles, pour une expérience unifiée sur n'importe quel thème.
Que sont les rôles de couleur ?
Les rôles de couleur sont comme les "nombres" sur une toile de coloriage numérotée. Ils constituent le lien entre les éléments de l'UI et la couleur à appliquer à chacun d'eux.
- Les rôles de couleur sont mappés aux composants Material : vous utiliserez ces rôles de couleur, que vous utilisiez le schéma de référence statique ou la couleur dynamique. Si votre produit contient des composants personnalisés, ils devront être correctement mappés à cet ensemble de rôles de couleur.
- Les rôles de couleurs favorisent l'accessibilité : le système de couleurs repose sur des combinaisons de couleurs plus accessibles. Ces paires de couleurs offrent un contraste de couleurs d'au moins 3:1.
- Les rôles de couleur sont tokenisés : les rôles sont implémentés dans la conception et le code à l'aide de jetons. Un jeton de conception représente une décision de conception réutilisable et de petite taille qui fait partie du style visuel d'un système de conception.
Termes essentiels
Voici les termes clés que vous verrez dans les noms des rôles de couleur :
- Surface : rôle utilisé pour les arrière-plans et les grandes zones de l'écran peu accentuées.
- Primaire, secondaire, tertiaire : rôles de couleur d'accentuation utilisés pour mettre en avant ou en retrait les éléments de premier plan.
- Conteneur : rôles utilisés comme couleur de remplissage pour les éléments de premier plan tels que les boutons. Elles ne doivent pas être utilisées pour le texte ni les icônes.
- Sur : les rôles commençant par ce terme indiquent une couleur pour le texte ou les icônes sur la couleur parente associée. Par exemple, "on-primary" est utilisé pour le texte et les icônes sur la couleur de remplissage primaire.
- Variante : les rôles se terminant par ce terme offrent une alternative moins accentuée à leur paire sans variante. Par exemple, la variante de contour est une version moins accentuée de la couleur de contour.
Rôles principaux
Les rôles primaires sont utilisés pour les composants clés de l'UI, tels que les boutons Edge-Hugging, les boutons visibles, les états actifs et les icônes sur les styles de boutons tonaux.
Principal
- Principale
- Sur principal
Utilisez le rôle "Principal" pour les actions les plus importantes de l'UI, comme les boutons principaux ou les incitations à l'action. Cette couleur doit se démarquer et être immédiatement reconnaissable pour guider l'utilisateur vers les interactions clés.
Primary-Dim
- Primaire-Dim
- Sur principal
Les rôles de type "dim" (atténué) sont généralement utilisés pour les éléments qui doivent être visuellement distincts de l'action principale, mais qui ne nécessitent pas l'attention ni l'interaction immédiates de l'utilisateur.
Primary-Container
- Primary-Container
- On-Primary-Container
Appliquez le conteneur principal aux éléments d'arrière-plan tels que les cartes ou les modaux pour mettre en évidence des sections ou des états sélectionnés. Il permet d'attirer l'attention sur des contenus importants ou des activités en cours dans l'UI.
Rôles secondaires
Les rôles secondaires sont utilisés pour les composants clés de l'UI, qui ne sont pas aussi importants que le rôle principal, mais qui doivent tout de même se démarquer. Les couleurs primaire et secondaire peuvent être utilisées ensemble dans les mises en page pour créer de la différenciation et de la concentration.
Secondaire
- Secondaire
- Sur secondaire
Utilisez le rôle secondaire pour les actions d'assistance dans les zones avec une UI dense, comme les boutons secondaires ou les actions complémentaires. Elle maintient la visibilité sans éclipser les éléments principaux dans les mises en page complexes.
Secondary-Dim
- Secondaire-Dim
- Secondaire
Le rôle "Secondaire-Dim" offre un contraste atténué pour les éléments passifs dans les zones denses. Elle complète la couleur secondaire tout en ajoutant une profondeur subtile, ce qui permet de garder une UI propre et d'aider les utilisateurs à naviguer.
Secondary-Container
- Secondary-Container
- On-Secondary-Container
Appliquez Secondary-Container pour organiser les éléments secondaires dans les mises en page denses. Il crée une structure et une séparation, en veillant à ce que le contenu secondaire soit distinct, mais pas dominant.
Rôles de niveau supérieur
Les rôles tertiaires sont utilisés pour accentuer le contraste des couleurs primaires et secondaires, ou pour attirer davantage l'attention sur un élément, comme un champ de saisie. Les rôles tertiaires peuvent également aider à indiquer quand le contenu change ou doit se démarquer, par exemple lorsqu'un objectif est atteint.
Tertiaire
- Tertiaire
- On-Tertiary
Le rôle "Tertiaire" est utilisé pour attirer l'attention sur les éléments clés. Les rôles tertiaires sont particulièrement efficaces pour les composants qui doivent se démarquer, comme les badges, les autocollants ou les éléments d'action spéciaux.
Tertiary-Dim
- Tertiary-Dim
- Tertiaire
Utilisez le rôle "Tertiary Dim" pour les boutons ou les actions liés aux actions tertiaires, mais qui ne nécessitent pas une attention immédiate.
Tertiary-Container
- Tertiary-Container
- On-Tertiary-Container
Appliquez Tertiary-Container pour les arrière-plans qui regroupent du contenu tertiaire, comme des collections de badges ou d'autocollants. Il met en avant les éléments tertiaires tout en maintenant l'équilibre et la structure dans l'UI.
Rôles sémantiques
La couleur rouge (erreur) est utilisée pour indiquer les problèmes critiques tels que les erreurs, les suppressions et tout ce qui concerne les urgences. Il est conçu pour attirer immédiatement l'attention sur les problèmes ou les avertissements, afin que les utilisateurs puissent rapidement identifier les domaines qui nécessitent une action corrective. Le ton de la couleur rouge d'erreur doit maintenir un contraste suffisant avec les arrière-plans pour répondre aux normes d'accessibilité, en veillant à ce qu'il soit clairement visible et se distingue des autres couleurs d'état, comme les avertissements ou les messages de réussite.
Error
- Erreur
- On-Error
Un rouge sémantique, mais légèrement teinté, qui indique les actions de suppression, de fermeture ou d'annulation, comme le balayage pour afficher. Ajoutée en tant qu'alternative de conteneur légèrement moins alarmante et urgente que la couleur d'erreur atténuée.
Error-Dim
- Error-Dim
- On-Error
Un rouge sémantique, mais légèrement teinté, qui indique les erreurs de priorité élevée ou les actions d'urgence, telles que les alertes de sécurité, les superpositions de boîte de dialogue ayant échoué ou les boutons d'arrêt.
Error-Container
- Error-Container
- On-Error-Container
Couleur de conteneur moins visible, pour les composants utilisant l'état d'erreur. Il peut également indiquer un état d'erreur actif qui semble moins interactif qu'un état rempli, comme un bouton ou une carte de partage d'urgence actifs, ou dans une boîte de dialogue de superposition en cas d'échec.
Conteneurs de surface et élévation
Les conteneurs de surface sont essentiels pour définir la profondeur et l'élévation dans l'UI. Ils fournissent une structure et une hiérarchie grâce à la couleur, ce qui permet de différencier les composants en fonction de leur importance et de leur interaction.
Surface-Container-Low
- Surface-Container-Low
- On-Surface
- Sur variante de surface
Idéal pour un conteneur développé qui doit se trouver sous Surface-Container, comme une carte développée dans la notification. Peut également être utilisé pour les cartes non interactives, où le contenu bénéficie toujours de la mise en forme.
Surface-Container
- Surface-Container
- On-Surface
- Sur variante de surface
Couleur de conteneur par défaut pour la plupart des éléments. Il offre une élévation neutre et modérée, ce qui le rend adapté aux composants d'interface utilisateur généraux.
Surface-Container-High
- Surface-Container-High
- On-Surface
- Sur variante de surface
Idéal pour les composants très importants qui doivent se trouver au-dessus ou en combinaison avec Surface-Container. Cette couleur permet de mettre en évidence et de hiérarchiser les zones critiques de l'UI.