Linee guida per il ridimensionamento dei layout stretti

Articolo
07/22/2015

Progetta l'interfaccia utente dell'app in modo che si adatti all'impostazione della visualizzazione alta o stretta da parte dell'utente. Le indicazioni disponibili in questo argomento sono utili se prevedi di:

Modificare la larghezza minima dell'app e impostarla su 320 anziché sul valore predefinito di 500 pixel (layout stretto).
Progettare l'app per passare a un layout verticale quando l'utente la ridimensiona in modo che l'altezza sia maggiore della larghezza (layout alto).

Per indicazioni generali sul ridimensionamento, vedi Guidelines for supporting multiple screen sizes. Per indicazioni specifiche sulla progettazione di giochi per i layout stretti, vedi il manuale di idee Giochi.

Se vuoi verificare l'applicazione di queste indicazioni in un esempio, vedi:

Esempi

Layout stretti

La larghezza minima predefinita per un'app di Windows Store è 500 pixel. Ecco un'app con una larghezza di 500 pixel.

App con la larghezza minima predefinita di 500 pixel.

Ed ecco l'app con la larghezza di 320 pixel.

App con la larghezza minima stretta di 320 pixel.

Se scegli di supportare una larghezza minima inferiore a 500 pixel, devi prevedere alcune modifiche di progettazione affinché l'app sia funzionale e utilizzabile a queste dimensioni. Segui le indicazioni in Cosa fare e cosa non fare per assicurare che l'app sia ancora utilizzabile a larghezze inferiori a 500 pixel.

Layout alti

Puoi anche scegliere di modificare la progettazione dell'app quando l'altezza dell'app è maggiore della larghezza. Puoi ad esempio progettare l'app per lo scorrimento verticale invece che orizzontale quando l'altezza è maggiore della larghezza.

Ecco un'app con scorrimento orizzontale a schermo intero.

App con scorrimento orizzontale, a schermo intero

Ed ecco l'app quando è più alta che larga. L'app passa allo scorrimento verticale.

App più alta che stretta con scorrimento verticale.

Casi in cui l'app dovrebbe supportare una larghezza minima di 320 pixel

La decisione in merito al supporto di larghezze inferiori al minimo predefinito per l'app dipende da quello che si prevede che l'utente farà con l'app. Ecco alcuni scenari comuni in cui è consigliabile supportare le larghezze ridotte fino a 320 pixel:

Il multitasking è un aspetto importante dell'app.
Gli utenti devono poter tenere l'app sullo schermo.
L'app funziona con un'altra app in uno scenario combinato.
L'app funziona correttamente a larghezze ridotte.

Se mantieni la larghezza minima predefinita di 500 pixel, non devi prevedere considerazioni particolari per la tua app a larghezze ridotte.

Cosa fare e cosa non fare

Se lo scorrimento dell'app è orizzontale a schermo intero, passa allo scorrimento verticale quando la finestra dell'app più alta che larga.
Per rendere accettabile la dimensione ridotta, modifica come segue l'aspetto dell'app quando la larghezza dell'app è inferiore a 500 pixel:
- Usa uno stile più piccolo per il pulsante Indietro. Per ulteriori informazioni sulle dimensioni del pulsante Indietro, vedi l'elenco delle icone dei simboli.
- Usa 20 pixel per il margine sinistro.
- Usa 20 punti per l'intestazione dell'app.
- Usa valori di offset ridotti per le animazioni di transizione delle pagine e le animazioni di transizione dei contenuti.
Ecco l'app Calcolatrice a una larghezza normale:

Ecco la stessa app con una larghezza pari a 320 pixel. Il margine sinistro è ore pari a 20 pixel e il carattere dell'intestazione è stato ridotto a una dimensione di 20pt, in base ai suggerimenti per i layout stretti.
Se lo scorrimento dell'app è verticale a schermo intero, passa a un layout a singola colonna o riquadro quando l'app è a più alta che larga. Puoi decidere la larghezza esatta per il passaggio dell'app a una singola colonna o riquadro. Nella visualizzazione a singola colonna o singolo riquadro accertati di includere gli elementi per permettere agli utenti di spostarsi da un riquadro all'altro.
Progetta il layout dell'app e tutti i controlli in modo che possano essere ridotti alla dimensione minima e che siano utilizzabili sia nelle finestre alte che strette dell'app. Ecco i controlli più importanti di cui tenere conto:
Non fare in modo che si passi a un'altra parte dell'app quando le dimensioni della finestra vengono ridotte.
Non supportare larghezze inferiori al valore minimo predefinito (500 pixel) se non puoi mantenere la maggior parte delle funzionalità dell'app a dimensioni ridotte.