Ciao a tutti, viste le numerose richieste ricevute, sia via mail che tramite il nostro forum, vi proponiamo oggi una pratica guida di riferimento, un mix di informazioni prelevate e tradotte direttamente dalla documentazione ufficiale Apple, che si rivelerà molto utile durante lo sviluppo delle nostre applicazioni iPhone e iPad e che riguarda la creazione delle icone e della splashscreen. In questo articolo non parleremo di “cose da grafici”, ma vedremo piuttosto i requisiti che questi elementi dovranno rispettare per essere ottimizzati al meglio all’interno delle nostre app, utile sia nel caso in cui realizzeremo noi stessi questi elementi, che nel caso in cui decidessimo di affidare lo studio grafico e la realizzazione a terzi (magari professionisti) a cui dovremo fornire le giuste indicazioni e specifiche.

Tipi di icone per applicazioni iOS

Partiamo da un punto fermo: tutte le applicazioni necessitano almeno di un’icona e di una splashscreen. Qesto non è un consiglio, ma un requisito essenziale per poter pubblicare le nostre applicazioni in App Store. E non possiamo certo aggiungere immagini completamente a nostro piacere, dovremo infatti rispettare formati e dimensioni particolari imposte proprio da Apple. Inoltre, se avete fatto caso, nel titolo di questa guida non abbiamo indicato “icona”, ma “icone”, infatti, spesso e volentieri nelle nostre app ci saranno icone differenti, ognuna indicata ad un particolare uso specifico.

Vediamo un breve elenco delle tipologie di icone possibili:

• icona applicazione (quella che viene visualizzata nella springboard) – RICHIESTA
• icona per App Store – RICHIESTA
• icona mostrata nei risultati delle ricerche Spotlight – RACCOMANDATA
• icona mostrata nelle impostazioni
• icona mostrata nei documenti propri della vostra applicazione
• icona per eventuali webapp o siti web
• icone per toolbar e navigation bar
• icone per le tabbar
• Icona Newstand

Come vedete esistono differenti tipi di icone e, anche se non tutte ci serviranno sempre, due di queste sono obbligatorie (quella dell’app stessa e quella per l’App Store) mentre, anche se non obbligatoria, è fortemente raccomandata la personalizzazione dell’icona che verrà visualizzata dopo una ricerca in Spotlight. Per tutte le altre tipologie, occorrerà realizzarle (ed eventualmente personalizzarle) solo se la vostra app integra gli elementi che le richiedono (TabBar, NavigationBar, Impostazioni, ecc.).

Specifiche per icone e splashscreen

A differenza di altre personalizzazioni grafiche presenti nelle nostre applicazioni, le icone e la splashscreen (anche questo ultimo elemento è obbligatorio) devono rispettare determinati criteri in modo tale che iOS possa visualizzarli in modo appropriato. Questi criteri riguardano il formato del file, le dimensioni e in alcuni casi il nome da assegnare al file grafico stesso.

La tabella seguente, ripresa dalla documentazione ufficiale Apple, contiente proprio questi requisiti da rispettare:

Oltre le dimensioni Apple raccomanda di utilizzare il formato .PNG per tutte le immagini e icone che inseriremo nelle nostre applicazioni.

Icona Applicazione

L’icona dell’applicazione la conosciamo tutti, è quella che viene mostrata nella home dei nostri iPhone, iPod o iPad ed è la stessa che dobbiamo “tappare” per poter avviare la nostra applicazione. E’ importante che questa sia gradevole e riconoscibile, in modo tale che i nostri utenti la trovino “al volo” tra la moltitudine di app scaricate. Se la vostra app è un gioco e implementa Game Center, questa icona sarà la stessa visualizzata all’interno della piattaforma di Social Gaming di Apple.

Occorrerà creare differenti versioni della stessa icona, ognuna ottimizzata per il device su cui sarà visibile. Se ad esempio l’applicazione in oggetto fosse un’universal app, dovremmo prevedere di realizzare l’icona dell’app in tutti i formati richiesti:

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

ATTENZIONE: Per far capire ad iOS quale icona mostrare in base al device in uso basterà semplicemente nominare le icone in un determinato modo (maggiori info più avanti in questa stessa guida).

Nel realizzare questo tipo di icona dovremo inoltre tener presente che iOS, durante la visualizzazione, aggiungerà per noi:

• Angoli arrotondati
• Ombra
• Effetto riflesso (se volessimo aggiungere un nostro riflesso possiamo disabilitare quello imposto di default inserendo la chiave “Icon already includes gloss and bevel effects” nel file “…Info.plist” della nostra applicazione)

