Dimensioni wireframe schermo iPhone

Progettare interfacce utente per iPhone o iPod Touch è simile a progettare per Mac o Windows, incluso l'uso di wireframe per creare mockup UI. Conoscere dimensioni e rapporti dello schermo iPhone aiuta a creare wireframe più precisi.

Dimensioni schermo

L'iPhone originale ha uno schermo 3,5 pollici, 480x320 pixel a 163 PPI. La dimensione fisica non è cambiata fino a iPhone 4S, ma con il Retina Display, iPhone 4 e 4S hanno 326 PPI e 960x640 pixel. In entrambi i modelli, le dimensioni fisiche sono 2,94 x 1,96 pollici, rapporto 1,5:1. L'iPod Touch usa lo stesso schermo dell'iPhone originale fino alla terza generazione, passando al Retina Display alla quarta.

Wireframe iPhone

Se create template wireframe personalizzati, usate il rapporto 1,5:1 e progettate gli elementi UI alla dimensione relativa appropriata. Se progettate un sito o web app compatibile iPhone, gli elementi UI di Safari possono ridurre le dimensioni utilizzabili. Apple offre API per nascondere l'UI di Safari e far usare tutto lo schermo a una web app, e potete configurare le impostazioni viewport per scalare ottimamente le pagine in Safari.

Strumenti wireframe

Applicazioni di terze parti come FlairBuilder o Axure RP, o template per Photoshop o OmniGraffle, possono aiutarvi a progettare più velocemente. Molti pacchetti offrono elementi UI standard drag-and-drop e altre funzioni, aiutandovi a seguire le raccomandazioni di design di Apple.

Best practice

Apple raccomanda di progettare app iPhone usando "punti" invece di pixel per misure più coerenti tra modelli. Ad esempio, la dimensione minima confortevole per un elemento UI azionabile è 44x44 punti: 44 pixel quadrati sull'iPhone originale, 88 pixel quadrati su Retina Display. Apple suggerisce anche che, sebbene possiate progettare per entrambi gli orientamenti, l'app dovrebbe avviarsi in verticale perché la Home appare solo in quell'orientamento. Più guide su developer.apple.com.