Recommandations en matière de prise en charge de plusieurs tailles d’écran

Article
05/18/2015

Les applications du Windows Store et du Windows Phone Store peuvent être exécutées sur une large gamme d’appareils avec différentes tailles et résolutions d’écran. Par ailleurs, les utilisateurs sont susceptibles de modifier l’orientation de l’écran et, pour les applications exécutées sur Windows, de les redimensionner progressivement jusqu’à la largeur minimale ou de les afficher à côté d’autres applications. Vous devez donc vous assurer que l’apparence et les fonctionnalités de votre application resteront optimales sur tout type d’appareil (téléphone, tablette, ordinateur portable, ordinateur de bureau ou appareil haute résolution) sur lequel l’application sera exécutée. Suivez les recommandations ci-dessous pour concevoir une interface utilisateur qui s’adapte aux écrans de toutes tailles et orientations.

Pour obtenir des recommandations spécifiques relatives à l’adaptation d’une application du Windows Store à des tailles d’écran réduites, voir Guidelines for resizing to narrow layouts.

Description

Votre application sera probablement exécutée sur des écrans de tailles très différentes : du petit écran d’un téléphone au grand écran des ordinateurs de bureau ou haute résolution, en passant par l’écran moyen d’un ordinateur portable. En fonction de la taille et de la résolution de l’écran, votre application disposera d’un espace d’affichage plus ou moins grand.

exemple d’application sur une tablette

exemple d’application sur un moniteur de bureau de grande taille

Les termes suivants sont importants pour comprendre la mise à l’échelle en fonction de différentes tailles d’écran.

Taille d’écran	Taille physique de l’écran, en pouces. Elle correspond généralement à la mesure de la diagonale.
Résolution de l’écran	Nombre de pixels pris en charge horizontalement et verticalement par l’écran. Par exemple, 1366 x 768.
Proportions	Rapport largeur-hauteur de l’écran indiquant sa forme. Par exemple, 16:9.

La plateforme, les contrôles et les modèles ont tous été conçus pour convenir à des tailles, résolutions et proportions d’écran différents. Même si la majeure partie de la disposition de votre application est automatiquement ajustée en fonction de l’écran, vous devez tenir compte de la disposition de premier niveau, des zones de contenu, de la navigation au sein de l’application et des commandes afin de garantir leur placement prédictible et intuitif sur tous les écrans.

Les tableaux suivants indiquent les tailles d’écran les plus importantes à prendre en compte lors de la conception de votre application.

Taille d’écran plein écran (résolution en pixels effective)	Description de l’appareil
1366x768	Tablettes, hybrides et beaucoup d’ordinateurs portables (valeur de proportion 16:9) ; résolution d’écran d’ordinateur portable/de bureau standard
1920x1080	Ordinateurs portables et appareils de grande taille (valeur de proportion 16:9)
2560x1440	Appareil de type tout-en-un de très grande taille (valeur de proportion 16:9)
1280x800 et 800x1280	Petits appareils en orientation Portrait (valeur de proportion 16:10)
1024x768 et 768x1024	Petits appareils en orientation Paysage (valeur de proportion 4:3)
1371x857 et 857x1371	Petits appareils (valeur de proportion 16:10)
384x640	Téléphones avec écran de 4,5" (valeur de proportion 15:9)
400x711	Téléphones avec écran de 4,7" (valeur de proportion 16:9)
450x800	Téléphones avec écran de 5,5" (valeur de proportion 16:9)
491x873	Téléphones avec écran de 6" (valeur de proportion 16:9)

Si vous concevez une application devant s’exécuter sur Windows, tenez compte de la taille d’écran disponible lorsqu’un utilisateur affiche deux applications en même temps ou lorsqu’il redimensionne votre application à sa largeur minimale. Ceci ne s’applique pas aux applications Windows Phone.

Taille d’écran fractionné (résolution en pixels effective)	Description
672x768	Écran fractionné en deux sur un appareil 1366x768
500x768	Taille minimale par défaut pour l’application ; écran fractionné en deux sur un appareil 1024x768
320x768	Taille minimale pour les applications qui prennent en charge une largeur minimale de 320 pixels

