Icônes (concepts de base de la conception)

Notes

Ce guide de conception a été créé pour Windows 7 et n’a pas été mis à jour pour les versions plus récentes de Windows. La plupart des conseils s’appliquent toujours en principe, mais la présentation et les exemples ne reflètent pas nos recommandations actuelles en matière de conception.

Les icônes sont des représentations picturales d’objets, importantes non seulement pour des raisons esthétiques dans le cadre de l’identité visuelle d’un programme, mais aussi pour des raisons utilitaires comme raccourcis pour véhiculer un sens que les utilisateurs perçoivent presque instantanément. Windows Vista introduit un nouveau style d’iconographie qui apporte un niveau de détail et de sophistication plus élevé à Windows.

Note: Les instructions relatives aux icônes standard sont présentées dans un article distinct.

Principes de conception

Aero est le nom de l’expérience utilisateur de Windows Vista, qui représente à la fois les valeurs incorporées dans la conception de l’esthétique, ainsi que la vision derrière l’interface utilisateur (IU). Aero signifie : authentique, énergétique, réfléchissant et ouvert. Aero vise à établir un design à la fois professionnel et beau. L’esthétique Aero crée une expérience de haute qualité et élégante qui facilite la productivité des utilisateurs et même favorise une réponse émotionnelle.

Les icônes Windows Vista diffèrent des icônes de style Windows XP des manières suivantes :

• Le style est plus réaliste qu’illustratif, mais pas tout à fait photoréaliste. Les icônes sont des images symboliques qu’elles devraient paraître mieux que photoréalistes!
• Les icônes ont une taille maximale de 256 x 256 pixels, ce qui les rend adaptées aux écrans à ppp élevés (points par pouce). Ces icônes haute résolution permettent une qualité visuelle élevée dans les affichages de liste avec de grandes icônes.
• Dans la mesure du possible, les icônes de document fixes sont remplacées par des miniatures du contenu, ce qui facilite l’identification et la recherche des documents.
• Les icônes de barre d’outils ont moins de détails et aucune perspective, afin d’optimiser les tailles et les caractéristiques visuelles plus petites.

Icônes bien conçues :

• Améliorez la communication visuelle de votre programme.
• Impacter fortement l’impression globale des utilisateurs de la conception visuelle de votre programme, et l’appréciation de son ajustement et de sa finition.
• Améliorez la convivialité en facilitant l’identification, l’apprentissage et la recherche des programmes, des objets et des actions.

Les images suivantes illustrent ce qui rend le style aero de l’iconographie dans Windows Vista différent de celui utilisé dans Windows XP.

Les icônes Windows Vista (verrou et touche à gauche) sont authentiques, nettes et détaillées. Elles sont rendues plutôt que dessinées, mais ne sont pas complètement photoréalistes.

Les icônes Windows Vista (les deux sur la gauche) sont professionnelles et belles, avec une attention aux détails qui améliorent la qualité de production des icônes.

Ces icônes Windows Vista affichent l’équilibre optique et la précision perçue en perspective et en détails. Cela leur permet de regarder grand ou petit, de près ou de loin. De plus, ce style d’iconographie fonctionne pour les écrans haute résolution.

Ces exemples montrent différents types d’icônes, notamment un objet tridimensionnel en perspective, une icône (plate) avant et une icône de barre d’outils.

Consignes

Perspective

• Les icônes dans Windows Vista sont soit en trois dimensions et affichées en perspective sous forme d’objets pleins, soit en deux dimensions affichées directement. Utilisez des icônes plates pour les fichiers et les objets qui sont réellement plats, comme des documents ou des morceaux de papier.

  

  Icônes 3D et plates typiques.

• Les objets tridimensionnels sont représentés en perspective sous forme d’objets solides, vus à partir d’une vue d’oiseau basse avec deux points de disparaître.

  

  Cet exemple montre des points de perspective et de disparaître typiques des icônes 3D.

• Dans les tailles plus petites, la même icône peut changer de perspective à directe. Avec une taille de 16 x 16 pixels et une taille inférieure, les icônes de rendu sont affichées directement (face avant). Pour les icônes plus grandes, utilisez la perspective.

  • Exception: Les icônes de barre d’outils sont toujours orientées vers l’avant, même dans des tailles plus grandes.

  

  Cet exemple montre comment la même icône est traitée différemment, en fonction de sa taille.

