Recommandations en matière de mise à l’échelle d’après la densité en pixels

Article
05/18/2015

Les applications Windows Runtime (qui s’exécutent sur Windows, Windows Phone ou les deux) sont mises à l’échelle automatiquement par le système pour garantir une lisibilité et une fonctionnalité cohérentes quelle que soit la densité en pixels de l’écran. Suivez les recommandations ci-dessous pour préserver la qualité de l’interface utilisateur de votre application quand elle est mise à l’échelle pour des appareils ayant différentes densités en pixels.

Ces recommandations ne s’appliquent pas aux applications Windows Phone qui utilisent Silverlight. Pour obtenir une aide spécifique à Silverlight, voir Multi-resolution apps for Windows Phone 8.

Différence de densité en pixels entre une tablette standard et une tablette HD

Description

Sans mise à l’échelle, les tailles physiques des objets à l’écran diminuent à mesure que la densité en pixels d’un appareil augmente. Lorsque les éléments d’interface utilisateur sont trop petits pour l’interaction et que le texte est trop petit pour être lu, Windows met votre application à l’échelle automatiquement en fonction des plateaux d’échelle suivants :

Applications du Windows Store :

1.0 (100 %, aucune mise à l’échelle n’est appliquée)
1.4 (mise à l’échelle à 140 %)
1.8 (mise à l’échelle à 180 %)

Applications du Windows Phone Store :

1.0 (100 %, aucune mise à l’échelle n’est appliquée)
1.4 (mise à l’échelle à 140 %)
2.4 (mise à l’échelle à 240%)

Windows détermine quel plateau de mise à l’échelle est à utiliser en fonction de la taille d’écran physique, de la résolution de l’écran, la résolution en PPP de l’écran et le facteur de forme. Si les spécifications de l’écran respectent un seuil spécifique, Windows utilise le plateau de mise à l’échelle supérieur suivant. Vous pouvez utiliser ResolutionScale (Windows) ou RawPixelsPerViewPixel (Windows Phone) pour déterminer le facteur d’échelle.

Votre application sera mise à l’échelle automatiquement par le système, mais pour vous assurer que votre interface utilisateur fonctionne quelle que soit la densité en pixels de l’appareil, adoptez les recommandations suivantes pour préparer votre application pour la mise à l’échelle.

Pratiques conseillées et déconseillées

Utilisez le format SVG (Scalable Vector Graphics). Windows met automatiquement ces formats à l’échelle sans artefact visible. Pour les applications JavaScript, utilisez le format SVG. Vous pouvez utiliser des graphiques définis par le code XAML dans les applications en C#, C++ ou Visual Basic.
Utilisez le chargement des ressources pour les images bitmap dans le package d’application et fournissez une image distincte pour chaque facteur d’échelle. Incluez le facteur d’échelle dans le nom de votre fichier image (par exemple, Assets\Square7070Logo.scale-100.png). Notez que Windows charge automatiquement l’image correspondant à l’échelle actuelle. L’exemple de mise à l’échelle en PPP montre comment utiliser le chargement des ressources pour les images.

Pour plus d’informations sur les conditions requises applicables aux images lors de la certification d’application, voir Choix des images de votre application. Pour plus d’informations sur les conventions d’affectation de noms, voir Démarrage rapide : utilisation de ressources de fichiers ou d’images (applications du Windows Store en JavaScript et HTML) ou Démarrage rapide : utilisation de ressources de fichiers ou d’images (applications du Windows Store en C#/VB/C++ et XAML).
Lors de la création de vos ressources pour différents plateaux de mise à l’échelle :
- Ne concevez pas d’images bitmap à 100 % avec une mise à l’échelle manuelle vers le haut. Même si vous utilisez un logiciel graphique de haute qualité, les résultats seront sans doute flous.
- Sachez que la mise à l’échelle vers le bas d’une grande image à résolution élevée ne produit pas toujours des résultats nets. Toutefois, si le vecteur d’origine n’est pas disponible, il vaut mieux effectuer manuellement une mise à l’échelle vers le bas d’un fichier haute résolution plutôt qu’une mise à l’échelle vers le haut à partir d’un fichier de faible résolution.
Si votre application charge des images au moment de l’exécution à l’aide de code (par exemple, si vous utilisez DirectX, et non XAML ou HTML, pour créer votre interface utilisateur), utilisez la propriété ResolutionScale (Windows) ou RawPixelsPerViewPixel (Windows Phone) pour déterminer l’échelle et charger manuellement les images en fonction du pourcentage de mise à l’échelle.
Utilisez les API Thumbnail pour les images du système de fichiers. Les API de miniatures optimisent les performances en mettant en cache de petites versions de l’image. Pour plus d’informations, voir Accès efficace au système de fichiers.
Spécifiez une largeur et une hauteur pour vos images au lieu de recourir au dimensionnement automatique, pour éviter que la disposition ne change quand de plus grandes images sont chargées.
Utilisez des unités et sous-unités de grille typographique. Utilisez des tailles définies de grille typographique de 20 pixels pour les unités principales de la grille et 5 pixels pour les unités secondaires, pour éviter un décalage des pixels lié à un arrondi de ces derniers. Les unités dimensionnées divisibles par 5 pixels ne présentent aucun arrondi de pixels.
Utilisez la requête multimédia relative à la résolution pour les images Web distantes. Si votre application utilise JavaScript et que vous avez une image Web distante, utilisez la fonctionnalité de média de résolution CSS @media avec la propriété background-image pour remplacer les images au moment de l’exécution.
N’utilisez pas d’images dont la taille n’est pas un multiple de 5 pixels. Un décalage de pixels peut se produire pour les unités qui ne sont pas des multiples de 5 pixels durant une mise à l’échelle égale à 140 %, 180 % et 240 %.