Definizione del layout di una pagina dell'app

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

Puoi usare il modello di layout descritto qui per definire il layout degli elementi della UI nelle pagine dell'app. Seguire un modello coerente per margini, intestazioni di pagina, larghezze dei bordi e altri elementi di questo tipo conferisce uniformità tra le app e permette agli utenti di cogliere facilmente le interazioni in tutto il sistema.

L'interfaccia utente in Windows 8 tenta di mantenere una sagoma coerente per tutte le app. La caratteristica distintiva della sagoma è un ampio margine lungo i bordi superiore, inferiore e sinistro. Questo ampio margine aiuta gli utenti a capire la direzione della panoramica orizzontale del contenuto.

Per una dimostrazione pratica di queste funzionalità, vedi gli argomenti della serie Funzionalità dell'app dall'inizio alla fine: Interfaccia utente delle app di Windows Store dall'inizio alla fine

Uso del sistema della griglia

Prima di approfondire l'argomento della sagoma di Windows 8, dovresti acquisire una certa conoscenza del sistema della griglia di Windows 8. Il sistema della griglia è uno strumento di progettazione che aiuta a conferire uniformità visiva alle diverse app e, allo stesso tempo, consente di fornire una struttura per le variazioni mantenendo vivo l'interesse dell'utente. Il sistema della griglia è incorporato nei modelli per sviluppatori e abbiamo progettato i nostri controlli e le nostre raccolte sulla base del sistema della griglia.

La griglia è costituita da unità e sottounità. L'unità di misura di base è, appunto, l'unità. Una unità corrisponde a 20 × 20 pixel. Ogni unità è ulteriormente suddivisa in sottounità di 5 × 5 pixel. Ci sono 16 sottounità per unità quadrata. L'immagine seguente rappresenta la griglia nell'angolo superiore sinistro di una schermata. L'immagine è stata ingrandita per mostrare pixel, sottounità e unità.

Intestazione di pagina

La linea di base dell'intestazione di pagina dovrebbe essere di 5 unità, o 100 pixel, dal margine superiore. Il margine sinistro per l'intestazione di pagina è di 6 unità, o 120 pixel. L'intestazione di pagina di Windows 8 è SegoeUI Stylistic Set 20, light weight. Per altre informazioni sugli insiemi stilistici, vedi Linee guida ed elenco di controllo per testo e tipografia.

Nota  Nell'aggiornamento a Windows 8.1, gli utenti possono spostare il mouse sul bordo superiore dello schermo per visualizzare una barra del titolo. Gli utenti possono anche spostare il mouse sul bordo inferiore dello schermo per visualizzare la barra delle applicazioni dal desktop. Quando l'utente sposta il mouse da uno dei bordi, la barra del titolo e la barra delle applicazioni scompaiono. Gli utenti non possono visualizzare la barra del titolo o la barra delle applicazioni mediante il tocco. Quando sono visualizzate, la barra del titolo e la barra delle applicazioni possono coprire l'interfaccia utente dell'app o i comandi: tieni presente questo aspetto quando definisci la posizione degli elementi nel layout della tua app.

Area del contenuto

L'area del contenuto ha un margine superiore di 7 unità, o 140 pixel. Il margine sinistro è di 6 unità, o 120 pixel. Il margine inferiore è flessibile. Per poter eseguire una panoramica orizzontale del contenuto, non dovrebbe essere più di 6,5 unità (130 pixel) o meno di 2,5 unità (50 pixel). Per poter eseguire una panoramica verticale del contenuto, i margini superiore e sinistro restano invariati. Non viene specificato un margine inferiore, poiché il contenuto viene fatto scorrere fuori dallo schermo.

Valori di riempimento orizzontale

Il riempimento orizzontale tra gli elementi del contenuto varia in base agli elementi. Gli elementi in rilievo (come le immagini e le icone utente) hanno 2 sottounità, o 10 pixel, di riempimento tra il riquadro e il testo a corredo. Gli elenchi hanno 2 unità, o 40 pixel, di riempimento tra le colonne. Gli elementi in rilievo hanno 2 sottounità, o 10 pixel, di riempimento tra le colonne.

Valori di riempimento verticale

Anche il riempimento verticale tra gli elementi del contenuto varia in base agli elementi. Gli elenchi di riquadri e testo hanno 1 unità, o 20 pixel, di riempimento verticale tra gli elementi in una riga. Gli oggetti in rilievo hanno 2 sottounità, o 10 pixel, di riempimento verticale tra gli elementi in una riga.

Riempimento orizzontale tra gruppi

Il riempimento tra gruppi è di 4 unità, o 80 pixel. Si tratta di un valore di riempimento generoso, che assicura una separazione adeguata per distinguere un gruppo dall'altro durante la panoramica.

Argomenti correlati

Linee guida per l'esperienza utente per il layout e la scalabilità

Linee guida ed elenco di controllo per testo e tipografia