26. …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”
38. 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
39. Pivot sono data friendly
Virtualizzati
Ordinamenti diversi della stessa fonte dati
Pivot
40. Un ottimo design delle liste è fondamentale per una user
experience di successo
Pivot
41. Possono essere utilizzati per 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
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?
49. I designer possono
utilizzare Blend
Una versione di Blend specifica per
phone è distribuita nel SDK
Tool for the Job: Graphical Design
50. Lo sviluppatore utilizza
Visual Studio
Visual Studio fornisce un ambiente di
design, anche se non avanzato come
Blend
Tool for the Job: Code Creation
51. Windows Phone SDK
fornisce un insieme di
template di progetto
Consiglio personale:
Usate il primo
Project Template
52. E’ possibile impostare colori e dimensioni font
direttamente “inline”:
Pessima idea!
Formattare controlli
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 tra contenuto e
intestazione
Il margine della pagina non è 24 px
Nessuna distanza tra gli elementi
Problemi?
59. 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
60. Tutti i progetti includono un file AlignmentGrid.png (folder Assets)
Possiamo attivare una griglia a design o runtime
Alignment Grid Overlay
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 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
82. “da un grande potere
derivano grandi responsabilità”
83. 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