Embed Size (px)
Citation preview
brought to you by
Inspiration
Design principle
Sketch
Design
Build
agenda
BA
SIC
S
Inspiration
Inspiration
Modern Design - Bauhaus
ridurre tutto all’essenza
la funzione è l’oggetto stesso
Modern Design – Bauhaus
International Typographic Style – Swiss Design
Inspiration
tipografia chiara, simmetria e pochi colori
linguaggio internazionale
ridurre l’iconografia
Inspiration
Modern Design – Bauhaus
International Typographic Style – Swiss Design
Motion Design - Cinematografia
impatto emozionale tramite movimento
Inspiration
Modern Design – ridurre all’essenza
International Typographic Style – chiaro diretto
Motion Design - vita
SK
ETC
H
Design paper-first
…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”
DES
IGN
Design an app
Panorama
Pivot
Page
Controlli «speciali»
«finestra» su un canvas di dimensioni maggiori
Panorama
Panorama
Pivot
Single Page
Devo usare un controllo Panorama? O Pivot? O una Page?
F.A.Q. #1
«classica» navigazione
Panorama
Pivot
Page
Quale usare?
Panorama vengono usati troppo
Pivot vengono usati male
Page vengono usate poco
Errori più comuni
Panorama = Magazine cover
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
Pivot sono data friendlyVirtualizzati
Ordinamenti diversi della stessa fonte dati
Pivot
Un ottimo design delle liste è fondamentale per una user experience di successo
Pivot
Possono essere utilizzati per mostrare informazioni scollegateEs: Settings
Non sono amici di controlli o oggetti ‘draggabili’
Pivot
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
Ricevere input
Page
Generazione del contenuto
Page
Per un solo set di dati
Page
Per dettagli di elementi precedentemente selezionati
Page
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?
BU
ILD
ING
Building an app
I designer possono utilizzare BlendUna versione di Blend specifica per phone è distribuita nel SDK
Tool for the Job: Graphical Design
Lo sviluppatore utilizza Visual StudioVisual Studio fornisce un ambiente di design, anche se non avanzato come Blend
Tool for the Job: Code Creation
Windows Phone SDK fornisce un insieme di template di progetto
Consiglio personale:Usate il primo
Project Template
E’ possibile impostare colori e dimensioni font direttamente “inline”:
Pessima idea!
Formattare controlli
Temi
Usare gli stili di default
SDK e Windows Phone Design Style
“innovate only when you know you really have a better idea”
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
Nessun allineamento tra contenuto e intestazione
Il margine della pagina non è 24 px
Nessuna distanza tra gli elementi
Problemi?
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
Tutti i progetti includono un file AlignmentGrid.png (folder Assets)
Possiamo attivare una griglia a design o runtime
Alignment Grid Overlay
Alignment Grid
Funzionalità di Blend
«Disegnare con i dati»
Design time data
1) Creare la classe in Visual Studio
2) Creare i sample data con Blend partendo da una classe esistente
Create sample data from class
Numero di parole per ogni proprietà
Lunghezza massima
Ecc.
Modificare i design time data
Modificare i design time data
Generazione di liste
Modifica del template
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
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
Anchoring a lato
Animazioni built-in
Application Bar Landscape
Application Bar
Device Tab
Il layout deve cambiare?
Layout inalterato
Layout ottimizzato per landscape
La seconda colonna è inutilizzata in portrait
Grid!
In Landscape la descrizione si muove nella seconda riga e colonna (la 3 riga shrink)
Grid!
Muovere gli elementi
Tre risoluzioni
No
Lavoriamo in device independent pixelSO applica un fattore di scaling verso la «vera» risoluzione
Quindi tre diverse UI?
Risoluzioni «scalate»
“Auto” per adattare l’altezza al contenuto
“*” per prendere lo spazio disponibile
«Auto» e «*» sono amici
Adaptive Layout
“da un grande potere derivano grandi responsabilità”
Grazie a tutti per la partecipazione
Riceverete il link per il download a slide e demo via email nei prossimi giorni
Per contattarmi
Grazie
