Dimensions et wireframes pour l'écran iPhone

Concevoir des interfaces utilisateur pour iPhone ou iPod Touch ressemble à la conception pour Mac ou Windows, notamment l'utilisation de wireframes (maquettes filaires) pour créer des maquettes d'interface. Comprendre les dimensions et ratios de l'écran iPhone aide à créer des wireframes plus précis.

Dimensions de l'écran

L'iPhone original (2007) possède un écran 3,5 pouces, 480 x 320 pixels à 163 ppp. La taille physique n'a pas changé jusqu'à l'iPhone 4S, mais l'introduction de l'écran Retina sur iPhone 4/4S porte la résolution à 326 ppp (960 x 640 pixels). Dans les deux cas, les dimensions physiques sont 2,94 x 1,96 pouces, ratio 1,5:1. L'iPod Touch utilise le même écran que l'iPhone original jusqu'à sa 3e génération, puis passe au Retina pour la 4e.

Wireframes iPhone

Pour créer vos propres gabarits wireframe, utilisez le ratio 1,5:1 et dimensionnez vos éléments d'interface en conséquence. Si vous concevez un site ou une application web compatible iPhone, les éléments d'interface de Safari peuvent réduire la surface d'écran utilisable. Apple propose une API pour masquer l'interface de Safari et permettre à une web app d'utiliser tout l'écran, et vous pouvez configurer les paramètres de viewport pour un mise à l'échelle optimale dans Safari.

Outils de wireframing

Des applications tierces comme FlairBuilder ou Axure RP, ou des gabarits pour Photoshop ou OmniGraffle, peuvent accélérer la conception. Beaucoup offrent des éléments d'interface standards en glisser-déposer et aident à suivre les recommandations de design d'Apple.

Bonnes pratiques

Apple recommande de concevoir en « points » plutôt qu'en pixels pour des dimensions d'éléments d'interface cohérentes entre modèles. Par exemple, la taille minimale confortable pour un élément interactif est 44 x 44 points : 44 pixels carrés sur l'écran original, 88 pixels carrés sur Retina. Apple suggère aussi de prévoir les deux orientations, mais de démarrer en portrait car l'écran d'accueil n'apparaît qu'en portrait. Plus de conseils sur developer.apple.com.