Interfaccia utente delle app di Windows Store, dall'inizio alla fine (HTML)

Articolo
12/11/2015

[ 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 ]

Come si progetta un'interfaccia utente di grande impatto? Qual è il layout migliore per la tua app? Cosa rende semplice e intuitiva la navigazione in un'app?

Queste sono le domande che dovrai porti per partire con il piede giusto con la fase di progettazione dello sviluppo della tua app. Dovrai poi scoprire come implementare il progetto.

Tramite linee guida, procedure consigliate ed esempi ti aiuteremo a sfruttare al meglio le funzionalità dell'interfaccia utente di Windows 8.1. Puoi definire l'interfaccia utente della tua app in modo che sia intuitiva, esteticamente piacevole e coerente con altre app di Windows Store.

Pagina principale dell'app StumbleUpon

Le sezioni seguenti riepilogano le attività fondamentali per progettare l'interfaccia utente della tua app. Le informazioni sono basate sulle procedure consigliate descritte nelle linee guida per l'esperienza utente.

Se non hai familiarità con lo sviluppo di app di Windows Store o con il layout, la navigazione, i controlli e i comandi per le app, troverai utile seguire ogni passaggio in ordine. In caso contrario, ritieniti libero di scegliere le informazioni che possono esserti utili. Abbiamo raggruppato gli aspetti correlati dello sviluppo dell'interfaccia utente delle app. Le linee guida, le attività e il codice di esempio qui descritti sono specifici per lo sviluppo di app di Windows Store con JavaScript e HTML. Per la versione per C#/VB/C++ e XAML di queste informazioni, vedi Interfaccia utente delle app di Windows Store, dall'inizio alla fine (XAML).

Esempio

L'esempio della raccolta di controlli e layout include tutti gli elementi di interfaccia utente di cui parleremo in questo argomento. Faremo spesso riferimento a questo esempio correlato, segnalando le posizioni in cui sono implementate funzionalità specifiche.

Esempio della raccolta di controlli e layout

L'app di esempio è una raccolta dei controlli per app di Windows Store. Con l'esempio potrai esaminare i controlli e il codice per implementare ognuno. Potrai anche vedere come abbiamo implementato ognuno dei passaggi nelle sezioni seguenti.

Passaggio 1: preparativi e pianificazione

Prima di iniziare con la progettazione e lo sviluppo dell'app, assicurati di dedicare tempo alla pianificazione. Pensa a quali sono i punti di forza della tua app, chi sono i destinatari, quali sono gli scenari che vuoi implementare e quali funzionalità supporterai. Per altre info su come pianificare l'app, vedi Definizione della visione.

Inizia decidendo la strategia di navigazione da usare per l'app. In questa esercitazione partiremo dal modello di applicazione hub. Per progettare e sviluppare l'interfaccia utente della tua app, puoi scaricare il modello e fare esperimenti mentre segui i vari passaggi.

Per altre informazioni, vedi Modelli di esplorazione e Navigazione gerarchica (HTML).

Se invece vuoi iniziare subito ed esplorare il codice, passa direttamente all'esempio della raccolta di controlli e layout.

Definizione del layout dell'interfaccia utente

Quali sono gli elementi e i layout standard per un'app di Windows Store? Scopri le linee guida per la definizione del layout dell'interfaccia utente.

Nell'esempio mostreremo come abbiamo usato queste linee guida per progettare la nostra app.

Nella pagina principale abbiamo posizionato gli elementi seguenti nel canvas:
- Elenco dei gruppi di controlli. I controlli sono raggruppati in base alla funzione, per velocizzare la consultazione in base ai tipi di controllo.
- Elenco di tutti i controlli. I controlli sono disposti in ordine alfabetico per nome per facilitare la ricerca di un controllo specifico.
Abbiamo aggiunto un elemento di navigazione nella barra dell'app superiore di ogni pagina per consentire il ritorno rapido alla pagina iniziale.
Ogni pagina di sezione segue il modello di navigazione gerarchico standard e include un elenco di controlli oltre a link alla pagina dei dettagli per ognuno.
Ogni pagina di sezione e ogni pagina dei dettagli include un pulsante per tornare indietro alla pagina di provenienza.
In ogni pagina dei dettagli, abbiamo posizionato il contenuto più importante nella schermata principale dell'app:
- Descrizione del controllo
- Esempi del controllo, se può essere visualizzato nel canvas
- Frammenti di codice per l'implementazione del controllo

Passaggio 2: scegliere i controlli da aggiungere

L'aggiunta dei controlli e la definizione del layout dell'app sono operazioni strettamente collegate. Devi sapere quali controlli aggiungere e progettare il layout prima di scegliere i controlli. Conoscere il funzionamento dei controlli può esserti utile per prendere decisioni ottimali per il layout.

In questa esercitazione esamineremo prima di tutto i singoli controlli. Nel passaggio 3 scoprirai come disporli in un layout. Se preferisci approfondire per primo l'argomento della progettazione del layout, puoi saltare alla prossima sezione e tornare dopo ai controlli.

