Linee guida per il ridimensionamento in base allo schermo (app di Windows Store)

Questo argomento contiene le procedure consigliate per progettare e creare un layout per app di Windows Store che viene ridimensionato in base alle diverse dimensioni dello schermo supportate da Windows 8.

Windows 8 supporta un'ampia varietà di dimensioni dello schermo, dai piccoli schermi dei tablet a quelli intermedi dei portatili, fino ai grandi schermi all-in-one per PC desktop. Le app di Windows Store possono essere eseguite in tutte le dimensioni dello schermo supportate da Windows 8. In generale, gli schermi di dimensioni più grandi sono caratterizzati da risoluzioni dello schermo più elevate. Ne consegue che negli schermi più grandi l'app può sfruttare una quantità maggiore di area visibile.

In questo documento vengono usati i termini illustrati di seguito.

Term	Description
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.

 

Dimensioni dello schermo

Il fattore che incide maggiormente sulle app di Windows Store è la risoluzione dello schermo. Gli schermi più grandi sono caratterizzate da una risoluzione più elevata, pertanto sullo schermo è disponibile più spazio utile per la tua applicazione. Negli schermi più grandi, gli utenti si aspettano di visualizzare più contenuto e più funzionalità.

La gestione dello spazio utile sullo schermo richiede considerazioni da parte sia dello sviluppatore che del progettista. L'aspetto dell'app negli schermi di grandi dimensioni è definito dai parametri specificati per il layout nelle fasi di progettazione e sviluppo.

La piattaforma, i controlli e modelli sono stati progettati per adattarsi a schermi di varie dimensioni. Gran parte del layout dell'app verrà ridimensionato senza bisogno di particolari sforzi o di scrivere molto codice aggiuntivo. Sono tuttavia necessarie alcune considerazioni per il layout di primo livello, le aree di contenuto, l'esplorazione dell'app e i comandi, per garantire che vengano posizionate in modo prevedibile e intuitivo sugli schermi più grandi.

L'immagine seguente mostra come la mancanza di un layout adattabile a schermi di grandi dimensioni possa causare la presenza di grandi aree vuote.

Risoluzioni minime dello schermo

La tua app deve supportare due risoluzioni dello schermo principali:

• La risoluzione minima per l'esecuzione delle app di Windows Store è 1024x768.
• La risoluzione minima necessaria per il supporto di tutte le funzionalità di Windows 8 (compreso il multitasking con ancoraggio) è 1366x768. Per altre informazioni sulle visualizzazioni ancorate, vedi Linee guida per le visualizzazioni ancorata e di riempimento.

Non è possibile eseguire app di Windows Store con risoluzioni pari a 1024x600 o 1280x720.

La tabella seguente illustra le procedure consigliate per le risoluzioni principali dello schermo.

Procedura	Descrizione
Progettare per una risoluzione minima di 1024x768.	Questa procedura offre i vantaggi seguenti: Assicura che tutti gli elementi dell'interfaccia utente, ad esempio esplorazione, controlli e contenuto, si adattino allo schermo senza essere tagliati.
Progettare per una risoluzione ottimale di 1366x768	Questa procedura offre i vantaggi seguenti: Assicura che tutti gli elementi dell'interfaccia utente, ad esempio esplorazione, controlli e contenuto, si adattino allo schermo senza che vengano create aree vuote.

 

Progettazioni per schermi più grandi

Nella progettazione di un'app per schermi più grandi è necessario valutare in che modo è possibile applicare il layout, l'estetica, le proporzioni e i controlli dell'app a un canvas più ampio. Inoltre, qualsiasi app può disporre di qualsiasi numero di layout di complessità variabile. Ogni layout può essere considerato singolarmente per gli schermi più grandi.

La tabella seguente illustra le procedure consigliate per gli schermi più grandi.

Procedura	Descrizione
Riempire lo schermo	Questa procedura consente di offrire un'esperienza utente estremamente coinvolgente a prescindere dalle dimensioni dello schermo. Le app dovrebbero riempire quanto più possibile lo schermo e sembrare progettate accuratamente per schermi di dimensioni diverse. Gli utenti che acquistano monitor di grandi dimensioni si aspettano che le app conservino un aspetto ottimale su questi schermi e che, se possibile, riempiano lo schermo con contenuti aggiuntivi.
Stabilire se il layout deve essere fisso o adattivo	Le tecniche è possibile usare per creare un'app adattabile a schermi di dimensioni diverse sono due. La scelta dipende dalla complessità del layout e dagli scenari di utilizzo.

 

Layout fisso

Il layout fisso viene impiegato soprattutto per i giochi o per le app ludiche composte principalmente da immagini bitmap. La maggior parte delle volte i layout di questo tipo presentano una quantità di contenuto fissa (ad esempio un tabellone di gioco) in cui visualizzare più contenuto non è possibile, oppure non aggiungerebbe valore. Questi layout non possono adattarsi in modo dinamico a schermi di dimensioni diverse, in quanto sono progettati usando valori in pixel fissi. Windows 8 gestisce queste app mediante un approccio di adattamento integrato nella piattaforma.

Layout fisso: adattamento

Se stabilisci che la tua app richiede un layout fisso non modificabile 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 nell'immagine.

La tabella seguente illustra le procedure consigliate per le app che utilizzano la funzionalità di adattamento.

