Recommandations en matière de redimensionnement en dispositions étroites

Article
07/22/2015

Concevez l’interface utilisateur de votre application pour qu’elle s’ajuste quand l’utilisateur la redimensionne et choisit une vue haute ou étroite. Les recommandations fournies dans cette rubrique s’appliquent si vous prévoyez de :

remplacer la largeur minimale par défaut de 500 pixels par 320 pixels (disposition étroite) ;
concevoir votre application pour basculer vers une disposition verticale quand l’utilisateur la redimensionne pour que la hauteur soit supérieure à la largeur (disposition haute).

Pour obtenir des recommandations d’ordre plus général, voir Guidelines for supporting multiple screen sizes. Pour obtenir de l’aide spécifique à la conception de jeux pour les dispositions étroites, voir le Guide de conseils pour les jeux.

Si vous voulez observer la mise en application de ces recommandations dans un exemple, voir :

Exemples

Dispositions étroites

La largeur minimale par défaut d’une application du Windows Store est de 500 pixels. Voici une application d’une largeur de 500 pixels.

Application à une largeur minimale par défaut de 500 pixels.

Et voici l’application d’une largeur de 320 pixels.

Application à une largeur minimale étroite de 320 pixels.

Si vous choisissez de prendre en charge une largeur minimale inférieure à 500 pixels, vous devez apporter quelques modifications à la conception pour que l’application soit fonctionnelle et utilisable à cette taille. Respectez les Pratiques conseillées et déconseillées pour vous assurer que votre application est performante à des largeurs inférieures à 500 pixels.

Dispositions hautes

Vous pouvez également choisir de modifier la conception de l’application quand elle est plus haute que large. Par exemple, vous pouvez concevoir l’application pour utiliser un mouvement panoramique vertical plutôt que horizontal quand elle est plus haute que large.

Voici une application qui utilise un mouvement panoramique horizontal quand elle s’affiche en plein écran.

Application qui utilise un mouvement panoramique horizontal, en plein écran

Et voici l’application quand elle est plus haute que large. Elle défile maintenant verticalement.

Application qui est plus haute que large et utilise un mouvement panoramique vertical.

Mon application doit-elle prendre en charge une largeur minimale de 320 pixels ?

La prise en charge de largeurs inférieures au minimum par défaut dépend de ce que vous pensez que les utilisateurs feront avec votre application. Voici quelques scénarios usuels dans lesquels vous devez prendre en charge des largeurs étroites, jusqu’à 320 pixels :

Le multitâche est important pour votre application.
Vous voulez que les utilisateurs conservent votre application à l’écran.
Votre application fonctionne avec une autre application dans un scénario complément.
Votre application s’adapte correctement à des largeurs étroites.

Si vous conservez la largeur minimale par défaut de 500 pixels, vous ne devez pas indiquer de recommandations particulières pour votre application à des largeurs étroites.

Pratiques conseillées et déconseillées

Si votre application utilise un mouvement panoramique horizontal quand elle s’affiche en plein écran, passez au mouvement panoramique vertical quand la fenêtre de l’application est plus haute que large.
Pour gérer la taille étroite, effectuez les modifications de conception suivante quand la largeur de votre application est inférieure à 500 pixels :
- Utilisez le plus petit style de bouton Précédent. Pour plus d’informations sur les différentes tailles du bouton Précédent, voir Liste d’icônes Segoe UI Symbol.
- Utilisez 20 pixels pour la marge de gauche.
- Utilisez une taille de 20 pt pour l’en-tête de l’application.
- Utilisez les plus petites valeurs de décalage pour les animations de transition entre les pages et animations de transition de contenu.
Voici l’application Calculatrice à la largeur normale :

Voici la même application à une largeur de 320 pixels. Sa marge gauche fait maintenant 20 pixels et sa police d’en-tête a été réduite à 20 pt, conformément aux recommandations relatives à la disposition étroite.
Si votre application utilise le mouvement panoramique vertical quand elle s’affiche en plein écran, effectuez une mise à l’échelle vers une seule colonne ou un seul volet quand elle est plus haute qu’étroite. Vous décidez de la largeur exacte à laquelle l’application bascule vers une seule colonne ou un seul volet. Dans la vue à une seule colonne ou un seul volet, veillez à inclure la navigation permettant à l’utilisateur de passer d’un volet à l’autre.
Concevez la disposition et tous les contrôles de votre application pour une mise à l’échelle avec la taille minimale et pour qu’elle soit utilisable dans les fenêtres d’application à la fois hautes et étroites. Les contrôles importants à prendre en compte sont les suivants :
Ne dirigez pas l’utilisateur vers une autre partie de l’application quand la taille de la fenêtre passe à une largeur étroite.
Ne prenez pas en charge des largeurs inférieures au minimum par défaut (500 pixels) si vous ne pouvez pas préserver la plupart des fonctionnalités de votre application aux tailles étroites.