Source de lumière

• La source de lumière pour les objets dans la grille de perspective est au-dessus, légèrement devant et légèrement à gauche de l’objet.
• La source de lumière projette des ombres légèrement à l’arrière et à droite de la base de l’objet.
• Tous les rayons lumineux sont parallèles et frappent l’objet le long du même angle (comme le soleil). L’objectif est d’avoir une apparence d’éclairage uniforme sur toutes les icônes et les effets à la une. Les rayons lumineux parallèles produisent des ombres qui ont toutes la même longueur et la même densité, fournissant une unité supplémentaire entre plusieurs icônes.

Ombres

Généralités

• Utilisez des ombres pour soulever visuellement les objets à partir de l’arrière-plan et pour faire apparaître les objets 3D à la terre, au lieu de flotter maladroitement dans l’espace.

• Utilisez une plage d’opacité de 30 à 50 % pour les ombres. Parfois, un niveau d’ombre différent doit être utilisé, en fonction de la forme ou de la couleur d’une icône.

• Plumer ou raccourcir l’ombre si nécessaire, pour l’empêcher d’être rognée par la taille de la zone d’icône.

• N’utilisez pas d’ombres dans les icônes de tailles 24/24 ou plus petites.

  

  Ombres d’icônes typiques.

Icônes plates

• Les icônes plates sont généralement utilisées pour les icônes de fichier et les objets réels plats, tels qu’un document ou un morceau de papier.
• L’éclairage à icône plate provient du coin supérieur gauche à 130 degrés.
• Les icônes plus petites (par exemple, 16 x 16 et 32 x 32) sont simplifiées pour des raisons de lisibilité. Toutefois, si elles contiennent une réflexion dans l’icône (souvent simplifiée), elles peuvent avoir une ombre portée serrée. L’ombre portée varie en opacité de 30 à 50 %.
• Les effets de couche peuvent être utilisés pour les icônes plates, mais doivent être comparés à d’autres icônes plates. Les ombres pour les objets varient quelque peu, en fonction de ce qui semble le mieux et qui est le plus cohérent dans la taille définie et avec les autres icônes dans Windows Vista. À certaines occasions, il peut même être nécessaire de modifier les ombres. Cela sera particulièrement vrai lorsque des objets sont placés sur d’autres.
• Une plage subtile de couleurs peut être utilisée pour obtenir le résultat souhaité. Les ombres aident les objets à s’asseoir dans l’espace. La couleur a un impact sur le poids perçu de l’ombre et peut déformer l’image si elle est trop lourde.

la

L’option Ombre portée dans la boîte de dialogue Style de calque et une ombre typique pour une icône plate.

Plages d’ombres d’icônes plates de base

Caractéristique	Plage
Color	Noir
Mode Blend	Multiplier
Opacity	22-50 pour cent, selon la couleur de l’élément
Angle	120-130 (utiliser la lumière globale)
Distance	3 pour 256x256, allant jusqu’à 1 pour 32x32
Spread	0
Taille	7 pour 256x256, allant jusqu’à 2 pour 32x32

Icônes tridimensionnelles

• Créez des ombres pour les icônes 3D au cas par cas, avec un effort pour s’adapter à une plage de distance de cast et de plumement entièrement transparent. Créez les images dans une taille un peu plus petite que la taille d’icône globale requise pour laisser de l’espace pour une ombre portée (pour les tailles qui en nécessiteront une). Assurez-vous que l’ombre ne se termine pas brusquement au bord de l’icône.

Ces exemples permettent de illustrer les variations créées en fonction de la forme et de la position de l’objet lui-même. L’ombre doit parfois être marquée ou raccourcie pour éviter qu’elle ne soit rognée par la taille de la zone d’icône.

Couleur et saturation

• Les couleurs sont généralement moins saturées que Windows XP.

• Utilisez des dégradés pour créer une image d’apparence plus réaliste.