Procedura	Descrizione
Inizia con le risoluzioni di base.	Quando progetti un layout fisso, inizia progettando il layout per le risoluzioni di base, 1024x768 e 1366x768. Questo è il layout che verrà ridimensionato per gli schermi più grandi.
Inserisci il contenuto fisso all'interno di un controllo ViewBox.	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 alla dimensione fissa del controllo ViewBox in base alle dimensioni fisse in pixel del layout, ad esempio 1366x768.
Evita di inserire controlli adattivi, ad esempio AppBar, nel controllo ViewBox.	Questi controlli si adattano automaticamente alle diverse dimensioni dello schermo.
Definisci lo stile e il colore del formato 16:9.	I layout fissi non cambiano dinamicamente in risposta alle modifiche delle proporzioni o delle dimensioni dello schermo, pertanto la tecnica di adattamento eseguirà automaticamente la centratura e l'applicazione del formato 16:9 (in senso orizzontale o verticale) al contenuto dell'app. La definizione di uno stile e di un colore per il formato 16:9 che fungano da complemento al colore dell'app o dell'hardware può offrire un'esperienza straordinaria. Il colore del formato 16:9 è definito dal colore di sfondo del layout di primo livello dell'app. Ti consigliamo di scegliere un colore scuro, ad esempio il nero, che si fonderà 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 200% della dimensione 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 di dimensioni doppie rispetto a quella di progettazione, in modo che sia possibile ridurle di dimensioni anziché ingrandirle. Le immagini che seguono mostrano il deterioramento delle immagini scalari (a destra) dopo l'ingrandimento rispetto alle immagini vettoriali (a sinistra).

 

Layout adattivo

I layout adattivi sono in genere usati nelle in app di fruizione, gestione e creazione di contenuto. Questi layout sono perlopiù costituiti da elementi proporzionali definiti con un wireframe di primo livello. Ad esempio, un'app di lettura notizie contiene un'intestazione, un piè di pagina e un'area di contenuto nella parte centrale. Questi layout cambiano e si adattano automaticamente a schermi di dimensioni diverse visualizzando più contenuto e riempiendo dinamicamente lo spazio in base alle regole del layout stesso. Windows 8 gestisce queste app con le tecniche di illustrate in modo più approfondito di seguito.

Layout adattivo: gestire lo spazio

Se stabilisci che la tua app può supportare il layout adattivo per adattarsi a dimensioni dello schermo diverse, attieniti alle indicazioni di seguito per determinare in che modo sfruttare tutto lo spazio disponibile sullo schermo.

La tabella seguente illustra le procedure consigliate per le app con layout adattivo.

Procedura	Descrizione
Determinare in che modo ogni regione adattiva può sfruttare lo spazio disponibile.	Per ogni cella che hai identificato come adattiva in direzione orizzontale o verticale, determina in che modo il layout dell'app utilizzerà lo spazio su uno schermo più grande.
Determinare il wireframe del layout di primo livello.	Questo wireframe deve descrivere le aree di primo livello dell'app. Deve inoltre includere la posizione delle aree di intestazione, esplorazione e contenuto. L'immagine seguente mostra un wireframe di primo livello.
Determinare le parti fisse e le parti adattive del layout.	Per ogni cella del wireframe di primo livello, stabilisci in che modo ogni cella deve essere ridimensionata in senso orizzontale o verticale quando l'app viene adattata a dimensioni diverse. Questa definizione del wireframe di primo livello e il comportamento di ridimensionamento possono essere usati per definire i parametri per un oggetto GridLayout.
Determinare la direzione di adattamento di ogni regione adattiva.	Per ogni cella che hai identificato come adattiva in direzione orizzontale o verticale, determina in che modo il layout dell'app sfrutterà lo spazio sugli schermi più grandi.
Determinare in che modo l'app utilizzerà lo spazio nelle dimensioni adattive.	Dopo aver stabilito il modo in cui ogni area dell'app si adatterà a dimensioni diverse, il passo successivo consiste nello stabilire il modo in cui l'app sfrutterà lo spazio. Le tecniche che l'app può usare e combinare per sfruttare lo spazio disponibile sono numerose e sono tutte supportate dalla piattaforma e dai controlli di Windows 8.
Assicurati che la larghezza e l'altezza di tutte le visualizzazioni di insieme siano impostate sul 100%.	Un controllo ListView riempie automaticamente lo spazio disponibile con altri elementi.
Quando è opportuno, usa il layout a più colonne per il testo.	Il layout a più colonne aggiunge automaticamente colonne per migliorare la leggibilità e adatta il contenuto in modo da riempire lo spazio disponibile.
Quando è opportuno, usa un canvas per le immagini.	Un canvas si espande automaticamente in modo da riempire lo spazio disponibile.
Visualizzare più spazio vuoto.	Gestire la quantità di contenuti dell'app visualizzati compensando con spazio vuoto aggiuntivo.
Visualizzare più app.	Visualizzare una maggiore quantità di contenuti dell'app. A seconda del modo in cui riadatti il contenuto, puoi anche visualizzare o meno una maggiore quantità di spazio —vuoto.

 

Test del layout dell'app

È importante testare le app su varie dimensioni dello schermo. Poiché non tutti hanno a disposizione più dispositivi, il supporto per il test delle app su più schermi è integrato in strumenti come Visual Studio 11. In Visual Studio è disponibile il simulatore di Windows, che consente agli sviluppatori di eseguire le app in un'ampia varietà di dimensioni dello schermo, orientamenti e densità in pixel, come illustrato nell'immagine di seguito.

Blend for Microsoft Visual Studio 2012 per Windows 8, illustrato nell'immagine che segue, offre un menu di piattaforma che consente agli sviluppatori di progettare all'istante l'app su dimensioni dello schermo e densità in pixel diverse. Il canvas di Blend si aggiorna in modo dinamico in base all'opzione relativa allo schermo selezionata nel menu di piattaforma.

Related topics

Linee guida per i layout

 

 

Build date: 7/2/2013