Design iOS7 guida trucchi di progettazione

ios7_design_iPhone_iPad_design-guide

Con il rilascio di iOS 7,  app designer e sviluppatoreidovranno adeguare il proprio modello visivo per abbinare il nuovo “flat”  design di iOS.  In questa nuova versione apple ha modificato le dimensioni di icone , gli elementi di uso comune come la tipografia e l’iconografia .
Segnalo quindi delle tabelle pubblicate da sul sito http://ivomynttinen.com/blog/ nel quale l’autore ha pubblicato un  “ios design cheat sheet” segnalando le dimensioni di elementi di design che mi ha  aiutato ad iniziare a comprendere il design di un’app iOS 7.

Dal momento che iOS 7 non è supportato su vecchi modelli di iPhone 3 e iPod , ma solo dalla versione 4, questo post sarà di fatto una guida utile solo per i dispositivi supportati. Se siete alla ricerca di informazioni relative a questi dispositivi, si dovrebbe dare un’occhiata ai vecchi  post riguardanti l’iOS Design.

Risoluzione e specifiche del display

RISOLUZIONI

Dispositivi Portrait – Verticale Landscape – Orizzontale
iPhone 5 640×1136 px 1136×640 px
iPhone 4/4S 640×960 px 960×640 px
iPhone & iPod Touch 1st, 2nd and 3rd Generation 320×480 px 480×320 px
Retina iPad iPad 3, iPad 4 1536×2048 px 2048×1536 px
iPad Mini 768×1024 px 1024×768 px
iPad 1st and 2nd Generation 768×1024 px 1024×768 px

DISPLAYS

Dispositivi PPI Color Mode Temperatura del colore
iPhone 5 326 8bit RGB Warm
iPhone 4/4S 326 8bit RGB Cool
iPhone & iPod Touch 1st, 2nd and 3rd Generation 163 8bit RGB Warm
Retina iPad iPad 3, iPad 4 264 8bit RGB Warm
iPad Mini 163 8bit RGB Unknown
iPad 1st and 2nd Generation 132 8bit RGB Warm

Icone per App

Uno dei maggiori cambiamenti in iOS 7 è la nuova dimensione e il linguaggio visivo utilizzato per le icone delle app. Apple ha introdotto un “grid system” (sistema a griglia), ha aumento  la dimensione generale di icone sulla Pagina principale (Spring Boards) mascherando con una forma (Shape) diversa dai precedenti iOS.

DIMESIONI

Device App Icon AppStore Icon Spotlight Icon Settings Icon
iPhone 5 120×120 px 1024×1024 px 80×80 px 58×58 px
iPhone 4/4S 120×120 px 1024×1024 px 80×80 px 58×58 px
Retina iPad iPad 3, iPad 4 152×152 px 1024×1024 px 80×80 px 58×58 px
iPad Mini 76×76 px 512×512 px 40×40 px 29×29 px
iPad 1st and 2nd Generation 76×76 px 512×512 px 40×40 px 29×29 px

Angoli Arrotondati

iOS7_iona_angoli_arrotondati_IconRadius

Apple ha introdotto una nuova forma per le icone cambiando l’angolo (radius) dell’arrotondamento degli angoli. La nuova forma e’ stata chiamata “superellipse”  da Michael Flarup autore dell’interessante blog pixelresort.com. Dal momento che Apple non ha rilasciato un modello ufficiale della forma dell’icona, si dovrà utilizzare uno dei modelli che si trovano nel web. Tra i diversi modelli o template disponibili nel web segnalo appicontemplate.com,  che è sicuramente un ottimo punto di partenza quando si inizia a progettare l’icona di un’applicazione per iOS 7. Come sempre, gli angoli arrotondati, non devono essere inclusi nei file PNG finali esportati – ma si potrebbe aver bisogno di visualizzarli duramte il processo di disegno e progettazione sopratutto se si desidera aggiungere effetti, come ad esempio stroke o di ombreggiatura (shadow).

Grid System

