Conception de barre de titre

La barre de titre se trouve en haut d’une application sur la couche de base. Son principal objectif est de permettre aux utilisateurs d’identifier l’application par son titre, de déplacer la fenêtre de l’application et de réduire, d’agrandir ou de fermer l’application.

Design standard

Cette section décrit les recommandations et comportements de conception des parties d’une barre de titre standard.

Barre

Création

• La barre de titre standard a une hauteur de 32 px.
• L’arrière-plan par défaut de la barre de titre est Mica, mais nous vous recommandons de fusionner les barres de titre avec le reste de la fenêtre si possible.
• Les barres de titre permettent aux utilisateurs de savoir lorsqu’une fenêtre est active ou inactive. Tous les éléments de barre de titre doivent être semi-transparents lorsque la fenêtre est inactive.
• Les couleurs de la barre de titre doivent être ajustées lorsque les utilisateurs basculent vers des thèmes à contraste élevé ou entre les modes clair et sombre.
  • Pour les thèmes à contraste élevé, les applications doivent utiliser la SystemColors classe pour déterminer la couleur d’élément d’interface utilisateur appropriée pour faciliter une expérience supérieure à contraste élevé.

Comportement

• La barre de titre joue un rôle essentiel dans le repositionnement et le redimensionnement d’une fenêtre. Tous les espaces vides de la barre de titre ou les espaces occupés par des éléments non interactifs tels que le titre de la fenêtre doivent pouvoir être déplacés.
• Un clic droit/appuyez longuement sur une partie de la barre de titre qui n’a pas d’élément interactif doit afficher le menu de la fenêtre système.
• En effectuant un double-clic ou en touchant l’écran, vous pouvez basculer entre l’agrandissement et le rétablissement de la fenêtre.

Icône

Création

• La taille de l’icône de la fenêtre est de 16 x 16 px.
• Placez l’icône à 16 px de la bordure la plus à gauche en gauche à droite (LTR) ou de la bordure la plus à droite en droite à gauche (RTL).
  • Si le bouton Précédent est présent, placez l’icône de la fenêtre à 16 px à droite du bouton Précédent.
• L’icône de fenêtre doit être centrée verticalement dans la barre de titre. Par exemple, lorsque la hauteur de la barre de titre est de 32 px, les marges supérieure et inférieure sont de 8 px.

Comportement

• En effectuant un double-clic ou en touchant l’écran, le menu de la fenêtre système devrait s’afficher.
• En effectuant un double-clic ou en touchant l’écran, la fenêtre devrait se fermer.

Titre

Création

• Placez le titre de la fenêtre à 16 px de l’icône de fenêtre ou du bouton précédent.
  • Si ni icône ni bouton Précédent ne sont présents, placez le titre de la fenêtre à 16 px de la bordure la plus à gauche en LTR, ou la plus à droite en RTL.
• Le titre de la fenêtre doit être écrit avec la police Segoe UI Variable (si disponible) ou Segoe UI.
• Le titre de la fenêtre doit utiliser le texte de style légende (voir paliers de type XAML).
• Le titre de la fenêtre peut être tronqué et des points de suspension peuvent être ajoutés si la largeur de la fenêtre est plus petite que la longueur des éléments de la barre de titre. L’icône et les boutons de légende (min, max et fermer) doivent toujours être entièrement visibles.

Comportement

• Un clic droit/appuyez longuement sur l’icône doit afficher le menu de la fenêtre système.
• En effectuant un double-clic ou en touchant l’écran, vous pouvez basculer entre l’agrandissement et le rétablissement de la fenêtre.
• Le titre de la fenêtre et d’autres éléments textuels de la barre de titre doivent répondre à la mise à l’échelle du texte. Pour ce faire, il peut être nécessaire que la barre de titre prenne de la hauteur.

Contrôles de légende (réduire, agrandir, restaurer, fermer)

Si vous créez vos propres boutons de légende pour votre application, suivez ces instructions pour correspondre aux boutons de légende du système.

Création

• Utilisez ces icônes pour les boutons :
  • Icône réduction : E921 ChromeMinimize
  • Icône Maximiser : E922 "ChromeMaximize"
  • Icône Restaurer : E923 ChromeRestore
  • icône fermer : E8BB ChromeClose
• Les icônes Agrandir et Restaurer ont des angles arrondis.
• Les boutons de légende ont des plaques de fond à fond perdu.
• Les boutons de légende répondent au repos, au survol, enfoncé, actif et inactif.

Modèles de conception supplémentaires

Bouton Précédent

Création

L'icône recommandée pour le bouton Précédent est : E830 ChromeBack

• Si un bouton Précédent est présent, il doit être placé à gauche du titre ou de la combinaison icône/titre de l’application (en LTR).
• Le bouton Précédent répond aux repos, lors du survol, lorsqu'il est pressé, actif et inactif.
• Le bouton Précédent doit être de 16 px par 16 px et centré verticalement dans la barre de titre. Le bouton doit avoir une plaque arrière débordante.
• Le bouton Précédent doit être situé à 16 px du bord le plus à gauche en LTR ou le plus à droite en RTL, et à 16 px de l’élément suivant à gauche ou à droite de celui-ci.

Recherche

Création

Si la fonctionnalité de recherche globale s’affiche, une zone de recherche doit être ajoutée à la barre de titre, centrée sur la fenêtre. Augmentez la taille de la barre de titre à 48 px lorsque vous incluez une zone de recherche.

La zone de recherche doit être réactive pour réagir aux modifications de taille de fenêtre.

Personnes

Si la représentation du compte s’affiche, le contrôle de l'image de la personne doit être placé à gauche des contrôles de légende. Augmentez la taille de la barre de titre à 48 px lorsque vous incluez une image personnelle.

Onglets

Si vous utilisez des onglets comme élément principal de votre application, utilisez l’espace de la barre de titre et gardez les contrôles de légende ancrés à droite.

Étapes suivantes