• Bien qu’il n’existe aucune palette de couleurs spécifique pour les icônes standard, n’oubliez pas qu’elles doivent bien fonctionner ensemble dans de nombreux contextes et thèmes. Préférer l’ensemble standard de couleurs ; ne recolorez pas les icônes standard, telles que les icônes d’avertissement, car cela perturbe la capacité des utilisateurs à interpréter le sens. Pour plus d’instructions, consultez Couleur.

• Les fichiers d’icônes nécessitent également des versions de palette 8 bits et 4 bits pour prendre en charge le paramètre par défaut dans un bureau à distance. Ces fichiers peuvent être créés via un processus par lots, mais ils doivent être examinés, car certains nécessiteront des retouches pour une meilleure lisibilité.

  

  Il n’existe aucune restriction stricte de palette de couleurs. Seule la saturation complète (en haut à droite) est évitée.

• Niveaux de bits : conception d’ICO pour 32 bits (alpha inclus) + 8 bits + 4 bits (déversé automatiquement les pixels les plus critiques). Seule une copie 32 bits de l’image de 256 x 256 pixels doit être incluse, et seule l’image de 256 x 256 pixels doit être compressée pour maintenir la taille du fichier à un niveau inférieur. Plusieurs outils d’icône offrent une compression pour Windows Vista.

• Niveaux de bits : barres d’outils 24 bits + alpha (masque 1 bits), 8 bits et 4 bits.

• Barres d’outils ou fichiers AVI : utilisez magenta (R255 G0 B255) comme couleur de transparence d’arrière-plan.

Exigences de taille

Généralités

• Portez une attention particulière aux icônes de haute visibilité, telles que les icônes d’application main, les icônes de fichier qui peuvent apparaître dans Windows Explorer et les icônes apparaissant dans le menu Démarrer ou sur le bureau.
  • Icônes d’application et éléments Panneau de configuration : l’ensemble complet comprend 16x16, 32x32, 48x48 et 256x256 (le code est mis à l’échelle entre 32 et 256). Le format de fichier .ico est requis. Pour le mode Classique, l’ensemble complet est 16x16, 24x24, 32x32, 48x48 et 64x64.
  • Options d’icône d’élément de liste : Utiliser des miniatures actives ou des icônes de fichier du type de fichier (par exemple, .doc) ; ensemble complet.
  • Icônes de barre d’outils : 16x16, 24x24, 32x32. Notez que les icônes de barre d’outils sont toujours plates, pas 3D, même à la taille 32x32.
  • Icônes de boîte de dialogue et d’Assistant : 32x32 et 48x48.
  • Superpositions: Code shell principal (par exemple, un raccourci) 10x10 (pour 16x16), 16x16 (pour 32x32), 24x24 (pour 48x48), 128x128 (pour 256x256). Notez que certains d’entre eux sont légèrement plus petits, mais sont proches de cette taille, en fonction de la forme et de l’équilibre optique.
  • Zone De lancement rapide : Les icônes descendent de 48 x 48 dans les superpositions dynamiques Alt+Tab, mais pour une version plus nette, ajoutez un fichier .ico 40x40.
  • Icônes de ballon : 32x32 et 40x40.
  • Tailles supplémentaires : Elles sont utiles pour créer d’autres fichiers (par exemple, annotations, bandes de barre d’outils, superpositions, ppp élevés et cas spéciaux) : 128x128, 96x96, 64x64, 40x40, 24x24, 22x22, 14x14, 10x10 et 8x8. Vous pouvez utiliser .ico, .png, .bmp ou d’autres formats de fichier, en fonction du code dans cette zone.

Pour les ppp élevés

• Windows Vista cible 96 ppp et 120 ppp.

Les tableaux suivants présentent des exemples de ratios de mise à l’échelle appliqués à deux tailles d’icônes courantes. Notez que toutes ces tailles ne doivent pas être incluses dans le fichier .ico. Le code va mettre à l’échelle les plus grands.

ppp	Taille d'icône	Facteur d’échelle
96	16x16	1.0 (100%)
120	20 x 20	1.25 (125%)
144	24 x 24	1.5 (150%)
192	32x32	2.0 (200%)

ppp	Taille d'icône	Facteur d’échelle
96	32x32	1.0 (100%)
120	40 x 40	1.25 (125%)
144	48 x 48	1.5 (150%)
192	64 x 64	2.0 (200%)

