Le système de couleurs Wear Material 3 Expressive utilise trois couches d'accentuation (primaire, secondaire et tertiaire) pour les principaux composants et deux couches de surface neutres. Chaque rôle propose une gamme de valeurs avec un contraste cohérent, ce qui permet d'obtenir des combinaisons de couleurs expressives, mais accessibles, pour une expérience unifiée quel que soit le thème.
Que sont les rôles de couleur ?
Les rôles de couleur sont comme les "chiffres" d'un canevas de coloriage par numéros. Ils constituent le tissu conjonctif entre les éléments de l'interface utilisateur et la couleur à utiliser à chaque endroit.
- Les rôles de couleur sont mappés aux composants Material:vous utiliserez ces rôles de couleur que vous utilisiez le jeu de couleurs de référence statique ou des couleurs dynamiques. Si votre produit contient des composants personnalisés, ils doivent être correctement mappés à cet ensemble de rôles de couleur.
- Les rôles de couleur favorisent l'accessibilité:le système de couleurs est basé sur des associations de couleurs plus accessibles. Ces paires de couleurs offrent un contraste de couleur 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 via des jetons. Un jeton de conception représente une petite décision de conception réutilisable 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.
- Primary, Secondary, Tertiary (Primaire, Secondaire, Tertiaire) : rôles de couleur d'accentuation utilisés pour mettre en avant ou en arrière-plan des éléments au premier plan.
- Conteneur:rôles utilisés comme couleur de remplissage pour les éléments de premier plan tels que les boutons. Vous ne devez pas les utiliser pour le texte ni les icônes.
- Activé:les rôles commençant par ce terme indiquent une couleur pour le texte ou les icônes en plus de la couleur parente associée. Par exemple, "on-primary" est utilisé pour le texte et les icônes sur la couleur de remplissage principale.
- Variante:les rôles se terminant par ce terme offrent une alternative moins accentuée à leur paire non variante. Par exemple, la variante de contour est une version moins accentuée de la couleur de contour.
Rôles principaux
Les rôles principaux sont utilisés pour les principaux composants de l'interface utilisateur, tels que les boutons en forme de biseau, les boutons visibles, les états actifs et les icônes des styles de boutons tonaux.
Principal
- Principale
- Sur principal
Utilisez le rôle principal pour les actions les plus importantes de l'interface utilisateur, comme les boutons principaux ou les incitations à l'action. Cette couleur doit ressortir et être immédiatement reconnaissable pour guider l'utilisateur vers les interactions clés.
Primary-Dim
- Primary-Dim
- Sur principal
Les rôles de masquage 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 ou l'interaction immédiate 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 boîtes de dialogue pour mettre en évidence des sections ou des états sélectionnés. Il permet d'attirer l'attention sur du contenu important ou des activités en cours dans l'interface utilisateur.
Rôles secondaires
Les rôles secondaires sont utilisés pour les principaux composants de l'interface utilisateur, qui ne sont pas aussi importants que le rôle principal, mais qui doivent tout de même se démarquer. Les couleurs primaires et secondaires peuvent être utilisées ensemble dans les mises en page pour créer une différenciation et une mise au point.
Secondaire
- Secondaire
- Sur secondaire
Utilisez le rôle secondaire pour prendre en charge les actions dans les zones à interface utilisateur dense, telles que les boutons secondaires ou les actions complémentaires. Il maintient la visibilité sans masquer les éléments principaux dans les mises en page complexes.
Secondary-Dim
- Secondary-Dim
- Secondaire
Le rôle "Secondary-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, tout en gardant l'interface utilisateur propre et en aidant les utilisateurs à naviguer.
Secondary-Container
- Secondary-Container
- On-Secondary-Container
Appliquez Secondary-Container pour organiser les éléments secondaires dans des mises en page denses. Il crée une structure et une séparation, ce qui garantit que le contenu secondaire est distinctif, mais pas dominant.
Rôles tertiaires
Les rôles tertiaires sont utilisés pour accentuer le contraste des couleurs principales 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
- Enseignement supérieur
Le rôle tertiaire permet d'attirer l'attention sur des éléments clés. Les rôles tertiaires sont particulièrement efficaces pour les composants qui doivent se démarquer, tels que les badges, les autocollants ou les éléments d'action spéciaux.
Tertiary-Dim
- Tertiary-Dim
- Tertiaire
Utilisez le rôle "Atténuation tertiaire" pour les boutons ou les actions associés à des actions tertiaires, mais qui ne nécessitent pas de mise au point immédiate.
Conteneur tertiaire
- Tertiary-Container
- On-Tertiary-Container
Appliquez le conteneur tertiaire aux arrière-plans qui regroupent du contenu secondaire, comme des collections de badges ou d'autocollants. Elle met l'accent sur les éléments tertiaires tout en maintenant l'équilibre et la structure de l'interface utilisateur.
Rôles sémantiques
Error-Red est utilisé 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 identifier rapidement les éléments nécessitant une action corrective. Le ton du rouge d'erreur doit être suffisamment contrasté par rapport aux arrière-plans pour répondre aux normes d'accessibilité. Il doit être clairement visible et se distinguer des autres couleurs d'état, comme les avertissements ou les messages de réussite.
Error
- Erreur
- On-Error
Rouge sémantique, mais légèrement teinté par le thème, qui indique les actions de suppression, de fermeture ou d'ignorement, telles que le balayage pour afficher. Ajouté en tant qu'alternative de conteneur légèrement moins alarmante et urgente que la couleur d'erreur-atténuation.
Error-Dim
- Error-Dim
- On-Error
Rouge sémantique, mais légèrement teinté par le thème, qui indique des erreurs de priorité élevée ou des actions d'urgence, telles que des alertes de sécurité, des superpositions de boîtes de dialogue ayant échoué ou des boutons d'arrêt.
Error-Container
- Error-Container
- On-Error-Container
Couleur de conteneur moins visible, pour les composants utilisant l'état d'erreur. Peut également indiquer un état d'erreur actif qui semble moins interactif qu'un état rempli, comme un bouton ou une fiche de partage d'urgence actif, ou dans une boîte de dialogue de superposition ayant échoué.
Conteneurs de surface et élévation
Les conteneurs de surface sont essentiels pour définir la profondeur et l'élévation dans l'interface utilisateur. Ils fournissent une structure et une hiérarchie par le biais de 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
- Sur la surface
- On-Surface-Variant
Idéal pour un conteneur développé qui doit se trouver sous Surface-Container, comme une fiche développée dans la notification. Peut également être utilisé pour les cartes non interactives, où le contenu bénéficie toujours de la structuration.
Surface-Container
- Surface-Container
- Sur la surface
- On-Surface-Variant
Couleur du 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
- Sur la surface
- On-Surface-Variant
Idéal pour les composants à forte accentuation qui doivent se trouver au-dessus ou en combinaison avec Surface-Container. Cette couleur permet de mettre en avant et de hiérarchiser les zones critiques de l'interface utilisateur.