iOS7_icone_griglia_Icon-Grid_design_disegnare-iconeApple ha sviluppato un sistema a griglia (golden ratio grid system) che può essere utilizzato per dimensionare e allineare gli elementi sulla vostra icona. Leggendo vari articoli sembra che questo modello di griglia sia stato molto criticato dalla comunità dei designers, e sembra che i progettisti (anche quelli di Apple) non stiano seguendo alla lettera il sistema di griglia.  Ancora una volta potremo sentirci liberi di rompere le regole, ma solo se la vostra icona sembrerà davvero migliore senza curarsi del nuovo sistema di griglia.

Interfaccia Utente (UI – User Interface)

l più grande cambiamento in iOS 7 è sicuramente il  nuovo  linguaggio di design dell’ interfaccia utente che appare “piatto” (Flat). Tutte le sfumature e ombre presenti negli elementi della UI sono state rimosse , in alcuni casi sono anche cambiate le dimensioni degli elementi di design di uso comune come mostrato nella tabella (Commonly used design elements) seguente:

Dispositivo Altezza  Status Bar Altezza Navigation Bar Altezza Tab Bar Larghezza Tables
iPhone 5 40 px 88 / 64 px 98 px 640 / 1136 px
iPhone 4/4S 40 px 88 / 64 px 98 px 640 / 960 px
Retina iPad iPad 3, iPad 4 40 px 88 px 112 px dynamic
iPad Mini 20 px 44 px 56 px dynamic
iPad 1st and 2nd Generation 20 px 44 px 56 px dynamic

ios7_ios6_confronto_differenze_design

Barra di stato o Status Bar

ios7_status-bar_statusbariOS 7 Status Bar

ios6_status-bar_statusbar

iOS6 Status bar

La dimensione della Status Bar o barra di stato è la stessa come nella versione su iOS6, l’aspetto del suo contenuto è stato comunque leggermente modificato. È possibile controllare il colore di sfondo per abbinare l’aspetto del vostro design  o utilizzare i temi di colore di default (bianco e nero). In molte delle applicazioni predefinite iOS 7, la barra di stato è collegata visivamente con la barra di navigazione o Nav Bar, senza separazioni.

Navigation Bar, Barra di Navigazione o NavBar

Navigation-nav-navigation-bar_barra-navigazione_NavBar_bar_iOS7_iPhone-iPad

iOS7_Navigation-Bar_NavBar_LandscapeVista orizzontale – Landscape

iOS7_Navigation-Bar_NavBar_PortraitVista verticale – Portrait

 

La Navigation Bar o barra di navigazione di solito comprende un titolo  e dei pulsanti di azione (come tornare alla visualizzazione precedente, creare, modificare, ecc.) In orientamento orizzontale (Landscape), l’altezza della barra di navigazione è ridotta un po ‘(a 32 punti) per consentire di visualizzare sotto di essa più contenut.

Tabelle o Table Views

iOS7_design_Tabelle_Tables

Tables o lists (Tabelle o liste) utilizzano adesso l’intera larghezza dello schermo  e non sono più circondati da un contenitore che separa le tabelle una dall’altra. L’unica separazione visiva tra i diversi punti della table view sono i titoli che compaiono sulla parte superiore della tabella (come noto da precedenti versioni iOS) sulla parte superiore della app con texture di sfondo o un colore principale. Gli elementi all’interno di una tabella sono separati da una semplice linea da 1px, che ha un margine di 15px al lato sinistro degli schermi ma serve direttamente il lato destro dello schermo. Ogni elemento ha una imbottitura interna di 15px da entrambe le parti.

Tap Bar e iconografia

iOS7_design_TabBar_Tab-Bar

 

Apple fa grande uso di icone senza un colore di riempimento.
Uno stile usato per le icone attive nella Tap Bar e’ quello du invertire i colori – mentre l’icona inattiva ha spesso solo contorni, qundo attive ottengono un pieno colore solido, mentre alcuni tratti scompaiono o sono invertiti.

Tipografia