Tailles de fichier .ico (standard)

Tailles de fichier .ico (cas spéciaux)

Annotations et superpositions

• Les annotations sont situées dans le coin inférieur droit de l’icône et doivent remplir 25 % de la zone d’icône.
  • Exception : les icônes 16x16 prennent 10 x 10 annotations.
• N’utilisez pas plusieurs annotations sur une icône.
• Les superpositions sont situées dans le coin inférieur gauche de l’icône et doivent remplir 25 % de la zone d’icône.
  • Exception : les icônes 16x16 prennent 10 x 10 superpositions.

Niveau de détail

• La taille 16x16 d’un grand nombre de ces icônes est encore largement utilisée et donc importante.

• Les détails d’une icône de cette taille doivent afficher clairement le point clé de l’icône.

• À mesure qu’une icône devient plus petite, la transparence et certains détails spéciaux trouvés dans des tailles plus grandes doivent être sacrifiés afin de simplifier et de faire passer le point.

• Les attributs et les couleurs doivent être exagérés et utilisés pour mettre en évidence les formes clés.

  

  À 16x16, l’icône de l’appareil audio portable peut facilement être confondue avec un téléphone portable, de sorte que l’écouteur est un détail visuel clé à afficher.

• Le simple scale-down à partir de la taille 256x256 ne fonctionne pas.

• Toutes les tailles ont besoin d’un niveau de détail approprié ; plus l’icône est petite, plus vous devez exagérer les détails de définition.

  

  

Développement d’icônes

Conception et production d’icônes

• Engagez un concepteur graphique expérimenté. Pour obtenir de superbes graphiques, images et icônes, travaillez avec des experts. Une expérience dans les illustrations utilisant des programmes vectoriels ou 3D est recommandée.
• Prévoyez d’effectuer des séries d’itérations, des croquis de concept initiaux aux maquettes en contexte, en passant par la révision finale de la production et l’ajustement et la finition des icônes dans le produit de travail.
• La création d’icônes pensez à l’avance peut être coûteuse. Rassemblez tous les détails et exigences existants, par exemple : l’ensemble complet d’icônes nécessaires ; la fonction et la signification main pour chacun d’eux ; les familles ou les clusters dans l’ensemble que vous souhaitez afficher ; les exigences de marque , les noms de fichiers exacts , les formats d’image utilisés dans votre code et les exigences de taille. Assurez-vous d’avance que vous pouvez tirer le meilleur parti de votre temps avec le concepteur.
• N’oubliez pas que le concepteur peut ne pas être familiarisé avec votre produit. Fournissez donc des informations fonctionnelles, des captures d’écran et des sections de spécifications, le cas échéant.
• Planifiez les examens géopolitiques et juridiques appropriés.
• Mappez un calendrier et communiquez régulièrement.

De l’ébauche de concept au produit final

• Créer des croquis de concept.
• Essayez le concept dans différentes tailles.
• Effectuez le rendu en 3D si nécessaire.
• Testez les tailles sur différentes couleurs d’arrière-plan.
• Évaluer les icônes dans le contexte de l’interface utilisateur réelle.
• Produire le fichier .ico final ou d’autres formats de ressources graphiques.

outils

• Crayon et papier : Idées de concept initiales, listées et esquissées.
• 3D Studio Max : Afficher les objets 3D en perspective.
• Adobe Photoshop : Esquisser et itérer, simuler en contexte et finaliser les détails.
• Adobe Illustrator/ Macromedia à main levée : Esquisser et itérer, finaliser les détails.
• Gamani Gif Movie Gear: Produire un fichier .ico (avec compression si nécessaire).
• Atelier d’icônes d’axie : Produire un fichier .ico (avec compression si nécessaire).
• Microsoft Visual Studio ne prend pas en charge les icônes Windows Vista (il n’y a pas de prise en charge du canal alpha ou de plus de 256 couleurs).

Production

Conseil

Procédez comme suit pour créer un fichier .ico unique qui contient plusieurs tailles d’image et profondeurs de couleurs.

Étape 1 : Conceptualiser

