Iconographie dans Windows 11

  • Article

L’iconographie est un ensemble d’images visuelles et de symboles qui aident les utilisateurs à comprendre et à parcourir votre application. Les icônes sont utilisées dans toute l’interface utilisateur comme métaphores visuelles qui représentent un concept, une action ou un état.

Windows 11 utilise trois types d’icônes : application, système et type de fichier. Cet article est consacré aux deux premières.

Cet article décrit comment le langage Fluent Design est appliqué aux applications Windows. Pour plus d’informations, consultez l’iconographie Fluent Design.

Icônes d’application

Icône d’application abstraite pour une application de mappage hypothétique.

Les icônes d’application représentent votre application dans l’interpréteur de commandes Windows. Ils sont principalement utilisés pour ouvrir votre application, mais ils représentent également votre application où qu’elle apparaisse dans l’interpréteur de commandes Windows.

Les icônes d’application doivent représenter les fonctionnalités principales de votre application par le biais d’une métaphore. Pour plus d’informations sur la conception et la construction de l’icône de votre application, consultez icônes d’application.

Icônes système

Icône de panier d’achat de Segoe Fluent Icon.

Utilisez des icônes système à l’intérieur de l’interface utilisateur de votre application pour des éléments tels que les barres de commandes, la navigation ou les indicateurs d’état. Windows 11 introduit une nouvelle police d’icône système, Segoe Fluent Icon. Cette nouvelle police complète la géométrie dans Windows 11.

Tous les glyphes dans Les icônes Segoe Fluent sont dessinés dans un style monoligne. Cela signifie qu’ils sont créés à l’aide d’un trait unique de 1 epx.

Les Glyphes dans Segoe Fluent Icon suivent trois principes esthétiques :

  • Minimal : les Glyphes contiennent uniquement les détails nécessaires pour communiquer le concept.
  • Harmonieux : les Glyphes sont basés sur des formes simples et géométriques.
  • Évolué : les Glyphes utilisent des métaphores modernes qui sont facilement comprises.

Pour plus d’informations sur l’utilisation d’icônes dans l’interface utilisateur de votre application, consultez Icônes dans les applications Windows.

Taille d'icône

Icône d’imprimante correctement dimensionnée.

Les métriques de police pour Les icônes Segoe Fluent correspondent à la façon dont les concepteurs et les développeurs sont habitués à utiliser des icônes SVG et bitmap.

Chaque glyphe de police est conçu pour que l’empreinte de la zone d’icône soit un em carré. Une icône avec une taille de police 16 epx est l’équivalent d’une icône 16x16-epx, pour rendre le dimensionnement et le positionnement plus prévisibles.

Modificateurs

Vous pouvez construire visuellement des glyphes d’icône système en combinant une icône de base avec une icône de modificateur.

Les icônes de base sont l’élément principal d’une métaphore visuelle. Les éléments de base doivent occuper l’empreinte entière de l’icône.

Les icônes de modificateur modifient la signification de l’icône de base. Les éléments modificateurs doivent être placés dans l’un des quadrants inférieurs de l’empreinte de l’icône.

Icône de fichier.

Icône de base uniquement
En soi, l’icône de feuille de papier communique le concept d’un fichier.

Icône de fichier retardée avec une icône de flèche vers le haut.

Icône de base + icône de modificateur
L’ajout d’une flèche vers le haut à l’icône de fichier modifie la signification de l’icône pour représenter un fichier chargé.

Superposition

La superposition d’icônes est une technique que vous utilisez pour chevaucher deux glyphes. Nous vous recommandons d’utiliser la couche d’icônes pour créer un état différent de la même icône (par exemple, un état actif ou sélectionné).

Une icône de dossier noir et blanc ainsi qu’une icône de dossier beige sans contour égal à une icône de dossier beige avec un contour noir.

Localisation

Comprendre les connotations culturelles des symboles. Bien que l’iconographie ne nécessite pas de localisation dans la plupart des cas, certaines icônes peuvent être acceptables dans une culture, mais pas dans une autre. Validez vos choix d’iconographie avec le contexte dans lequel vous les utiliserez.

Exemples

Ouvrez l’application galerie WinUI 3 et consultez les principes de l’iconographie en action

L’application WinUI 3 Gallery comprend des exemples interactifs de la plupart des contrôles et des fonctionnalités WinUI 3. Procurez-vous l’application sur le Microsoft Store ou le code source sur GitHub.