Pour obtenir des recommandations en matière de mise à l’échelle, voir Guidelines for scaling to pixel density.

$Tailles des fenêtres plein écran et écran fractionné importantes$

Pratiques conseillées et déconseillées

Si possible, utilisez des contrôles flexibles pour prendre en charge la redisposition dynamique du contenu. Quatre contrôles flexibles sont disponibles : le XAML Grid control, la grille CSS, la disposition multicolonne CSS et le ScrollViewer control. Les contrôles de grille, par exemple, permettent de fléchir certaines zones de votre interface utilisateur afin de remplir l’espace disponible en fonction de la résolution d’écran de l’appareil, et d’attribuer du contenu à différentes cellules par rapport à l’espace d’écran disponible.
Concevez la disposition et les contrôles de votre application afin qu’ils s’ajustent et fonctionnent correctement sur les écrans de taille minimale :
- Largeur minimale par défaut pour les applications du Windows Store : 500 pixels.
- Largeur minimale absolue pour les applications du Windows Store : 320 pixels.
- Largeur minimale (non ajustable) pour les applications du Windows Phone Store : 384 pixels (portrait) et 640 pixels (paysage).
L’interface utilisateur et les contrôles doivent rester fonctionnels avec toutes les tailles d’écran, y compris les tailles minimales (voir la liste ci-dessus). Les contrôles importants à prendre en compte sont les suivants :
Concevez votre application pour qu’elle utilise efficacement l’espace sur un grand écran et qu’elle ait une disposition qui se réorganise automatiquement. Ne laissez pas de grands espaces vides.
Testez le bon fonctionnement de votre application sur les tailles d’appareil les plus importantes. Outre le test de votre application sur des appareils réels, vous pouvez utiliser le simulateur Microsoft Visual Studio pour les applications du Windows Store pour simuler l’exécution de votre application sur différentes tailles d’écran physiques, résolutions et orientations.
Spécifiez une taille minimale pour tous les input fields. Cela permet de s’assurer que ces champs ne disparaissent pas quand l’utilisateur redimensionne la fenêtre.
Vérifiez que le clavier logiciel ne masque pas les champs d’entrée de votre application.
Utilisez le positionnement absolu avec précaution. S’il n’est pas utilisé correctement, le positionnement absolu peut empêcher l’interface utilisateur de répondre aux changements de taille et d’orientation des fenêtres. Au lieu de coder en dur la disposition, utilisez des positions qui détermineront la disposition des éléments de votre interface utilisateur au moment de l’exécution.
Concevez des applications pour différentes densités de pixels. Pour en savoir plus, voir Recommandations en matière de mise à l’échelle d’après la densité en pixels.

Applications du Windows Store uniquement

Assurez-vous que votre application fonctionne correctement dans toutes les largeurs, y compris la largeur minimale par défaut de 500 pixels. Pour obtenir des recommandations spécifiques, voir Guidelines for narrow layouts.
Si votre application fonctionne bien à plus petite échelle, vous pouvez utiliser une largeur minimale absolue de 320 pixels afin d’inciter les utilisateurs à conserver votre application à l’écran.
Veillez à ce que les utilisateurs puissent poursuivre leurs tâches en cours quand ils redimensionnent les applications. Par exemple, conservez la page active de l’application, l’état des barres de défilement, la sélection et le focus.
Garantissez la prise en charge des icônes dans toutes les tailles d’écran. Veillez à ce que les menus volants et les volets soient correctement mis à l’échelle.

Dans Windows 8, les utilisateurs pouvaient redimensionner les applications dans trois états d’affichage seulement : ancré, plein écran et rempli. Dans Windows 8.1, ils peuvent redimensionner les applications à n’importe quelle largeur, du plein écran à la largeur minimale.

Indications d’utilisation supplémentaires

Prise en charge automatique des changements d’orientation

Les utilisateurs font généralement pivoter leurs téléphones, tablettes et écrans. Windows gère automatiquement les orientations paysage et portrait, sauf si votre application utilise une disposition fixe. Vous n’avez donc qu’à tenir compte de l’impact d’un changement de la largeur de l’application sur la disposition.