• Utilisez des concepts établis dans la mesure du possible pour garantir la cohérence des significations de l’icône et sa pertinence par rapport à d’autres utilisations.
• Réfléchissez à la façon dont l’icône apparaîtra dans le contexte de l’interface utilisateur et comment elle peut fonctionner dans le cadre d’un ensemble d’icônes.
• Si vous révisez une icône existante, déterminez si la complexité peut être réduite.
• Tenez compte de l’impact culturel de vos graphiques. Évitez d’utiliser des lettres, des mots, des mains ou des visages dans les icônes. Représenter des représentations de personnes ou d’utilisateurs de manière aussi générique que possible, si nécessaire.
• Si vous combinez plusieurs objets en une seule image dans une icône, réfléchissez à la façon dont l’image sera mise à l’échelle vers des tailles plus petites. N’utilisez pas plus de trois objets dans une icône (deux sont préférés). Pour la taille 16x16, envisagez de supprimer des objets ou de simplifier l’image pour améliorer la reconnaissance.
• N’utilisez pas l’indicateur Windows dans les icônes.

Étape 2 : Illustrer

• Pour illustrer les icônes de style Windows Aero, utilisez un outil vectoriel tel que Macromedia Freehand ou Adobe Illustrator. Utilisez les caractéristiques de palette et de style décrites plus haut dans cet article.
• Illustrer l’image à l’aide de main levée ou d’Illustrator. Copiez et collez les images vectorielles dans Adobe Photoshop.
• Créez et utilisez une couche de modèle dans Photoshop pour vous assurer que le travail est effectué dans des zones carrées des tailles réglementées.
• Créez les images dans une taille un peu plus petite que la taille globale de l’icône requise pour laisser de l’espace pour une ombre portée (pour les tailles qui en nécessitent une).
• Placez les images au bas des carrés, afin que toutes les icônes d’un répertoire soient placées de manière cohérente. Évitez de couper les ombres.
• Si vous ajoutez un autre objet à une image ou une série, conservez l’objet main dans une position fixe et placez des images plates de plus petite taille dans une position fixe, par exemple en bas à gauche ou en haut à droite selon le cas.

Étape 3 : Créer les images 24 bits

• Une fois que vous avez collé des tailles dans Photoshop, case activée la lisibilité des images, en particulier aux tailles 16x16 et plus petites. Le pixel-poking à l’aide de pourcentages de couleurs peut être nécessaire. Une réduction de la transparence peut également être nécessaire. Il est courant d’exagérer des aspects à des tailles plus petites et d’éliminer des aspects également, afin de se concentrer sur le point clé.
• Les icônes 8 bits seront affichées dans n’importe quel mode de couleur inférieur à 32 bits et n’auront pas le canal alpha 8 bits. Elles peuvent donc avoir besoin d’avoir leurs bords ou plus nettoyés, car il n’y a pas d’anticrénelage (les bords peuvent être déchiquetés et l’image peut être difficile à lire).
• Dans Photoshop, dupliquez la couche d’image 24 bits et renommez la couche en images 4 bits. Indexer des images 4 bits dans la palette de couleurs Windows 16.
• Nettoyez les images en utilisant uniquement les couleurs de la palette de 16 couleurs. Les contours réalisés à partir de versions plus sombres ou plus claires des couleurs de l’objet sont généralement préférables au gris ou au noir.
• Si vous travaillez sur une bitmap, assurez-vous que la couleur d’arrière-plan n’est pas utilisée dans l’image elle-même, car cette couleur sera la couleur transparente. Magenta (R255 G0 B255) est souvent utilisé comme couleur de transparence d’arrière-plan.

Étape 4 : Créer les images 8 bits et 4 bits

• Maintenant que les images 24 bits sont prêtes à être transformées en icônes 32 bits, les versions 8 bits doivent être créées.
• C’est le moment idéal pour tester des captures d’écran contextuelles. C’est incroyable ce qui peut être découvert en affichant d’autres icônes ou une famille d’icônes en contexte. Cette étape peut faire gagner du temps et de l’argent. Il est préférable d’intercepter les problèmes avant que les fichiers ne passent en production et soient transférés.
• Ajoutez l’ombre portée à vos images dans les tailles qui en nécessitent.
• Fusionnez l’ombre portée et les images 24 bits.
• Créez un fichier Photoshop pour chaque taille. Copiez et collez l’image appropriée. Enregistrez chaque fichier en tant que fichier .psd.
• Ne fusionnez pas la couche image avec la couche d’arrière-plan. Il est utile d’inclure la taille et la profondeur de couleur dans le nom du fichier pendant qu’il fonctionne, mais le fichier peut finalement avoir besoin d’être renommé.

