Definizione del layout dell'interfaccia utente (HTML)
[ 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 ]
Informazioni sul layout delle app di Windows Runtime e su come differiscono dalle app tradizionali. Nella tua app di Windows Runtime puoi usare diverse superfici disponibili, ad esempio la finestra dell'app, i riquadri a comparsa, le finestre di dialogo e le barre. La scelta della superficie corretta al momento giusto può fare la differenza tra un'app intuitiva e una troppo sovraccarica.
Pagina dell'app, o pannello Canvas
La pagina dell'app, a volte chiamata pannello Canvas, è la base dell'interfaccia utente. Il pannello Canvas contiene tutti i controlli e il contenuto. Se possibile, scegli di integrare gli elementi dell'interfaccia utente in questa superficie di base. Invece di usare un popup per visualizzare un errore, ad esempio, puoi mostrare, nascondere o spostare il messaggio di errore sulla finestra con le animazioni predefinite. Se presenti la tua interfaccia utente in linea, gli utenti potranno immergersi completamente nell'app con un approccio contestualizzato.
.png "Pagina dell'app o Canvas")
Puoi creare tutte le pagine di app che ti servono per supportare gli scenari dell'utente. Vedi Pianificazione delle app di Windows Store e Progettazione dell'esplorazione per informazioni sulla creazione del layout delle pagine dell'app per supportare gli scenari utente.
Windows: Ridimensionamento dell'interfaccia utente
Gli utenti possono ridimensionare la tua app per usare un'altra app o ridimensionare un'altra app per usare la tua app. Puoi progettare la tua app in modo che il contenuto scorra in modo dinamico per ottimizzare l'esperienza utente durante il ridimensionamento dell'app.
.png "A schermo intero") |
A schermo intero L'app riempie tutto lo schermo. |
|
Ridimensionata L'app è ridimensionata in base a una parte dell'intero schermo. Le altre parti dello schermo possono essere occupate da altre app. |
.png "Ridimensionata, app con larghezza ridotta")
.png "Ridimensionata, app con larghezza estesa")
Per altre info, vedi Linee guida per l'esperienza utente per il layout e la scalabilità.
Tastiera virtuale e pannello per la grafia
La tastiera virtuale e il pannello per la grafia di Windows forniscono un'interfaccia utente di comando secondaria per l'immissione del testo. Il pannello viene visualizzato quando l'utente tocca un campo di input modificabile o fa clic sull'icona della tastiera sulla barra delle applicazioni sul desktop in Windows, e scompare quando il campo di input non è più attivo.
La tastiera virtuale consente l'immissione e la modifica del testo per tablet e telefoni—, ovvero fattori di forma che non prevedono una tastiera hardware o altri dispositivi periferici di tipo tastiera. Il pannello per la grafia di Windows consente l'immissione e la modifica del testo per i fattori di forma basati su penna.
Come per gli stati di visualizzazione menzionati in precedenza, puoi progettare la tua app in modo che il contenuto scorra dinamicamente per ottimizzare l'esperienza utente quando la tastiera virtuale o il pannello per la grafia sono visualizzati.
Per ulteriori informazioni sul supporto di queste modalità di input del testo, vedi Linee guida per la tastiera virtuale e il pannello per la grafia.
Barre dell'app
Esternamente alla pagina dell'app, la barra dell'app è l'interfaccia dei comandi principale dell'app. Usa la barra dell'app per presentare l'esplorazione, i comandi e gli strumenti agli utenti. Su Windows Phone, il menu è nascosto per impostazione predefinita e compare quando si toccano i puntini di sospensione. In Windows, l'intera barra dell'app è nascosta per impostazione predefinita e viene visualizzata quando l'utente scorre dal bordo superiore o inferiore dello schermo. La barra dell'app copre il contenuto dell'app e l'utente può nasconderla nello stesso modo in cui la mostra, oppure interagendo con l'app.
.png "Barra dell'app sul bordo inferiore dello schermo")
Vedi Progettazione dei comandi per altre informazioni sulla progettazione dei comandi e Linee guida per le barre dell'app per le linee guida sull'esperienza utente.
Windows: pulsanti di accesso rapido
I pulsanti di accesso rapido sono un insieme specifico e coerente di pulsanti presenti in tutte le app, destinati a ricerca, condivisione, dispositivi, impostazioni e schermata Start. Pensiamo che questi siano gli scenari di base che ogni utente vuole poter completare in ogni app usata.
- Ricerca Gli utenti possono cercare contenuto dell'app o contenuto Web da qualsiasi posizione nel sistema.
- Condivisione Gli utenti possono condividere contenuto dell'app con altre persone o servizi.
- Dispositivi Gli utenti possono connettersi a dispositivi e inviare contenuto, inviare flussi multimediali e stampare.
- Impostazioni Gli utenti possono configurare l'app in base alle proprie preferenze e accedere alla guida per l'utente.
- Start Gli utenti possono passare direttamente alla schermata Start.
.png "App con pulsanti di accesso rapido")
Per altre informazioni vedi le seguenti linee guida: ricerca, condivisione, impostazione dell'app e guida dell'app
Menu di scelta rapida
Il menu di scelta rapida mostra azioni che gli utenti possono eseguire su elementi di testo o dell'interfaccia utente in un'app. Puoi usare fino a cinque comandi in ogni menu di scelta rapida, ad esempio Taglia, Copia o Apri con. Questo limite mantiene il menu a scelta rapida ordinato, facile da leggere e direttamente pertinente al testo o all'oggetto su cui agisce il comando.
.png "Menu di scelta rapida")
Non usare i menu di scelta rapida come interfaccia dei comandi principale per un'app. È la barra dell'app a svolgere questa funzione. Per altre informazioni, vedi Linee guida per i menu di scelta rapida.
Finestre di dialogo di messaggio
Le finestre di dialogo di messaggio sono finestre di dialogo che richiedono un'interazione esplicita dell'utente. Queste finestre attenuano la finestra dell'app e richiedono una risposta dell'utente prima di continuare. Usa le finestre di dialogo di messaggio solo per interrompere l'utente e richiedere una risposta.
.png "Finestra di dialogo di messaggio")
Nell'esempio di Windows sopra la finestra dell'app è attenuata e l'utente deve toccare uno dei due pulsanti per chiudere la finestra di dialogo. Di conseguenza, il messaggio nella finestra di dialogo non può essere ignorato.
Per altre informazioni, vedi Linee guida per le finestre di dialogo di messaggio.
Riquadri a comparsa
I riquadri a comparsa mostrano elementi dell'interfaccia utente temporanei, che possono essere chiusi e correlati alle azioni effettivamente eseguite dall'utente. Ad esempio, puoi usare i riquadri a comparsa per chiedere all'utente di confermare un'azione, mostrare un menu a discesa da un pulsante sulla barra dell'app o visualizzare altre informazioni su un elemento. I riquadri a comparsa sono diversi dalle finestre di dialogo di messaggio perché devono essere mostrati solo in risposta a un azione di tocco o clic di un utente e devono chiudersi ogni volta che l'utente tocca un punto a loro esterno. Usa una finestra di dialogo di messaggio solo quando vuoi interrompere l'utente e richiedere la sua interazione.
.png "Riquadro a comparsa")
Nell'esempio di Windows sopra l'app resta attiva e l'utente può toccare il pulsante o un punto esterno al riquadro a comparsa per chiuderlo. Di conseguenza, il messaggio nel riquadro a comparsa può essere ignorato. Per altre informazioni, vedi Linee guida per i riquadri a comparsa.
Avvisi popup (o banner)
Un avviso popup (noto anche come banner su Windows Phone) è una notifica che puoi mostrare agli utenti quando l'app è sullo sfondo. Gli avvisi popup sono ideali per aggiornare gli utenti con informazioni in tempo reale, ma che gli utenti possono anche ignorare. Gli utenti toccano l'avviso popup per spostarsi dall'app e leggere altre informazioni.
Poiché le persone potrebbero trovarli fastidiosi, prima di aggiungere gli avvisi popup, pensaci bene. Per altre informazioni, vedi Linee guida per le notifiche di tipo avviso popup.
Riquadri
.png "Riquadri nella schermata Start") |
I riquadri vengono visualizzati nella schermata Start e in Windows sostituiscono i collegamenti dell'applicazione che sarebbero stati visualizzati nella schermata desktop e nel precedente menu Start. Gli utenti possono toccare il riquadro dell'app per lanciarla. Per altre informazioni, vedi Linee guida per i riquadri. |
Errori
Gli errori dell'app possono essere comunicati all'utente attraverso tre superfici principali. La superficie più adatta per gli errori viene scelta dallo sviluppatore dell'app in base al contenuto e alle conseguenze dell'errore.
| Per mostrare: | Usa questa superficie: |
|---|---|
Un errore non critico specifico di un elemento dell'app. L'app non è in grado di risolvere il problema, ma gli utenti sì. Interazione dell'utente: gli utenti possono continuare a interagire con l'app, i componenti del sistema e altre app senza risolvere l'errore. Esempio: l'utente immette una stringa non valida in una casella di immissione testo e quindi la ridigita. |
Testo in linea sul pannello Canvas
|
Un errore non critico che si applica all'intera app. L'app non è in grado di risolvere il problema, ma gli utenti sì. Interazione dell'utente: gli utenti possono continuare a interagire con l'app, i componenti del sistema e altre app senza risolvere l'errore. Esempio: al momento non si riesce a sincronizzare la posta. |
Testo all'inizio della pagina
|
Un errore significativo ma non critico che si applica all'intera app e per il quale l'app è in grado di suggerire una soluzione. Interazione dell'utente: gli utenti possono rispondere al prompt o continuare a interagire con l'app, i componenti del sistema e altre app senza risolvere l'errore. |
Barra degli errori e degli avvisi
|
Un errore critico che si applica all'intera app e impedisce all'utente di usarla. Interazione dell'utente: gli utenti non possono continuare a interagire con l'app senza risolvere l'errore. Possono però continuare a interagire con i componenti del sistema e usare altre app. |
Finestra di dialogo di messaggio
|
Non usare riquadri a comparsa, avvisi popup o superfici personalizzate dell'interfaccia utente per visualizzare gli errori.
Errori: testo in linea
In generale, l'errore in linea è la prima scelta della superficie. Un errore con testo in linea permette di visualizzare i messaggi nel contesto delle azioni correnti dell'utente o della pagina stessa dell'app. Un errore in linea non richiede un'azione esplicita dell'utente per risolvere l'errore e chiudere il messaggio. Il messaggio scompare automaticamente quando non è più valido.
| Cosa fare | Allineare il messaggio al controllo o all'elemento a cui si riferisce. |
| Disporre il messaggio al centro di un ampio spazio circostante per renderlo più incisivo. |
L'esempio di Windows seguente mostra un messaggio di errore in linea associato a una casella di testo specifica.
.png "Messaggio di errore in linea associato a una specifica casella di testo")
| Cosa non fare | Includere azioni o comandi nel messaggio. |
Nel seguente esempio di Windows, una barra degli errori e degli avvisi sarebbe la scelta migliore.
.png "Azione che sarebbe meglio inserire in una barra degli errori o degli avvisi")
Errori: barra degli errori o degli avvisi
Usa una barra degli errori o degli avvisi per notificare agli utenti errori e avvisi importanti e per invitare l'utente a intervenire. I messaggi di errore informano gli utenti che si è verificato un problema, spiegano perché si è verificato e forniscono una soluzione per consentire agli utenti di risolverlo. I messaggi di avviso informano gli utenti dell'esistenza di una condizione che potrebbe causare un problema in futuro.
| Cosa fare | Posizionare la barra nella parte superiore della schermata, invitando gli utenti e prendere nota del messaggio e a intervenire. |
| Colorare la barra con un colore della tavolozza dell'app. | |
| Usare lo stesso colore e lo stesso layout per tutte le barre degli errori e degli avvisi. |
.png "Barra degli errori")
| Cosa non fare | Visualizzare le barre con colori o glifi diversi (ad esempio uno scudo o un punto esclamativo) a seconda del livello di gravità percepito. |
| Usare un glifo a forma di "X" per chiudere la barra. Meglio usare un pulsante Chiudi. | |
| Usare una barra degli errori o degli avvisi per i messaggi puramente informativi. |
Il messaggio nell'esempio di Windows seguente è puramente informativo e non richiede alcuna azione. In un caso come questo è meglio usare un messaggio in linea all'inizio della schermata.
.png "Uso improprio della barra degli errori o degli avvisi")
Errori: finestre di dialogo di messaggio
Usa una finestra di dialogo di messaggio solo se è necessario un messaggio modale, per bloccare l'interazione dell'utente con l'app.
| Cosa fare | Usare una finestra di dialogo di messaggio se l'utente deve intraprendere un'azione prima di continuare a usare l'app. |
L'esempio di Windows seguente mostra un uso appropriato di una finestra di dialogo di messaggio di errore, in quanto gli utenti non possono usare l'app a meno che non abbiano un account attivo.
.png "Uso appropriato di una finestra di dialogo di messaggio")
| Cosa non fare | Usare una finestra di dialogo se l'utente può ignorare il messaggio. |
Nell'esempio seguente, l'errore non richiede in alcun modo di bloccare gli utenti finché non l'hanno risolto. Una barra degli errori o degli avvisi sarebbe stata una scelta migliore.
.png "Uso improprio di una finestra di dialogo di messaggio")
Argomenti correlati
Linee guida per le barre dell'app
Linee guida per le impostazioni dell'app
Linee guida per la condivisione contenuto
Linee guida per i riquadri a comparsa
Linee guida per le finestre di dialogo di messaggio
Linee guida per i menu di scelta rapida