Linee guida per il ridimensionamento dei layout stretti

Applies to Windows only

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:

    Ecco l'app Calcolatrice a una larghezza normale:

    App Calcolatrice che condivide lo schermo con l'app Bing Viaggi

    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.

    App Calcolatrice con larghezza di 320, intestazione e margini ridotti
  • 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.

    App con scorrimento verticale a schermo intero con due riquadri

    App con scorrimento verticale con larghezza ridotta e riquadro singolo

  • 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.

Argomenti correlati

Per sviluppatori (HTML)
Guida introduttiva: Definizione dei layout delle app
Linee guida per il ridimensionamento
Linee guida per l'adattamento in base alla densità in pixel
CoreWindow.SizeChanged
OffsetWidth property
Per sviluppatori (XAML)
Guida introduttiva: Progettazione di app per diverse dimensioni di finestra
Linee guida per il ridimensionamento
Linee guida per l'adattamento in base alla densità in pixel
CoreWindow.SizeChanged
Windows.UI.Xaml.VisualStateManager
Esempi
Esempio di layout per finestre che si ridimensionano fino a una larghezza di 320 pixel
Esempio di layout per finestre più alte che larghe

 

 

Mostra:
© 2014 Microsoft