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:

Device/Screen	File Name (PNG)	Icon Size (pixels)
iPhone and iPod
Application Icon for iPhone (retina display)	Icon@2x.png	114 x 114
Application Icon icon for iPhone	Icon.png	57 x 57
Settings/Spotlight icon for iPhone (retina display)	Icon-Small@2x.png	58 x 58
Settings/Spotlight icon for iPhone	Icon-Small.png	29 x 29
Launch image Portrait (retina display)	Default@2x.png	640 x 960
Launch image Portrait	Default.png	320 x 480
iPhone 5
Launch image for iPhone 5 Portrait (retina display)	Default-568h@2x.png	640 x 1136
iPad
Application Icon for the new iPad (retina display)	Icon-72@2x.png	144 x 144
Application Icon for the iPad	Icon-72.png	72 x 72
Settings/Spotlight icon for iPad	Icon-Small-50@2x.png	100 x 100
Settings/Spotlight icon for iPad	Icon-Small-50.png	50 x 50
Launch image Portrait (retina display)	Default-Portrait@2x.png	1536 x 2008
Launch image Portrait	Default-Portrait.png	768 x 1004
Launch image Landscape (retina display)	Default-Landscape@2x.png	2048 x 1496
Launch image Landscape	Default-Landscape.png	1024 x 748
iTunes App Store
App icon for the App Store (retina display)	iTunesArtwork@2x.png	1024 x 1024
App icon for the App Store	iTunesArtwork.png	512 x 512

 

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!

Prendendo spunto da  articoli trovati scorrendo diversi blogs, segnalo queste importanti informazioni utili a qualsiasi designer o sviluppatore che intenda disegnare UI (User Interface o Interfacce Utente) per differenti dispositivi smartphone.

