Cadres de fenêtre

Notes

Ce guide de conception a été créé pour Windows 7 et n’a pas été mis à jour pour les versions plus récentes de Windows. La plupart des conseils s’appliquent toujours en principe, mais la présentation et les exemples ne reflètent pas nos conseils de conception actuels.

La plupart des programmes doivent utiliser des cadres de fenêtre standard. Les applications immersives peuvent avoir un mode plein écran qui masque le cadre de la fenêtre. Envisagez d’utiliser le verre de manière stratégique pour un look plus simple, plus léger et plus cohérent.

Avec un cadre de fenêtre, les utilisateurs peuvent manipuler une fenêtre et afficher le titre et l’icône pour identifier son contenu.

Cadre de fenêtre classique.

Note: Les recommandations relatives à la gestion des fenêtres et à la personnalisation sont présentées dans des articles distincts.

Principes de conception

Cadres de fenêtre en verre

Les cadres de fenêtres en verre sont un nouvel aspect frappant de l’esthétique Microsoft Windows, visant à être à la fois attrayant et léger. Ces images translucides donnent aux fenêtres une apparence ouverte et moins intrusive, ce qui aide les utilisateurs à se concentrer sur le contenu et les fonctionnalités plutôt que sur l’interface qui l’entoure.

Cadres de fenêtre en verre.

Vous pouvez utiliser le verre de manière stratégique dans les petites régions d’une fenêtre qui touchent le cadre de la fenêtre. Ces régions semblent faire partie du cadre de la fenêtre, même si, techniquement, elles font partie de la zone cliente de la fenêtre.

Dans cet exemple, le verre est utilisé dans la zone cliente pour qu’il ressemble à une partie du cadre.

Cadres masqués

Parfois, le meilleur cadre de fenêtre n’est pas du tout. C’est souvent le cas pour la fenêtre principale des applications en plein écran immersifs qui ne sont pas utilisées conjointement avec d’autres programmes, tels que des lecteurs multimédias, des jeux et des applications plein écran.

Les visionneuses de contenu bénéficient souvent de la possibilité d’afficher du contenu en plein écran. Les exemples incluent Windows Internet Explorer , Galerie de photos Windows Live, Windows Movie Maker HD, Microsoft PowerPoint et Microsoft Word.

Dans cet exemple, Lecteur multimédia Windows peut afficher son contenu en plein écran.

Images personnalisées

La plupart des applications Windows doivent utiliser les cadres de fenêtre standard. Toutefois, pour les applications immersives, en plein écran et autonomes telles que les jeux et les applications kiosque, il peut être approprié d’utiliser des images personnalisées pour toutes les fenêtres qui ne sont pas affichées en plein écran. La motivation d’utiliser des cadres personnalisés doit être de donner à l’expérience globale une sensation unique, pas seulement pour l’image de marque.

Les images personnalisées sont appropriées pour les applications immersives, en plein écran et autonomes telles que les jeux.

Consignes

Cadres de fenêtre

• Utilisez des cadres de fenêtre standard.

  • Exception: Pour donner aux applications autonomes en plein écran immersif une sensation unique :

    • Envisagez de masquer le cadre de la fenêtre principale.

    • Envisagez d’utiliser des images personnalisées pour la fenêtre secondaire.

    • Si un cadre personnalisé est approprié, choisissez une conception légère qui n’attire pas trop l’attention sur elle-même.

      Incorrect :

      

      Dans cet exemple, le cadre personnalisé attire trop l’attention sur lui-même.

• N’ajoutez pas de contrôles à un cadre de fenêtre. Placez les contrôles dans la fenêtre à la place.

  Incorrect :

  

  Correct :

  

  Dans l’exemple correct, le contrôle se trouve dans la zone cliente plutôt que dans le cadre de la fenêtre.

Mode plein écran

• Pour les programmes qui ont un mode plein écran facultatif, pour activer le mode plein écran :

  • Ayez une commande modale en plein écran dans la barre de menus ou la barre d’outils. Lorsque l’utilisateur clique sur la commande, affichez la commande dans son état sélectionné.

    

    Cet exemple montre la commande en plein écran ainsi que sa touche de raccourci standard.

• Utilisez F11 pour la touche de raccourci plein écran.

• S’il existe une barre d’outils et que le mode plein écran est couramment utilisé, disposez également d’un bouton de barre d’outils graphique avec une info-bulle plein écran.

  

  Exemples de boutons de barre d’outils en plein écran.

• Pour revenir en mode plein écran :

  • Ayez une commande modale en plein écran dans la barre de menus ou la barre d’outils. Lorsque l’utilisateur clique sur la commande, affichez la commande dans son état effacé.
  • Utilisez F11 pour la touche de raccourci plein écran. S’il n’est pas déjà attribué, échap peut également être utilisé à cet effet.

Glass

Les cadres de fenêtre standard utilisent automatiquement le verre dans Windows, mais vous pouvez également utiliser du verre dans les régions qui touchent le cadre de la fenêtre.

• Envisagez d’utiliser le verre de manière stratégique dans les petites régions qui touchent le cadre de la fenêtre sans texte. Cela peut donner à un programme un aspect plus simple, plus léger et plus cohérent en donnant l’impression que la région fait partie du cadre.
• 
• Dans cet exemple, glass concentre l’attention de l’utilisateur sur le contenu plutôt que sur les contrôles.
• N’utilisez pas de verre dans les situations où un arrière-plan de fenêtre simple serait plus attrayant ou plus facile à utiliser.

Correct :

Dans cet exemple, le verre est utilisé pour donner à la fenêtre Alt+Tab une apparence légère. Glass fonctionne pour cette fenêtre, car il se compose de graphiques et d’une seule étiquette de texte forte.

Incorrect :

Dans cet exemple incorrect, l’utilisation du verre est distrayante. Un arrière-plan de fenêtre simple serait un meilleur choix.