Mob04 best practices for windows phone ui design

266 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
266
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Mob04 best practices for windows phone ui design

  1. 1. Template designed by Best practices for Windows Phone UI Design Luca Regnicoli luka@devleap.com
  2. 2. brought to you by
  3. 3. Luca Regnicoli luka@devleap.com ASP.NET WPF Silverlight Windows Phone Windows Store App chi sono
  4. 4. Inspiration Design principle Sketch Design Build agenda
  5. 5. BASICS Inspiration
  6. 6. Inspiration Modern Design - Bauhaus
  7. 7. ridurre tutto all’essenza
  8. 8. la funzione è l’oggetto stesso
  9. 9. Modern Design – Bauhaus International Typographic Style – Swiss Design Inspiration
  10. 10. tipografia chiara, simmetria e pochi colori
  11. 11. linguaggio internazionale
  12. 12. ridurre l’iconografia
  13. 13. Inspiration Modern Design – Bauhaus International Typographic Style – Swiss Design Motion Design - Cinematografia
  14. 14. impatto emozionale tramite movimento
  15. 15. Inspiration Modern Design – ridurre all’essenza International Typographic Style – chiaro diretto Motion Design - vita
  16. 16. SKETCH Design paper-first
  17. 17. …e poi usare gli strumenti dev! Separare gli aspetti di design dalla programmazione XAML e specialmente il pattern architetturale Model-View- ViewModel (MVVM) sono progettati per supportare tale “divisioni”
  18. 18. DESIGN Design an app
  19. 19. Panorama Pivot Page Controlli «speciali»
  20. 20. «finestra» su un canvas di dimensioni maggiori Panorama
  21. 21. Panorama
  22. 22. Pivot
  23. 23. Single Page
  24. 24. Devo usare un controllo Panorama? O Pivot? O una Page? F.A.Q. #1
  25. 25. «classica» navigazione Panorama Pivot Page
  26. 26. Quale usare?
  27. 27. Panorama vengono usati troppo Pivot vengono usati male Page vengono usate poco Errori più comuni
  28. 28. Panorama = Magazine cover
  29. 29. App non hanno sempre bisogno di un Panorama Panorama non sopportano bene molte info Non sono amici di controlli o oggetti ‘draggabili’ Lasciate il Panorama alla fine del processo di design Panorama
  30. 30. Pivot sono data friendly Virtualizzati Ordinamenti diversi della stessa fonte dati Pivot
  31. 31. Un ottimo design delle liste è fondamentale per una user experience di successo Pivot
  32. 32. Possono essere utilizzati per mostrare informazioni scollegate Es: Settings Non sono amici di controlli o oggetti ‘draggabili’ Pivot
  33. 33. Niente effetto parallasse, non sono coinvolgenti, «confinate» dai bordi dello schermo Questa percezione sbagliata ci porta a sottostimarle iOS/Android usano da sempre questo paradigma Page
  34. 34. Ricevere input Page
  35. 35. Generazione del contenuto Page
  36. 36. Per un solo set di dati Page
  37. 37. Per dettagli di elementi precedentemente selezionati Page
  38. 38. Pivot e Panorama: fruizione di contenuti Page: input , generazione di contenuti, o dettagli di contenuti Come i pedoni negli scacchi  • Ce ne sono tanti, non saranno mai la star dello spettacolo ma sono essenziali per una app Quindi?
  39. 39. BUILDING Building an app
  40. 40. I designer possono utilizzare Blend Una versione di Blend specifica per phone è distribuita nel SDK Tool for the Job: Graphical Design
  41. 41. Lo sviluppatore utilizza Visual Studio Visual Studio fornisce un ambiente di design, anche se non avanzato come Blend Tool for the Job: Code Creation
  42. 42. Windows Phone SDK fornisce un insieme di template di progetto Consiglio personale: Usate il primo  Project Template
  43. 43. E’ possibile impostare colori e dimensioni font direttamente “inline”: Pessima idea! Formattare controlli
  44. 44. Temi
  45. 45. Usare gli stili di default
  46. 46. SDK e Windows Phone Design Style
  47. 47. “innovate only when you know you really have a better idea”
  48. 48. Il “numero magico” in Windows Phone UI è 12 px, o multipli di 12 px Margine sinistro: 24 px Distanza tra controlli: almeno 12 px Allineamenti con incrementi di 12 px • in alcuni casi anche 6 px o 18 px Allineamento
  49. 49. Nessun allineamento tra contenuto e intestazione Il margine della pagina non è 24 px Nessuna distanza tra gli elementi Problemi?
  50. 50. Bottone nella finestra Designer visualizza una griglia con tile di 12px Utile per allineamenti Disponibile in Blend e VS Visual Studio e Blend Alignment Grid
  51. 51. Tutti i progetti includono un file AlignmentGrid.png (folder Assets) Possiamo attivare una griglia a design o runtime Alignment Grid Overlay
  52. 52. Alignment Grid
  53. 53. Funzionalità di Blend «Disegnare con i dati» Design time data
  54. 54. 1) Creare la classe in Visual Studio 2) Creare i sample data con Blend partendo da una classe esistente Create sample data from class
  55. 55. Numero di parole per ogni proprietà Lunghezza massima Ecc. Modificare i design time data
  56. 56. Modificare i design time data
  57. 57. Generazione di liste
  58. 58. Modifica del template
  59. 59. ListBox++ Liste “piatte” Liste raggruppate – intestazioni Jump List Virtualizzazione dei dati Inserito nella ROM per migliori prestazioni Anche Panorama/Pivot Da usare al posto di ListBox LongListSelector
  60. 60. Usare AppBar invece di creare il proprio menu system Fino a 4 bottoni + 1 menu opzionale Swipe up per aprire il menu Usare icone con foreground bianco Application Bar
  61. 61. Anchoring a lato Animazioni built-in Application Bar Landscape
  62. 62. Application Bar
  63. 63. Device Tab
  64. 64. Il layout deve cambiare? Layout inalterato Layout ottimizzato per landscape
  65. 65. La seconda colonna è inutilizzata in portrait Grid!
  66. 66. In Landscape la descrizione si muove nella seconda riga e colonna (la 3 riga shrink) Grid!
  67. 67. Muovere gli elementi
  68. 68. Tre risoluzioni
  69. 69. No Lavoriamo in device independent pixel SO applica un fattore di scaling verso la «vera» risoluzione Quindi tre diverse UI?
  70. 70. Risoluzioni «scalate»
  71. 71. “Auto” per adattare l’altezza al contenuto “*” per prendere lo spazio disponibile «Auto» e «*» sono amici
  72. 72. Adaptive Layout
  73. 73. “da un grande potere derivano grandi responsabilità”
  74. 74. Grazie a tutti per la partecipazione Riceverete il link per il download a slide e demo via email nei prossimi giorni Per contattarmi luka@devleap.com Grazie

×