Spesso ci capita di dover aggiornare le nostre applicazioni con  le immagini ad alta risoluzione necessarie per il nuovo iPad (iPad 3 o iPad 4). Fortunatamente il nuovissimo iPad Mini ha mantenuto la stessa risoluzione del primo degli iPad che è di 1024 x 768 pixels.
Poichè non è sempre semplice trovare i documenti ufficali di  Apple , in questo articolo ho nuovamente raccolto tutte le informazioni di cui abbiamo bisogno per aggiornare le icone, le immagini di intro o splash, e così via.

Innanzi tutto partiamo da questa utile tabella:

Ricordiamo che con il passaggio da iOS 5 a iOS 6 è nato il nuovo iPhone 5, insieme con l’iPod touch di 5 ° generazione.
Questi nuovi dispositivi Apple hanno solo un grande cambiamento che aggravia il lavoro di sviluppo delle App: la risoluzione dello schermo.
Questi dispositivi hanno un ampio schermo 4″ , WDVGA (Wide VGA doppia) 640 × 1136 pixels, 326 DPI-Retina display.
Questi dispositivi hanno la stessa larghezza 4/4S iPhone ma più 176 pixel di altezza in modalità Portrait.

App Icon Template

Segnalo nuovamente, come ho gia fatto in un’altro articolo, questo utilissimo tool scaricabile direttamente dal sito “appicontemplate.com” .

Scaricando il file otterrete un modello PSD del’ icona dell’App che, attraverso oggetti avanzati in Photoshop, vi permette di automatizzare il processo di esportazione delle varie dimensioni del file icon.png che devono essere necessariamente incluse nel bundle di ogni iOS App.

Attraverso questo modello Photoshop potremo modificare solo l’icona di dimensione più grande e verrà automaticamente eseguito il rendering che permetterà di avere le icone di dimensioni minori attraverso un veloce flusso di lavoro.
Questo modello è stato creato dal designer danese Michael Flarup.

Come si usa (How to) App Icon Template ?
Il modello funziona con Photoshop CS2 o versioni successive.
Basta aprire il file PSD con la vostra versione di Photoshop e fare “clic destro” sul LAYER (Livello) chiamato “EDIT THIS SMART OBJECT” (MODIFICARE QUESTO OGGETTO SMART) e premere  su ’Edit Contents’ (“Modifica contenuto”).
Verrà aperto il file Icon.psb e potrete creare il vostro Artwork  in questo canvas (quadro).
Dopo aver salvato il Icon.psb, dovrebbe essere automaticamente eseguito il rendering per le diverse dimensioni del file PSD principale .
E’ possibile utilizzere le Actions (azioni automatizzate) di Photoshop che sono in bundle con la risorsa per esportare i file dell’icona nelle versioni squared and rounded corner (squadrate e arrotondate).

Buon Design!

L’icona di avvio (launcher icon) è un elemento grafico che rappresenta la nostra applicazione. Le icone di avvio vengono utilizzate per avviare le applicazioni e appaiono sulla schermata iniziale del dispositivo utente.
Le icone di avvio possono essere utilizzate anche per rappresentare i collegamenti (shortcuts) nella vostra applicazione (ad esempio, un’icona di collegamento contatto permette di aprire le informazioni di dettaglio per un contatto).

Quando si disegna per Android è necessario creare le icone separate per tutti i diversi display presenti sul mercato dei device che montano android gli , schermi che hanno diverse densita di pixel potranno essere a bassa, media, alta e altissima densità. Questa differenziazione assicura che le icone verranno visualizzate correttamente in tutta la gamma di dispositivi su cui l’applicazione può essere installata. Vedere Tips for Designers (Suggerimenti per i progettisti) su come lavorare con più set di icone.

Obiettivi del icona di avvio
Esempio di launcher icons per sistemi e applicazioni di terze parti

Esempi di Icone di avvio (laucers icons) per OS Android

Figura 1. Esempi di launcher icons per system applications (sinistra) e applications di terze parti (destra).

Le icone di avvio dell’applicazione hanno tre obiettivi primari:
a. Promuovere il marchio e raccontare la storia delle app.
b. Aiutare gli utenti a scoprire l’applicazione in Android Market.
c. Permettere l’avvio dell’App.

a) Promuovere la storia del marchio
Le icone di avvio applicazione sono l’occasione per presentare il marchio e la storia della vostra applicazione .
Pertanto, si dovrebbe:

