Your SlideShare is downloading. ×
0
Corso di Interazione Uomo Macchina
AA 2013-2014
Roberto Polillo
Corso di laurea in Informatica
Università di Milano Bicocc...
Queste slides…
… si basano sul libro “Facile da usare”, dell’autore, dove si trovano
tutte le necessarie spiegazioni. Vedi...
Mobile: dispositivi di input/output
sistema utente
• Vista
• Udito
• Mani
• Voce
INPUT
mondo
INPUT / OUTPUT
- connessione ...
Esempio: QRCODE
R.Polillo - Marzo 20144
Esempio: Realtà aumentata
R.Polillo - Marzo 20145
Esempio: Realtà aumentata
R.Polillo - Marzo 20146
Esempio: Realtà aumentata
R.Polillo - Marzo 20147
Device mobili: funzioni tipiche
R.Polillo - Marzo 2014
8
 Accesso alla rete (via operatore telefonico o
Wi-Fi)
 Comunica...
Output: Screen size
R.Polillo - Marzo 2014
9
La crescita del mobile
Il numero dei device mobili ha superato quello
dei desktop/laptop
R.Polillo - Marzo 2014
Contesti d’uso molto vari: smartphone
Thks Lara Ciccarelli
R.Polillo - Marzo 2014
Contesti d’uso molto vari: tablet
Thks Lara Ciccarelli
R.Polillo - Marzo 2014
Contesti d’uso molto vari: desktop
Thks Lara Ciccarelli
R.Polillo - Marzo 2014
Contesti d’uso molto vari: TV
Thks Lara Ciccarelli
R.Polillo - Marzo 2014
Thks Lara Ciccarelli
R.Polillo - Marzo 2014
Thks B.Fling http://www.slideshare.net/fling/designing-mobile-experiences
Orizzontale vs verticale
R.Polillo - Marzo 2014
...
Multi-touch gestures
R.Polillo - Marzo 2014
17
https://developer.apple.com/library/ios/documentation/userexperience/
conce...
La dimensione dei pulsanti
R.Polillo - Marzo 2014
18
La dimensione
dei pulsanti!
Es.: Waze (iPad)
Layout preferenziali:
smartphone
R.Polillo - Marzo 2014
19
La keyboard
R.Polillo - Marzo 2014
20
Layout preferenziali: tablet
R.Polillo - Marzo 2014
21
Esempio: Waze (iPad)
R.Polillo - Marzo 2014
22
Esempio: Waze (iPad)
R.Polillo - Marzo 2014
23
Layout preferenziali: touch
laptop
R.Polillo - Marzo 2014
24
La posizione migliore per i
menu
R.Polillo - Marzo 2014
25
Phone Tablet Touch Keyboard
Esempio: Pinterest
R.Polillo - Marzo 2014
26
Esempio: trovacinema
R.Polillo - Marzo 2014
27
App nativa o Responsive web app?
R.Polillo - Marzo 201428
oppure
App native
specifiche per il
device e scaricate
da un App...
Media query (HTML5)
Da HTML si possono identificare alcune
caratteristiche del dispositivo che riceve la
pagina, e comporr...
Responsive design
R.Polillo - Marzo 2014
30
L'immagine si modifica in funzione delle dimensioni del
video
Esempio
R.Polillo - Marzo 2014
31
Esempio
R.Polillo - Marzo 2014
32
Esempio
R.Polillo - Marzo 201433
Esempio: menu
R.Polillo - Marzo 2014
34
Esempio: form
R.Polillo - Marzo 2014
35
Esempi
Sito responsive:
http://thenextweb.com
www.rpolillo.it
Non confondere i siti responsive con i siti
cosiddetti a l...
La soluzione più corretta: Considerare i
diversi dispositivi parte di un’unica
esperienza.
Voi che ne pensate?
R.Polillo - Marzo 201438
(Agosto
2010)
… O NO?
Esempi possibili
 Pop
 TouchPro
 Trovacinema
 Giallo Zafferano
 Waze
 Flickr (varie app)
R.Polillo - Marzo 2014
39
Upcoming SlideShare
Loading in...5
×

9. Mobile design

598

Published on

