De nombreuses applications Web ont commencé à utiliser des icônes en échelle grise (noire), par exemple Github, le nouveau Google Analytics, etc. Même des applications comme Firefox 4, Chrome , IE9, iTunes, Mac OS, ont abandonné les icônes colorées.
Quel est le raisonnement derrière le passage des icônes colorées aux icônes en niveaux de gris / monochromes?
Exemples:
- Icône des paramètres Google Analytics
- Github (regardez les boutons dicônes en haut à droite)
- iTunes 10 est passé aux icônes monochromes
Mise à jour: il semble quApple lait introduit pour la première fois dans Aqua sous Conception dicônes pour les commandes de la barre doutils de style rectangulaire :
Les icônes qui semblent bien dans les commandes de la barre doutils de style rectangulaire sont des images noires et rationalisées qui transmettent une signification à travers le contour et le contour, et non les détails internes. Étant donné que vos icônes doivent faire écho à lapparence des images Mac OS X existantes à lintérieur des commandes de la barre doutils de style rectangulaire, utilisez les images modèles fournies par le système comme guide. Lorsque vous concevez une icône pour un contrôle de barre doutils de style rectangulaire, gardez à lesprit les points suivants:
- Rendre le contour net et clair
- Utiliser une perspective directe
- Utilisez le noir complet et quelques nuances de gris pour suggérer la dimensionnalité
- Utilisez lanti-aliasing
- Assurez-vous que limage est visuellement centrée dans le contrôle (notez que visuellement centré peut ne pas être le même que centré mathématiquement)
Les icônes des commandes de barre doutils rectangulaire de taille normale ne doivent pas mesurer plus de 19 x 19 pixels.
Commentaires
- Pouvez-vous donner une image de ce dont vous parlez? Je viens de regarder Google Analytics et je ne vois ' rien de ce que vous dites.
- Désolé pour cela. Mise à jour du message avec deux liens! En voici quelques autres: Firefox 4 mozilla.com/en-US/firefox/features Chrome (regardez le back / forward / home / favorites) google.com/chrome Itunes apple.com/itunes/what-is/player.html
- Bonne question et merci pour la mise à jour. +1, et un autre +1 vous coupez et collez la mise à jour dans une nouvelle réponse. 🙂
Réponse
Je crois que cette tendance sest accompagnée de lidée de séparation du contenu et de la présentation. Les icônes font partie de chrome / ui et ne doivent pas être trop visibles pour ne pas entrer en concurrence avec le contenu lui-même.
Une autre raison peut être quil est plus facile dattirer lattention sur un élément lorsquil sagit du un seul avec une icône colorée, et tout le reste est en niveaux de gris. Par exemple, une icône verte de cadenas en combinaison avec des icônes de menu en niveaux de gris. Faire apparaître quelque chose dans un groupe déléments colorés demande beaucoup plus de compétences et de temps que nécessaire pensez à bien plus que la couleur (qui ne joue plus le rôle principal pour attirer l’attention de l’utilisateur).
Commentaires
- Exactement ce que je allait dire. Google Chrome est un exemple parfait en ce sens quil a été conçu pour ne pas gêner. La barre supérieure, les boutons, les icônes sont tous monochromes et bien condensés. Ainsi, l’interface utilisateur de Chrome ne ' ne vole pas trop d’attention à la page Web que vous ' essayez de consulter. Et jai ' remarqué que Microsoft a une philosophie similaire avec IE9.
- La partie qui me rend furieux (étant donné que Microsoft ' blogs.msdn.com/b/visualstudio/archive/2012/02/23/… ) est que cela ne fonctionne que pour certains types dinterfaces utilisateur, en particulier celles qui nont ' quune centaine de boutons, arborescences et panneaux sur toute linterface. Quand les concepteurs dinterface utilisateur commenceront-ils à réaliser quil ne sagit que dune métaphore de conception très spécifique et non dune mode cool? Les icônes colorées fonctionnent lorsquil y a beaucoup dicônes visibles.
Réponse
- Elles ont souvent lair bien , quelle que soit la mise en page, vous pouvez donc les conserver si la mise en page change.
- Vous pouvez combiner des icônes de différentes sources (The Noun Project, polices de symboles, icônes existantes utilisées sur des plates-formes comme liPhone, etc.) , puisquils se ressemblent pour la plupart.
- Cest facile de faire les vôtres.
Personnellement, je pense que cest généralement une mauvaise tendance. Nos cerveaux traitent la couleur de manière préventive (avant même que nous la voyions consciemment); nous « sommes vraiment doués pour des tâches telles que » trouver licône rouge dans une liste dicônes colorées. « Nous » ne sommes pas si doués pour une tâche comme « trouver licône qui ressemble à un petit camion dans une liste dicônes noires ». Rendre toutes les icônes de la même couleur rend votre produit plus difficile à utiliser.
Il y a bien sûr des exceptions.