[Build 14] – From 4 to 40 inches Developing Windows Applications across Multiple Form-Factors

Mail de John
Jeudi 3 avril 2014 10:41

From 4 to 40 inches Developing Windows Applications across Multiple Form-Factors

Rappel de la différence entre la layout et les assets.
Layout: Physical Size and Shape, Viewing Distance, Effective Resolution
Assets: Detail Level, Scale Factor, Mastering

Il ne faut plus se demander quelle est la taille de mon application. Il faut se demander quelle forme a mon application (tall, thin, wide).

Démonstration de l’adaptabilité du layout et de la taille du contenu d’un jeu de morpion.
La résolution effective de l’application est importante, pas la taille de l’application.

Démonstration de l’utilisation des VisualState dans Blend pour s’adapter à la taille de l’application. (Utilisation d’un petit helper une classe de base d’une page qui change le VisualState en fonction de la taille).

Choisir de bons assets en fonction de la résolution. Si une image a beaucoup de détails en grande résolution et qu’on la redimensionne en une image à faible résolution elle sera très pixélisée. Il faut choisir une image avec moins de détails à faible résolution quitte à ce que l’image ne soit pas tout à fait la même que celle à haute résolution.

La densité relative des pixels d’une image est importante pas la densité réelle de pixels (DPI).
Il est important d’appliquer les conventions de nommage pour les assets (exemple image.scale-240.png) qui permettra de choisir automatiquement la bonne image en fonction de la résolution. Il faut quand même préciser la taille d’affichage de l’image car sinon le moteur de layout (HTML ou XAML) multipliera la taille de l’image au lieu de s’adapter au DPI.

Génération des assets :
– Déterminer la taille désirée de l’image en pixels effectifs
– Déposer ces assets dans le dossier partagé
– Multiplier la taille du layout par 2.4
– Déposer ces assets dans le projet Phone
– Vérifier que le résultat est le bon sur les appareils cibles (les émulateurs et simulateurs sont insuffisants pour une vérification d’assets)
– Si le resultat est bon vous avez fini
– Sinon essayez un scale factor supplémentaire de 1.4 ou 1.8

Création des masters assets :
– Dans l’idéal utilisez des assets vectoriels
– Sinon des bitmaps ayant un scale factor supérieur ou égal à 400%
– Exportez cet asset dans les scale factor cible nécessaires
– Ne pas oublier le niveau de détail
– Ne pas s’inquiéter si on a un asset à basse résolution

Mais où est le code ?
La plupart du temps il est inutile d’écrire du code pour gérer ce sujet.
Cependant voice quelques informations utiles pour la suite.
DisplayInformation.GetForCurrentView() :
– ResolutionScale (Windows (enum))
– RawPixelsPerViewPixel (WP (double))
– RawDpiX, RawDpiY (Ignore unless measuring real-world objects (ruler, hardware,etc..))
– LogicalDpi (avoid unless working with Direct2D or legacy code that assumes 96 DPI)

Silverlight : Information importante pour la migration d’application Silverlight vers WinRT. La résolution effective minimale pour les téléphones a changée. Il faut multiplier les constantes de taille par 0.8.

Utilisez les bons mots !
– Bien : Effective resolution / shape / scale factor
– Mal : physical resolution / orientation / DPI
Architecturez pour un layout flexible. Préférez l’utilisation de composants à celle de pages monolithiques :
– Laissez le moteur de layout faire son travail
– Focalisez-vous sur le bon set d’assets
– Commencez avec des master assets de haute résolution
– Ne générez que les scales factor nécessaires
– Assurez-vous que le niveau de détail est approprié

John

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s