![Page 2: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/2.jpg)
brought to you by
![Page 4: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/4.jpg)
Inspiration
Design principle
Sketch
Design
Build
agenda
![Page 5: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/5.jpg)
BA
SIC
S
Inspiration
![Page 6: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/6.jpg)
![Page 7: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/7.jpg)
Inspiration
Modern Design - Bauhaus
![Page 8: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/8.jpg)
![Page 9: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/9.jpg)
ridurre tutto all’essenza
![Page 10: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/10.jpg)
la funzione è l’oggetto stesso
![Page 11: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/11.jpg)
Modern Design – Bauhaus
International Typographic Style – Swiss Design
Inspiration
![Page 12: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/12.jpg)
![Page 13: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/13.jpg)
tipografia chiara, simmetria e pochi colori
![Page 14: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/14.jpg)
![Page 15: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/15.jpg)
linguaggio internazionale
![Page 16: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/16.jpg)
![Page 17: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/17.jpg)
ridurre l’iconografia
![Page 18: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/18.jpg)
![Page 19: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/19.jpg)
Inspiration
Modern Design – Bauhaus
International Typographic Style – Swiss Design
Motion Design - Cinematografia
![Page 20: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/20.jpg)
impatto emozionale tramite movimento
![Page 21: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/21.jpg)
![Page 22: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/22.jpg)
Inspiration
Modern Design – ridurre all’essenza
International Typographic Style – chiaro diretto
Motion Design - vita
![Page 23: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/23.jpg)
SK
ETC
H
Design paper-first
![Page 24: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/24.jpg)
![Page 25: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/25.jpg)
![Page 26: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/26.jpg)
…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”
![Page 27: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/27.jpg)
DES
IGN
Design an app
![Page 28: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/28.jpg)
Panorama
Pivot
Page
Controlli «speciali»
![Page 29: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/29.jpg)
«finestra» su un canvas di dimensioni maggiori
Panorama
![Page 30: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/30.jpg)
Panorama
![Page 31: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/31.jpg)
Pivot
![Page 32: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/32.jpg)
Single Page
![Page 33: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/33.jpg)
Devo usare un controllo Panorama? O Pivot? O una Page?
F.A.Q. #1
![Page 34: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/34.jpg)
«classica» navigazione
Panorama
Pivot
Page
![Page 35: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/35.jpg)
Quale usare?
![Page 36: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/36.jpg)
Panorama vengono usati troppo
Pivot vengono usati male
Page vengono usate poco
Errori più comuni
![Page 37: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/37.jpg)
Panorama = Magazine cover
![Page 38: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/38.jpg)
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
![Page 39: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/39.jpg)
Pivot sono data friendlyVirtualizzati
Ordinamenti diversi della stessa fonte dati
Pivot
![Page 40: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/40.jpg)
Un ottimo design delle liste è fondamentale per una user experience di successo
Pivot
![Page 41: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/41.jpg)
Possono essere utilizzati per mostrare informazioni scollegateEs: Settings
Non sono amici di controlli o oggetti ‘draggabili’
Pivot
![Page 42: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/42.jpg)
Niente effetto parallasse, non sono coinvolgenti, «confinate» dai bordi dello schermoQuesta percezione sbagliata ci porta a sottostimarle
iOS/Android usano da sempre questo paradigma
Page
![Page 43: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/43.jpg)
Ricevere input
Page
![Page 44: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/44.jpg)
Generazione del contenuto
Page
![Page 45: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/45.jpg)
Per un solo set di dati
Page
![Page 46: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/46.jpg)
Per dettagli di elementi precedentemente selezionati
Page
![Page 47: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/47.jpg)
Pivot e Panorama: fruizione di contenuti
Page: input , generazione di contenuti, o dettagli di contenutiCome i pedoni negli scacchi
• Ce ne sono tanti, non saranno mai la star dello spettacolo ma sono essenziali per una app
Quindi?
![Page 48: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/48.jpg)
BU
ILD
ING
Building an app
![Page 49: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/49.jpg)
I designer possono utilizzare BlendUna versione di Blend specifica per phone è distribuita nel SDK
Tool for the Job: Graphical Design
![Page 50: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/50.jpg)
Lo sviluppatore utilizza Visual StudioVisual Studio fornisce un ambiente di design, anche se non avanzato come Blend
Tool for the Job: Code Creation
![Page 51: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/51.jpg)
Windows Phone SDK fornisce un insieme di template di progetto
Consiglio personale:Usate il primo
Project Template
![Page 52: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/52.jpg)
E’ possibile impostare colori e dimensioni font direttamente “inline”:
Pessima idea!
Formattare controlli
![Page 53: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/53.jpg)
Temi
![Page 54: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/54.jpg)
Usare gli stili di default
![Page 55: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/55.jpg)
SDK e Windows Phone Design Style
![Page 56: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/56.jpg)
“innovate only when you know you really have a better idea”
![Page 57: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/57.jpg)
Il “numero magico” in Windows Phone UI è 12 px, o multipli di 12 pxMargine 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
![Page 58: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/58.jpg)
Nessun allineamento tra contenuto e intestazione
Il margine della pagina non è 24 px
Nessuna distanza tra gli elementi
Problemi?
![Page 59: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/59.jpg)
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
![Page 60: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/60.jpg)
Tutti i progetti includono un file AlignmentGrid.png (folder Assets)
Possiamo attivare una griglia a design o runtime
Alignment Grid Overlay
![Page 61: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/61.jpg)
Alignment Grid
![Page 62: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/62.jpg)
Funzionalità di Blend
«Disegnare con i dati»
Design time data
![Page 63: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/63.jpg)
1) Creare la classe in Visual Studio
2) Creare i sample data con Blend partendo da una classe esistente
Create sample data from class
![Page 64: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/64.jpg)
Numero di parole per ogni proprietà
Lunghezza massima
Ecc.
Modificare i design time data
![Page 65: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/65.jpg)
Modificare i design time data
![Page 66: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/66.jpg)
Generazione di liste
![Page 67: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/67.jpg)
Modifica del template
![Page 68: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/68.jpg)
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
![Page 69: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/69.jpg)
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
![Page 70: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/70.jpg)
Anchoring a lato
Animazioni built-in
Application Bar Landscape
![Page 71: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/71.jpg)
Application Bar
![Page 72: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/72.jpg)
Device Tab
![Page 73: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/73.jpg)
Il layout deve cambiare?
Layout inalterato
Layout ottimizzato per landscape
![Page 74: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/74.jpg)
La seconda colonna è inutilizzata in portrait
Grid!
![Page 75: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/75.jpg)
In Landscape la descrizione si muove nella seconda riga e colonna (la 3 riga shrink)
Grid!
![Page 76: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/76.jpg)
Muovere gli elementi
![Page 77: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/77.jpg)
Tre risoluzioni
![Page 78: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/78.jpg)
No
Lavoriamo in device independent pixelSO applica un fattore di scaling verso la «vera» risoluzione
Quindi tre diverse UI?
![Page 79: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/79.jpg)
Risoluzioni «scalate»
![Page 80: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/80.jpg)
“Auto” per adattare l’altezza al contenuto
“*” per prendere lo spazio disponibile
«Auto» e «*» sono amici
![Page 81: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/81.jpg)
Adaptive Layout
![Page 82: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/82.jpg)
“da un grande potere derivano grandi responsabilità”
![Page 83: Mob04 best practices for windows phone ui design](https://reader036.vdocuments.site/reader036/viewer/2022062513/5561f9a9d8b42acd4e8b4c50/html5/thumbnails/83.jpg)
Grazie a tutti per la partecipazione
Riceverete il link per il download a slide e demo via email nei prossimi giorni
Per contattarmi
Grazie