Système de couleurs Système de conception

Utilisez des couleurs qui ont un rôle clair et conservent une signification dans chaque interface.

8 points de contrôle · 2 groupes de contenu

Contenu de la checklist

Progression de la vérification

Structure et signification

Comparer les informations et la présentation dans le contexte d'utilisation.

Déterminer la palette de couleurs du fond de teintDéfinissez des niveaux de couleurs partagés avec des noms et des valeurs gérés.Les composants doivent utiliser des couleurs en fonction de leur rôle au lieu de choisir directement une teinte.Exemple La variable « texte d'erreur » est utilisée pour les erreurs de formulaire et les avertissements d'échec de soumission.Associer la couleur au rôleSéparez la couleur d’arrière-plan, le texte, la bordure, l’action et la réponse.Les noms de couleurs par rôle aident à changer l'interface en un seul endroit ; Ne laissez pas chaque élément choisir sa propre teinte de base.Il y a suffisamment de couleurs pour le statutVérifiez par défaut, survolez, cliquez, concentrez-vous, sélectionné et désactivé.Unifier la couleur de la réponseConservez la même signification pour les réussites, les avertissements, les erreurs et les informations dans l’ensemble du produit.Essayez la même condition sur chaque arrière-plan utilisé à la fois clair et foncé ; Les couleurs d’erreur faciles à lire sur un fond peuvent ne pas être utilisables sur un autre fond.

Interaction et convivialité

Essayez l'opération, modifiez le statut et continuez à travailler.

Mesurer les paires de couleurs utiliséesComparez le texte, les icônes et les commandes avec l'arrière-plan réel, et pas seulement avec la palette de couleurs.Enregistrez les paires de texte et d'arrière-plan autorisées afin que les développeurs n'aient pas à deviner quelles couleurs vont ensemble.Tests de lumière et d'obscurité indépendammentDéfinissez des valeurs individuelles pour chaque interface et vérifiez tous les états.Testez chaque paire de couleurs après avoir changé de skin au lieu de simplement passer du clair au foncé ; Les reflets et les bordures ont besoin de leurs propres rôles.Maintient l'identification intacte et lisibleUtiliser les couleurs de la marque aux endroits appropriés ; Ajustez la teinte lorsque le contraste est insuffisant.Si la couleur d'identification est difficile à lire, gardez-la décorative et utilisez une couleur suffisamment claire pour un texte ou des opérations significatifs.Ne laissez pas la couleur porter seule son sensIncorporez des étiquettes, des formes ou des symboles lorsque vous devez différencier les données et les statuts.

La progression est enregistrée automatiquement dans ce navigateur.

GUIDE

Comment vérifier

Déterminer la palette de couleurs du fond de teint

Les composants doivent utiliser des couleurs en fonction de leur rôle au lieu de choisir directement une teinte.

EXEMPLES

Exemples d’utilisation

Déterminer la palette de couleurs du fond de teint

La variable « texte d'erreur » est utilisée pour les erreurs de formulaire et les avertissements d'échec de soumission.

Système de couleurs Système de conception

Structure et signification

Interaction et convivialité

Comment vérifier

Déterminer la palette de couleurs du fond de teint

Exemples d’utilisation

Déterminer la palette de couleurs du fond de teint

Trouver une checklist

Aucune checklist trouvée