Linee guida per supportare più dimensioni dello schermo

Articolo
05/15/2015

Le app di Windows Store e Windows Phone Store possono essere eseguite su vari dispositivi con dimensioni e risoluzioni dello schermo diverse. Gli utenti possono anche modificare l'orientamento dello schermo oppure, se l'app viene eseguita in Windows, ridimensionarla continuamente a una larghezza minima o visualizzarla accanto ad altre app. Sia che l'utente esegua la tua app su un telefono, un tablet, un laptop, un PC desktop o un dispositivo PPI, assicurati che l'interfaccia utente si presenti nel modo migliore e mantenga le sue funzionalità. Segui queste linee guida quando progetti un'interfaccia utente che si adatti a schermi di ogni dimensione e orientamento.

Per altre informazioni specifiche sull'adattamento di un'app di Windows Store alle finestre strette, vedi Guidelines for resizing to narrow layouts.

Descrizione

Molto probabilmente la tua app verrà eseguita su schermi di varie dimensioni, da quelli ridotti dei telefoni a quelli medi dei laptop, e forse anche sugli schermi di dispositivi all-in-one o PPI. A seconda delle dimensioni e della risoluzione dello schermo, la quantità di area visualizzabile a disposizione della la tua app sarà diversa.

app di esempio su un dispositivo tablet

app di esempio su un monitor desktop di grandi dimensioni

I termini riportati di seguito sono importanti per la comprensione del ridimensionamento in base a varie dimensioni dello schermo.

Termine	Descrizione
Dimensioni dello schermo	Dimensione fisica dello schermo in pollici. In genere misurata sulla diagonale.
Risoluzione dello schermo	Numero di pixel supportati dallo schermo in orizzontale e in verticale. Ad esempio, 1366x768.
Proporzioni	Forma dello schermo espressa come rapporto tra altezza e larghezza. Ad esempio, 16:9.

La piattaforma, i controlli e i modelli sono stati progettati per adattarsi a schermi di varie dimensioni, risoluzioni e proporzioni. Anche se gran parte del layout dell'app verrà ridimensionato automaticamente per riflettere le modifiche dello schermo, devi tenere in considerazione il layout di primo livello, le aree di contenuto, l'esplorazione dell'app e i comandi per garantire che vengano posizionati in modo prevedibile e intuitivo su tutti gli schermi.

Nelle tabelle seguenti sono indicate le dimensioni dello schermo più importanti di cui tenere conto durante la progettazione dell'app.

Dimensione schermo intero (risoluzione pixel effettiva)	Descrizione del dispositivo
1366x768	Tablet, dispositivi due-in-uno e numerosi laptop (proporzioni 16:9); risoluzione di base per laptop/desktop
1920x1080	Dispositivi e laptop di grandi dimensioni (rapporto proporzioni 16:9)
2560x1440	Dispositivi all-in-one di grandissime dimensioni (rapporto proporzioni 16:9)
1280x800 e 800x1280	Piccoli dispositivi con orientamento verticale predefinito (rapporto proporzioni 16:10)
1024x768 e 768x1024	Piccoli dispositivi con orientamento orizzontale predefinito (rapporto proporzioni 4:3)
1371x857 e 857x1371	Dispositivi di piccole dimensioni (rapporto proporzioni 16:10)
384x640	Telefoni da 4,5" (rapporto proporzioni 15:9)
400x711	Telefoni da 4,7" (rapporto proporzioni 16:9)
450x800	Telefoni da 5,5" (rapporto proporzioni 16:9)
491x873	Telefoni da 6" (rapporto proporzioni 16:9)

Quando progetti un'app da eseguire in Windows, non in Windows Phone, considera le dimensioni dello schermo a disposizione quando ci sono due app che condividono lo schermo o l'utente ridimensiona l'app alla sua larghezza minima.

Dimensione schermo diviso (risoluzione pixel effettiva)	Descrizione
672x768	Schermo diviso a metà in un dispositivo 1366x768
500x768	Dimensione minima predefinita dell'app; Schermo diviso a metà in un dispositivo 1024x768
320x768	Dimensione minima per le app che supportano la larghezza minima di 320 pixel