Il successo di Android, come sistema operativo per dispositivi mobile, ha portato i produttori di smartphones a produrre una grande varietà di schermi (display) di diverse dimensioni  e risoluzioni. Nel Blog phonearena.com/ (http://www.phonearena.com/news/Display-Comparison-Apple-iPhone-5-vs-Samsung-Galaxy-S-III-vs-HTC-One-X-vs-Nokia-Lumia-900_id35171) viene fornito un elenco di dispositivi di esempio.

Considerando il dispositivo in orientamento verticale (Portrait), definiamo  l’asse X come  la larghezza in pixel e l’asse Y come lunghezza o l’altezza in pixel. Ovviamente si consideri che il dispositivo viene anche tenuto in orientamento orizzontale (Landscape) dato che anche Android ha il supporto per entrambi gli orientamenti.
Si potrà notare che il numero totale di pixel di uno schermo corrisponde al numero dell’asse X moltiplicato per il numero in Y. Maggiore è il numero di pixel per ogni pollice (Dpi)  più nitida sarà la visualizzazione delle immagine (a condizione che tali immagini siano ad alta risoluzione).

Esempio Android Screen Sizes and Resolutions

# Pixels	X	Y	ACRONYM	Device Example 1	Size	Device Example 2	Size
76800	240	320	QVGA	ZTE Tureis	2.6	Samsung Galaxy Fit (GT-S5670 )	3.3
96000	240	400	WQVGA400	Samsung Galaxy Apollo	3.2	Archos 32 Internet Tablet	3.2
153600	320	480	HVGA	HTC ChaCha	2.6	HTC Explorer	3.2
230400	360	640	nHD	Dell Aero	3.5	Dell Mini 3ix	3.5
307200	480	640	VGA	Motorola Pro+ MB632	3.1	Motorola Admiral	3.1
384000	480	800	WVGA800	Google Nexus One	3.7	Dell Streak 7	7
409920	480	854	WVGA854	Sony Xperia Ray	3.3	Archos 43 Internet Tablet	4.3
480000	600	800	SVGA	Elonex eTouch 702ET	7	Pandigital SuperNova	8
491520	480	1024	UWVGA	Acer Iconia Smart S300	4.8	Sony Tablet P	5.5
518400	540	960	qHD	Motorola Atrix	4	HTC Vivid	4.5
614400	640	960	DVGA	Sharp IS03	3.5	iPhone 4S	3.5
614400	600	1024	WSVGA	Amazon Kindle Fire	7	Archos 101 Internet Tablet	10.1
786432	768	1024	XGA	Archos 80 G9	8	Malata T8	9.7
921600	720	1280	WXGA720, HD, 720p	Galaxy Nexus (GT-i9250)	4.6	Sony Xperia S	4.3
983040	768	1280	WXGA	Ramos W15	8	LG Optimus PAD (V900)	8.9
1024000	800	1280	WXGA800	Samsung Galaxy Note (GT-N7000)	5.3	Motorola Xoom 2	10.1

L’iPhone 4S è indicato nella tabella per confronto, vedere la linea DVGA, non è un telefono Android.
Nota: a Full High Definition (FHD) o lo schermo 1080i/1080p è 1080 × 1920 che è 2.073.600 pixel.

Stimolato dal blog Tekeye.biz (http://tekeye.biz/2012/example-list-of-android-device-screen-resolutions-and-sizes) andrò ora a confrontare lo schermo HD da 4,8 pollici Super AMOLED del Samsung Galaxy S III, il display 4,7 pollici 720p Super-LCD 2  su HTC One X, e lo schermo del Lumia 900 con is suoi 4,3 pollici ClearBlack AMOLED che viene ostentato dalla Nokia.

Come per ogni confronto di dispositivi elettronici ciò che veramente conta non sono solo le specifiche hardware , ma bisogna vedere come questi telefoni se la cavano in situazioni reali, in quanto si sa, questo è esattamente ciò che più conta.

Vediamo quindi come se la cavano in termini di Luminosità e contrasto (Brightness and Contrast):

Non c’è niente di meglio per attirare la gente che avere un display luminoso, giusto? John V. di Tekeye ha quindi impostato manualmente tutti e quattro gli smartphone per la loro impostazione di luminosità più alta. I nuovi iPhone 5 di IPS-LCD schermo salta subito all’occhio per  avere la più alta luminosità,   il vantaggio è che quindi siamo in grado di avere visibile tutto sul display dell’iPhone 5 quando lo si utilizza all’aperto – anche quando il sole batte direttamente sulo schermo. Inoltre, il pannello Super-LCD 2  in uso da parte del HTC One X mostra il suo valore, in quanto si tratta di un pannello con un cuore LCD che dimostra bene il suo valore in condizioni esterne. Infine, il Samsung Galaxy S III e Nokia Lumia 900 sono allo stesso livello in termini di visibilità esterna, in quanto i rispettivi pannelli HD Super AMOLED e ClearBlack AMOLED sono così efficaci che ci permettono di vedere correttamente quando siamo fuor, ma allo stesso tempo, il calo di contrasto, inclinando leggermente provoca riflessi che interferiscono con la loro usabilità.

Risoluzione:

Leggendo sul foglio delle specifiche, si potrebbe supporre che i due smartphone Android  in questo confronto abbiano  la vittoria visto che hanno una  risoluzione di 720p, ma ancora una volta, ciò che si legge sulla carta e non tiene conto di densità di pixel. Tuttavia, se non dovessimo tenerne conto, allora  l’iPhone 5 dovrebbe essere preso in considerazione con la sua densità di pixel di 326 ppi. Tuttavia, prima di concretamente dire che è il vincitore all’unanimità, gli occhi hanno bisogno di confermare ciò che sembra ovvio.

Caricando il  sito web su tutti e quattro gli smartphone e, guardandoli, da una view ingrandita, è innegabile che la  risoluzione 640 x 1136  dell’ iPhone 5  presenta invisualizzazione dettagli più nitidi. In realtà, il testo sullo schermo ha spigoli vivi che aiutano a rafforzare le sue immagini nitide per renderli facilmente visibili ad occhio nudo. Allo stesso tempo, l’HTC One X da 4.7-pollici e 720p può visualizzare  immagini interessanti – però, la visualizzazione è un po ‘po’ più morbida, cercando intorno ai bordi, in parte a causa della sua densità di pixel inferiore che è di 312 ppi. Al terzo posto, è la  risoluzione del Samsung Galaxy S III da 4,8 pollici con 720 x 1280 px che impiega la PenTile Matrix. Indipendentemente da questo, la sua carenza non pregiudica l’aspetto dei  dettagli guardando il suo display da una distanza normale. E, infine, il Lumia Nokia 900 non riesce a stupire con il suo display da 4,3 pollici WVGA (480 x 800), come la sua risoluzione in pixel di 217  ppi si allontana  drasticamente dalla concorrenza, con conseguente immagini che mancano della stessa nitidezza dei concorrenti.

 

Recentemente in alcune app, abbiamo notevolmente diminuito le dimensioni del file IPA che inviamo ad Apple.
Sviluppando un’app con molti contenuti grafici siamo riusciti a ridurre di circa il 60% la dimensione del pacchetto da inviare ad Apple, il cosidetto bundle file.

Quando si sviluppa un’ universal  iPad / iPhone app e , sopratutto, se si vuole aggiungere il supporto per la visualizzazione retina per  il nuovo iPad 3 possiamo incombere i dimesioni del pacchetto piuttosto eccessive.
Molte app vengono pensata per avere una moltitudine textures a schermo intero , questo accade in quanto molti designers preferiscono illustrare al meglio le proprie idee. Tali immagini ,se pensate per iPad 3, alla dimesione di 2048 x 1536 e in formato PNG possono risultare molto pesanti. La conversione di alcune di queste immagini in formato JPEG farà risparmiare parecchio spazio.
E ‘un peccato che le jpeg non vengono caricate più rapidamente, ma alcuni PNG che possono essere anche maggiori du 10MB , quando vengono convertote in jpeg pesano circa ~ 200Kb.
Questo è  un buon primo passo, ma bisogna stare molto attenti a non deteriorare la qualità.

La conversione da png a jpg non basta: anche dopo aver convertito il maggior numero di grandi texture il peso del bundle IPA puo’ risultare ancora consistente.
Il nostro obiettivo è quello di essere quasi sempre sotto i 20 MB cosi’ che i vecchi dispositivi possano scaricare l’app anche senza il WiFi.

Leggendo tra i diversi siti ho trovato alcuni utili consigli nel blog di Sam Soffes (http://samsoff.es/posts/image-optimization-on-ios ) che in suo articolo consiglia l’utilizzo di  ImageOptim, un piccolo programma che ottimizza le immagini. Con questa app per Mac osx i flis vengono processato in modo da occupare meno spazio su disco e in modo che possano essere caricate più velocemente , attraverso l”uso de i migliori parametri di compressione provvedendo a rimuovere i commenti inutili e i profili colore. Il software gestisce PNG, JPEG e GIF animate.
ImageOptim integra perfettamente  i vari strumenti di ottimizzazione: PNGOUT, AdvPNG, pngcrush, esteso OptiPNG, jpegoptim, jpegrescan, jpegtran e Gifsicle.
Particolarmente adatto per la pubblicazione di immagini sul web (restringe facilmente le immagini  “salvate” per il Web in Photoshop) si è rivelto utile per creare applicazioni Mac e iPhone / iPad sempre più leggere.

Inoltre è possibile convertire molte immagini come PNG8;  in Photoshop, nel sezione File>Salva per Web  e’ possibile esportare come PNG8 invece di PNG24 quelle immagini che vanno bene come GIF. Anche se non supporta alpha variabile, è ideale per immagini semplici.
Sam considera  ImageOptim addirittura fantastico; processa le immagini attraverso una serie di strumenti comprimendo il più possibile e senza ridurre la qualità. Anche se avete salvato “for-web” tutte le immagini, ImageOptim è in grado di comprimere ancora oltre il 50%. Alcuni files hanno un incredibile riduzione sino al  90%.

Sam ha processato tutte le immagini attraverso ImageOptim per ben due volte. La seconda volta è stato in grado di comprimere alcune immagini ancora più in profondità.
E’ importante notare che tutto questo è fatto in compressione lossless.

E’ possibile di rendere le immagini ancora più leggere con ImageAlpha (dai creatori di ImageOptim). Si tratta di uno strumento che permette di creare immagini con alpha PNG8 variabile.
Ciò farà risparmiare molto spazio. Si tratta di un processo più manuale rispetto a ImageOptim, ma funziona bene per ingrandire le immagini con alpha che non hanno un molti colori.

Nota: Assicuratevi di disattivare l’ottimizzazione delle immagini Xcode o si annullerà tutto il vostro duro lavoro, quando crerete il vostro bundle.

Conclusione

Abbiamo sentito pareri contrastanti su questi prodotti. Alcuni sostengono di aver avuto problemi con questi strumenti, mentre altri sono pienamente soddisfatti.
Secondo la nostra esperienza tutto funziona abbastanza bene;
se state cercando di ridurre la dimensione dell’app (bundle), raccomandiamo quindi di utilizzare questi strumenti.

Per i piu’ esperti:
Se si desidera provare a fare una compressione ancora più elevata, potete provare ad utilizzare il fork di Scribd del AdvanceCOMP di John Englehart (il creatore di JSONKit);
si tratta di un prodotto un po troppo hardcore, ma si consiglia comunque -ai piu’ smanettoni- di fare un tentativo.

Di norma gli sviluppatori non sono guru del Photoshop e del design in generale e certamente odiano rifare il proprio lavoro per venir incontro alle esigenze degli esperti.
Così abbiamo deciso di segnalarvi una guida infographic pensata per i progettisti che intendono fare App per  iOS  e aiutarli spedire file corretti per lo sviluppatore.

Lo stile di infographic e’ quello di spiegare tutto con un’immagine, che vo proponiamo di seguito:

Innanzi tutto come vediamo nell’immagine e’ necessario ricordare le dimensioni dei differendi device di Apple.

Iphone e ipod touch fino alla terza generazione: 320 x 480 px / 163 PPI
Iphone4 e ipod tpuch di ultima generazione: 640 x 960 px / 326 PPI
iPad & iPad2 : 1024 x 768 px / 132 PPI
iPad 3 : 2048 x 1536 px / 264 PPI

Apple raccomanda di utilizare icone:

44×44 px per i bottoni di controllo

Un’altro suggerimento e’ quello di preparare le icone partendo da dimensioni 512 x 512 px e 1024×1024 px nel caso di iPad con retina display, facendo sempre attenzione a visonare il design quando queste vengono rimpicciolite.

Il resto dei suggerimenti sono molto piu’ chiari se leggete con attenzione cio’ che e’ segnalato nell’immagine postata sopra.

FONTE:   un post infographic, ovvero Tutto riassunto da un’immagine,   inserito nel blog FSM (http://www.funkyspacemonkey.com/ios-app-designers-guide-infographic)

Quando si decide di progettare un’App è sempre necessario seguire i principi di base della progettazione industriale.
Molte persone  pensano di commissionare un’app, ma quando si trovano a dover descrivere l’applicazione e quindi come la loro idea possa essere tradotta nell’esperienza dall’utente e nell’interfacia grafica (User Experience & User Interface),  si trovano impreparati e si nascondono molto spesso dietro frasi del tipo “non saprei questo è un lavoro per tecnici, pensateci voi tecnici!”.
Inutile aggiungere che quando poi i cosidetti “Tecnici” si mettono al lavoro queste persone, che non hanno vuluto delegare il concept, inizieranno a chiedere modifiche sostanziali dispensando consigli e ragguagli di ogni genere e quasi sempre solo dopo che l’app e’ arrivata alla fase finale del suo sviluppo.
E’ ben noto il concetto secondo il quale i “tecnici”, e gli ingegnieri, prima costruiscono il cuore dell’applicazione e poi ci adattano il design e fanno il contrario, loro malgrado, solo se il commitment e’ valido e convincente e, sopratutto, quando questo è deciso fin dall’inzio delle fasi di progettazione.
Di norma con l’approccio “fate voi che poi vediamo” , voluto dai professionisti distratti e poco preparati,  il risultato estetico finale può risultare quantomai scadente dato che ogni ingegniere sa bene che, prima di mettersi a scrivere codice, bisogna aver chiari i principi dell’interfaccia utente unitamente alla descrizione delle funzionalità legate all’esperienza dell’utente stesso.

Alcuni sofisti mi potranno criticare per l’uso della parola “utente”, che a volte risulta poco accattivante se si pensa che alla fine gli utenti non sono altro che persone, ovvero individui utilizzatori. Questa differenza di significato delle parole mi è molto chiara, ma per semplicità comunicativa e sopratutto per necessità di traduzione preferisco usare la parola “utente” o “utilizzatore” al posto dell’ “individuo“.

10 principi per un buon design di un’app e di un prodotto

Inanzi tutto,  per citare Steve Jobs,  propongo  una delle definizioni di design che più mi ha convinto:
“Il design è l’anima che si trova al cuore di un oggetto creato dall’uomo e che gradualmente si estrinseca ai piani esteriori.”

Di certo lo stesso Jobs si ispirava ai principi di Dieter Rams, ex-designer della Braun, che ha enumerato i suoi 10 principi per un  buon design di un prodotto:

• Un buon design deve essere innovativo.
• Un buon design deve rendere il prodotto utile.
• Un buon design deve essere dotato di estetica.
• Un buon design deve aiutare a capire il prodotto.
• Un buon design non deve essere invasivo, mancare di riservatezza.
• Un buon design deve essere onesto.
• Un buon design deve essere durevole.
• Un buon design è la conseguenza dell’ultimo dettaglio.
• Un buon design si deve preoccupare dell’ambiente.
• Un buon design deve contenere il minor design possibile.

Naturalmente è facile capire che questi principi si adattano sia al design dei prodotti industriali, ma anche per il design delle Applicazioni, sopratutto se queste verranno utilizzate sui prodotti che sono stati costruiti proprio secondo i buoni principi del design industriale, come lo sono tutti i prodotti Apple.

Progettare meglio, lavorare meno

Dieter Rams, creatore dei 10 principi, ha sempre espresso il suo approccio al design con la frase: “Weniger, aber besser” , ovvero “Meno, ma meglio” .
Il minimalismo , oltre ad essere molto elegante, è sicuramente il modo migliore per permettere a tutti gli utenti-utilizzatori di comprendere d’istinto il prodotto e le sue funzionalità e rende il prodotto stesso, o l’App,  amichevole all’uso (user friendly) e “puro”.

Di seguito riporto i commenti , tradotti dall’inglese, dello stesso Rams sui principi da lui stesso enunciati:

1.  Le possibilità d’innovazione non sono esaurite. Lo sviluppo tecnologico offre sempre nuove opportunità per il design innovativo. Ma il design innovativo si sviluppa sempre assieme alla tecnologia innovativa, e non può mai essere fine a se stesso.
   (The possibilities for innovation are not, by any means, exhausted. Technological development is always offering new opportunities for innovative design. But innovative design always develops in tandem with innovative technology, and can never be an end in itself )
2. Un prodotto viene acquistato per essere utilizzato. Esso deve soddisfare determinati criteri, non solo funzionali, ma anche psicologici ed estetici. Un buon design sottolinea l’utilità di un prodotto, mentre trascura tuuto ciò che potrebbe sminuirla.
   (A product is bought to be used. It has to satisfy certain criteria, not only functional, but also psychological and aesthetic. Good design emphasises the usefulness of a product whilst disregarding anything that could possibly detract from it. )
3. La qualità estetica di un prodotto è parte integrante della sua utilità, perché i prodotti che utilizziamo ogni giorno influiscono sulla nostra persona e il nostro benessere. Ma solo gli oggetti ben costruiti possono essere belli.
   (The aesthetic quality of a product is integral to its usefulness because products we use every day affect our person and our well-being. But only well-executed objects can be beautiful.)
4. Chiarifica la struttura del prodotto. Meglio ancora, si può far parlare il prodotto. Meglio se esso è auto-esplicativo.
   (It clarifies the product’s structure. Better still, it can make the product talk. At best, it is self-explanatory.)
5. I prodotti che soddisfano un fine sono come strumenti. Non sono né oggetti decorativi, né opere d’arte. Il loro Design dovrebbe quindi essere sia neutrale che sobrio, per lasciare spazio all’auto-espressione dell’utilizzatore.
   (Products fulfilling a purpose are like tools. They are neither decorative objects nor works of art. Their design should therefore be both neutral and restrained, to leave room for the user’s self-expression.)
6. Non costruire il prodotto in modo da farlo apparire più innovativo, potente o importante di quanto sia realmente. E non tentare di manipolare il consumatore con promesse che non possono essere mantenute.
   (It does not make a product more innovative, powerful or valuable than it really is. It does not attempt to manipulate the consumer with promises that cannot be kept.)
7. Evita di seguire la moda ma non appare mai antiquato. A differenza del design “alla moda”, il prodotto deve durare per molti anni – anche nella società dell’usa e getta di oggi.
   (It avoids being fashionable and therefore never appears antiquated. Unlike fashionable design, it lasts many years – even in today’s throwaway society.)
8. Nulla deve essere arbitrario o lasciato al caso. La cura e la precisione, nel processo di progettazione, mostrano il rispetto nei confronti dei consumatori.
   (Nothing must be arbitrary or left to chance. Care and accuracy in the design process show respect towards the consumer.)
9. Il Design offre un importante contributo alla salvaguardia dell’ambiente. Esso conserva le risorse e riduce al minimo l’inquinamento fisico e visivo durante tutto il ciclo di vita del prodotto.
   (Design makes an important contribution to the preservation of the environment. It conserves resources and minimises physical and visual pollution throughout the lifecycle of the product.)
10. Meno, ma meglio – questo perchè ci si concentra sugli aspetti essenziali, e i prodotti non sono appesantiti da elementi non essenziali. Torna alla purezza, torna alla semplicità.
    (Less, but better – because it concentrates on the essential aspects, and the products are not burdened with non-essentials.Back to purity, back to simplicity.)

Valutazione Euristica

A questo punto non mi resta che descrivere anche la cosidetta valutazione euristica.
La Valutazione Euristica è un metodo ispettivo che viene effettuato esclusivamente dagli esperti di usabilità  e consente di valutare se una serie di principi generali di progettazione sono stati applicati correttamente nell’interfaccia utente.
Le linee guida (“Ten Usability Heuristics”) su cui si basa questo tipo do valutazione sono state sviluppate negli anni 1990 da Jakob Nielsen e Rolf Molich e sono state pensate per i desktop software , ma anche in questo caso questi principi sono ancora validi per le applicazioni studiate per touchscreen, come le App iOS per iPhone e iPad ,  per le  app Android e Window Mobile.

 

Progettare indipendentemente dalla risoluzione dell’interfaccia utente è difficile, soprattutto se si deve programmare il codice del disegno.
Per semplificare questo processo di sviluppo è utile un’ applicazione di disegno vettoriale che genera istantaneamente codice Objective-C.
In questo modo è possibile progettare il design dei bottoni o di tutti quei componenti che possono essere visualizzati da iOS o OSX attraverso il codice; in questo modo l’app sarà di certo molto performante e avrà la qualità del design indipendente dalla risoluzione grafica del dispositivo, sia esso iPad3, iPhone4, iPad 2 o qualsiasi altro dospositivo apple.

Abbiamo utilizzato l’app PaintCode con iMac e la abbiamo scaricata dal mac app store. Il prezzo non è tra i più bassi ed è di 80 dollari, ma l’acquisto di questa app permette al programmatore di smettere di scrivere il codice di disegno e al designer piu’ avanzato di non lavorare direttamente su files grafici.

PaintCode è una semplice applicazione di disegno vettoriale che genera codice per Mac OS X e iOS.

Non è più necessario ricompilare il codice, più e più volte, per ottenere il risultato desiderato. Con app di questo tipo anche un graphic designer senza esperienza di programmazione può disegnare controlli, icone e altri elementi propri della UI.

Interfaccia utente resolution-independent

Con questo stumento è possibile utilizzare forme vettoriali built-in (rettangoli, rettangoli arrotondati, ovali, testi, Béziers, stelle e poligoni) per disegnare i pulsanti, cursori, icone e altri elementi dell’interfaccia utente, allineandoli alla griglia a pixel nei posti giusti.
È anche possibile aggiungere gradienti e ombre per rendere l’interfacia più realistica.

Generare il codice per OS X e iOS

È possibile scegliere tra OS X o iOS codice. PaintCode genera Objective-C che utilizza Cocoa, Quartz e Core Graphics API. È anche possibile spostare l’origine e generare un codice di disegno per NSViews capovolte!

Preparatevi per i display Retina

Per aiutarvi a preparare il mondo ad alta risoluzione, con display ad alta densità, PaintCode consente di attivare la modalità Retina. Questo raddoppia la risoluzione del disegno. Quando si è in modalità Retina, si può immediatamente vedere il disegno in modo molto simile a iPhone 4, iPhone 4S, il nuovo iPad 3 e altri dispositivi retina-display  che possono essere aggiunti in futuro.

Con il rilascio della prossima generazione dell’ iPad (iPad 3)  si aprirà una nuova stagione per la progettazione grafica ad altissima risoluzione.Le nuove App dedicate ad iPad , sopratutto quelle universali , dovranno valorizzare il nuovo Retina display, che raggiunge l’incredibile risoluzione  di 2048×1536 pixel.

La distribuzione di massa di un iPad con uno schermo così dettagliato e di risoluzione grafica così elevata rappresenta una sfida per tutti gli sviluppatori che vogliono mantenere i loro App Bundle al di sotto del limite di 20 MB.
20 Mega Byte è attualmente il limite imposto  dall’Apple Store per  effettuare  il download delle App attraverso la rete Umts , 3G o edge; sapendo che Apple limita il download di App da rete cellulare dobbiamo tener presente che se compiliamo App “Grasse” – Fat Binary superiori ai 20 mb – è necessario che il nostro cliente sia collegato in modalità Wifi.

Di seguito  suggerisco alcune tecniche che gli sviluppatori possono utilizzare per mantenere le loro App  nella fascia ” magra”.

Vi mostrerò interessanti tecniche  suggerite in un post di David Smith (http://david-smith.org/blog/2012/03/05/techniques-for-shrinking-app-bundle-size/) , un developer di app quale ad es. My Recipe Book.

Rimuovere il codice inutilizzato

Il primo passo per il taglio  di spazio è quello di trovare il codice non utilizzato nel progetto. Il candidato più probabile sarebbe da trovare in tutte le librerie di terze parti (3rd party library) che vengono fornite con il progetto, ma che non verranno attivamente utilizzate.

Inoltre, bisogna sincerarsi di controllare anche  l’intero contenuto di una libreria ; se si ha solo bisogno di alcuni file, si possono eliminare quelli non utilizzati.

Rimuovere risorse non utilizzate

Il secondo passo è quello di assicurarsi che non siano comprese le risorse che non vengono utilizzate nel nostro progetto. Spesso trovo che la nostre app  comprendono  immagini, icone, suoni che appatengono a versioni precedenti a cui non si fa più riferimento.

Fare auditing del vostro progetto per questi casi è spesso difficile,  e per questo David ci consiglia un ottimo strumento chiamato Slender che elimina una parte del lavoro analizzando il progetto per i file inutilizzati e permette di rimuoverli. Questo strumento analizza vari tipi di file e oltre a indicare quali di questi non vengono referenziati all’interno del progetto, individua anche alcuni problemi, come ad esempio la mancanza della versione @2x (utilizzata per il Retina Display), la dimensioni delle artwork grafiche di sistema (icona, Default image, ecc.) più una serie di controlli apparentemente minori ma che servono a fare pulizia del progetto. Inoltre questa applicazione ad ogni modifica effettua una copia di backup affinché eventuali file incorrettamente rimossi possano essere facilmente ripristinati.

Caricare le risorse On-Demand

Se il progetto comprende risorse come video tutorial o immagini che sono utilizzati  e necessari solo raramente, è possibile spostare questi su un web-server e richiamarli on-demand.  Amazon S3 o di un piccolo servizio di VPS  Linode sono ottime soluzioni possibili.  E’ necessaria discrezione con questa tecnica se si vuole evitare di frustrare l’utente con una serie download dopo l’installazione.
Personalmente trovo utile ciò che ha fatto David per i video tutorial  nella sua App My Recipe Book, questi Video infatti sono richiamati solo in schermate secondarie dell’app e non fanno parte della cosidetta user’s initial experience.
Nell’eventualità che questi file siano necessari per l’utilizzo primario dell’app, potete sempre offrire la possibilità di una visione online a quella di poter scaricare il file localmente. Tenderei ad evitare il fastidioso requisito di scaricare i file una volta scaricata l’app, dato che spesso l’utente non si avvede immediatamente di questa necessità e nel momento stesso in cui se ne accorgerà questo accadrà troppo tardi, ormai lontano da ogni connessione Wi-Fi.

 

Utilizzare immagini Patterned

Seguendo la definizione di Wikipedia:
<<”Nell’ingegneria del software, un design pattern (schema di progettazione) può essere definito come : una soluzione progettuale generale a un problema ricorrente. Esso non è una libreria o un componente di software riusabile, quanto piuttosto una descrizione o un modello da applicare per risolvere un problema che può presentarsi in diverse situazioni durante la progettazione e lo sviluppo del software (NB: nel nostro caso e’ un’immagine).
….
La differenza tra un algoritmo e un design pattern è che il primo risolve problemi computazionali, mentre il secondo è legato agli aspetti progettuali del software.”>>

Nel nostro caso, un Pattern è una sorta di trama grafica (una sorta tegola) che viene ripetuta e sata come riempimento per un’immagine.

UIColor include una funzione fantastica per ridurre la necessità di includere le immagini di grandi dimensioni strutturate all’interno del progetto.

Ad esempio le dimensioni medie di un’immagine per dispositivo Apple sono le seguenti:

• iPad 3 (@2x) = 2048*1536 px = 1,2 Mb = 1200 Kb
• iPad 1 e 2 = 102*768 px = 0,73 Mb = 730 Kb
• iPhone 4 (@2x) = 960*640 px = 0,63 Mb = 630 Kb
• iPhone 3 = 480*320 = 0,34 Mb = 340 kb

TOTAL = 2900 Kb

• Single Pattern Tile = 300 kb

Vi segnalo uno dei tanti video che vi insegnerà (tutorial) a creare Pattern:

Un uso utile del Patterned image è quando volete fornire alla vostra applicazione uno sfondo stilizzato, anche se questa tecnica si applica altrettanto bene a piccole aree in cui si desidera aggiungere texture a un controllo dell’interfaccia utente.

Basta impostare il colore di sfondo della vista desiderata per un colore fantasia come questo:

view.backgroundColor = [UIColor colorWithPatternImage: [UIImage imageNamed: @ "pattern_image.png"]];

La view  avrà così uno sfondo con texture che viene scalato e regolato secondo le dimensione della vista stessa.
David ci segnala che una buona fonte per le tile texture (texture tegola) è il progetto Subtle Patterns.

 

Utilizzare Stretched UI Image

UIImage include un metodo performante per creare immagini che vengono scalate o bilanciate dinamicamente in relazione  alla dimensione (size). L’immagine è configurata in modo che la sezione centrale si allunga mantenendo invariati i bordi. Questo è spesso usato per oggetti, come i pulsanti, dove si ha uno stile per gli angoli e per i lati, ma il corpo del pulsante è semplice.
Funziona bene anche per la creazione di un effetto”inciso” (etched) in una table view (vista tabella).

Quindi, piuttosto che la creare un’immagine 320×48 che rappresenta lo sfondo della cella si crea una piccola immagine 1×3 con il top desiderato, il corpo e i colori di sfondo. Questo viene poi assegnata come backgroundView;

UIImage* template = [UIImage imageName:@"template.png"]; UIImage* stretched = [template resizableImageWithCapInsets:UIEdgeInsetsMake(1, 0, 1, 0)]; cell.backgroundView = [[UIImageView alloc] initWithImage:stretched]; 

 

Disegnare elementi dell’interfaccia utente (UI Elements) in Quartz

Essenzialmente quando si realizzano degli elementi dell’interfaccia (UI Elements) utente geometrici  è spesso possibile evitare l’utilizzo di un’immagine PNG per raggiungere l’obiettivo dato dalla progettazione.
Piuttosto che pre-generare gli elementi in Photoshop e poi bundle con l’applicazione, è sufficiente rendere lo stile desiderato in fase di runtime. Questo può essere semplice come creare uno stile pulsanti quadri:

UIButton SquareButton * = [UIButton buttonWithType: UIButtonTypeCustom];
 [squareButton.layer setBorderColor: [[UIColor blackColor] CGColor]];
 [squareButton.layer setBorderWidth: 1,0];
 [SquareButton setTitleColor: [UIColor blackColor] forState: UIControlStateNormal];
 squareButton.backgroundColor = [UIColor whiteColor];

Oppure, più complicato come il progetto Gradient Buttons dell’ottimo Jeff LaMarche. Per quest’ultimo ricordiamo che i file presenti nel repository non sono compatibili con ARC e quindi vanno modificati (le modifiche richieste sono poche ma necessarie per non avere errori di compilazione).

L’obiettivo è quello di rendere quello che ti serve attraverso il codice, piuttosto che fare il bundling con decine di mini vedute di background con la tua applicazione.

Utilizzare file PDF

Ultimamente è stata avanzata dal noto sviluppatore inglese Matt Gemmell, nel suo articolo Using PDF Images in iOS apps, la proposta di utilizzare il PDF come elemento portante di immagini vettoriali. Ricordiamo che le immagini vettoriali permettono di raggiungere, per loro natura, delle definizioni molto elevate, per esempio le due immagini del “close button” (entrambe tratte dall’articolo di Gemmell), sono la rappresentazione in scala diversa dello stesso oggetto vettoriale: . Utilizzando Photoshop è possibile ottenere un file PDF sufficientemente compresso (il PDF è un ottimo “vettore” di file vettoriali) che potrà essere in seguito manipolato con del codice Objective-C per ottenere le immagini delle dimensioni desiderate. In tal caso si richiede allo sviluppatore la capacità di spacchettare queste immagini nel momento opportuno senza anche qui bloccare l’applicazione all’inizio. Un buon esempio di tale codice è reperibile nel progetto UIImage+PDF category su GitHub.

 Conclusioni

L’uso ponderato di queste tecniche può aiutare a ridurre drasticamente le dimensioni del bundle delle vostre applicazioni, aiuta quindi a pubblicare un’app sotto il limite di download per 3G.

Tuttavia, è necessario fare attenzione e non esagerare; non fatevi prendere la mano e a volte è meglio frenare il vostro desiderio di ottimizzazione se c’e’ il rischio di ottienere una soluzione che sia lontana dal buon gusto di progettare un user experience di gusto e 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

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.

	ldpi (120 dpi) (Low density screen)	mdpi (160 dpi) (Medium density screen)	hdpi (240 dpi) (High density screen)	xhdpi (320 dpi) (Extra-high density screen)
Launcher Icon Size	36 x 36 px	48 x 48 px	72 x 72 px	96 x 96 px

È 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

Il display Retina permette di visualizzare versioni ad alta risoluzione della vostra grafica. Se ci si limita a scalare la grafica esistente si perde l’opportunità di fornirne immagini accattivanti che gli utenti si aspettano. Si dovrebbe quindi rielaborare le risorse esistenti per creare l’immagine di grandi dimensioni, versioni in qualità superiore che sono:

    Più ricche di texture. Per esempio, nella versioni ad alta risoluzione delle impostazioni e le icone Contatti, le texture di metallo e carta sono chiaramente visibili.

    Più dettagliate. Per esempio, nella versione ad alta risoluzione delle icone Safari e note, si possono vedere dettagli come i contorni precisi dei continenti dietro la bussola e la carta strappata lasciata dalla nota precedente.

 Più realistiche. Per esempio, l’versioni ad alta risoluzione della Bussola e icone foto combinare texture ricca e dettagli per creare rappresentazioni realistiche di una bussola e una fotografia.

Anche se sono più semplici icone della barra di applicazioni o icone dei documenti, si dovrebbe considerare l’aggiunta di dettagli come creare versioni ad alta risoluzione. Per esempio, l’icona della scheda artisti nella tapbar nell’applicazione è una silhouette snella di un cantante. La versione ad alta risoluzione di questa icona è riconoscibile la stessa icona, ma include maggiori dettagli.

Le seguenti tecniche, suggerite da Apple ,consentono di ottenere ottimi risultati;

Come si crea una versione ad alta risoluzione del disegno.
Innanzi tutto bisogna scalare la grafica originale a 200% con il “nearest neighbor” algoritmo di scala. Questo funziona bene se l’opera originale non è stata creata in vettoriale e non include gli effetti di livello. Il risultato è una grande immagine in pixel su cui è possibile disegnare ad alta risoluzione. Questo è un buon modo per iniziare, perché consente di mantenere il layout originale del vostro disegno.

Se l’opera originale è stata creata in vettoriale, oppure include gli effetti di livello, è possibile utilizzare l’algoritmo di ridimensionamento di default al posto dell’ algoritmo “nearest neighbor”.

Aggiungere dettagli e profondità.
Non esitate a disegnare elementi molto piccoli, perché la versione ad alta risoluzione del disegno permette molto più spazio per i dettagli. Ad esempio, un punto di 1 pixel nell’immagine originale diventa un 4-pixel punto (cioè 2 x 2 pixel) nella versione più grande.

Considerate l’ ammorbidimento degli elementi nella scala-up .
Se, per esempio, si ha 1-pixel linea di demarcazione nel disegno originale, potrebbe avere il bold che si desidera quando si  scala fino ad una linea di 2 pixel. Ma per alcune linee ed elementi si potrebbe desiderare di ammorbidire i risultati scalati da frange o addirittura lasciare l’elemento con le dimensioni più piccole.

Considerare l’aggiunta di una sfocatura per ottenere risultati migliori in effetti come text engravings e drop shadows.
Per esempio,l’effetto  text engraving è in genere fatto spostando un’immagine duplicato del testo di 1 pixel. Scalata, questo risultato si tradurrebbe in una larghezza incisione di 2 pixel, che rischia di sembrare molto nitido e realistico con una risoluzione più elevata. Per migliorare questo, è possibile lasciare così come sono (cioè al 1 pixel), ma aggiunge un 1-pixel sfocatura per ammorbidire l’engraving. Ciò si traduce ancora in un effetto 2-pixel wide engraving , ma il pixel esterno appare  più come è solo mezzo pixel di larghezza, che si traduce in un migliore senso della dimensionalità.

Suggerimenti per la Creazione di immagini ridimensionabili

È possibile creare un’immagine ridimensionabile per personalizzare lo sfondo di alcuni elementi dell’interfaccia utente standard, come popovers, pulsanti, barre di navigazione, le barre sulla scheda, e barre degli strumenti (incluse le voci su queste barre). Fornire immagini ridimensionabili per questi elementi può portare a prestazioni migliori per la vostra app.

Per molti elementi dell’interfaccia utente, è anche possibile specificare end caps terminali in aggiunta a un aspetto di sfondo. Una testata definisce un’area dell’immagine che non deve essere ridimensionata. Per esempio, è possibile creare un’immagine ridimensionabile che include quattro end caps che definiscono i quattro angoli di un pulsante. Quando l’immagine viene ridimensionata per riempire area di sfondo del pulsante, le parti definite dalla end caps sono disegnati invariati.

A seconda delle dimensioni dell’immagine che avete preparato,  iOS la ridimensiona strecchiandola (stretch) per completare il background di un dell’interfaccia utente.Lo  stretchper scalare l’immagine viene efettuato senza riguardo per le proporzioni originali. Lo stretching è performante, ma di solito non è auspicabile per un’immagine multipixel che possono distorcere. Eì consigliabile ripetere l’immagine originale come numero di volte necessario per riempire l’area di destinazione. Il Tiling è meno efficiente di stretching, ma è l’unico modo per ottenere un effetto texture o fantasia.

Come regola generale, si dovrebbe fornire l’immagine più piccola (escluse le testate) che comporterà l’aspetto desiderato. Per esempio:

Se si vuole un colore solido, senza pendenza, creare un pixel 1×1  dell’immagine.

Se vuoi un gradiente verticale, creare un’immagine che ha una larghezza di 1 pixel e un’altezza che corrisponde all’altezza del background dell’elemento dell’interfaccia utente.

Se si desidera fornire un aspetto ripetizione texture, è necessario creare un’immagine con dimensioni che corrispondono alle dimensioni della porzione ripetizione della texture.

Se si desidera fornire un aspetto texture non ripetuto, è necessario creare un’immagine statica con dimensioni che corrispondono alle dimensioni della zona sfondo l’elemento dell’interfaccia utente.

Nota: Se si creano immagini ridimensionabile per disegnare su un display Retina, è inoltre necessario fornire versioni ad alta risoluzione delle immagini. Ad esempio, si potrebbe anche fornire una tinta unita 2 x 2 pixel dell’immagine, o di una immagine gradiente che ha una larghezza di 2 pixel.

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.