ios 7 human interface guidelines - pragma conference 2013
DESCRIPTION
This is the "iOS 7 Human Interface Guidelines" keynote as it was delivered at Pragma Conference 2013 in Milan,Italy.TRANSCRIPT
ITALY !!
Italiano
Buongiorno
Scusi
Per favore
Grazie
Ciao a doppo
Signori
Donne
Pranzo
testo.. testo..
Dani ArnaoutSystems Engineer - Lextech Global Services (USA)
iOS 7 Human Interface Guidelines
Writer - raywenderlich.com
RayWenderlich.com
My latest tutorial
RayWenderlich.com
SURPRISE!!
212pages
iOS Human Interface Guidelines e’ un documento realizzato da Apple che ha standards & guidelines da seguire quando designing un iPhone/iPad app.
per minimizzare problemi tra developers e designers
1. UI 2. UX 3. SDK
Questi sono i tre argomenti principali
UIUser Interface
User interface ..
User experience .. Come la vedi
UXuser experience
UGLY UI BAD UX
Cattiva UI porta ad una brutta UX
5 brutte Apps
5
ugly apps
#5
I colori, i font
#4
I colori
#3
Troppi colori!
#2
Cattivo utilizzo delle immagini
#1
Troppe cose insieme
UI/UXUI/UX da un punto di vista iOS 7
1. UI 2. UX 3. SDK
iOS 7
UI
iOS 7Deference
Clarity
Depth
Weather in iOS 7 Weather in iOS 6
Utilizza tutto lo schermo
Messages in iOS 7 Messages in iOS 6
Design flat
Messages in iOS 7 Messages in iOS 6
Pulsanti senza bordo
UI ElementsI. Bars II. Content Views III. Controls IV. Temporary Views V. Icons
I. Bars:
I. Bars:
Status Bar
I. Bars:
Navigation Bar
I. Bars:
Tool Bar
I. Bars:
Tool Bar Icons
I. Bars:
Tab Bar
I. Bars:
Tab Bar Icons
I. Bars:
Search Bar
II. Content Views
Activity View
II. Content Views
Collection View
II. Content Views
Table View
II. Content Views
Scroll View
II. Content Views
Map View
II. Content Views
Web View
II. Content Views
Image View Popover View
Page View Controller II. Content Views
III. Controls
III. Controls
Activity Indicator
III. Controls
Date Picker
III. Controls
Picker View
III. Controls
Page Control
III. Controls
Progress Bar
III. Controls
Segmented Control
III. Controls
Slider
III. Controls
Stepper
III. Controls
Switch
III. Controls
Switch
IV. Temporary Views
IV. Temporary Views
Alert View
IV. Temporary Views
Action Bar
IV. Temporary Views
Modal View
V. Icons & Splash Screens
V. Icons &
Splash Screens
V. Icons &
Splash Screens
V. Icons &
Splash Screens
V. Icons &
Splash Screens
1. UI 2. UX 3. SDK
1. UI 2. UX 3. SDK
UXiOS 7
Anti-pattern
Anti- Pattern non va bene per UX, ma e’ utile per la persona che lo usa.
Who doesn’t understand English?
Who doesn’t understand English?
0%
Who doesn’t understand English?
0%
UX hints..
Non usare una schermata di benvenuto se non ne necessiti veramente. Come in un calculator app.
Comunica all’utente cosa sta andando storto anziche’ mostrare un contenuto vuoto.
Spiega all’utente perche’ vuoi tracciare la sua location.
44x44 pts e’ la dimensione minima per un pulsante
Contenuti importanti dovrebbero essere posizionati nella parte in alto a sinistra.
Tutti questi sei pulsant
Usa un testo descrittivo per il pulsante di back.
Per differenziare tra testo e pulsant
Start e Pause sono i principali
Non pubblicizzare la tua identita’ cosi’.
Usa i colori di iOS 7.
Supporta il Dynamic Type
Usa solo un font.
Accertati che l’icona della tua app sia chiara, semplice ed attraente.
Utilizza un linguaggio semplice. Evita i tecnicismi.
Avere una buona UI non implica fornire una buona UX.
Real life desings aiutano l’utente ad utilizzare l’app senza ulteriori indicazioni.
1. UI 2. UX 3. SDK
Case Study: Viber
From iOS 6 to iOS 7
oooo touch 3G 4:17PM 73%
All | Groups
Compose
1. UI 2. UX 3. SDK
SDK
Passbook:
Multitasking:
Social Media:
iCloud:
In-App Purchase:
Game Center:
Notification Center:
iAd Rich Media Ads:
AirPrint:
Location Services:
Sound:
VoiceOver:
1. UI 2. UX 3. SDK
one more thing …
5
Helpful tools
Un utile tool per wire-framing.
Un tool per la generazione di schemi-colore.
Questo tool riflettera’ il contenuto del tuo device iOS sullo schermo del tuo Mac.
PaintCode converte la grafica in codice.
Tool per il ridimensionamento delle immagini.
one other thing …
RayWenderlich.com
2 LUCKY WINNERS!!
Per i due fortunati vincitori
Il nuovissimo libro sullo sviluppo iOS: iOS7 by tutorials
1500+ pagine .. 15+ esempi
E’ tutto
Dani Arnaout@dani_arnaout