Mob04 best practices for windows phone ui design

Template designed by

Best practices for Windows Phone UI Design

Luca Regnicoliluka@devleap.com

brought to you by

Luca Regnicoliluka@devleap.com

ASP.NET

WPF

Silverlight

Windows Phone

Windows Store App

chi sono

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

luka@devleap.com

Grazie