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.

TermDescription

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égion vide de grande taille due à un manque de souplesse de la disposition

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.

PratiqueDescription

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.

PratiqueDescription

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 sur différentes tailles d’écran

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.

Ajustement dans le cas d’une disposition fixe

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

PratiqueDescription

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).

Redimensionnement d’images scalaires et vectorielles

 

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 sur différentes tailles d’écran

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 :

PratiqueDescription

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.

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.

Spécification de la structure

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.

Collection affichée sur un petit écran et un grand écran

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.

Disposition multicolonne sur un petit écran et un grand écran

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 avec élément canvas sur un petit écran et un grand écran

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.

Deux dispositions de vignettes avec 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—.

Deux dispositions de vignettes

 

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.

Simulateur Windows dans Visual Studio 11

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.

Menu de plateforme Blend avec une variété d’options de taille d’écran

Related topics

Recommandations en matière de dispositions

 

 

Build date: 7/2/2013

Afficher:
© 2014 Microsoft