Slides dalle lezioni del corso di Interazione Uomo Macchina per il corso di laurea in Informatica - Università di Milano Bicocca (Prof.R.Polillo) - Lezione del 26 marzo 2014

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
598
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
45
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "9. Mobile design"

  1. 1. Corso di Interazione Uomo Macchina AA 2013-2014 Roberto Polillo Corso di laurea in Informatica Università di Milano Bicocca Dipartimento di Informatica, Sistemistica e Comunicazione MOBILE DESIGN1 R.Polillo - Marzo 2014 Edizione 2013-14
  2. 2. Queste slides… … si basano sul libro “Facile da usare”, dell’autore, dove si trovano tutte le necessarie spiegazioni. Vedi www.rpolillo.it Queste slide sono disponibili con licenza Creative Commons (attribuzione, non commerciale, condividi allo stesso modo) a chiunque desiderasse utilizzarle, per esempio a scopo didattico, senza necessità di preventiva autorizzazione: http://creativecommons.org/licenses/by-nc-sa/3.0/it/deed.it La licenza non si estende alle immagini fotografiche e alle screen shots, i cui diritti restano in capo ai rispettivi proprietari, che sono stati indicati, ove possibile, nelle didascalie del libro. L’autore si scusa per eventuali omissioni, e resta a disposizione per correggerle. R.Polillo - Marzo 2014 2
  3. 3. Mobile: dispositivi di input/output sistema utente • Vista • Udito • Mani • Voce INPUT mondo INPUT / OUTPUT - connessione internet - connessione telefonica - connessione bluetooth altri device - foto & video camera (2) - sound recorder - GPS, bussola - sensori di prossimità
  4. 4. Esempio: QRCODE R.Polillo - Marzo 20144
  5. 5. Esempio: Realtà aumentata R.Polillo - Marzo 20145
  6. 6. Esempio: Realtà aumentata R.Polillo - Marzo 20146
  7. 7. Esempio: Realtà aumentata R.Polillo - Marzo 20147
  8. 8. Device mobili: funzioni tipiche R.Polillo - Marzo 2014 8  Accesso alla rete (via operatore telefonico o Wi-Fi)  Comunicazione con altri device (Bluetooth, NFC)  Funzioni telefoniche  Dati conservati sulla nuvola (sincronizzazione fra i device e backup automatici)  Geolocalizzazione  Fotocamera/e  Sensori
  9. 9. Output: Screen size R.Polillo - Marzo 2014 9
  10. 10. La crescita del mobile Il numero dei device mobili ha superato quello dei desktop/laptop R.Polillo - Marzo 2014
  11. 11. Contesti d’uso molto vari: smartphone Thks Lara Ciccarelli R.Polillo - Marzo 2014
  12. 12. Contesti d’uso molto vari: tablet Thks Lara Ciccarelli R.Polillo - Marzo 2014
  13. 13. Contesti d’uso molto vari: desktop Thks Lara Ciccarelli R.Polillo - Marzo 2014
  14. 14. Contesti d’uso molto vari: TV Thks Lara Ciccarelli R.Polillo - Marzo 2014
  15. 15. Thks Lara Ciccarelli R.Polillo - Marzo 2014
  16. 16. Thks B.Fling http://www.slideshare.net/fling/designing-mobile-experiences Orizzontale vs verticale R.Polillo - Marzo 2014 16
  17. 17. Multi-touch gestures R.Polillo - Marzo 2014 17 https://developer.apple.com/library/ios/documentation/userexperience/ conceptual/mobilehig/InteractivityInput.html
  18. 18. La dimensione dei pulsanti R.Polillo - Marzo 2014 18 La dimensione dei pulsanti! Es.: Waze (iPad)
  19. 19. Layout preferenziali: smartphone R.Polillo - Marzo 2014 19
  20. 20. La keyboard R.Polillo - Marzo 2014 20
  21. 21. Layout preferenziali: tablet R.Polillo - Marzo 2014 21
  22. 22. Esempio: Waze (iPad) R.Polillo - Marzo 2014 22
  23. 23. Esempio: Waze (iPad) R.Polillo - Marzo 2014 23
  24. 24. Layout preferenziali: touch laptop R.Polillo - Marzo 2014 24
  25. 25. La posizione migliore per i menu R.Polillo - Marzo 2014 25 Phone Tablet Touch Keyboard
  26. 26. Esempio: Pinterest R.Polillo - Marzo 2014 26
  27. 27. Esempio: trovacinema R.Polillo - Marzo 2014 27
  28. 28. App nativa o Responsive web app? R.Polillo - Marzo 201428 oppure App native specifiche per il device e scaricate da un App store Responsive web site Gestito da un mobile browserApp server
  29. 29. Media query (HTML5) Da HTML si possono identificare alcune caratteristiche del dispositivo che riceve la pagina, e comporre layout diversi a seconda dei casi: responsive design una sola pagina web per tutti i device R.Polillo - Marzo 201429
  30. 30. Responsive design R.Polillo - Marzo 2014 30 L'immagine si modifica in funzione delle dimensioni del video
  31. 31. Esempio R.Polillo - Marzo 2014 31
  32. 32. Esempio R.Polillo - Marzo 2014 32
  33. 33. Esempio R.Polillo - Marzo 201433
  34. 34. Esempio: menu R.Polillo - Marzo 2014 34
  35. 35. Esempio: form R.Polillo - Marzo 2014 35
  36. 36. Esempi Sito responsive: http://thenextweb.com www.rpolillo.it Non confondere i siti responsive con i siti cosiddetti a layout liquido (in uso da molti anni): http://www.governo.it R.Polillo - Marzo 201436
  37. 37. La soluzione più corretta: Considerare i diversi dispositivi parte di un’unica esperienza.
  38. 38. Voi che ne pensate? R.Polillo - Marzo 201438 (Agosto 2010) … O NO?
  39. 39. Esempi possibili  Pop  TouchPro  Trovacinema  Giallo Zafferano  Waze  Flickr (varie app) R.Polillo - Marzo 2014 39
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×