Iconographie dans Windows
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.
Conseil
Cet article décrit comment le langage Fluent Design est appliqué aux applications Windows. Pour plus d’informations, consultez Fluent Design - Iconography.
Icônes d’application
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
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
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 base uniquement
En soi, l’icône de feuille de papier communique le concept d’un fichier.
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é).
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
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.
Windows developer