• Creare un’icona con uno stile unico e memorabile.
• Utilizzare una combinazione di colori che si adatta il vostro marchio.
• Non cercate di comunicare troppo con l’icona. Una semplice icona avrà più impatto e più memorabile.
• Evitare di includere il nome dell’applicazione nell’icona. Il nome della applicazione sarà sempre visualizzato accanto all’icona.

b) Aiutare gli utenti a scoprire l’applicazione in Android Market
Le icone di avvio fornicono una prima impressione agli utenti potenziali in Android Market. Un icona di alta qualità può influenzare gli utenti che scorrono gli elenchi di applicazioni.

Un icona ben progettata può essere un segnale forte che la vostra applicazione sarà di qualità altrettanto elevata. Consideriamo quindi di lavorare con un designer professionista per sviluppare un’icona di avvio per la nostra applicazione.

c) Funzionare e pemettere l’avvio
Un’icona di successo dovra’ essere ben definita in tutte le situazioni: su qualsiasi sfondo e accanto ad altre icone e widget app.

Per fare questo, le icone dovrebbero:

• Comunicare bene anche dimensioni ridotte.
• Lavorare con una vasta gamma di sfondi.
• Rispecchiare il tipo di illuminazione del laucher (top-lit).
• Se l’icona è 3D, utilizzare una prospettiva che non sia fuori luogo con le altre icone, forward-facing (rivolte in avanti) funziona meglio.
• Icone 3D funzionano meglio con una ridotta profondità.
• Avere un profilo unico per rendere veloce il riconoscimento, non tutte le icone Android app devono avere dimesioni quadrate.
• Le icone non dovrebbero presentare un quadro ritagliato di un’immagine più grande.
• Avere un peso simile ad altre icone. Le icone che sono troppo sottili o che non utilizzano abbastanza spazio spesso non attirano l’attenzione dell’utente, o possono non stare bene in tutti i contesti/background.

Dimensioni e formato
Le icone di avvio dovrebbero essere a 32-bit PNG con un canale alfa per la trasparenza. Le dimensioni finali un’icona di avvio corrispondente a una data densità dello schermo sono riportate nella tabella sottostante.

Table 1. Summary of finished launcher icon dimensions for each generalized screen density.
Tabella 1. Sommario delle dimensioni dell’icona per ogni densità schermo.

È anche possibile includere pochi pixel di padding (imbottitura) nell icone di avvio per mantenere un peso costante visivo con le icone adiacenti. Ad esempio, un’icona di avvio a 96 x 96 pixel xhdpi può contenere una forma 88x 88 pixel con 4 pixel su ogni lato per padding. Questa imbottitura o padding può essere utilizzata anche per fare spazio a un’ombra sottile, che può aiutare a garantire che le icone di avvio siano leggibili in tutto su qualsiasi colore di sfondo.
Icone delle applicazioni in Android Market
Se si pubblica l’applicazione su Android Market, è necessario fornire anche un icona artwork di 512 x 512 pixel ad alta risoluzione. Questa icona sarà utilizzata in Android Market e non sostituisce l’icona di avvio.

Per suggerimenti e raccomandazioni sulla creazione di icone ad alta risoluzione di avvio che può essere facilmente scalata fino a 512×512, si possono vedere Suggerimenti per Designer sul sito Android Developer (Tips for Designers).

Per informazioni e specifiche sulle icone ad alta risoluzione per l’applicazione in Android Market, vedere anche il seguente articolo:
Graphic Assets for your Application (Guida di Android Market)

Cosa fare e cosa non fare
Di seguito sono riportati alcuni esempi presi dalla guida Android developers su come “fare e non fare” , sono esempi da prendere in considerazione quando si creano le icone per l’applicazione.

Disegno Troppo complicato ? Semplificare le icone non dovrebbe essere eccessivamente complicato. Ricorda che le icone di avvio saranno utilizzate a dimensioni spesso piccole, quindi dovrebbero essere distinguibili a dimensioni ridotte.

Icona ritagliata e opaca (cropped and glossy) ? Le icone non devono essere tagliate. Utilizzare forme uniche, se del caso, ricordate che le icone di avvio dovrebbe differenziare la vostra applicazione. Inoltre, non usare troppo lucido (glossy) a meno che l’oggetto rappresentato è un materiale lucido.

Troppo sottile? Le icone non devono essere sottili. Dovrebbero avere un peso simile a quello altre icone. Le icone troppo sottili non si distinguono bene con tutti i background.

