Communitygithub.com

Règles de conception Windows 11

Règles de conception pour qu'une application WinUI 3 ressemble et se comporte comme une application native Windows 11, du système Fluent Design 2 à Mica, NavigationView, CommandBars, menus, accélérateurs clavier, Segoe UI Variable et mode sombre. À utiliser lors de la création ou de la révision de toute fenêtre, page, CommandBar ou boîte de dialogue.

Qu'est-ce que Règles de conception Windows 11 ?

Cette compétence fournit un ensemble de règles de conception et de modèles XAML prêts à l'emploi pour construire des applications WinUI 3 qui respectent les principes du design Windows 11 natif. Elle s'appuie sur les cinq principes Fluent (Naturel, Intuitif, Réactif, Intentionnel, Artisanal) et détaille l'utilisation des matériaux visuels clés comme Mica (pour les fenêtres principales) et Acrylic (pour les menus flottants et boîtes de dialogue). Elle prescrit également le rayon de coins standard (8 px pour cartes/boutons, 4 px pour les petits éléments), la typographie Segoe UI Variable avec une taille optique dynamique, et l'utilisation des icônes Segoe Fluent. L'objectif est d'assurer que toutes les vues et flyouts utilisent des contrôles Fluent 2 standard, les arrière-plans Mica ou Acrylic, et la typographie conforme, afin que l'application s'intègre parfaitement à l'expérience Windows 11.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/MinnThikeTunn/Phan-Tee/tree/main/skills/design/win-design

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Conception Windows 11

Microsoft a déjà conçu votre application. Choisissez les bonnes parties du système, organisez-les et ne vous mettez pas en travers de leur chemin.

Les cinq principes Fluent de Microsoft

  1. Naturel : S'adapte aux entrées utilisateur (clavier, souris, tactile, stylet).
  2. Intuitif : Dispositions familières, iconographie cohérente, hiérarchie claire.
  3. Réactif : Retour instantané, micro-animations fluides.
  4. Intentionnel : Chaque élément visuel a un but.
  5. Artisanal : Bords alignés, grille d'espacement cohérente de 4 px / 8 px, matériaux polis.

Matériaux visuels Windows 11

  • Mica (MicaBackdrop) : Appliqué au cadre de la fenêtre principale. Échantillonne dynamiquement le fond d'écran du bureau de l'utilisateur pour créer une surface teintée subtile.
  • Acrylic (DesktopAcrylicBackdrop) : Utilisé pour les flyouts flottants temporaires, les menus contextuels et les boîtes de dialogue.
  • Coins : Rayon de coin standard Windows 11 de 8 px pour les cartes et les boutons ; 4 px pour les petits chips.
  • Typographie : Segoe UI Variable avec une taille optique dynamique.
  • Icônes : Segoe Fluent Icons (FontIcon Glyph="\uE...").

Terminé lorsque

Toutes les vues et flyouts utilisent des contrôles Fluent 2 standard, les arrière-plans Mica ou Acrylic sont appliqués et la typographie est conforme à Segoe UI Variable.

Skills associés