Pour plus d’informations sur les cas d’utilisation d’une disposition fixe, voir la section ci-dessous consacrée aux dispositions fixes.

Orientations paysage et portrait

Comportement des applications redimensionnées (applications du Windows Store uniquement)

Des interactions d’interface utilisateur spécifiques sont à prendre en compte lorsqu’un utilisateur affiche plusieurs applications à la fois :

Si un utilisateur appelle les icônes, celles-ci s’appliquent à la dernière application utilisée par l’utilisateur, quelle que soit la taille de l’application ou sa position à l’écran.
Un handle est situé entre chaque application à l’écran. Les utilisateurs redimensionnent les fenêtres d’application en faisant glisser le handle. Le handle indique également l’application qui a le focus.
Si un utilisateur saisit le handle entre les applications et essaie de redimensionner une application sur une largeur inférieure à la largeur minimale de l’application, l’application quitte l’écran.
Si un utilisateur fait pivoter un appareil ou un écran alors que plusieurs applications sont affichées à l’écran, les applications ne changent pas d’orientation.

Dispositions fixes

La plupart des applications peuvent utiliser une disposition dynamique qui s’adapte aux changements de taille et résolution d’écran, et qui ajuste le contenu automatiquement. Toutefois, dans certains cas, une application doit utiliser une disposition fixe (ou absolue). C’est le cas des applications qui ne sont pas centrées sur le contenu ou de celles qui reposent sur l’intégrité des graphismes (telles que les applications de jeu). Windows gère ces applications via une approche d’ajustement intégrée à la plateforme.

Si vous faites le choix d’une disposition fixe (qui ne s’adapte donc pas automatiquement à la taille d’écran) pour votre application, vous pouvez implémenter une approche d’ajustement de sorte que votre disposition fixe remplisse l’écran, quelle que soit la taille de ce dernier, comme illustré ci-dessous.

Ajustement dans le cas d’un jeu à disposition fixe

Pour implémenter l’approche d’ajustement, procédez comme suit :

Concevez votre disposition pour une résolution standard, par exemple 1366x768 pixels (PC/tablette) ou 384x640 pixels (téléphone). Cette disposition sera mise à l’échelle sur les écrans plus larges.
Placez votre contenu fixe dans un contrôle ViewBox (ViewBox in JavaScript and HTML ou Viewbox in C#/VB/C++ and XAML). Le contrôle ViewBox ajuste la disposition fixe afin qu’elle s’adapte à l’écran.
Veillez à ce que les dimensions du contrôle ViewBox correspondent à une largeur et une hauteur de 100 %.
Définissez les propriétés de taille fixe du contrôle ViewBox sur les tailles fixes en pixels de votre disposition (par exemple, 1366x768 ou 384x640).
Choisissez une couleur de cadre. Les contrôles fixes ne s’adaptent pas dynamiquement aux changements de taille d’écran ou de proportions. La fonctionnalité d’ajustement centre ainsi automatiquement le contenu de votre application dans un format cadre (horizontalement ou verticalement). La couleur de la disposition de premier niveau de votre application détermine celle des barres du cadre. Nous vous recommandons de choisir une couleur sombre telle que le noir pour qu’elle se fonde dans la couleur du matériel, une couleur neutre telle que le gris pour la mettre en évidence ou une couleur correspondant à celle du contenu de l’application.
Utilisation de composants vectoriels ou haute résolution La méthode d’ajustement met votre application à diverses échelles allant jusqu’à 180 % (applications Windows) ou 280 % (applications Windows Phone) des dimensions de conception de votre application sur un grand écran d’ordinateur de bureau. Les composants vectoriels tels que les primitives de conception, SVG (Scalable Vector Graphics) ou XAML (Extensible Application Markup Language) entraînent une mise à l’échelle sans artefact ou effet de flou. Si des composants raster (tels que des images bitmap) sont requis, fournissez des composants MRT.

Les images suivantes illustrent la dégradation des images scalaires (à droite) lorsqu’elles sont mises à une échelle supérieure par rapport aux images vectorielles (à gauche).
Ne placez aucun contrôle adaptatif dans un contrôle ViewBox.