Per i consigli sul ridimensionamento, vedi Guidelines for scaling to pixel density.

Dimensioni della finestra per schermo intero e schermo diviso importanti

Cosa fare e cosa non fare

Quando è possibile, basati sui controlli flessibili per supportare contenuto in grado di adattarsi in modo dinamico automaticamente. I controlli flessibili includono il XAML Grid control, la griglia CSS, il layout multicolonna CSS e il ScrollViewer control. I controlli griglia, ad esempio, flettono sezioni specifiche dell'interfaccia utente per riempire lo spazio disponibile in base alla risoluzione dello schermo del dispositivo di visualizzazione e assegnano il contenuto a celle diverse in base allo spazio disponibile dello schermo.
Progetta il layout e i controlli dell'app in modo che si adattino e funzionino sugli schermi di dimensioni minime:
- Larghezza minima predefinita per le app di Windows Store: 500px.
- Larghezza minima non predefinita per le app di Windows Store: 320px.
- Dimensioni minime (non regolabili) per le app di Windows Phone Store: 384px (orientamento verticale) e 640px (orientamento orizzontale).
L'interfaccia utente e i controlli devono essere utilizzabili a tutte le dimensioni dello schermo, anche a quelle minime (indicate sopra). Ecco i controlli più importanti di cui tenere conto:
Progetta l'app affinché usi in modo efficiente lo spazio degli schermi di grandi dimensioni e sia provvista di un layout che si adatti in modo dinamico a dimensioni inferiori. Non lasciare ampi spazi vuoti.
Verifica che la tua app funzioni correttamente sulle dimensioni di dispositivo più importanti. Oltre a testare la tua app su dispositivi effettivi, puoi usare il simulatore di Microsoft Visual Studio per app di Windows Store per simulare l'esecuzione della tua app su dimensioni dello schermo fisico, risoluzioni e orientamenti diversi.
Specifica dimensioni minime per tutti i input fields. Occorre fare in modo che i campi di input non vengano nascosti quando l'utente ridimensiona la finestra.
Verifica che i campi di input dell'app non vengano nascosti dalla tastiera software.
Fai attenzione quando usi il posizionamento assoluto: se usato impropriamente, potrebbe impedire all'interfaccia utente di rispondere alle modifiche di dimensione e orientamento delle finestre. Invece di un layout hardcoded, per il layout della tua interfaccia utente usa posizioni calcolate in fase di esecuzione.
Progetta per varie densità di pixel. Per altre informazioni, vedi Linee guida per il ridimensionamento in base alla densità in pixel.

Solo app di Windows Store

Garantisci il funzionamento dell'app anche con la larghezza minima predefinita di 500 pixel. Per i suggerimenti specifici, vedi Guidelines for narrow layouts.
Se la tua app funziona correttamente con le dimensioni più piccole e vuoi incoraggiare gli utenti a mantenere l'app sullo schermo, puoi fornire il supporto di una larghezza minima non definita di 320 pixel.
Assicurati che gli utenti possano continuare a eseguire le attività correnti quando ridimensionano le app. Ad esempio, mantieni la pagina corrente, lo stato delle barre di scorrimento, la selezione e lo stato attivo dell'app.
Fornisci il supporto degli accessi a tutte le dimensioni dello schermo. Verifica che i riquadri e i riquadri a comparsa vengano ridimensionati correttamente.

Nota In Windows 8 gli utenti possono ridimensionare le app usando solo tre stati di visualizzazione: schermo intero, ancorato e riempimento. In Windows 8.1 possono ridimensionare le app a qualsiasi larghezza, dallo schermo intero alla larghezza minima.

Istruzioni aggiuntive per l'uso

Supporto automatico delle modifiche di orientamento

Gli utenti hanno la possibilità di ruotare i loro telefoni, tablet e monitor. Windows gestisce automaticamente sia gli orientamenti orizzontali che quelli verticali, purché l'app non usi un layout fisso. Dovrai solo tenere conto dell'impatto della larghezza dell'app sul layout.

