Download to read offline
Uploaded byDotNetCampus
Mob04 best practices for windows phone ui design
Il documento tratta le migliori pratiche per il design dell'interfaccia utente su Windows Phone, evidenziando l'importanza della riduzione all'essenza e dell'uso strategico di controlli come panorama e pivot. Vengono forniti consigli su come costruire un'app efficace, scegliere i giusti template, allineare gli elementi e gestire le animazioni. Inoltre, sottolinea l'importanza di un design responsivo e l'uso di strumenti adeguati come Visual Studio e Blend.
More Related Content
Similar to Mob04 best practices for windows phone ui design
Mob04 best practices for windows phone ui design
- 1. Template designed by Bestpractices for Windows Phone UI Design Luca Regnicoli luka@devleap.com
- 2.
- 3.
- 4.
- 5.
- 7. Inspiration Modern Design -Bauhaus
- 9.
- 10. la funzione èl’oggetto stesso
- 11. Modern Design –Bauhaus International Typographic Style – Swiss Design Inspiration
- 13. tipografia chiara, simmetriae pochi colori
- 15.
- 17.
- 19. Inspiration Modern Design –Bauhaus International Typographic Style – Swiss Design Motion Design - Cinematografia
- 20.
- 22. Inspiration Modern Design –ridurre all’essenza International Typographic Style – chiaro diretto Motion Design - vita
- 23.
- 26. …e poi usaregli 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”
- 27.
- 28.
- 29. «finestra» su uncanvas di dimensioni maggiori Panorama
- 30.
- 31.
- 32.
- 33. Devo usare uncontrollo Panorama? O Pivot? O una Page? F.A.Q. #1
- 34.
- 35.
- 36. Panorama vengono usatitroppo Pivot vengono usati male Page vengono usate poco Errori più comuni
- 37. Panorama = Magazinecover
- 38. App non hannosempre 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
- 39. Pivot sono datafriendly Virtualizzati Ordinamenti diversi della stessa fonte dati Pivot
- 40. Un ottimo designdelle liste è fondamentale per una user experience di successo Pivot
- 41. Possono essere utilizzatiper mostrare informazioni scollegate Es: Settings Non sono amici di controlli o oggetti ‘draggabili’ Pivot
- 42. 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
- 43.
- 44.
- 45. Per un soloset di dati Page
- 46. Per dettagli dielementi precedentemente selezionati Page
- 47. 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?
- 48.
- 49. I designer possono utilizzareBlend Una versione di Blend specifica per phone è distribuita nel SDK Tool for the Job: Graphical Design
- 50. Lo sviluppatore utilizza VisualStudio Visual Studio fornisce un ambiente di design, anche se non avanzato come Blend Tool for the Job: Code Creation
- 51. Windows Phone SDK fornisceun insieme di template di progetto Consiglio personale: Usate il primo Project Template
- 52. E’ possibile impostarecolori e dimensioni font direttamente “inline”: Pessima idea! Formattare controlli
- 53.
- 54. Usare gli stilidi default
- 55. SDK e WindowsPhone Design Style
- 56. “innovate only whenyou know you really have a better idea”
- 57. 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
- 58. Nessun allineamento tracontenuto e intestazione Il margine della pagina non è 24 px Nessuna distanza tra gli elementi Problemi?
- 59. Bottone nella finestraDesigner visualizza una griglia con tile di 12px Utile per allineamenti Disponibile in Blend e VS Visual Studio e Blend Alignment Grid
- 60. Tutti i progettiincludono un file AlignmentGrid.png (folder Assets) Possiamo attivare una griglia a design o runtime Alignment Grid Overlay
- 61.
- 62. Funzionalità di Blend «Disegnarecon i dati» Design time data
- 63. 1) Creare laclasse in Visual Studio 2) Creare i sample data con Blend partendo da una classe esistente Create sample data from class
- 64. Numero di paroleper ogni proprietà Lunghezza massima Ecc. Modificare i design time data
- 65. Modificare i designtime data
- 66.
- 67.
- 68. 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
- 69. Usare AppBar invecedi 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
- 70. Anchoring a lato Animazionibuilt-in Application Bar Landscape
- 71.
- 72.
- 73. Il layout devecambiare? Layout inalterato Layout ottimizzato per landscape
- 74. La seconda colonnaè inutilizzata in portrait Grid!
- 75. In Landscape ladescrizione si muove nella seconda riga e colonna (la 3 riga shrink) Grid!
- 76.
- 77.
- 78. No Lavoriamo in deviceindependent pixel SO applica un fattore di scaling verso la «vera» risoluzione Quindi tre diverse UI?
- 79.
- 80. “Auto” per adattarel’altezza al contenuto “*” per prendere lo spazio disponibile «Auto» e «*» sono amici
- 81.
- 82. “da un grandepotere derivano grandi responsabilità”
- 83. Grazie a tuttiper la partecipazione Riceverete il link per il download a slide e demo via email nei prossimi giorni Per contattarmi luka@devleap.com Grazie