Full-frame oppure sottilmente arrotondati e trattati ?Le icone dovrebbero utilizzare il canale alfa, e non dovrebbe essere semplicemente delle immagini full-frame. Distinguere , quando possibile, la propria icona con un lieve ma accattivante trattamento visivo.

fonte: libera traduzione dalle Android Guidelines

Pasticcini alle icone di iOS

Le icone e le immagini sono una parte fondamentale l’esperienza degli utenti iOS.
Lungi dall’essere un’elemento puramente decorativo, le icone e le immagini nelle nostre applicazioni svolgono un ruolo essenziale nel comunicare con gli utenti.

Per ottenere i migliori risultati, possiamo arruolare un grafico professionista. Un progettista ed esperto grafico può aiutare a sviluppare uno stile visivo integrato per la vostra applicazione e applicare tale stile a tutte le icone e le immagini del caso.

Apple consiglia di utilizzare le immagini in stile universale in modo che la gente possa facilmente riconoscerle. Eviteremo quindi di concentrarsi su  aspetti secondari o poco visibili.

I tecnici Apple abbracciano la semplicità. In particolare, di consiglia di evitare di stipare un sacco di immagini diverse nella vostra icona. Provate a utilizzare un singolo oggetto che esprime l’essenza della vostra applicazione. Si inizia con una forma di base per poi aggiungere i dettagli con cautela. Se il contenuto di un’icona o la forma è eccessivamente complesso, i dettagli possono diventare confusi e può sembrare sfocato quando ridotto in piccole dimensioni.

L’ utilizzo dei colori e ombre leggere possono aiutare l’icona a esprimere meglio il suo ruolo. Non aggiungeremo quindi il colore solo per fare l’icona più colorata. Inoltre, graduienti regolari di solito funzionano meglio della colore diffusion

In generale, bisogna evitare di utilizzare il testo “greco” o linee ondulate per sottolineare il testo. Se si desidera visualizzare del testo nell’icona, ma non volete attirare l’attenzione sulle parole stesse, iniziare con un testo  poi renderlo piu’ leggibile con lo shirnk e/o raddoppiando i layer .

In generale, creare una versione stilizzata del soggetto piuttosto che utilizzare una foto, anche se a volte può essere opportuno utilizzare una foto (o uno screenshot) per un icona.

Se la vostra applicazione ha un’interfaccia utente molto riconoscibile, è consigliabile creare una rappresentazione di essa invece di utilizzare un immagine del software nell’icona dell’applicazione. La creazione di una versione migliorata dell’interfaccia utente è particolarmente importante in quanto gli utenti potrebbero confondere una versione più grande dell’icona con l’interfaccia stessa del app.

Evitare di utilizzare elementi di interfaccia iOS nel disegno. Non si vuole che gli utenti possano confondere le icone o immagini con l’interfaccia utente iOS.

Non usare le repliche di prodotti hardware di Apple nel disegno. I simboli che rappresentano i prodotti Apple sono protetti da copyright e non possono essere riprodotti in icone o immagini. In generale, è una buona idea per evitare repliche di tutti i dispositivi specifici nel disegno, perché questi disegni cambiano di frequente e le icone o immagini che si basano su di esse può apparire datato.

Non riutilizzare iOS icone delle applicazioni nella vostra interfaccia. Può essere fonte di confusione per gli utenti di vedere la stessa icona utilizzata per indicare cose leggermente diverse in luoghi diversi in tutto il sistema.

Ritrarre sostanze reali con precisione. Le icone che rappresentano gli oggetti reali dovrebbero apparire come se fossero fatti di materiali reali e con massa reale. Icone realistiche replicano con precisione le caratteristiche delle sostanze come tessuto, vetro, carta e metallo, e dovranno trasmettere l’idea del peso di un oggetto.

Utilizzare la trasparenza solo quando ha senso. La Trasparenza in un’immagine può aiutare a descrivere materiali come il vetro o la plastica, ma può essere complicato da usare in maniera convincente. Si consiglia quindi di non utilizzare la trasparenza nella vostra icona dell’applicazione.

