Your SlideShare is downloading. ×
Mob04   best practices for windows phone ui design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mob04 best practices for windows phone ui design

77
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
77
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Template designed by Best practices for Windows Phone UI Design Luca Regnicoli luka@devleap.com
  • 2. brought to you by
  • 3. Luca Regnicoli luka@devleap.com ASP.NET WPF Silverlight Windows Phone Windows Store App chi sono
  • 4. Inspiration Design principle Sketch Design Build agenda
  • 5. BASICS Inspiration
  • 6. Inspiration Modern Design - Bauhaus
  • 7. ridurre tutto all’essenza
  • 8. la funzione è l’oggetto stesso
  • 9. Modern Design – Bauhaus International Typographic Style – Swiss Design Inspiration
  • 10. tipografia chiara, simmetria e pochi colori
  • 11. linguaggio internazionale
  • 12. ridurre l’iconografia
  • 13. Inspiration Modern Design – Bauhaus International Typographic Style – Swiss Design Motion Design - Cinematografia
  • 14. impatto emozionale tramite movimento
  • 15. Inspiration Modern Design – ridurre all’essenza International Typographic Style – chiaro diretto Motion Design - vita
  • 16. SKETCH Design paper-first
  • 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. DESIGN Design an app
  • 19. Panorama Pivot Page Controlli «speciali»
  • 20. «finestra» su un canvas di dimensioni maggiori Panorama
  • 21. Panorama
  • 22. Pivot
  • 23. Single Page
  • 24. Devo usare un controllo Panorama? O Pivot? O una Page? F.A.Q. #1
  • 25. «classica» navigazione Panorama Pivot Page
  • 26. Quale usare?
  • 27. Panorama vengono usati troppo Pivot vengono usati male Page vengono usate poco Errori più comuni
  • 28. Panorama = Magazine cover
  • 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. Pivot sono data friendly Virtualizzati Ordinamenti diversi della stessa fonte dati Pivot
  • 31. Un ottimo design delle liste è fondamentale per una user experience di successo Pivot
  • 32. Possono essere utilizzati per mostrare informazioni scollegate Es: Settings Non sono amici di controlli o oggetti ‘draggabili’ Pivot
  • 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. Ricevere input Page
  • 35. Generazione del contenuto Page
  • 36. Per un solo set di dati Page
  • 37. Per dettagli di elementi precedentemente selezionati Page
  • 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. BUILDING Building an app
  • 40. I designer possono utilizzare Blend Una versione di Blend specifica per phone è distribuita nel SDK Tool for the Job: Graphical Design
  • 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. Windows Phone SDK fornisce un insieme di template di progetto Consiglio personale: Usate il primo  Project Template
  • 43. E’ possibile impostare colori e dimensioni font direttamente “inline”: Pessima idea! Formattare controlli
  • 44. Temi
  • 45. Usare gli stili di default
  • 46. SDK e Windows Phone Design Style
  • 47. “innovate only when you know you really have a better idea”
  • 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. Nessun allineamento tra contenuto e intestazione Il margine della pagina non è 24 px Nessuna distanza tra gli elementi Problemi?
  • 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. Tutti i progetti includono un file AlignmentGrid.png (folder Assets) Possiamo attivare una griglia a design o runtime Alignment Grid Overlay
  • 52. Alignment Grid
  • 53. Funzionalità di Blend «Disegnare con i dati» Design time data
  • 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. Numero di parole per ogni proprietà Lunghezza massima Ecc. Modificare i design time data
  • 56. Modificare i design time data
  • 57. Generazione di liste
  • 58. Modifica del template
  • 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. 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. Anchoring a lato Animazioni built-in Application Bar Landscape
  • 62. Application Bar
  • 63. Device Tab
  • 64. Il layout deve cambiare? Layout inalterato Layout ottimizzato per landscape
  • 65. La seconda colonna è inutilizzata in portrait Grid!
  • 66. In Landscape la descrizione si muove nella seconda riga e colonna (la 3 riga shrink) Grid!
  • 67. Muovere gli elementi
  • 68. Tre risoluzioni
  • 69. No Lavoriamo in device independent pixel SO applica un fattore di scaling verso la «vera» risoluzione Quindi tre diverse UI?
  • 70. Risoluzioni «scalate»
  • 71. “Auto” per adattare l’altezza al contenuto “*” per prendere lo spazio disponibile «Auto» e «*» sono amici
  • 72. Adaptive Layout
  • 73. “da un grande potere derivano grandi responsabilità”
  • 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

×