Prendendo spundo dall’articolo dal sito Neven Mrgan’s Tumbl :

Immaginiamo di voler disegnare l’icona per un’applicazione IOS. L’applicazione è universale, così dovrebbe funzionare su tutti gli iPhone (e iPod Touch), e su iPad.

I designer sono abituati a progettare icone in varie dimensioni.

Ecco un tipico file PSD per un’icona IOS:

Questa immagine è basata sul file icone in PSD iPhone di Sebastiaan de With, un documento che viene spesso aggiornato.
Si noti che le icone avranno una maschera arrotondata.

Riassumiamo tutte le diverse dimensioni delle icone e come vengono utilizzate:

1). 57 px, iPhone – il classico.
2). 72 px, iPad
3). 114 px, iPhone 4 – assicurarsi che la propria icona risplenda sul Retina Display.
4). 512 px, iTunes – Usato in iTunes e App Store, dove è mostrato in dimensioni fino a 175 px. Purtroppo, non è possibile fornire direttamente la versione 175 px .
5). 29 px, Impostazioni iPhone / Spotlight, Impostazioni iPad – utilizzati in queste visualizzazioni tabella. Minore, ma pur sempre importante!
6). 48 px, Spotlight iPad – Yup, il dispositivo iPad utilizza una dimensione diversa per Spotlight e Impostazioni. Questa dimensione è controversa! Apple docs effettivamente sostiene che l’icona è di 50 px, ma poi c’è questa nota: la dimensione visiva finale di questa icona è di 48 x 48 pixel. iPhone OS trim 1 pixel da ogni lato del disegno e aggiunge un’ombra. Assicurati di tener conto di questo, come si progetta la propria icona.
7). 58 px, iPhone 4 Impostazioni / Spotlight – necessario preparare entrambe le versioni 57 e 58 px , sara’ complicato allineare tale icone se c’è una linea che nel mezzo…
8). 64 px icona del documento – per applicazioni IOS in grado di fornire le icone dei documenti. Benche’ non sia ancora ben chiaro come utilizzare questa ma viene segnalata da apple e non è una cattiva idea iniziare a pianificare subito il suo utilizzo.
9). 320 px icona del documento.
10. Apple consiglia almeno 2 nuovi formati per iPad futuri, 144 px e 96 px.

La tabella riepilogativa ufficiale Apple, contiente i requisiti da rispettare:

Splashscreen (richiesta)320 x 480
640 x 960 (alta risoluzione)Modalità portrait: 768 x 1004
Modalità landscape: 1024 x 748

Descrizione Dimensioni per iPhone e iPod touch (in pixels) Dimensioni per iPad (in pixels)
Icona Applicazione (richiesta) 57 x 57
114 x 114 (alta risoluzione retina)
72 x 72
Icona per App Store (richiesta) 512 x 512 512 x 512
Icona per risultati ricerche Spotlight e Impostazioni (raccomandata) 29 x 29
58 x 58 (alta risoluzione)
50 x 50 per i risultati Spotlight
29 x 29 per le Impostazioni
Icona Documenti personalizzati dell’app (raccomandata) 22 x 29
44 x 58 (alta risoluzione)
64 x 64
320 x 320
Icone per WebApp e siti web (raccomandata per i custom document types) 57 x 57
114 x 114 (alta risoluzione)
72 x 72
Icone per Toolbar e Navigation Bar (opzionale) circa 20 x 20
circa 40 x 40 (alta risoluzione)
circa 20 x 20
Icone TabBar (opzionale) circa 30 x 30
circa 60 x 60 (alta risoluzione)
circa 30 x 30
Icona Newsstand per App Store (richiesta per Newsstand apps) Almeno 512 pixel sul lato più lungo Almeno 512 pixel sul lato più lungo

Nota Apple: Per tutte le immagini e le icone, il formato PNG è raccomandato.
La profondità di bit standard per le icone e le immagini è di 24 bit (8 bit ciascuno per rosso, verde e blu), più un 8-bit canale alfa.
Non è necessario vincolare la palette di colori web-safe. Sebbene sia possibile utilizzare la trasparenza alfa nelle icone create per barre di navigazione, barre degli strumenti e le barre sulla scheda, non usare in icone delle applicazioni.

Nota: e si sta lavorando su un icona webapp, Apple sembra fornire una singola immagine a 128 px che poi viene ridotta.

Solitamente le icone sono progettate con un obiettivo in mente.
Le piccole icone sono normalmente delle caricature, anche se tutte le icone potrebbero essere disegnate in vettoriale, la dimensione maggiore non sarebbe mai “scalata” bene.

Ecco l’icona per la cartella Immagini in Mac OS X:

Si noti che il ridimensionamento lavora per circa 64 px, dopo di che, le forme devono essere ridisegnate, più semplici e chiare, in modo che si possano leggere.

