Recommandations pour l’adaptation à la taille des écrans (applications du Windows Store)

Cette rubrique décrit les meilleures pratiques permettant de concevoir et créer, pour votre application du Windows Store, une disposition s’adaptant aux différentes tailles d’écran prises en charge par Windows 8.

Windows 8 peut être exécuté sur toute une variété de tailles d’écran, des écrans de tablette aux grands écrans de bureau ou tout-en-un, en passant par les écrans d’ordinateur portable de taille moyenne. Les applications du Windows Store peuvent être exécutées sur n’importe quelle taille d’écran prise en charge par Windows 8. D’une manière générale, des résolutions plus élevées sont associées aux écrans plus larges. Vous pouvez donc profiter d’un espace d’affichage plus grand pour votre application sur ce type d’écran.

La terminologie suivante est utilisée au sein de ce document.

Term	Description
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.

 

Taille d’écran

L’impact le plus important d’une taille d’écran sur une application du Windows Store réside dans la résolution associée. Elle est plus élevée sur les écrans plus grands, ce qui permet à votre application de bénéficier d’un espace plus conséquent. Les utilisateurs s’attendent alors à voir plus de contenu et à disposer de plus de fonctionnalités.

La gestion de cet espace à disposition doit faire l’objet d’une attention particulière de la part des développeurs et des concepteurs d’applications. Ce sont les paramètres de disposition définis au moment de la conception et du développement qui déterminent l’apparence de l’application sur les écrans larges.

La plateforme, les contrôles et les modèles ont tous été conçus pour prendre en charge différentes tailles d’écran. La mise à l’échelle de la majeure partie de la disposition de votre application nécessite peu d’effort ou de code supplémentaire. Toutefois, il convient de se concentrer sur la disposition de premier niveau, les régions de contenu, la navigation au sein de l’application et les commandes afin de s’assurer de leur placement prévisible et intuitif sur les écrans de plus grande taille.

L’exemple d’image suivant illustre l’importance des régions vides susceptibles de résulter d’une disposition qui ne s’adapte pas aux écrans larges.

Résolutions d’écran minimum

Votre écran doit prendre en charge deux résolutions d’écran principales :

• la résolution minimale à laquelle les applications du Windows Store peuvent être exécutées, égale à 1024x768 ;
• la résolution minimale nécessaire pour une prise en charge de toutes les fonctionnalités de Windows 8 (y compris la gestion de plusieurs tâches avec ancrage), égale à 1366x768. Pour plus d’informations sur la vue ancrée, voir Recommandations pour les affichages ancrés et remplis.

Les applications du Windows Store ne fonctionnent pas sur les résolutions 1024x600 ou 1280x720.

Le tableau suivant indique les pratiques recommandées pour les principales résolutions d’écran.

Pratique	Description
Conception à une résolution minimum de 1024 x 768	Cette pratique offre les avantages suivants : Permet de s’assurer que tous les éléments de votre interface (navigation, contrôles, contenu, etc.) tiennent sur l’écran sans être tronqués.
Conception à une résolution optimale de 1366 x 768	Cette pratique offre les avantages suivants : Permet de s’assurer que tous les éléments de votre interface (navigation, contrôles, contenu, etc.) tiennent sur l’écran sans que des régions vides n’apparaissent.

 

Conception pour les écrans plus larges

Lorsque vous concevez une application pour de plus grands écrans, vous devez prendre en considération la gestion de la disposition, de l’esthétique, des proportions et des contrôles de votre application sur un espace plus conséquent. En outre, les applications peuvent disposer de n’importe quel nombre de dispositions de complexité variable. Chaque disposition peut être étudiée individuellement pour les écrans plus larges.

Le tableau suivant indique les pratiques recommandées pour les tailles d’écran plus grandes.

Pratique	Description
Remplissage de l’écran	Cette pratique offre l’avantage d’une expérience utilisateur des plus immersives quelle que soit la taille de l’écran. Les applications doivent remplir l’écran du mieux possible et être conçues de manière réfléchie afin de prendre en charge diverses tailles d’écran. Les utilisateurs qui achètent de grands moniteurs s’attendent à ce que leurs applications s’affichent toujours aussi bien sur ces écrans et qu’elles remplissent l’écran avec plus de contenu, le cas échéant.
Identification de la disposition appropriée : fixe ou adaptative	Deux techniques permettent de créer une application s’adaptant à diverses tailles d’écran. Le choix dépend de la complexité de la disposition et des scénarios d’utilisation.

 

Disposition fixe

Une disposition fixe est souvent utilisée pour les jeux ou les applications semblables composées essentiellement d’images bitmap. Dans la plupart des cas, la quantité de contenu de ce type de disposition est fixe (par exemple, un plateau de jeu) et il n’est pas possible d’afficher plus de contenu ou cela n’apporte aucune valeur ajoutée. Ces dispositions ne peuvent pas s’adapter dynamiquement à différentes tailles d’écran car elles sont conçues à l’aide de valeurs de pixels fixes. Windows 8 gère ces applications via une fonctionnalité d’ajustement intégrée à la plate-forme.

Disposition fixe : ajustement à l’écran

Si vous déterminez qu’une disposition fixe qui ne s’adapte pas aux différents écrans est nécessaire pour votre application, vous pouvez opter pour l’approche d’ajustement ci-dessus afin que votre disposition remplisse l’écran quelle que soit la taille de ce dernier, comme l’illustre l’image suivante.

Le tableau suivant indique les pratiques recommandées pour les applications utilisant la fonctionnalité d’ajustement :

