Icônes pour les applications Windows

Les icônes fournissent un raccourci visuel pour une action, un concept ou un produit. En compressant la signification dans une image symbolique, les icônes peuvent traverser les barrières linguistiques et aider à conserver une ressource précieuse : espace d’écran.

Les icônes de qualité s’harmonisent efficacement avec la typographie et avec le reste du langage de conception. Ils ne mélangent pas les métaphores, et ils communiquent uniquement ce qui est nécessaire, aussi rapidement et simplement que possible.

Les icônes peuvent apparaître dans les applications et en dehors de celles-ci :

Icônes à l’intérieur de l’application

Dans votre application, vous utilisez des icônes pour représenter une action, comme copier du texte ou accéder à la page des paramètres.

Icônes en dehors de l’application

En dehors de votre application, Windows utilise une icône pour représenter l’application sur le menu Démarrer et dans la barre des tâches. Si l’utilisateur choisit d’épingler votre application au menu Démarrer, la vignette de démarrage de votre application peut présenter l’icône de l’application. L’icône de l’application apparaît dans la barre de titre et vous pouvez choisir de créer un écran de démarrage avec le logo de votre application.

Cet article décrit les icônes au sein de votre application. Pour en savoir plus sur les icônes en dehors de votre application (icônes d’application), consultez l’article Iconographie dans Windows .

Savoir quand utiliser des icônes

Les icônes permettent d'économiser de l’espace, mais quand faut-il les utiliser ?

Utilisez une icône pour les actions, telles que couper, copier, coller et enregistrer, ou pour les éléments d’un menu de navigation.

Utilisez une icône si une icône existe déjà pour le concept que vous souhaitez représenter. (Pour voir si une icône existe, vérifiez la liste d’icônes Segoe.)

Utilisez une icône s’il est facile pour l’utilisateur de comprendre ce que signifie l’icône et si elle est suffisamment simple pour être claire à taille réduite.

N’utilisez pas une icône si sa signification n’est pas évidente, ou si le fait de la rendre claire requiert une forme complexe.

Utiliser le type d’icône approprié

Il existe de nombreuses façons de créer une icône. Vous pouvez utiliser une police de symboles telle que la police Segoe MDL2 Assets. Vous pouvez créer votre propre image vectorielle. Vous pouvez même utiliser une image bitmap, bien que nous ne le conseillions pas. Voici un résumé des façons dont vous pouvez ajouter une icône à votre application.

Icône prédéfinie

Microsoft fournit plus de 1 000 icônes sous la forme de la police Segoe MDL2 Assets. Il peut ne pas être intuitif d’obtenir une icône à partir d’une police, mais la technologie d’affichage de police Windows signifie que ces icônes seront nettes et nettes sur n’importe quel affichage, à n’importe quelle résolution et à n’importe quelle taille. Pour obtenir des instructions, consultez les icônes Segoe MDL2 Assets.

Police

Vous n’avez pas besoin d’utiliser la police Segoe MDL2 Assets. Vous pouvez utiliser n’importe quelle police que l’utilisateur a installée sur son système, comme Wingdings ou Webdings.

Fichier SVG

Les ressources SVG (Scalable Vector Graphics) sont idéales pour les icônes, car elles semblent toujours nettes à n’importe quelle taille ou résolution. La plupart des applications de dessin peuvent s'exporter au format SVG. Pour obtenir des instructions, voir SVGImageSource.

Objet Geometry

Comme les fichiers SVG, les géométries sont une ressource vectorielle ; elles paraissent toujours nettes. Toutefois, la création d’une géométrie est complexe, car vous devez spécifier individuellement chaque point et chaque courbe. Il s’agit d’un bon choix uniquement si vous devez modifier l’icône pendant l’exécution de votre application (pour l’animer, par exemple). Pour obtenir des instructions, voir Commandes de déplacement et de dessin pour les géométries.

Image bitmap

Vous pouvez utiliser une image bitmap (telle que PNG, GIF ou JPEG), même si nous ne le recommandons pas.