Creare l’icona grande come vettoriale non aiuta nelle dimensioni più piccole. Con un display ad alta risoluzione, infatti, fanno di questo problema è ancora più evidente perché un 64 px di oggi domani sara’ 128 px.

Quindi le icone he dovrebbe essere disegnate più grandi, e in vettoriale – in Illustrator o shape layers di Photoshop. Notiamo he l’utilizzo di Texture puo’ risultare frustrante dato che gli adeguamenti pixel devono essere fatti a manualmente. Il designer fondamentalmente desidera avere una versione dell’icona scalabile all’infinito.

Icona Applicazione

L’icona dell’applicazione è quella che appare nella schermata home di iPhone, iPod o iPad ed è quella che premiamo  per avviare l’ applicazione.

E’ necessario creare differenti versioni dell’ icona applcazione  per essere visibile sul device:

  • 57 x 57 pixels (Iphone3)
  • 114 x 114 pixels (alta risoluzione per device con retina display iPhone4)
  • 72 x 72 pixels (per iPad)

Nel realizzare questo tipo di icona dovremo tener presente che iOS aggiungerà per noi:

  • Angoli arrotondati
  • Ombra
  • Effetto riflesso (puo’ essere rimosso inserendo la chiave “Icon already includes gloss and bevel effects” nel file “…Info.plist” della nostra applicazione)

Icona App Store o Artwork

Per l’Artwork l’icona ha dimensioni 512 x 512 pixel e verrà mostrata nell’App Store. Questa icona, non deve essere necessariamente identica all’icona dell’applicazione, e, viste le dimensioni si puo’  arricchire con maggiori dettagli, tenendo però conto che questra dovrà richiamare lo stile e i colori si quella dell’applicazione stessa.

Questa icona sarà mostrata nella libreria iTunes, insieme a tutte le altre applicazioni scaricate, installate e sincronizzate con i dispositivi Apple interessati, e’ quindi necessaria anche per le distribuzioni Ad-Hoc (in-house –  fuori dall’App Store)

Inoltre questo tipo di icona, puo’ essere utilizzato da iOS quando nella vostra app avete documenti personalizzati e non avete implementato l’apposita icona dedicata a questo scopo.

Icona per risultati ricerche Spotlight e Impostazioni

In assenza di queste icone  iOS modificherà direttamente l’icona della vostra app riducendola e mostrandola, e quindi disegnarle può rendere tutto più gradevole e visibile.

Per iPhone e iPod Touch l’icona sarà la stessa, sia per i risultati delle ricerche spotlight che per le impostazioni:

  • 29 x 29 pixels
  • 58 x 58 pixels (alta risoluzione retina display iPhone 4)

Per iPad bisogna prevedere sempre due icone diverse, poiche’ le dimensioni cambiano per icona risultati ricerche e icona nelle impostazioni:

  • 29 x 29 pixels (per le impostazioni)
  • 50 x 50 pixels (per i risultati delle ricerche fatte con spotlight)

Attenzione, la dimensione reale visualizzata di quest’ultima icona sarà 48×48 pixel.  poiche’ iOS taglierà 1 pixel per lato dalla nostra realizzazione grafica per aggiungere l’ombra.

Icona Documenti personalizzati dell’applicazione

Apple prevede di utilizzare l’icona dell’applicazione , modificandola automaticamente, da destinare a questo tipo di uso quando non e’ presente una versione apposita.

Di seguito le dimesioni per le Versioni per iPhone e iPod Touch:

  • 22 x 29 pixels
  • 44 x 58 pixels (alta risoluzione)

Ovviamene anche in questo caso le icone sono  in formato .PNG  e iOS aggiungerà la tipica ombra.

Versioni per iPad:

  • 64 x 64 pixel
  • 320 x 320 pixel

Ricordiamo che e’ necessario lasciare dello spazio per gli effetti grafici che inserirà automaticamente iOS.

Per creare l’icona 64 x 64 pixel Apple suggerisce questi 4 passi:

  • Creare un’immagine di dimensioni 64 x 64 pixel in formato PNG
  • Inserire (tramite ad esempio le linee guida) un margine superiore di 1 pixel nella parte superiore
  • Inserire un margine inferiore di 4 pixel
  • Inserire un margine di 10 pixel a sinistra e a destra nell’immagine

L’area utile ottenuta sarà di 44×59 pixel. iOS inserirà l’effetto “page curl” in alto a destra e la sfumatura.

Per la versione iPhone 3 da 320 x 320 pixel dovrete lasciare:

  • 5 pixels di margine nella parte superiore
  • 20 pixels di margine nella parte inferiore
  • 50 pixels di margine nei lati dell’immagine

In questo caso l’area utile è inferiore e sarà pari a 220 x 295 pixel e c’e’ da considere che l’effetto “page curl” oscurerà parte della grafica.

Icone per WebApp e siti web

Vale quanto scritto per l’icona dell’applicazione stessa. La differenza sta nel fatto che potrete disattivare tutti gli effetti automatici aggiunti da iOS semplicemente rinominando il file in “apple-touch-icon-precomposed.png” prima di pubblicarlo online (procedura compatibile da iOS 2.0 in poi).

