Share
C'è un sacco di "processi" che vanno nella progettazione di dispositivi mobili, ma a volte vuoi semplicemente saltare dentro e sporcarti le mani! Questo post è progettato per fornire gli strumenti necessari e il design di base e i requisiti tecnici necessari per iniziare rapidamente.
Se non hai ancora letto le Linee guida per l'interfaccia Apple per iPhone e iPad, dovresti. Sono molte informazioni, ma vale il tempo speso per capire come Apple pensa al design delle applicazioni. Queste guide specificano anche le specifiche dettagliate per dimensioni dello schermo, dimensioni dell'icona e risoluzione. Successivamente, affronterò alcune domande frequenti e riassumerò queste specifiche in un formato facile da digerire!
Lo schermo retina per iPhone è una cosa spettacolare da vedere. Quando visualizzi lo schermo vecchio e nuovo fianco a fianco, è ovvio che ci sono dei cambiamenti in questo display che influenzano il design della tua app. Guarda questo video di confronto side-by-side.
Puoi vedere nel confrontare i due dispositivi che le dimensioni dello schermo per iPhone 4 sono invariate rispetto al modello precedente. Tuttavia, sia la dimensione dello schermo dell'iPhone 4 che la densità dei pixel dello schermo è DOUBLED, che offre una dimensione dello schermo di 640 x 960px (rispetto alla precedente dimensione 320 x 480px) e un enorme 326 pixel per pollice (rispetto ai precedenti 163ppi). Questo nuovo schermo schiaccia i 4 pixel dove ne era usato uno - ecco perché le immagini appaiono così nitide e deliziose!
Leggendo la risoluzione dello schermo è facile confondersi rapidamente. Il fatto è che il tipo di file finale esportato su iPhone è in genere .png e Xcode non considera il valore ppi salvato durante il rendering delle immagini. Se segui le dimensioni specificate di seguito, sarai in buona forma!
| iPhone 3.0 Risoluzione dello schermo: 72 ppi Dimensione dello schermo: 320 x 480 px Dimensione dell'icona: 57 x 57 px Formato del file: PNG-24 | iPhone 4.0 Risoluzione dello schermo: 72 ppi Dimensioni della tela: 640 x 960 px Dimensione dell'icona: 114 x 114 px Formato del file: PNG-24 | iPad Risoluzione dello schermo: 72 ppi Dimensioni della tela: 768 x 1024 px Dimensione dell'icona: 72 x 72 px Formato del file: PNG-24 |
Icona: 512 x 512 px (.tif, .jpg o .png, 72dpi, RGB)
Schermate per iPhone: 320 x 480 px o 640 x 860 px (.tif, .jpg o .png, 72dpi, RGB)
Schermate iPad: 1024 x 768 px (.tif, .jpg o .png, 72dpi, RGB)
Mentre stiamo discutendo le dimensioni dello schermo, è importante parlare del futuro dei dispositivi digitali in generale. Non sono un indovino, ma solo nell'ultimo anno non ci sono dispositivi touch screen segreti di tutti i tipi che si moltiplicano come conigli e producono prole con schermi di dimensioni variabili. Aye! Come designer, ciò significa che dobbiamo essere preparati a tradurre i progetti su più dispositivi e sistemi operativi.
Un ciclo di vita dell'app può eseguire uno dei molti corsi. Alcune app si trovano esclusivamente su una piattaforma, altre si espandono su altri dispositivi mobili o addirittura su una presenza basata sul Web. La creazione di grafica scalabile consente di risparmiare il mal di testa di ricreare la grafica per ogni piattaforma specifica. L'utilizzo di livelli di forma o oggetti intelligenti vettoriali è il modo migliore per gestire la proliferazione di dimensioni dello schermo e sistemi operativi.
La progettazione di icone per iPhone è stata la mia prima introduzione alla decisione di "iniziare in piccolo e in scala" o "iniziare in grande e ridimensionare". Per me, è diventato ovvio dopo alcune esecuzioni che hanno progettato per lo schermo 320 x 480px e poi ridimensionato fino a 640 x 960 px è l'opzione migliore. La progettazione per le più piccole dimensioni dello schermo elimina la delusione di perdere i dettagli quando un progetto deve essere ridimensionato in seguito.
Supponiamo che tu abbia progettato un'app per un iPhone 3.0 e desideri preparare questa app per il display Retina per iPhone 4. cosa fai? Basta ridimensionare da 320 x 480 a 640 x 960? Sì. Il problema è che se non hai creato tutti i tuoi elementi grafici usando i livelli di forma o gli oggetti intelligenti vettoriali, le immagini sembreranno pixelate e sgranate.
Sia per iPhone che per iPad l'area di destinazione minima per il tocco di una mela è di 44 x 44 pixel. Lascia fare ad Apple per quantificare la dimensione media dei polpastrelli degli esseri umani. :) Se vuoi andare più piccolo, assicurati di spazio sufficiente per le aree tap-in per evitare mis-tap.
"Testare" un progetto può sembrare strano, ma la progettazione di un dispositivo mobile su un monitor portatile o desktop può essere complicata. Anche se segui le linee guida standard come la regola del target dei tocchi 44 x 44px, le proporzioni e le dimensioni potrebbero apparire significativamente diverse se visualizzate sul dispositivo rispetto allo schermo del tuo computer.
Il modo più semplice per testare il tuo design è "Salva per Web" ogni modello di schermo in formato .png e sincronizzarlo con il telefono usando iPhoto. Una volta sincronizzate le immagini, puoi sfogliare e simulare l'aspetto della vera app. Questo è anche un ottimo modo per condividere mockup con i clienti per dare loro una vera anteprima dell'app.
Ora che hai delle nozioni di base, è ora di iniziare a progettare! Fortunatamente ci sono molte risorse disponibili per aiutarti a familiarizzare con i vari elementi dell'interfaccia iPhone e iPad. Anche se il tuo obiettivo è creare interfacce completamente personalizzate, questi modelli sono utili per ottenere una griglia di base o le dimensioni degli elementi sullo schermo correttamente proporzionate.
iPhone GUI PSD di Teehan + Lax
iPhone GUI PSD Retina di Teehan + Lax
Stencil per iPhone per OmniGraffle di Patrick Crowley
Elementi dell'interfaccia utente iPhone per iPhone di Mercury Intermedia
Stencil per iPad per OmniGraffle di Information Architects
iPad GUI PSD di Teehan + Lax
GUI Vector iPad dalla libreria di icone
Tutte le risorse grafiche che verranno utilizzate per creare un'app vengono esportate nel formato Portable Network Graphics (.png). Tecnicamente, l'iPhone può visualizzare anche altri formati di file, ma i file PNG vengono automaticamente ottimizzati dall'SDK di iOS, e di conseguenza dovrebbe essere il formato preferito.
Questo vale per tutti gli elementi (pulsanti nav, barre, ecc.) E qualsiasi altra immagine mostrata nell'app. Ad esempio, supponiamo che la tua app sia un portfolio per un fotografo. Le foto in mostra verrebbero esportate anche in formato .png.
L'impostazione per esportare il formato .png in Photoshop (File> Salva per Web e dispositivi) ha il seguente aspetto:
Prima di consegnare i tuoi file a uno sviluppatore, è importante capire le loro capacità per quanto riguarda l'affettatura e la cubettatura del file. Se il tuo sviluppatore ha esperienza nell'affettare ed esportare, può essere un enorme risparmio di tempo per scaricare quella attività. Personalmente, preferisco tagliare tutti i miei file per garantire che tutte le immagini siano suddivise correttamente.
Quando salvi le tue immagini finali, prova a utilizzare convenzioni intuitive di denominazione dei file che renderanno più facile localizzare e referenziare i file immagine corretti per il tuo sviluppatore. Ecco alcuni esempi di prefissi e suffissi che uso:
Un altro strumento che uso per comunicare con gli sviluppatori è un file .pdf che include tutte le schermate più note relative al design. Definisco i caratteri tipografici, le dimensioni, l'interlinea e tutti gli altri stili, quindi c'è un riferimento facile che lo sviluppatore può utilizzare senza dover aprire Photoshop. Un'altra risorsa che fornisco, specialmente quando sto lavorando con sviluppatori esterni al sito, è uno screencast (ScreenFlow e iShowU sono i miei preferiti) dell'applicazione, guidandoli attraverso ogni aspetto del design. Ciò è particolarmente utile se l'app contiene animazioni e / o transizioni che sono meglio illustrate in un video.
Le specifiche tecniche non sono sexy ma sono importanti. Applica questi dettagli alla memoria e ti risparmierai un sacco di mal di testa lungo la strada!
Accentsconagua