Definizione di layout e visualizzazioni (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 ]
Puoi costruire app Windows Runtime che forniscono un'esperienza fluida e armonica tra diversi fattori di forma, dimensioni di visualizzazione e stati di visualizzazione tramite una gestione coerente e prevedibile dell'interfaccia utente. Certamente desideri che la tua app appaia al meglio quando gli utenti la visualizzano in un telefono, in un tablet o in un monitor HD di grandi dimensioni, quando scorrono verticalmente la schermata e quando ridimensionano l'app. Se pianifichi i dispositivi e le visualizzazioni scelti dai tuoi utenti, l'interfaccia utente può adattarsi in modo dinamico ed elegante alle loro scelte.
.png "Visualizzazioni a schermo intero con orientamento orizzontale, a schermo intero con orientamento verticale e ridimensionate con larghezza ridotta")
La specifica dell'interfaccia utente di un'app Windows Runtime scritta JavaScript si risolve intorno a due fattori principali: le visualizzazioni supportate dall'app e i layout necessari. Usa i fogli di stile CSS (Cascading Style Sheets) per ottenere il lavoro finito.
CSS Descrivi e gestisci l'interfaccia utente tramite CSS standard, che separa il contenuto dalla presentazione, ovvero ciò che viene mostrato da come viene mostrato. Questa separazione ti permette di offrire all'utente un'esperienza coerente, usabile e divertente che supporta più dispositivi, fattori di forma, dimensioni dello schermo, preferenze utente e stati di visualizzazione.
Layout I layout sono meccanismi tramite i quali l'app può adattarsi alle visualizzazioni supportate. Crea lo stile, la struttura e la presentazione del contenuto dell'app tramite moduli di layout CSS3 (Cascading Style Sheets, livello 3), ad esempio griglie, multicolonna, aree e flexbox che si adattano al modo in cui l'utente sceglie di visualizzare il contenuto.
Ad esempio, un'app che incorpora funzionalità di zoom semantico può specificare soglie semantiche in cui, a seconda della granularità e della quantità delle informazioni presentate, l'interfaccia utente può passare da un layout a griglia a un layout lineare.
Visualizzazioni Una visualizzazione è il modo in cui un utente può accedere e manipolare il contenuto di un'app.
- Orientamento orizzontale o verticale
- A schermo intero o ridimensionata
- È possibile effettuare la panoramica, lo zoom o adattare e ridimensionare le superfici dell'interfaccia utente
- Elementi specifici dell'interfaccia utente come il riquadro dei risultati di ricerca o la struttura della cartella
La definizione di layout e visualizzazioni per un'app Windows Runtime richiede familiarità con il linguaggio HTML, JavaScript e CSS.
Contenuto della sezione
| Argomento | Descrizione |
|---|---|
Puoi definire layout dell'app per qualsiasi dimensione o orientamento delle finestre. |
|
Guida introduttiva: Progettazione di app per diverse dimensioni di finestra |
Quando progetti un'app con un aspetto ottimale e che funzioni bene a qualsiasi dimensioni di finestra, devi scegliere se vuoi creare layout aggiuntivi a complemento del layout orizzontale a schermo intero predefinito. |
Guida introduttiva: Creazione di finestre multiple per un'app |
Puoi aiutare gli utenti a essere più produttivi consentendo loro di visualizzare più funzioni indipendenti in finestre separate. |
Per fornire l'interfaccia utente più flessibile e adattabile per gli utenti della tua app di Windows Runtime, devi prima decidere quale modalità di layout è la più appropriata per il tuo contenuto e le visualizzazioni per le quali usare il contenuto. Questo argomento descrive le funzionalità di layout Cascading Style Sheets, livello 3 (CSS3) supportate dalle app di Windows Store in Windows 8. |
|
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. |