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 .
Come è cambiato realmente l’aspetto delle icone delle app rispetto ad iOS 6?
Vediamolo con l’immagine di confronto creata da @pawsupforu :
Si 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
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 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 di Brat Ellis.
Nel suo Blog Joel Page dettaglia meglio l’angolo dell’icona come si puo’ notare nell’imagine che segue:
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.
È 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.
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.