Étape 5 : Créer le fichier .ico

• Choisissez l’application qui répond le mieux aux besoins et aux compétences des artistes. N’oubliez pas que les icônes à utiliser dans un produit d’expédition doivent être créées dans un outil qui a été acheté ou concédé sous licence. Cela signifie que les versions d’évaluation ne peuvent pas être utilisées.
• Les deux produits répertoriés ci-dessous ont été utilisés par les concepteurs qui ont produit des icônes pour Windows Vista, et chacun offre la possibilité d’exporter vers Adobe Photoshop CS.
  • Gamani Gif Movie Gear: Produire un fichier .ico
  • Atelier d’icônesAxiis : Produire un fichier .ico
• Visual Studio ne prend pas en charge les icônes Windows Vista (il n’y a pas de prise en charge du canal alpha ou de plus de 256 couleurs). Son utilisation n’est donc pas recommandée.
• Les fichiers d’icône (format .ico) doivent contenir les versions 4 et 8 bits, ainsi que les versions 24 bits + alpha.
• Enregistrez les fichiers en tant que « Icône Windows (.ico) », quel que soit le programme de création d’icônes que vous choisissez d’utiliser.
• Certaines ressources iconographiques peuvent en fait être des bandes bitmap, qui nécessitent également un canal alpha (par exemple, pour les barres d’outils) ou .png fichiers enregistrés avec transparence. Tous ne sont pas nécessairement au format .ico ; case activée du format pris en charge dans le code.

Étape 6 : Évaluer

• Regardez toutes les tailles.
• Examinez la famille ensemble pour évaluer la ressemblance familiale, l’équilibre optique et la distinction.
• Examinez en contexte pour évaluer les pondérations relatives et la visibilité (assurez-vous qu’il ne domine pas).
• Considérez les cas qui peuvent ne pas être utilisés maintenant, mais qui pourraient l’être dans un avenir proche. Cette icône pourrait-elle jamais être annotée ou avoir une superposition ?
• Regardez dans le code.

Icônes dans le contexte des affichages de liste, des barres d’outils et des arborescences

Affichages de liste

• Pour Windows Vista, utilisez des miniatures pour les fichiers contenant du contenu visuellement distinct à petite échelle, afin que les utilisateurs puissent reconnaître directement le fichier qu’ils recherchent. (Utilisez l’interface de programmation d’application Windows Miniatureing pour cela.)

  

• Les superpositions d’icônes d’application (non affichées ici) sur les miniatures facilitent l’association avec l’application pour le type de fichier, en plus d’afficher l’aperçu du fichier.

Note: Pour les fichiers sans contenu visuellement distinct, n’utilisez pas de miniatures. Utilisez plutôt des icônes de fichier symboliques traditionnelles montrant la représentation d’objet et l’application ou le type associé.

Barres d'outils

• Les icônes qui apparaissent dans une barre d’outils doivent avoir un équilibre optique en taille, couleur et complexité.
• Testez les icônes potentielles dans une capture d’écran contextuelle pour éviter toute dominance ou déséquilibres indésirables.
• Les tests dans les captures d’écran permettent d’éviter facilement des itérations coûteuses dans le code.
• Passez également en revue les icônes dans le code. Le mouvement et d’autres facteurs peuvent avoir un impact sur la réussite d’une icône ; dans certains cas, d’autres itérations peuvent être nécessaires.

Dans l’exemple ci-dessus, l’équilibre optique n’a pas encore été atteint.

Essayez les itérations dans le contexte.

Arborescences

• L’équilibre optique est nécessaire pour préserver la hiérarchie dans un contrôle d’arborescence.
• Par conséquent, les icônes généralement utilisées dans ce contexte doivent y être évaluées. Parfois, une icône 16x16 particulière doit être réduite parce que sa forme a une domination optique sur d’autres.
• La compensation des déséquilibres optiques est un élément important de la production d’icônes de qualité supérieure.