Disposition d’une page d’application

[ Cet article est destiné aux développeurs de Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Vous pouvez utiliser le modèle de disposition décrit ici pour disposer les éléments d’interface utilisateur sur les pages de votre application. Le respect de modèles établis pour les marges, les en-têtes de page, les largeurs de gouttière et d’autres éléments de ce type maintient une unité dans les applications et aide les utilisateurs à comprendre facilement les interactions dans l’ensemble du système.

L’interface utilisateur de Windows 8 met l’accent sur le maintien d’une silhouette cohérente dans toutes ses applications. La silhouette se caractérise principalement par une marge large sur les bords supérieur, inférieur et gauche. La marge large aident les utilisateurs à comprendre la direction du mouvement panoramique du contenu.

Voir ces fonctionnalités en action dans le cadre de notre série Fonctionnalités d’application de A à Z: Interface utilisateur des applications du Windows Store de A à Z

Utilisation du système de grilles

Avant de développer le concept de silhouette Windows 8, nous souhaiterions vous en dire en peu plus sur l’utilisation du système de grille Windows 8. Le système de grille est un outil de conception qui permet d’obtenir une unité visuelle dans différentes applications tout en fournissant une structure ouverte aux adaptations et en maintenant l’intérêt des utilisateurs. Le système de grille est intégré aux modèles de développement et nous avons conçu nos contrôles et collections avec le système de grille à l’esprit.

La grille est constituée d’unités et de sous-unités. L’unité de mesure de base est l’unité. Une unité est égale à 20 × 20 pixels. Chaque unité est divisée en sous-unités de 5 × 5 pixels. Il existe 16 sous-unités par unité carrée. L’image ci-dessous présente la grille dans le coin supérieur gauche d’un écran. L’image est agrandie afin d’afficher les pixels, sous-unités et unités.

En-tête de page

La base de l’en-tête de page doit être de 5 unités, ou de 100 pixels à partir du haut. La marge de gauche pour l’en-tête de page est de 6 unités, ou de 120 pixels. L’ensemble stylistique sélectionné pour l’en-tête de page Windows 8 est SegoeUI 20, Light Weight. Pour plus d’informations sur les ensembles stylistiques, voir Recommandations et liste de vérification sur le texte et la typographie.

Remarque  Dans Mise à jour Windows 8.1, les utilisateurs peuvent placer la souris sur le bord supérieur de l’écran pour faire apparaître une barre de titre. Ils peuvent également la placer sur le bord inférieur de l’écran pour faire apparaître la barre des tâches du Bureau. Quand l’utilisateur déplace ensuite la souris hors de cette zone, la barre de titre et la barre des tâches sont masquées. Il est impossible de faire apparaître la barre de titre ou la barre des tâches avec les fonctionnalités tactiles. Quand elles sont affichées, la barre de titre et la barre des tâches peuvent cacher des éléments de commande ou d’interface utilisateur de votre application. Pensez-y lorsque vous définissez la position des éléments dans votre disposition d’application

Zone de contenu

La zone de contenu a une marge supérieure de 7 unités, ou de 140 pixels. La marge de gauche est de 6 unités, ou de 120 pixels. La marge du bas est flexible. Pour le contenu panoramique horizontal, elle ne doit pas dépasser 6,5 unités (130 pixels), et ne pas être inférieure à 2,5 unités (50 pixels). Pour le contenu panoramique vertical, les marges supérieure et de gauche ne changent pas. La marge inférieure n’est pas spécifiée car le contenu sort de l’écran.

Valeurs de remplissage horizontal

Le remplissage horizontal entre des éléments de contenu varie selon les éléments. Le remplissage entre la vignette et le texte associé est de 2 sous-unités, ou de 10 pixels, pour les éléments aux contours nets. Le remplissage entre les colonnes est de 2 sous-unités, ou de 40 pixels, pour les listes. Le remplissage entre les colonnes est de 2 sous-unités, ou de 10 pixels, pour les éléments aux contours nets.

Valeurs de remplissage vertical

Le remplissage vertical entre des éléments de contenu varie également selon les types d’éléments. Le remplissage vertical entre les éléments d’une ligne est de 1 unité, ou de 20 pixels, pour les listes de vignettes et de texte. Le remplissage entre les éléments d’une liste est de 2 sous-unités, ou de 10 pixels, pour les objets aux contours nets.

Remplissage horizontal entre des groupes

Le remplissage entre des groupes est de 4 unités, ou de 80 pixels. La séparation généreuse laissée par ce remplissage permet de distinguer facilement les groupes entre eux lorsque l’utilisateur effectue un panoramique.

Rubriques associées

Recommandations en matière d’expérience utilisateur pour la disposition et la mise à l’échelle

Recommandations et liste de vérification sur le texte et la typographie