Esamina il codice dell'esempio per vedere come abbiamo aggiunto ogni controllo alla raccolta.

	Controlli per funzione Elenco dei controlli Impara a conoscere tutti i controlli disponibili e gli scopi di ognuno, per poi scegliere quelli necessari per la tua app.
	Guida introduttiva: Aggiunta di controlli HTML e gestione di eventi Usa i controlli HTML, come pulsanti, caselle di controllo ed elenchi a discesa.
	Guida introduttiva: Visualizzazione di testo Usa i controlli HTML come etichetta, DIV, paragrafo e area di testo per visualizzare il testo.
	Guida introduttiva: Input e modifica di testo Usa i controlli HTML come casella di testo, area di testo, casella di immissione password e casella di testo RTF per immettere il testo e modificarlo.
	Guida introduttiva: Aggiunta di controlli e stili WinJS Usa i controlli nella libreria Windows per JavaScript, come i controlli ListView, Rating e Flyout.

Passaggio 3: definire il layout

	Definizione del layout di una pagina dell'app Scopri caratteristiche e funzionalità del sistema della griglia, di intestazioni, margini e spaziatura e come tutti questi elementi contribuiscono alla creazione di un'esperienza coerente per gli utenti.
	Linee guida per l'esperienza utente per il layout e la scalabilità Un utente può ridimensionare un'app dalla larghezza minima fino allo schermo intero e può visualizzarla in schermi di dimensioni diverse, con varie risoluzioni e con orientamenti diversi. Puoi progettare la tua app in modo che abbia un aspetto ottimale con qualsiasi dimensione. Nell'esempio abbiamo usato la larghezza minima predefinita di 500 pixel.
	Guida introduttiva: Definizione dei layout delle app Crea un'interfaccia utente fluida con un aspetto e un funzionamento ottimali in qualsiasi dimensione.
	Guida introduttiva: Progettazione di app per diverse dimensioni di finestra Scopri come modificare la larghezza minima di un'app da 500 a 320 pixel e come modificare la progettazione in modo che l'app presenti un aspetto ottimale e funzioni correttamente alle larghezze ridotte. Scopri come progettare un'app con scorrimento orizzontale in grado di passare a un layout verticale ogni volta che l'altezza dell'app è maggiore della larghezza.
	Linee guida per l'esperienza utente per il layout e la scalabilità Quando la densità in pixel di un dispositivo di visualizzazione aumenta, le dimensioni fisiche degli oggetti sullo schermo si riducono. Quando l'interfaccia utente diventa troppo piccola da toccare e il testo troppo piccolo da leggere, Windows ridimensiona l'interfaccia dell'app e del sistema in base a una percentuale di scala. Scopri come assicurarti che l'aspetto della tua app sia ottimale anche in caso di ridimensionamento.

Passaggio 4: decidere la posizione dei comandi e come usare gli accessi

	Modelli d'uso dei comandi Scopri dove si possono posizionare i comandi: sullo schermo, nei popup, nelle finestre di dialogo o nelle barre dell'app. Decidi poi dove sistemare quelli della tua app.
	Linee guida ed elenco di controllo per le barre dell'app Guida introduttiva: Aggiunta di una barra dell'app con comandi Linee guida per le barre di spostamento Guida introduttiva: Aggiunta di una barra di spostamento Informazioni sul raggruppamento dei comandi, il posizionamento coerente, gli stili, le icone e altre importanti linee guida per le barre dei comandi e le barre di spostamento dell'app. Nell'esempio abbiamo implementato un pulsante Home nella barra dell'app superiore per facilitare la navigazione.
	Linee guida ed elenco di controllo per l'aggiunta dei menu di scelta rapida Usa i menu di scelta rapida per offrire accesso immediato alle azioni, come Taglia e Incolla. Evita di inserire troppi comandi nei menu di scelta rapida e assicurati che i comandi inclusi siano effettivamente pertinenti per la selezione.
	Linee guida ed elenco di controllo per la ricerca Guida introduttiva: Aggiunta della funzionalità di ricerca a un'app Scopri quando usare il controllo casella di ricerca in-app e quando usare il contratto Ricerca.
	Linee guida per la condivisione di contenuto Guida introduttiva: Condivisione di contenuto Se la tua app presenta contenuto da condividere, è un'origine di condivisione. Se la tua app può ricevere contenuto da altre app, è una destinazione di condivisione.
	Linee guida per le impostazioni dell'app Guida introduttiva: Aggiunta di impostazioni all'app Fai un uso intelligente dell'accesso alle impostazioni. Mantieni le impostazioni semplici e poco numerose. Scopri le impostazioni giuste per il riquadro Impostazioni.
	Linee guida per la Guida dell'app Linee guida per l'interfaccia utente di istruzioni Guida introduttiva: Aggiunta della Guida dell'app Scopri quando e come implementare la Guida dell'app nel riquadro Impostazioni e quando usare altri strumenti per fornire assistenza, come i suggerimenti, le demo o elementi ridisegnati dell'interfaccia utente.

Passaggio 5: operazioni finali

Esegui il Kit di certificazione app Windows.

Operazione consigliata. Eseguendo il kit di certificazione puoi assicurarti che la tua app soddisfi i requisiti per Windows Store, quindi devi eseguire questo passaggio dopo aver aggiunto le funzionalità principali all'app.

Ecco fatto. Dopo aver esaminato le linee guida per l'esperienza utente e progettato l'interfaccia utente, la tua app dovrebbe rispecchiare le procedure consigliate e offrire quindi un'esperienza ottimale agli utenti.

Passaggi successivi

Ora che conosci i concetti di base, puoi continuare esaminando gli altri esempi disponibili nella serie Funzionalità delle app, dall'inizio alla fine.