Créez des jeux de couleurs plus accessibles et personnalisés qui communiquent la hiérarchie, l'état et la marque de votre produit. Lorsque vous concevez des accessoires connectés, la couleur joue un rôle crucial pour améliorer la lisibilité, la facilité d'utilisation, l'attrait visuel et l'expression, en particulier sur les petits écrans.
Les principes suivants expliquent comment utiliser les couleurs dans les différents thèmes.
Créer à partir du noir
Les montres sont conçues avec un arrière-plan noir, au lieu de l'arrière-plan teinté utilisé par les téléphones. Si les thèmes sombres sont destinés aux environnements faiblement éclairés et les thèmes clairs à la lumière du jour, les interfaces utilisateur des montres doivent fonctionner de manière fluide, de jour comme de nuit. Par conséquent, les jetons de couleur des montres doivent être adaptés spécifiquement.
Nouveaux rôles de couleur
Le système de couleurs Material 3 conserve la structure de trois couleurs d'accentuation et de deux couleurs de surface neutres, mais introduit des couleurs de conteneur dans les rôles d'accentuation. Ces nouveaux rôles offrent un plus grand potentiel d'expression sans perturber la hiérarchie visuelle, en fournissant essentiellement des variations de couleur de surface avec une chromie accrue. Les rôles de conteneur sont particulièrement utiles pour mettre en évidence des états, tels que des boutons d'activation/de désactivation, ou pour fournir un style complémentaire lorsque l'accentuation principale est déjà utilisée.
Sens sémantique
Dans les interfaces utilisateur des montres, les couleurs doivent communiquer une signification claire et intuitive. Par exemple, le rouge indique les erreurs et le vert signale la réussite, ce qui aide les utilisateurs à comprendre rapidement les actions ou les états sans avoir besoin d'explications supplémentaires. Cet usage sémantique de la couleur aide les utilisateurs à naviguer dans votre UI et à agir en toute confiance.
Accessibilité des couleurs (respect du contraste)
Dans les interfaces utilisateur des montres, les couleurs doivent communiquer une signification claire et intuitive. Par exemple, le rouge indique les erreurs et le vert signale la réussite, ce qui permet aux utilisateurs de comprendre rapidement les actions ou les états sans avoir besoin d'explications supplémentaires. Cet usage sémantique de la couleur aide les utilisateurs à naviguer dans votre UI et à agir en toute confiance.
Nouveautés
Des modifications importantes ont été apportées au système de conception visuelle et à la façon dont nous mettons en valeur l'expression à travers les mises à jour de nos bases de style, de nos composants et de nos bibliothèques de conception de cartes.
Le système de couleurs Expressive de Material 3 inclut les fonctionnalités suivantes:
- Ensemble intégré de relations de couleurs accessibles
- Plus de 28 rôles de couleur mappés aux composants Material
- Couleurs du thème sombre intégrées pour la création à partir du noir
- Amélioration des valeurs de couleur désactivées
- Autres couleurs d'erreur
- Couleur de référence statique avec des couleurs par défaut attribuées à chaque rôle de couleur
- Fonctionnalités de couleurs dynamiques, y compris le système/cadran et les thèmes de couleurs basés sur des images
Ressources
Pour en savoir plus, consultez les ressources suivantes.
Consignes relatives aux couleurs Material Design
Découvrez les dernières bonnes pratiques concernant les jeux de couleurs avec Material 3 Expressive.