Les images bitmap sont créées dans une taille spécifique, donc elles doivent être mises à l’échelle pour les agrandir ou les réduire en fonction de la taille d'icône souhaitée et de la résolution de l’écran. Lorsque l’image est réduite (réduite), elle peut apparaître floue. Lorsqu’elle est mise à l’échelle, elle peut apparaître bloquée et pixelisée. Si vous devez utiliser une image bitmap, nous vous recommandons d’utiliser une image PNG ou GIF sur un FICHIER JPEG.

Créer une icône faire quelque chose

Une fois que vous avez une icône, l’étape suivante consiste à le faire en l’associant à une commande ou à une action de navigation. La meilleure façon consiste à ajouter l’icône à un bouton ou à une barre de commandes.

Vous pouvez également animer une icône pour attirer l’attention sur un composant d’interface utilisateur, comme le bouton suivant d’un didacticiel, ou pour refléter l’action associée à l’icône de manière divertissante et intéressante. Pour plus d’informations, consultez AnimatedIcon.

Créer un bouton d’icône

Vous pouvez placer une icône sur un bouton standard. Étant donné que vous pouvez utiliser des boutons dans un large éventail d’endroits, l’utilisation d’une icône de cette façon vous offre un peu plus de flexibilité pour l’endroit où votre icône d’action s’affiche.

Voici une façon d’ajouter une icône à un bouton :

Étape 1
Définissez la famille Segoe MDL2 Assets de polices du bouton sur et sa propriété de contenu sur la valeur Unicode du glyphe que vous souhaitez utiliser :

<Button FontFamily="Segoe MDL2 Assets" Content="&#xE102;" />

Étape 2
Utilisez l’un des objets d’élément d’icône : BitmapIcon, FontIcon, PathIcon, ImageIcon ou SymbolIcon. Cette technique vous donne plus de types d’icônes à choisir. Il vous permet également de combiner des icônes et d’autres types de contenu, tels que du texte, si vous le souhaitez.

<Button>
    <StackPanel>
        <SymbolIcon Symbol="Play" />
        <TextBlock>Play the movie</TextBlock>
    </StackPanel>
</Button>

Créer une série d’icônes dans une barre de commandes

Lorsque vous disposez d’une série de commandes qui vont ensemble, telles que couper/copier/coller ou un ensemble de commandes de dessin pour un programme d’édition de photos, mettez-les ensemble dans une barre de commandes. Une barre de commandes contient un ou plusieurs boutons ou boutons bascule de la barre de l’application, chacun d'entre eux représentant une action. Chaque bouton possède une propriété Icône que vous utilisez pour contrôler l’icône affichée. Il existe plusieurs façons de spécifier l'icône.

Le moyen le plus simple consiste à utiliser la liste des icônes prédéfinies. Spécifiez simplement le nom de l’icône, tel que Back ou Stop, et le système le dessine :

<CommandBar>
    <AppBarToggleButton Icon="Shuffle" Label="Shuffle" Click="AppBarButton_Click" />
    <AppBarToggleButton Icon="RepeatAll" Label="Repeat" Click="AppBarButton_Click"/>
    <AppBarSeparator/>
    <AppBarButton Icon="Back" Label="Back" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Stop" Label="Stop" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Play" Label="Play" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Forward" Label="Forward" Click="AppBarButton_Click"/>
</CommandBar>

Pour obtenir la liste complète des noms d’icônes, consultez la référence d’énumération symbol.

Il existe d’autres façons de fournir des icônes pour un bouton dans une barre de commandes :

• FontIcon : l’icône est basée sur un glyphe de la famille de polices spécifiée.
• BitmapIcon : L’icône est basée sur un fichier image bitmap avec l’URI spécifié.
• PathIcon : l’icône est basée sur les données path .
• ImageIcon : L’icône est basée sur un type de fichier image pris en charge par la classe Image .

Pour en savoir plus sur les barres de commandes, consultez l’article de la barre de commandes .

Articles connexes

• Icônes d’application et logos
• AnimatedIcon