Vedi la sezione Layout fissi più avanti per altre informazioni sulle situazioni in cui potrebbe essere meglio fare a meno di un layout flessibile.

Layout orizzontale e verticale

Comportamento delle app ridimensionate (solo app di Windows Store)

Se sullo schermo di un utente sono presenti più app, fai attenzione a queste interazioni tipiche dell'interfaccia utente:

Se un utente richiama gli accessi, questi si applicano all'ultima app usata dall'utente, indipendentemente dalla dimensione o dalla posizione dell'app sullo schermo.
Tra ogni app sullo schermo è presente un handle. Gli utenti possono ridimensionare le finestre dell'app facendo scorrere l'handle. L'handle mostra anche qual è l'app con stato attivo.
Se un utente seleziona l'handle tra app e tenta di ridimensionare un'app a una larghezza inferiore rispetto alla larghezza minima dell'app, l'app scompare dallo schermo.
Se un utente ruota un dispositivo o un monitor mentre sullo schermo sono presenti più app, le app non cambiano orientamento.

Layout fissi

La maggior parte delle app può usare un layout dinamico che si adatta alle modifiche delle dimensioni e della risoluzione dello schermo e che esegue automaticamente un adattamento dinamico del contenuto. Esistono però dei casi in cui la tua app potrebbe aver bisogno di un layout fisso. Le app che non sono incentrate sul contenuto o che dipendono dall'integrità della grafica, ad esempio le app di giochi, devono usare layout fissi (assoluti). Windows gestisce queste app mediante un approccio di "adattamento" integrato nella piattaforma.

Se stabilisci che la tua app richiede un layout fisso che non si adatti automaticamente in base alle dimensioni dello schermo, puoi adottare un approccio di adattamento per fare in modo che il layout fisso riempia lo schermo su schermi di dimensioni diverse, come illustrato nelle immagini seguenti.

Adattamento per un gioco a layout fisso

Per implementare l'approccio di adattamento, procedi come segue:

Progetta il layout per la risoluzione di base, ad esempio 1366x768 pixel (PC/tablet) o 384x640 pixel (telefoni). Questo è il layout che verrà ridimensionato per gli schermi più grandi.
Inserisci il contenuto fisso all'interno di un controllo ViewBox (ViewBox in JavaScript and HTML o Viewbox in C#/VB/C++ and XAML). Il controllo ViewBox ridimensiona un layout fisso adattandolo allo schermo.
Verifica che il controllo ViewBox sia impostato su una larghezza e un'altezza pari al 100%.
Definisci le proprietà relative alle dimensioni fisse del controllo ViewBox in base alle dimensioni fisse in pixel del layout, ad esempio 1366x768 o 384x640.
Scegli un colore del formato 16:9. I controlli fissi non cambiano dinamicamente in risposta alle modifiche delle proporzioni o delle dimensioni dello schermo, pertanto la tecnica di adattamento esegue automaticamente la centratura e l'applicazione del formato 16:9 (in senso orizzontale o verticale) al contenuto dell'app. Il colore delle barre del formato 16:9 è definito dal colore del layout dell'app di primo livello. Ti consigliamo di scegliere un colore scuro, ad esempio il nero, che si fonde con l'hardware, un colore neutro come il grigio, oppure un colore abbinato a quello del contenuto dell'app.
Fornisci risorse vettoriali o ad alta risoluzione. La tecnica di adattamento ridimensiona l'applicazione in dimensioni variabili, fino a un massimo del 180% (per Windows) o del 280% (per Windows Phone) delle dimensioni di progettazione su un monitor desktop di grandi dimensioni. Le risorse vettoriali in formato SVG (Scalable Vector Graphics) o XAML (Extensible Application Markup Language), oppure le primitive, vengono ridimensionate senza produrre artefatti o sfocature. Se sono necessarie risorse raster, ad esempio immagini bitmap, fornisci immagini MRT.

Le immagini che seguono mostrano il deterioramento delle immagini scalari (a destra) dopo l'ingrandimento rispetto alle immagini vettoriali (a sinistra).
Non inserire controlli adattivi in un controllo ViewBox.