Corso WebApp iOS                              “iOS UI Design”                                Lezione 04/10”Less is more..”...
Chapter 04User Interface Design for iOS DevicesChapter 05iPhone UI Design: Think SimpleChapter 06iPad UI Design: Think Inv...
Diario Lezioni          LEZIONE 03          iOS UI Design     Cognitive User InterfaceParadigma Page-Model dell’iPhone Par...
User Interface                       Def: Interfaccia           “punto di interazione tra due sistemi”“parte visuali di un...
User Interface   Due Tipi di Interfaccia   interfaccia hardware    interfaccia software
User Interface
User Interface   Tutto é Interfaccia    interfaccia attiva   interfaccia passiva
User Interface              Interfaccia Attivaparte dell’interfaccia con il quale é possibile       avere un interazione “...
User Interface               Interfaccia Passivaparte dell’interfaccia con il quale non é possibile         avere un inter...
User Interface
User Interface      Interazione Touch-Screen      Zoom: Pinch-In/Pinch-Out      ovunque sul layout (se abilitato)      Zoo...
User Interface         cognitive interface design é basato su:                 uso cognitivo del colore  gerarchia visuale...
User Interfacecognitive interface design é orientato a creare:                     unità                   armonia   tra e...
User Interfacecognitive interface design é orientato a creare:                   Equilibrio   tra elementi dell’interfacci...
User Interfacecognitive interface design é orientato a creare:                   Gerarchia   tra elementi dell’interfaccia...
User Interfacecognitive interface design é orientato a creare:                  Dominanzacreare punti focali su elementi d...
User Interface
Diario Lezioni          LEZIONE 03          iOS UI Design     Cognitive User InterfaceParadigma Page-Model dell’iPhone Par...
iPhone Page-Model                che cosa é?  struttura di base con cui sono progettate        le pagine orientate all’iPh...
iPhone Page-Model                    strutturadefinisce un organizzazione lineare dei contenuti
iPhone Page-Model                    struttura   anche il multitasking* introdotto con iOS4lavora con contenuti presentati...
“Multi Tasking”       iOS Multitasking       logica sequenziale       salvataggio dello stato
iPhone Page-Model
Diario Lezioni          LEZIONE 03          iOS UI Design     Cognitive User InterfaceParadigma Page-Model dell’iPhone Par...
iPad Block-Model               che cosa é? struttura di base con cui sono progettate         le pagine orientate all’iPad
iPad Page-Model                     strutturadefinisce un organizzazione a blocchi dei contenuti         simile a quella d...
iPad Page-Model                  struttura    il multitasking* introdotto con iOS4non influenza la presentazione die conte...
iPad Page-Model                 struttura ibrida   relazione tra contenuti mutuata dal desktopesperienza utente evoluta da...
iPad Block-Model
Diario Lezioni          LEZIONE 03          iOS UI Design     Cognitive User InterfaceParadigma Page-Model dell’iPhone Par...
Mobile Content             da desktop a mobilere-fattorizzazione forte del contenuto (iPhone)re-fattorizzazione debole del...
Mobile Content                  da desktop a mobile     entrambi gli approcci hanno punti in comunenonostante debbano esse...
Mobile Content             Rimuovere e Prioritizzare          Comprendere il Core del Design     rimuovere un elemento dis...
Mobile Content
Mobile Content           Nascondere e ModellareQuando non é possibile rimuovere un elemento  indirizzato al profilo utente...
Mobile Content
Mobile Content               Comprimere e RaggruppareQuando non é possibile rimuovere o nascondere un elemento            ...
Mobile Content
Semplicità-Complessità         relazione paradossale*            pattern complessi      contengono pattern semplici     ch...
Semplicità-Complessità            punti chiave del paradosso   la semplicità non può eliminare la complessità      la semp...
Diario Lezioni          LEZIONE 03          iOS UI Design     Cognitive User InterfaceParadigma Page-Model dell’iPhone Par...
Progettazione    riassunto step precedenti       Analisi Concorrenti      Definizione Personas      Creazione Casi d’Uso C...
Progettazione
Progettazione  Documento Requisiti {                    {        Personas       Casi d’Uso  Scenari di Interazione
Progettazione     livello di prototipo low-fi    prototipo di singola view scenario di interazione tra view** se non é sta...
Scenario Interazione
Progettazione                livello di prototipo hi-fi             prototipo di singola view       presentazione* prototi...
Progettazione   Documento Requisiti  {                    {         Personas        Casi d’Uso   Scenari di Interazione
Presentazione View       VIEW       Welcome page (index.html)       DESCRIZIONE       Breadcrumb: mostra la profondità di ...
Presentazione View       VIEW       Welcome page (index.html)       DESCRIZIONE       Breadcrumb: mostra la profondita di ...
Presentazione View       VIEW       Home page (home.html)       DESCRIZIONE       Breadcrumb: mostra la profondita di navi...
EsercitazioneUtilizzare Tool o Template* Scaricabili     http://iu.di.unipi.it/webapp/    1. Creare Prototipo Low-Fi    2....
PROSSIMA LEZIONE        SCARICARE e VISIONARE         iWebKit Framework*      http://snippetspace.com/      JQuery Mobile ...
Upcoming SlideShare
Loading in …5
×

Corso WebApp iOS - Lezione 04: iOS UI Design

1,205 views

Published on

Presentazione del Paradigma Page Model dell’iPhone e presentazione del Paradigma Block Model dell’iPad.

Approccio per portare un i contenuti da Desktop a Mobile.

Passare dallo Sketch al Prototipo a bassa risoluzione dell’Interfaccia iOS.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,205
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Corso WebApp iOS - Lezione 04: iOS UI Design

  1. 1. Corso WebApp iOS “iOS UI Design” Lezione 04/10”Less is more..” Ludwing Mies van der Rohe Architect.
  2. 2. Chapter 04User Interface Design for iOS DevicesChapter 05iPhone UI Design: Think SimpleChapter 06iPad UI Design: Think Inverted http://www.apress.com/9781430232469
  3. 3. Diario Lezioni LEZIONE 03 iOS UI Design Cognitive User InterfaceParadigma Page-Model dell’iPhone Paradigma Block-Model dell’iPad Da Desktop a Mobile Da Sketch a Prototipo
  4. 4. User Interface Def: Interfaccia “punto di interazione tra due sistemi”“parte visuali di un applicazione attraverso il quale l’utente interagisce con un software”
  5. 5. User Interface Due Tipi di Interfaccia interfaccia hardware interfaccia software
  6. 6. User Interface
  7. 7. User Interface Tutto é Interfaccia interfaccia attiva interfaccia passiva
  8. 8. User Interface Interfaccia Attivaparte dell’interfaccia con il quale é possibile avere un interazione “attiva*”. es: <a> * via Web Standard
  9. 9. User Interface Interfaccia Passivaparte dell’interfaccia con il quale non é possibile avere un interazione “passiva*” es: <div> * via Touch-Screen
  10. 10. User Interface
  11. 11. User Interface Interazione Touch-Screen Zoom: Pinch-In/Pinch-Out ovunque sul layout (se abilitato) Zoom: Double-Touch solo su elementi HTML
  12. 12. User Interface cognitive interface design é basato su: uso cognitivo del colore gerarchia visuale elementi orientata al touch-screen reading pattern orientati al touch-screenuso cognitivo dello spazio attivo e passivo dell’interfaccia
  13. 13. User Interfacecognitive interface design é orientato a creare: unità armonia tra elementi dell’interfaccia e del layout
  14. 14. User Interfacecognitive interface design é orientato a creare: Equilibrio tra elementi dell’interfaccia e del layout
  15. 15. User Interfacecognitive interface design é orientato a creare: Gerarchia tra elementi dell’interfaccia e del layout
  16. 16. User Interfacecognitive interface design é orientato a creare: Dominanzacreare punti focali su elementi dell’interfaccia o su elementi del layout
  17. 17. User Interface
  18. 18. Diario Lezioni LEZIONE 03 iOS UI Design Cognitive User InterfaceParadigma Page-Model dell’iPhone Paradigma Block-Model dell’iPad Da Desktop a Mobile Da Sketch a Prototipo
  19. 19. iPhone Page-Model che cosa é? struttura di base con cui sono progettate le pagine orientate all’iPhone
  20. 20. iPhone Page-Model strutturadefinisce un organizzazione lineare dei contenuti
  21. 21. iPhone Page-Model struttura anche il multitasking* introdotto con iOS4lavora con contenuti presentati in modo lineari* * non é vero multitasking * sequenziali
  22. 22. “Multi Tasking” iOS Multitasking logica sequenziale salvataggio dello stato
  23. 23. iPhone Page-Model
  24. 24. Diario Lezioni LEZIONE 03 iOS UI Design Cognitive User InterfaceParadigma Page-Model dell’iPhone Paradigma Block-Model dell’iPad Da Desktop a Mobile Da Sketch a Prototipo
  25. 25. iPad Block-Model che cosa é? struttura di base con cui sono progettate le pagine orientate all’iPad
  26. 26. iPad Page-Model strutturadefinisce un organizzazione a blocchi dei contenuti simile a quella del desktop web ma ottimizzata per un touch-screen da 9.7inch con split-view in modalità native-like
  27. 27. iPad Page-Model struttura il multitasking* introdotto con iOS4non influenza la presentazione die contenuti la navigazione a tab introdotta con iOS5 avvicina l’esperienza a quella desktop creando un esperienza ibrida *non é vero multitasking
  28. 28. iPad Page-Model struttura ibrida relazione tra contenuti mutuata dal desktopesperienza utente evoluta dal touch-screen 3.5inch
  29. 29. iPad Block-Model
  30. 30. Diario Lezioni LEZIONE 03 iOS UI Design Cognitive User InterfaceParadigma Page-Model dell’iPhone Paradigma Block-Model dell’iPad Da Desktop a Mobile Da Sketch a Prototipo
  31. 31. Mobile Content da desktop a mobilere-fattorizzazione forte del contenuto (iPhone)re-fattorizzazione debole del contenuto (iPad)
  32. 32. Mobile Content da desktop a mobile entrambi gli approcci hanno punti in comunenonostante debbano essere contestualizzati al dispositivo
  33. 33. Mobile Content Rimuovere e Prioritizzare Comprendere il Core del Design rimuovere un elemento disturba il design?rimuovere un elemento aumenta il valore del design?
  34. 34. Mobile Content
  35. 35. Mobile Content Nascondere e ModellareQuando non é possibile rimuovere un elemento indirizzato al profilo utente non-primario?
  36. 36. Mobile Content
  37. 37. Mobile Content Comprimere e RaggruppareQuando non é possibile rimuovere o nascondere un elemento fa parte del contenuto principale?
  38. 38. Mobile Content
  39. 39. Semplicità-Complessità relazione paradossale* pattern complessi contengono pattern semplici che a loro volta sono il riflesso di pattern ancor piu complessi * teoria del caos
  40. 40. Semplicità-Complessità punti chiave del paradosso la semplicità non può eliminare la complessità la semplicità può portare alla complessità la semplicità é un concetto soggettivo
  41. 41. Diario Lezioni LEZIONE 03 iOS UI Design Cognitive User InterfaceParadigma Page-Model dell’iPhone Paradigma Block-Model dell’iPad Da Desktop a Mobile Da Sketch a Prototipo
  42. 42. Progettazione riassunto step precedenti Analisi Concorrenti Definizione Personas Creazione Casi d’Uso Creazione Scenari di Interazione Stesura Documento dei Requisiti Sketch Interfaccia Prototipo Low-Fi
  43. 43. Progettazione
  44. 44. Progettazione Documento Requisiti { { Personas Casi d’Uso Scenari di Interazione
  45. 45. Progettazione livello di prototipo low-fi prototipo di singola view scenario di interazione tra view** se non é stato creato nella fase di sketch
  46. 46. Scenario Interazione
  47. 47. Progettazione livello di prototipo hi-fi prototipo di singola view presentazione* prototipi singola view scenario di interazione tra view* * keynote/power point* se non é stato creato nella fase di sketch o prototipo low-fi
  48. 48. Progettazione Documento Requisiti { { Personas Casi d’Uso Scenari di Interazione
  49. 49. Presentazione View VIEW Welcome page (index.html) DESCRIZIONE Breadcrumb: mostra la profondità di navigazione. Hero Content (slider): mostra un preview degli ultimi prodotti rilasciati. Edge-To-Edge Menu: offre le principali opzioni relative alla presentazione dello store.
  50. 50. Presentazione View VIEW Welcome page (index.html) DESCRIZIONE Breadcrumb: mostra la profondita di navigazione. Hero Content (slider): mostra un preview degli ultimi prodotti. Edge-To-Edge Menu: offre le principali opzioni relative alla presentazione dello store.
  51. 51. Presentazione View VIEW Home page (home.html) DESCRIZIONE Breadcrumb: mostra la profondita di navigazione. Hero Content (slider): mostra un preview di 3 prodotti in evidenza. Edge-To-Edge Menu: offre accesso alle diverse sezioni dello store (shop by device).
  52. 52. EsercitazioneUtilizzare Tool o Template* Scaricabili http://iu.di.unipi.it/webapp/ 1. Creare Prototipo Low-Fi 2. Creare Scenari Interazione View 3. Creare Prototipo Hi-Fi 3. Creare Presentazione View 3. Documento* Interazione Interfacce * oppure usare un proprio template * se non é stato creato nella fase di sketch
  53. 53. PROSSIMA LEZIONE SCARICARE e VISIONARE iWebKit Framework* http://snippetspace.com/ JQuery Mobile Framework http://jquerymobile.com/ * il framework presentato negli esempi a lezione

×