Dot.Blog

C#, XAML, Xamarin, UWP/Android/iOS

Windows Phone 8 : le casse tête de la taille des icônes

[new:31/12/2012]Si Windows Phone 8 reprend le concept de menu à tuile de WP7 déjà bien connu, c’est tout de même avec des variantes qui posent si ce n’est problème au moins question. Par exemple, quelle taille d’icône est utilisé selon le type de tuile et quel format donne le meilleur résultat ?

Deux questions en une

Nous voulons savoir deux choses :

  1. Quelle doit être la taille des icônes avec le IconicTileTemplate ?
  2. Quelle taille image est utilisée quand la tuile est en mode large ?

 

Le fait que la réponse n’est pas si évidente vient d’une discussion sur StackOverflow concernant la taille des tuiles et des marges que vous pouvez suivre ici (en anglais) : http://stackoverflow.com/questions/12837720/windows-phone-8-startscreen-tile-sizes-and-margins/13153522#13153522

Un set d’images et des tests

Lorsque la documentation n’est pas suffisante, reste les tests… et ici préparer un set d’images dans plusieurs dimensions.

Ainsi, un jeu d’icônes avec les tailles suivantes va être utilisé :

  • 110x110 px
  • 202x202 px
  • 72x110 px
  • 72x72 px

 

L’émulateur étant utilisé en mode 720p pour faire tourner les tests.

Je vous fais grâce des différents essais pour passer directement aux conclusions…

Ce qu’on peut en déduire

La première question était de savoir quelles images le IconicTileTamplate utilise. La réponse est simple :

Les images utilisées par ce template doivent avoir les dimensions suivantes :

  • 72x110 px en mode small
  • 132x202 en mode medium

 

Si on compare les tests avec une image carrée (202x202 px) qui semblerait, a priori, un meilleur choix, cela donne :

image

La taille 202x202 n’est pas celle que l’on pense… Bien que plus grandes elle apparait plus petite (seconde tuile) que l’image 132x202 qui donne en réalité le meilleur rendu (icône plus grande et plus lisible).

Lorsque la tuile contient du texte les choses changent car l’icône est alors réduite en bas à droite. C’est l’image small qui est utilisée par le template.

Là encore, on pourrait s’attendre à ce que le mode carré donne un meilleur rendu (le format se prêtant mieux à des scaling homothétiques en plus). Mais la vérité est ailleurs…

imageimageimage

L’image carrée 110x110 px (à gauche) est certes plus grande mais elle ne donne par un rendu très agréable (bien qu’il s’agisse ici d’une question de gout il faut l’avouer).

L’image carrée en 72x72 qu’on penserait bien taillée pour ce cas (à droite) montre un décalage d’alignement pour le moins déroutant.

Finalement l’image donnant le meilleur rendu (taille et positionnement) reste celle du milieu, en 72x110 px…

La seconde question était de savoir quelle taille image est utilisée par le template lorsque la tuile est en mode large. Et la réponse est : ça dépend !

Si la tuile ne contient rien d’autre que l’icône, le template utilise l’image medium, si la tuile possède un contenu en plus de l’icône, c’est l’image au format small qui est utilisée.

Conclusion

Les tests prouvent que la taille des icônes doit être bien choisie et que cette taille n’est pas celle qu’on penserait intuitivement… Les formats non carrés donnent les meilleurs résultats.

C’est tout bête mais il faut le savoir…

Stay Tuned !

blog comments powered by Disqus