Design iOS7 , come cambiano le icone Apple rispetto a iOS6

In un interessante articolo Matthew Panzarino si chiede “perche’ il look del design di iOS7 sia cosi’ differente dal precedente” (Fonte: http://cdn.theapplelounge.com/wp-content/uploads/2013/06/iOS6vsiOS7_icons.png).

Dopo aver visto la presentazione iOS 7  di Apple si sa che ora le icone della schermata home (c.d. springboard) cambieranno leggermente.
Molte delle nuove icone sono state progettate principalmente dai membri del reparto marketing e comunicazione di Apple, non piu’ dal il team di sviluppo di app. Jony Ive (ora a capo di Human Interaction di Apple) ha guidato passo passo il team di progettazione per impostare l’aspetto e la tavolozza dei colori delle icone delle cosidette stock app .

 

iOS7 Springboard

 

Come è cambiato realmente l’aspetto delle icone delle app rispetto ad iOS 6?
Vediamolo con l’immagine di confronto creata da @pawsupforu :

ios6-iOS7_icone-confronto_icons-comparisonSi noti come alcune icone siano state riprese direttamente da OS X (Safari), mentre altre sono state completamente ridisegnate (Calendario)

DIMESIONE DELLE ICONE , da 114px a 120px

iOS7 icone

IOS 7 Guide Freebie PSD

Uno dei notevoli cambiamenti  (oltre il design “flat”) è la variazione di dimensione delle icone.
Le icone delle applicazioni iOS 7 sono ora 120px (rispetto al formato precedente di 114px) e il raggio (Border Radius) è ora 27px (20px rispetto al precedente). Con questa modifica nasce la necessità di cambiare la dimensione icona delle nostre  app.
Fortunatamente il designer Seevi Kargwal he progettato la succitata icona iOS 7  in formato PSD per contribuire a facilitare il processo di riprogettazione. È possibile controllare più del lavoro.

Seguendo il link a questa pagina http://dribbble.com/shots/1111211-IOS-7-Guide-Freebie-PSD troverete 2 ATTACHMENTS:
IOS_7_Guide_freebie_PSD.psd 900 KB
IOS-7-Guide-Full-Size.jpg 300 KB

iOS 7 Icon Rounded Corner Radius

Il sito “Cult of Mac” sostiene che Jony Ive abbia dato alle icone di iOS7 gli stessi angoli arrotondati dell’iMac.

 

icone iOS7

icone Home di iOS7 (Fonte)

Cult of mac in un suo articolo sostiene che il nuovo direttore di Human Interface, Jony Ive, abbia ridisegnato iOS come un sistema operativo multi-layered Parallax.
Ive ha qindi migrato le sue filosofie di design hardware su iOS e l’icona dell’app Messaggi dimostra quanto si può ottenere fecendo in modo che gli angoli dell’icona Messaggi abbiano gli stessi bordi rastremati che si trovano sui prodotti Apple iMac.
La differenza è solo un piccolo numero di pixel che la maggior parte degli utenti probabilmente non mai notato, così Brad Ellis , che per primo lo ha scoperto, ha creato la sua  GIF di confronto in modo da poter effettivamente vedere i cambiamenti:

Le icone di iOS7 hanno la stessa curvatura degli angoli dell'iMac

Le icone di iOS7 hanno la stessa curvatura degli angoli dell’iMac di Brat Ellis.

Nel  suo Blog Joel Page dettaglia meglio l’angolo dell’icona come si puo’ notare nell’imagine che segue:

icona_ios7_bordo_domensione_radiusSource

 La nuova icona iOS7 appare come un quadrato con dimesioni 120×120 px.

Concludiamo considerando il fatto che con le modifiche di progettazione con iOS 7 ci sobno importanti novità nel design dell’icona .

Le icone sulla schermata iniziale iPhone hanno ricevuto un leggero aumento di dimensioni da a 114px e 57px a 120 px e 60px rispettivamente.

template

È stata introdotta una nuova griglia di golden ratio e un nuovo schema di colore,  molto piu’ luminoso , che trovate incluso nel file PSD App icon Template presente segiuendo il link a questa pagina: http://appicontemplate.com/ios7.
App icon template  è una risorsa Photoshop gratuita che vi rende più faciledisegnare le icone. Modificando un singolo oggetto ti restituisce automaticamente tutti i vari formati richiesti su iOS e Android.

icone_dimesione_icon_size_dimensions_iOS-6-vs-7

 

Tabella comparazione dimensioni icone iOS6 e iOS7

Le misure dell’ icona dell’App cambiano secondo lo schema seguente:

Dispositivi iOS 6 size (in pixel) iOS 7 size (in pixel)
iPhone Non Retina 57 x 57 not available
iPhone Retina 114 x 114 120 x 120
iPad Non Retina (mini and 2nd gen) 72 x 72 76 x 76
iPad Retina 144 x 144 152 x 152

Se compilate soltamnto per iOS 7, avrete bisogno solo selle icone 76 x 76, 120 x 120 and 152 x 152. Se il vostro target e’ anche  iOS 6,saranno necessarie anche le icone 57 x 57, 72 x 72, 76 x 76, 114 x 114, 120 x 120, 144 x 144 and 152 x 152 . Senza contare le icone Spotlight e Settings  che se non volete prepare  iOS le creera’ interpolando le principali.

 

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

*