Icona App Store

Come detto poco fa anche questa icona è richiesta. Occorrerà creare un’icona di dimensioni 512 x 512 pixel (1024 x 1024 pixels in alta risoluzione raccomandata) che verrà mostrata nell’App Store. Questa icona, non deve essere necessariamente identica all’icona precedente, anzi, viste le dimensioni maggiori è consigliabile arricchirla con maggiori dettagli, tenendo però conto che questra dovrà richiamare fortemente quella dell’applicazione stessa. Per questo tipo di icona non verrà aggiunto alcun tipo di effetto alla vostra realizzazione grafica, pertanto dovrete prevedere eventuali rifiniture voi stessi.

Dovreste prevedere l’implementazione di questa icona anche nel caso in cui foste al lavoro su un’applicazione da distribuire Ad-Hoc (in-house, ovvero internamente all’azienda e fuori dall’App Store) in quanto questa icona sarà la stessa mostrata nella libreria iTunes, insieme a tutte le altre applicazioni scaricate, installate e sincronizzate con i devices interessati.

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

Icona per risultati ricerche Spotlight e Impostazioni

Tutte le applicazioni dovrebbero prevedere l’implementazioni di questo tipo di icone. Se non doveste fare ciò iOS modificherà direttamente l’icona della vostra app riducendola e mostrandola, anche se studiarne una appositamente può rendere tutto più gradevole e riconoscibile.

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

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

Per iPad invece:

Per le impostazioni:

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

Per i risultati delle ricerche fatte con spotlight:

• 50 x 50 pixels
• 100 x 100 pixels (alta risoluzione)

Attenzione, la dimensione finale visualizzata di quest’ultima icona sarà 48×48 pixel (96 x 96 pixels in alta risoluzione). iOS, infatti, taglierà 1 pixel per lato dalla nostra realizzazione grafica per aggiungere l’ombra. Occorrerà quindi assicurarsi che la nostra rappresentazione grafica stia all’interno di questo limite.

Icona Documenti personalizzati dell’applicazione

Come sempre è preferibile prevedere icone personalizzate in ogni caso, le icone per documenti personalizzati dell’app non fanno eccezione, anche se Apple prevede di riutilizzare (modificando opportunamente e automaticamente) l’icona dell’applicazione da destinare a questo tipo di uso quando non presente una versione apposita.

Se vogliamo rifinire al meglio la nostra app anche con queste icone, questo è quanto dobbiamo tenere in considerazione:

Versioni per iPhone e iPod Touch:

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

Per le versioni iPhone e iPod Touch nulla di particolare da segnalare, occorre semplicemente creare le icone in formato .PNG delle dimensioni indicate sopra e iOS provvederà ad aggiungere la simpatica e tipica ombra.

Per le versioni iPad le cose si complicano un pochino, ma nulla di che. Vediamo di cosa si tratta.

Versioni per iPad:

Innanzitutto, anche qui, dovremo creare icone di dimensioni differenti, e nello specifico:

• 64 x 64 pixel
• 320 x 320 pixel

L’area utile, però, non è tutta questa, ma occorrerà lasciare dello spazio per gli effetti grafici che verranno inseriti automaticamente da iOS.

Per creare l’icona 64 x 64 pixel seguite questi semplici passi:

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

L’area utile ottenuta, di 44×59 pixel, sarà lo spazio in cui dovrete inserire la vostra rappresentazione grafica per l’icona. iOS sfrutterà lo spazio riservato tramite margini per inserire l’effetto “page curl” in alto a destra e la relativa sfumatura).

Per la versione da 320 x 320 pixel discorso analogo, ma dovrete lasciare rispettivamente:

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

Anche in questo caso l’area utile è inferiore e sarà pari a 220 x 295 pixel.

In entrambi i casi considerate che l’effetto “page curl” oscurerà parte della vostra rappresentazione.

Icone per WebApp e siti web

Per questo tipo di icona nulla di complesso o particolare da aggiungere. Potete far riferimento a quanto spiegato per l’icona dell’applicazione stessa. L’unica differenza sta nel fatto che qui potrete decidere di disattivare tutti gli effetti automatici aggiunti da iOS semplicemente rinominando il file in “apple-touch-icon-precomposed.png” prima di pubblicarlo online (compatibile da iOS 2.0 in poi).

Icone per Navigation Bars, Toolbars, e Tab Bars

Ogni qual volta sia possibile, Apple raccomanda di utilizzare bottoni e icone standard all’interno delle proprie applicazioni iOS. Tuttavia, le funzionalità delle nostre applicazioni non sempre sono standard e può capitare di dover disegnare le proprie icone anche per questo tipo di uso.