Helvetica Neue è ancora il font di default in iOS, ma il testo normale viene ora solitamente visualizzato in Light Face invece di Regular o Bold. Il testo che dovrebbe apparire più evidente è spesso visualizzata in Medium face (es. il titolo nella barra di navigazione). Naturalmente, ci sono ancora tanti Fonts alternativi disponibi al posto di Helvetica Neue. Potete trovare la lista completa in fondo a questo articolo o nel sito http://iosfonts.com/. In generale (e probabilmente a causa del maggiore utilizzo dei tipi di font luce) la dimensione dei caratteri è stata aumentata per la maggior parte degli elementi di design. I pulsanti spesso appaiono come semplici link di testo colorati. Ora, non sono più circondati da una forma.

Default Font Sizes

Label Type Default Font Size Default Font Weight
Navigation Bar Title 34 px Medium
Regular Buttons 34 px Light
Table Header 34 px Light
Table Label 28 px Regular
Tab Bar Icon Labels 20 px Regular

 IOS FONTS

Fonts                                                       Iphone Ios version / iPad iOS version

Academy Engraved LET
AcademyEngravedLetPlain 5.0 4.3
American Typewriter
AmericanTypewriter 3.0 4.3
AmericanTypewriter-Bold 3.0 4.3
AmericanTypewriter-Condensed 5.0 5.0
AmericanTypewriter-CondensedBold 5.0 5.0
AmericanTypewriter-CondensedLight 5.0 5.0
AmericanTypewriter-Light 5.0 5.0
Apple Color Emoji
AppleColorEmoji 3.0 4.3
Apple SD Gothic Neo
AppleSDGothicNeo-Bold 5.0 5.0
AppleSDGothicNeo-Medium 4.3 4.3
Arial
ArialMT 3.0 4.3
Arial-BoldItalicMT 3.0 4.3
Arial-BoldMT 3.0 4.3
Arial-ItalicMT 3.0 4.3
Arial Hebrew
ArialHebrew 3.0 4.3
ArialHebrew-Bold 3.0 4.3
Arial Rounded MT Bold
ArialRoundedMTBold 3.0 4.3
Avenir
Avenir-Black 6.0 6.0
Avenir-BlackOblique 6.0 6.0
Avenir-Book 6.0 6.0
Avenir-BookOblique 6.0 6.0
Avenir-Heavy 6.0 6.0
Avenir-HeavyOblique 6.0 6.0
Avenir-Light 6.0 6.0
Avenir-LightOblique 6.0 6.0
Avenir-Medium 6.0 6.0
Avenir-MediumOblique 6.0 6.0
Avenir-Oblique 6.0 6.0
Avenir-Roman 6.0 6.0
Avenir Next
AvenirNext-Bold 6.0 6.0
AvenirNext-BoldItalic 6.0 6.0
AvenirNext-DemiBold 6.0 6.0
AvenirNext-DemiBoldItalic 6.0 6.0
AvenirNext-Heavy 6.0 6.0
AvenirNext-HeavyItalic 6.0 6.0
AvenirNext-Italic 6.0 6.0
AvenirNext-Medium 6.0 6.0
AvenirNext-MediumItalic 6.0 6.0
AvenirNext-Regular 6.0 6.0
AvenirNext-UltraLight 6.0 6.0
AvenirNext-UltraLightItalic 6.0 6.0
Avenir Next Condensed
AvenirNextCondensed-Bold 6.0 6.0
AvenirNextCondensed-BoldItalic 6.0 6.0
AvenirNextCondensed-DemiBold 6.0 6.0
AvenirNextCondensed-DemiBoldItalic 6.0 6.0
AvenirNextCondensed-Heavy 6.0 6.0
AvenirNextCondensed-HeavyItalic 6.0 6.0
AvenirNextCondensed-Italic 6.0 6.0
AvenirNextCondensed-Medium 6.0 6.0
AvenirNextCondensed-MediumItalic 6.0 6.0
AvenirNextCondensed-Regular 6.0 6.0
AvenirNextCondensed-UltraLight 6.0 6.0
AvenirNextCondensed-UltraLightItalic 6.0 6.0
Bangla Sangam MN
BanglaSangamMN 3.0 4.3
BanglaSangamMN-Bold 3.0 4.3
Baskerville
Baskerville 3.0 4.3
Baskerville-Bold 3.0 4.3
Baskerville-BoldItalic 3.0 4.3
Baskerville-Italic 3.0 4.3
Baskerville-SemiBold 5.0 5.0
Baskerville-SemiBoldItalic 5.0 5.0
Bodoni Ornaments
BodoniOrnamentsITCTT 5.0 4.3
Bodoni 72
BodoniSvtyTwoITCTT-Bold 5.0 4.3
BodoniSvtyTwoITCTT-Book 5.0 4.3
BodoniSvtyTwoITCTT-BookIta 5.0 4.3
Bodoni 72 Oldstyle
BodoniSvtyTwoOSITCTT-Bold 5.0 4.3
BodoniSvtyTwoOSITCTT-Book 5.0 4.3
BodoniSvtyTwoOSITCTT-BookIt 5.0 4.3
BodoniSvtyTwoSCITCTT-Book 5.0 4.3
Bradley Hand
BradleyHandITCTT-Bold 6.0 4.3
Chalkboard SE
ChalkboardSE-Bold 3.0 4.3
ChalkboardSE-Light 5.0 5.0
ChalkboardSE-Regular 3.0 4.3
Chalkduster
Chalkduster 5.0 4.3
Cochin
Cochin 3.0 4.3
Cochin-Bold 3.0 4.3
Cochin-BoldItalic 3.0 4.3
Cochin-Italic 3.0 4.3
Copperplate
Copperplate 5.0 4.3
Copperplate-Bold 5.0 4.3
Copperplate-Light 5.0 5.0
Courier
Courier 3.0 4.3
Courier-Bold 3.0 4.3
Courier-BoldOblique 3.0 4.3
Courier-Oblique 3.0 4.3
Courier New
CourierNewPS-BoldItalicMT 3.0 4.3
CourierNewPS-BoldMT 3.0 4.3
CourierNewPS-ItalicMT 3.0 4.3
CourierNewPSMT 3.0 4.3
DB LCD Temp
DBLCDTempBlack 6.0
3.0
6.0
4.3
Devanagari Sangam MN
DevanagariSangamMN 3.0 4.3
DevanagariSangamMN-Bold 3.0 4.3
Didot
Didot 5.0 4.3
Didot-Bold 5.0 4.3
Didot-Italic 5.0 4.3
Euphemia UCAS
EuphemiaUCAS 5.0 5.0
EuphemiaUCAS-Bold 5.0 5.0
EuphemiaUCAS-Italic 5.0 5.0
Futura
Futura-CondensedExtraBold 3.0 4.3
Futura-CondensedMedium 5.0 5.0
Futura-Medium 3.0 4.3
Futura-MediumItalic 3.0 4.3
Geeza Pro
GeezaPro 3.0 4.3
GeezaPro-Bold 3.0 4.3
Georgia
Georgia 3.0 4.3
Georgia-Bold 3.0 4.3
Georgia-BoldItalic 3.0 4.3
Georgia-Italic 3.0 4.3
Gill Sans
GillSans 5.0 4.3
GillSans-Bold 5.0 4.3
GillSans-BoldItalic 5.0 4.3
GillSans-Italic 5.0 4.3
GillSans-Light 5.0 5.0
GillSans-LightItalic 5.0 5.0
Gujarati Sangam MN
GujaratiSangamMN 3.0 4.3
GujaratiSangamMN-Bold 3.0 4.3
Gurmukhi MN
GurmukhiMN 3.0 4.3
GurmukhiMN-Bold 3.0 4.3
Heiti SC
STHeitiSC-Light 3.0 4.3
STHeitiSC-Medium 3.0 4.3
Heiti TC
STHeitiTC-Light 3.0 4.3
STHeitiTC-Medium 3.0 4.3
Helvetica
Helvetica 3.0 4.3
Helvetica-Bold 3.0 4.3
Helvetica-BoldOblique 3.0 4.3
Helvetica-Light 5.0 5.0
Helvetica-LightOblique 5.0 5.0
Helvetica-Oblique 3.0 4.3
Helvetica Neue
HelveticaNeue 3.0 4.3
HelveticaNeue-Bold 3.0 4.3
HelveticaNeue-BoldItalic 3.0 4.3
HelveticaNeue-CondensedBlack 5.0 5.0
HelveticaNeue-CondensedBold 5.0 5.0
HelveticaNeue-Italic 3.0 4.3
HelveticaNeue-Light 5.0 5.0
HelveticaNeue-LightItalic 5.0 5.0
HelveticaNeue-Medium 5.0 5.0
HelveticaNeue-UltraLight 5.0 5.0
HelveticaNeue-UltraLightItalic 5.0 5.0
Hiragino Kaku Gothic ProN
HiraKakuProN-W3 3.0 4.3
HiraKakuProN-W6 5.0 4.3
Hiragino Mincho ProN
HiraMinProN-W3 3.0 4.3
HiraMinProN-W6 3.0 4.3
Hoefler Text
HoeflerText-Black 5.0 4.3
HoeflerText-BlackItalic 5.0 4.3
HoeflerText-Italic 5.0 4.3
HoeflerText-Regular 5.0 4.3
Kailasa
Kailasa 3.0 4.3
Kailasa-Bold 3.0 4.3
Kannada Sangam MN
KannadaSangamMN 3.0 4.3
KannadaSangamMN-Bold 3.0 4.3
Malayalam Sangam MN
MalayalamSangamMN 3.0 4.3
MalayalamSangamMN-Bold 3.0 4.3
Marion
Marion-Bold 5.0 5.0
Marion-Italic 5.0 5.0
Marion-Regular 5.0 5.0
Marker Felt
MarkerFelt-Thin 3.0 4.3
MarkerFelt-Wide 3.0 4.3
Noteworthy
Noteworthy-Bold 5.0 5.0
Noteworthy-Light 5.0 5.0
Optima
Optima-Bold 5.0 4.3
Optima-BoldItalic 5.0 4.3
Optima-ExtraBlack 5.0 5.0
Optima-Italic 5.0 4.3
Optima-Regular 5.0 4.3
Oriya Sangam MN
OriyaSangamMN 3.0 4.3
OriyaSangamMN-Bold 3.0 4.3
Palatino
Palatino-Bold 3.0 4.3
Palatino-BoldItalic 3.0 4.3
Palatino-Italic 3.0 4.3
Palatino-Roman 3.0 4.3
Papyrus
Papyrus 5.0 4.3
Papyrus-Condensed 3.0 5.0
Party LET
PartyLetPlain 5.0 4.3
Sinhala Sangam MN
SinhalaSangamMN 3.0 4.3
SinhalaSangamMN-Bold 3.0 4.3
Snell Roundhand
SnellRoundhand 3.0 4.3
SnellRoundhand-Black 5.0 5.0
SnellRoundhand-Bold 3.0 4.3
Symbol
Symbol 6.0 6.0
Tamil Sangam MN
TamilSangamMN 3.0 4.3
TamilSangamMN-Bold 3.0 4.3
Telugu Sangam MN
TeluguSangamMN 3.0 4.3
TeluguSangamMN-Bold 3.0 4.3
Thonburi
Thonburi 3.0 4.3
Thonburi-Bold 3.0 4.3
Times New Roman
TimesNewRomanPS-BoldItalicMT 3.0 4.3
TimesNewRomanPS-BoldMT 3.0 4.3
TimesNewRomanPS-ItalicMT 3.0 4.3
TimesNewRomanPSMT 3.0 4.3
Trebuchet MS
Trebuchet-BoldItalic 3.0 4.3
TrebuchetMS 3.0 4.3
TrebuchetMS-Bold 3.0 4.3
TrebuchetMS-Italic 3.0 4.3
Verdana
Verdana 3.0 4.3
Verdana-Bold 3.0 4.3
Verdana-BoldItalic 3.0 4.3
Verdana-Italic 3.0 4.3
Zapf Dingbats
ZapfDingbatsITC 5.0 4.3
Zapfino
Zapfino 3.0 4.3

 

Lascia un commento

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

*