• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
9. Mobile design
 

9. Mobile design

on

  • 228 views

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

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

Statistics

Views

Total Views
228
Views on SlideShare
228
Embed Views
0

Actions

Likes
0
Downloads
32
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    9. Mobile design 9. Mobile design Presentation Transcript

    • 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
    • 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
    • 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à
    • 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)  Comunicazione con altri device (Bluetooth, NFC)  Funzioni telefoniche  Dati conservati sulla nuvola (sincronizzazione fra i device e backup automatici)  Geolocalizzazione  Fotocamera/e  Sensori
    • 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 16
    • Multi-touch gestures R.Polillo - Marzo 2014 17 https://developer.apple.com/library/ios/documentation/userexperience/ conceptual/mobilehig/InteractivityInput.html
    • 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 store Responsive web site Gestito da un mobile browserApp server
    • 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
    • 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 layout liquido (in uso da molti anni): http://www.governo.it R.Polillo - Marzo 201436
    • 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