Quando disegno un’applicazione per iPhone e  iPad, uno degli aspetti piu’ importanti per un App graphic designer è quello di disegnare icone, loghi, immagini di sfondo e di lancio (splash).
Rilevo, sopratutto confrontandomi con sviluppatori e creativi che c’e’ una grande confusione tra iPhone 3G, iPhone 3GS, iPod Touch 3, iPod Touch 4, iPhone 4 e iPad.
Esistono quindi delle differenze tra le dimensioni e il tipo di immagini che devo creare per un’applicazione o un progetto che possa essere ottimizzato per tutti i dispositivi sopra citati.

Cercando in rete ho trovato quindi una utile tabella per il nostri progetti iPhone /  iPad il cui “OS target” sia 3.2 o superiore:

Normalmente le icone  sono file in formato PNG con angoli a 90 gradi,  senza la trasparenza, senza livelli, e impostati a 72 PPI. iPhone OS arrotonda atomaticamente gli angoli, aggiunge un facoltativo effetto glossy e altri effetti.  Se non si vuole lasciare che l’iPhone / iPad OS applichi l’effetto gloss per le icone, gli sviluppatori dovranno aggiungere una chiave al info.plist chiamata UIPrerenderedIcon ed effettuare un controllo. La profondità di bit standard è di 24 bit + 8 bit alpha channel.

I progettisti e programmatori comprendono che le dimensioni degli elementi su schermi iPhone e  iPad non sono costanti. La differenza nelle dimensioni dello schermo e la funzionalità dello zoom sono un luogo comune, ma il formato PNG e 72 PPI è ancora il default.
Si noti che il formato PNG rigetta la Densità di pixel. La maggior parte degli editor di immagini, tra cui Adobe Photoshop, assumono che la densità dei pixel di un’immagine è di 72 se tale informazione non viene modificata.)

Disegnare icone per iPad può essere piu’ difficile. Alcuni progettisti rilasciano solo le icone standard per iPad poichè non riescono a comprendere che è meglio inserire anche alcune icone  di piccola dimensione, che sono comunque opzionali. Quindi è sempre meglio aggiungere delle piccole icone al progetto iPad,  nei formati di 64 × 64, 32x32px, e 24x24px 16x16px. I programmatori sapranno poi come includere questi file.

Si deve sapere che quando l’utente seleziona l’icona dell’applicazione principale l’applicazione inizia subito a caricarsi. E ‘importante rendere il tempo di lancio più breve possibile. Ogni app  iPhone e iPad puo’ avere una propria immagine di lancio (splash), che imita l’interfaccia utilizzando un’immagine statica. La splash page dovrebbe essere la più piccola possibile in modo da garantire un rapido caricamento del file. E’ quindi sempre sconsigliabile creare file di dimensioni vicine al megabyte.

Impostazione file Info.plist

Nel file Info.plist gli sviluppatori precisano gli orientamenti dell’applicazione assieme alle immagini di lancio correlate. Se manca, devono aggiungere queste righe:

Gli sviluppatori possono modificare precedenti convenzioni di naming , come spesso facciamo e possono usare il loro nome personalizzato per  icone e per lanciare i file di immagine.
Noi di norma siamo abituati a configurare le nostre applicazioni iPad in maniera diversa rispetto alle versioni iPhone, in modo da specificare i valori specifici del dispositivo per le chiavi Info.plist.
Ad esempio:

Esempio di icona e le impostazioni di immagine lancio in Info.plist per applicazioni universali. Piattaforma: iPhone OS 3.2 +

Note per gli sviluppatori:

Se l’applicazione supporta l’esecuzione di iPhone in iPhone OS 3.1.x o versioni precedenti, non è possibile utilizzare la chiave CFBundleIconFiles per specificare i file icona. È necessario creare le icone delle stesse dimensioni come indicato nella nostra tabella, ma ogni immagine deve essere chiamate come segue:

Icon.png – Icona per applicazioni per iPhone or iPod touch
Icon-72.png – Icona per applicazioni per iPad in un’applicazione Universale
Icon-Small.png - Risultati della ricerca e l’icona delle impostazioni su iPhone e iPod touch
Icon-Small-50.png – Risultati della ricerca in applicazioni iPad

Dalla versione 3.2 se si specifica un-Icon small.png o file Icon-Small-50.png nel bundle, il sistema preferisce quei file icona rispetto a quelle nella chiave CFBundleIconFiles e il sistema operativo preferisce il defination icon dell’applicazione nella chiave CFBundleIconFiles più di qualunque altra.

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

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.

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

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

•  iOS UI Element Usage Guidelines

• Custom Icon and Image Creation Guidelines

ChopShop 1.0 from David Keegan on Vimeo.