Pratique	Description
Utilisation des résolutions de base dans un premier temps	Commencez par concevoir une disposition fixe avec les résolutions de base : 1024 x 768 et 1366 x 768. Cette disposition sera mise à l’échelle des écrans plus larges.
Placement du contenu fixe au sein d’un contrôle ViewBox	Le contrôle ViewBox ajuste la disposition fixe de façon à ce 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 en pixels fixes de votre disposition (par exemple, 1366 x 768).
À éviter : utilisation de contrôles adaptatifs (tels qu’AppBar) au sein de ViewBox	Ces contrôles s’adaptent automatiquement aux diverses tailles d’écran.
Définition d’un format cadre et d’une couleur	Les dispositions d’application 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 définition d’un format cadre et d’une couleur en harmonie avec la couleur de l’application ou du matériel offrira une expérience agréable. La couleur du cadre dépend de la couleur d’arrière-plan de la disposition de premier niveau de votre application. 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 fonctionnalité d’ajustement met votre application à diverses échelles allant jusqu’à 200 % des dimensions de conception de votre application sur un moniteur de bureau de grande taille. 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 images deux fois plus grandes que la taille de conception afin qu’elles soient mises à une échelle inférieure et non supérieure. 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).

 

Disposition adaptative

Les dispositions adaptatives sont en majeure partie utilisées dans les applications de création, gestion et consommation de contenu. Dans la plupart des cas, ces dispositions se composent d’éléments proportionnels définis avec une structure de premier niveau. Par exemple, un lecteur de nouvelles dispose d’un en-tête, d’un pied de page et d’une région au centre pour le contenu. Ces dispositions changent et s’adaptent dynamiquement aux différentes tailles d’écran afin d’accueillir plus de contenu et d’obtenir un remplissage dynamique de l’espace conforme aux règles qui leur sont associées. Windows 8 gère ces applications via des techniques de disposition adaptative décrites de façon plus approfondie ci-dessous.

Disposition adaptative : gestion de l’espace

Si vous déterminez que votre application peut prendre en charge une disposition adaptative pour gérer diverses tailles d’écran, tenez compte des points suivants concernant l’utilisation optimale de l’espace disponible.

Le tableau ci-dessous indique les pratiques recommandées pour les applications utilisant une disposition adaptative :

Pratique	Description
Détermination de l’exploitation de l’espace disponible par chaque région adaptative	Pour chaque cellule identifiée comme adaptative dans le sens horizontal ou vertical, déterminez comment la disposition de votre application utilisera l’espace sur un écran plus large.
Détermination de la structure de premier niveau de la disposition	Cette structure doit décrire les régions de premier niveau de votre application. Elle doit indiquer où se trouvent les régions de l’en-tête, de la navigation et du contenu. L’exemple d’image suivant illustre une structure de premier niveau.
Détermination des parties fixes de la disposition par opposition à ses parties adaptatives	Déterminez le dimensionnement de chaque cellule de la structure de premier niveau dans le sens horizontal et vertical lorsque l’application s’affiche sur différentes tailles d’écran. Vous pouvez utiliser cette description de structure de premier niveau et le comportement de dimensionnement pour définir les paramètres d’un élément GridLayout.
Détermination des dimensions dans lesquelles les régions adaptatives s’adapteront	Pour chaque cellule identifiée comme adaptative dans le sens horizontal ou vertical, déterminez comment la disposition de votre application utilisera l’espace sur un écran plus large.
Détermination de l’exploitation de l’espace des régions aux dimensions adaptatives par l’application	Après avoir déterminé comment chaque région s’adaptera aux diverses tailles, l’étape suivante consiste à réfléchir à l’utilisation de cet espace par votre application. De nombreuses techniques, toutes prises en charge par la plate-forme et les contrôles Windows 8, peuvent être utilisées ou combinées au sein de votre application pour exploiter l’espace disponible.
Dimensionnement requis de la largeur et de la hauteur de toutes les vues de la collection à 100 %	Un contrôle ListView remplit automatiquement l’espace disponible avec d’autres éléments.
Utilisation d’une disposition multicolonne pour le texte là où cela est nécessaire	Une disposition multicolonne ajoute automatiquement des colonnes à des fins de lisibilité et organise le contenu de façon à remplir l’espace disponible.
Utilisation d’un élément canvas pour les images là où cela est nécessaire	L’élément canvas permet de remplir l’espace disponible par un élargissement automatique.
Affichage d’une plus grande quantité d’espace blanc	Maintenir la quantité de contenu de l’application affichée en compensant avec un espace blanc.
Affichage d’une plus grande partie de l’application	Afficher davantage de contenu de l’application. Selon la façon dont vous réaffichez le contenu, vous pouvez également afficher ou non davantage d’espace blanc—.

 

Test de la disposition de votre application

Il est important de tester vos applications sur différentes tailles d’écran. Nous sommes conscients que la plupart des gens ont un nombre limité d’appareils à disposition, c’est pourquoi nous permettons aux utilisateurs de tester leurs applications sur divers écrans dans des outils tels que Visual Studio 11. Grâce au simulateur Windows, les développeurs peuvent exécuter leurs applications en fonction de plusieurs tailles d’écran, orientations et densités de pixels, comme l’illustre l’image suivante.

Blend pour Microsoft Visual Studio 2012 pour Windows 8, présenté dans l’image ci-dessous, offre un menu lié à la plateforme permettant aux développeurs de concevoir leur application à la volée en fonction de différentes tailles d’écran et densités de pixels. La zone de dessin de Blend s’actualise de manière dynamique en fonction de l’option d’écran choisie dans le menu de plateforme.

Related topics

Recommandations en matière de dispositions

 

 

Build date: 7/2/2013