Ecco cosa conviene tenere a mente durante la realizzazione delle nostre icone:

• Questo tipo di 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 scambiate per quelle standard, piuttosto usate quelle già realizzate e fornite da Apple.
• Sforzatevi di creare icone fortemente riconoscibili e che i cui contenuti non siano offensivi per gli utenti delle vostre app.
• Assicuratevi di non rappresentare nelle vostre icone prodotti Apple, i quali sono protetti da copyright e, se riconoscibili, faranno si che la vostra app non venga accettata nello store.

Una volta deciso l’aspetto che avrà la nostra icona, dovremo realizzarla. Per questo seguite queste semplici linee guida:

• Utilizzate come colore il bianco unito alla giusta trasparenza
• Non includete ombre nella rappresentazione grafica di questo tipo di icone
• Usate l’anti-aliasing
• Se decideste di aggiungere uno smusso, assicuratevi che sia di 90° (per aiutarvi in questo, immaginate una sorgente luminosa posizionata in alto sull’icona)

Le dimensioni delle icone per toolbar e navigation bar sono:

Per iPhone, iPod Touch e iPad:

• Circa 20 x 20 pixels
• Circa 40 x 40 pixels (in alta risoluzione)

Le dimensioni, invece, delle icone per le Tab Bar sono:

Per iPhone, iPod touch e iPad:

• Circa 30 x 30 pixels
• Circa 60 x 60 pixels (in alta risoluzione)

ATTENZIONE: Le rappresentazioni grafiche che creerete per questi tipi di icona verranno utilizzati come maschera per la creazione delle icone vere e proprie, non è necessario, quindi, creare icone a colori. Inoltre non è necessario studiare una versione dell’icona standard ed una equivalente a item premuto, iOS farà questo per noi. Gli effetti aggiunti saranno automatici e non potremo cambiare il loro aspetto.

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
	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

Vediamo ora un elenco che ci tornerà utile quando dovremo nominare i nostri file di icona, in base al tipo di uso e dispositivo in cui verrà visualizzata. Ci basterà utilizzare questi nomi per far sì che iOS sappia quale mostrare. Fate attenzione a maiuscole e minuscole, i nomi dovranno essere esattamente così come li vedete:

• 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-72@2x.png – Icona applicazione iPad in alta risoluzione
• Icon-Small.png – Icona risultati ricerche spotlight (in iPhone e iPod) e Impostazioni (tutti i device).
• Icon-Small@2x.png – Icona risultati ricerche spotlight (in iPhone e iPod) e Impostazioni (tutti i device) in alta risoluzione
• Icon-Small-50.png – Icona risultati ricerche spotlight in iPad
• Icon-Small-50@2x.png – Icona risultati ricerche spotlight iPad in alta risoluzione

Splashscreen

Per migliorare l’esperienza dell’utente durante l’uso della nostra applicazione, utile nella fase di lancio dell’applicazione stessa, è necessario fornire una splashscreen. La splashscreen dovrebbe essere sempre un’immagine molto simile alla prima schermata che si presenterà a caricamento avvenuto.

Molti di noi, spesso, inseriscono il proprio logo, o un’immagine di presentazione, come splashscreen e, anche se Apple approva comunque queste app, converrebbe seguire le sue linee guida anche per questo tipo di elemento. Insomma, se il vostro logo fa parte della grafica della prima schermata che verrà visualizzata (in modo statico, in una porzione del display) allora è consigliato inserirlo anche nella splashscreen, in caso contrario occorrerà mettere semplicemente “lo sfondo” della prima schermata, o meglio l’insieme di elementi statici presenti all’interno della stessa. In questo modo l’utente avrà l’impressione che l’app sia già quasi completamente caricata fin dall’avvio.

Per la splashscreen di iPhone e iPod touch occorre creare una rappresentazione grafica delle seguenti dimensioni (che includono l’area solitamente dedicata alla Status Bar):

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

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

Modalità portrait:

• 768 x 1004 pixels
• 1536 x 2008 pixels (alta risoluzione)

Modalità landscape:

• 1024 x 748 pixels
• 2048 x 1496 pixels (alta risoluzione)

Ricordate che se la vostra applicazione è in grado di avviarsi in entrambe le modalità di visualizzazione (portrait e landscape) occorrerà inserire una splashscreen per ogni tipo di orientamento previsto.

Approfondimenti

>> iOS UI Element Usage Guidelines

>> Custom Icon and Image Creation Guidelines