Icônes pour les applications Windows

  • Article

Exemple d’icône cloud sur une grille.

Les icônes fournissent un raccourci visuel pour une action, un concept ou un produit. En compressant le sens dans une image symbolique, les icônes peuvent franchir les barrières linguistiques et aider à conserver une ressource précieuse : l’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 de 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 d’elles :

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

Capture d’écran des icônes dans une application de musique. À l’intérieur de votre application, vous utilisez des icônes pour représenter une action, comme la copie de texte ou l’accès à la page des paramètres.

Icônes en dehors de l’application

Capture d’écran du menu Démarrer de Windows avec des icônes d’application. En dehors de votre application, Windows utilise une icône pour représenter l’application dans 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 démarrer de votre application peut comporter l’icône de l’application. L’icône de l’application s’affiche 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 les icônes

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

Capture d’écran d’une barre verte avec une marque case activée verte et le mot Do.Capture d’écran montrant les icônes Couper, Copier, Coller et Enregistrer.

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

Capture d’écran montrant une barre rouge avec un X rouge et le mot Ne pas.Capture d’écran montrant les icônes Éducation, Tactile et Calendrier.

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

Capture d’écran d’une barre verte avec une marque case activée verte et le mot Do.Capture d’écran d’une icône de panier d’achat simple et familière.

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.

Capture d’écran d’une barre rouge avec un X rouge et le mot Ne pas.Capture d’écran d’une icône de panier d’achat complexe et peu familière.

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 n’est peut-être pas intuitif d’obtenir une icône à partir d’une police, mais la technologie d’affichage des polices 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 Icônes segoe MDL2 Assets.

Capture d’écran montrant un grand groupe d’icônes Segoe prédéfinies.

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.

Capture d’écran d’un grand groupe d’icônes Wingdings.

Fichier SVG

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

Animation de l’expansion et de la réduction d’une icône de panier d’achat SVG.

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. C’est 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.

Capture d’écran montrant la création d’un objet geometry.

Image bitmap

Vous pouvez utiliser une image bitmap (comme PNG, GIF ou JPEG), même si nous ne la 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étrécie), elle peut apparaître floue. Lorsqu’il est mis à l’échelle, il peut apparaître bloqué et pixellisé. Si vous devez utiliser une image bitmap, nous vous recommandons d’utiliser un format PNG ou GIF sur un fichier JPEG.

Capture d’écran d’une barre rouge comportant un X et le mot Ne pas.Capture d’écran d’une icône bitmap pixellisée d’un panier d’achat.

Faire en sorte qu’une icône fasse quelque chose

Une fois que vous avez une icône, l’étape suivante consiste à l’associer à une commande ou à une action de navigation. Le meilleur moyen consiste à ajouter l’icône à un bouton ou à une barre de commandes.

Capture d’écran montrant une barre de commandes avec des icônes Partager, Modifier et Supprimer, ainsi que des points de suspension pour un menu de dépassement de capacité.

Vous pouvez également animer une icône pour attirer l’attention sur un composant d’interface utilisateur, comme le bouton suivant dans un tutoriel, ou pour refléter l’action associée à l’icône d’une manière amusante 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’emplacement de votre icône d’action.

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

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

Capture d’écran d’une icône pour un bouton de lecture.

<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 parmi lesquels choisir. Il vous permet également de combiner des icônes et d’autres types de contenu, tels que du texte, si vous le souhaitez.

Capture d’écran d’une icône pour un bouton de lecture avec le texte « Lire le film ».

<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 avez une série de commandes qui vont ensemble, telles que couper/copier/coller ou un ensemble de commandes de dessin pour un programme de retouche photo, 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 a une propriété Icône que vous utilisez pour contrôler l’icône qu’il affiche. Il existe plusieurs façons de spécifier l'icône.

Exemple de barre de commandes avec des icônes.

Le moyen le plus simple consiste à utiliser la liste des icônes prédéfinies. Spécifiez simplement le nom de l’icône, par exemple Retour ou Arrêt, 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 de l’énumération symbol.

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

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