Icone per Navigation Bars, Toolbars, e Tab Bars

Apple raccomanda  e suggerisce di utilizzare bottoni e icone standard all’interno delle proprie applicazioni iOS. E’ possibile comunque disegnare le proprie icone anche per questo tipo di uso quando  le funzionalità della nostra app non sono standard.

Nel caso in cui decidessimo di realizzare delle nostre icone dobbiamo tener presente che:

  • L’ icona deve essere semplice, troppi dettagli potrebbero rendere la rappresentazione irriconoscibile e l’uso dell’app risulterebbe meno intuitivo.
  • Le icone non devono poter essere troppo simili a quelle standard, nel caso usate quelle già realizzate e fornite da Apple.
  • Le icone devono essere fortemente riconoscibili e in nessun caso devono essere offensivi per gli utenti internazionali delle vostre app.
  • Non rappresentare icone di prodotti Apple protetti da copyright. I diritti di autore faranno in modo che la vostra app non venga accettata nello store.
  • Utilizzare come colore il bianco unito alla corretta trasparenza
  • Non includere ombre
  • Usare l’anti-aliasing
  • Gli angoli smussati devono essere di 90°

Le dimensioni delle icone per toolbar e navigation bar sono:

Per iPhone e iPod Touch:

  • Circa 20 x 20 pixels
  • Circa 40 x 40 pixels (in alta risoluzione – Retina display iPhone 4)

Per iPad:

  • Circa 20 x 20 pixels

Le dimensioni delle icone per le Tab Bar:

Per iPhone e iPod touch:

  • Circa 30 x 30 pixels
  • Circa 60 x 60 pixels (in alta risoluzione – Retina display iPhone 4)

Per iPad:

  • Circa 30 x 30 pixels

Nota: Non è necessario creare questo tipo di icone utilizzando i colori. Non è necessario studiare una versione dell’icona standard a item premuto, iOS aggiungerà l’effetto autonomamente. Gli effetti aggiunti saranno automatici e non e’ possibile cambiare il loro aspetto.


ICONE STANDARD PER LE TabBar

Icona Nome Significato
Bookmarks Mostra i “segnalibri” dell’applicazione
Contacts Mostra i contatti
Downloads Mostra i download
Preferiti Mostra i preferiti
Featured Mostra contenuto in evidenza dell’applicazione
History Mostra la storia delle azioni degli utenti
More Mostra ulteriori Tab Bar Item
MostRecent Mostra gli oggetti recenti
UITabBarMostViewed MostViewed Mostra gli oggetti più popolari
Recents Mostra gli oggetti recenti visualizzati in un periodo definito
Search Entra in modalità ricerca
TopRated Mostra gli elementi più votati dagli utenti

 

Nomi dei file di icona

Di seguito un elenco per  nominare tutti i file di icona, basterà utilizzare questi nome file per far in modo che iOS riconosca quale mostrare. Il nome e’ case sensitive, quindi fare attenzione a maiuscole e minuscole:

  • Icon.png – Icona applicazione iPhone e iPod Touch
  • Icon@2x.png – Icona applicazione iPhone e iPod Touch in alta risoluzione
  • Icon-72.png – Icona applicazione iPad
  • Icon-Small.png – Icona risultati ricerche spotlight (in iPhone e iPod) e Impostazioni (tutti i dispositivi).
  • Icon-Small@2x.png – Icona risultati ricerche spotlight (in iPhone e iPod) e Impostazioni (tutti i dispositivi) in alta risoluzione
  • Icon-Small-50.png – Icona risultati ricerche spotlight in iPad

Splash

Apple suggerisce che per migliorare l’esperienza dell’utente è utile nella fase di lancio dell’applicazione stessa mostrare una splashscreen. La splash screen dovrebbe essere sempre un’immagine simile alla schermata che apparirà a caricamento avvenuto.

Molti inseriscono il proprio logo o un’immagine di presentazione e Apple approva spesso queste app, ma bisogna tener conto delle sue linee guida per non rischiare imbarazzanti rifiuti in fase di review.
In linea di massima, se il  logo fa parte della grafica della prima schermata che verrà visualizzata  è consigliato inserirlo anche nella splashscreen.

Per la splashscreen di iPhone e iPod touch le dimensioni , che includono l’area di 20 px (40px per retina display) dedicata alla Status Bar:

  • 320 x 480 pixels
  • 640 x 960 pixels (alta risoluzione)

Le dimensioni della splashscreen per  applicazioni iPad non includono l’area occupata dalla Status Bar e le dimensioni sono:

  • 768 x 1004 pixels (modalità portrait)
  • 1024 x 748 pixels (modalità landscape)

Eì necessario sempre inserire una splashscreen per ogni tipo di orientamento previsto  (portrait e landscape) .

Apple Developer Reference