Tecniche di responsive design

Le app UWP usano pixel effettivi per garantire che l'interfaccia utente sia leggibile e possa essere usata su tutti i dispositivi basati su Windows. Quindi, perché vuoi personalizzare l'interfaccia utente dell'app per una famiglia di dispositivi specifica?

• Per usare nel modo più efficace lo spazio e ridurre la necessità di spostamento

  Se progetti un'app in modo che abbia un aspetto ottimale su un dispositivo con uno schermo di dimensioni ridotte, ad esempio un tablet, l'app potrà essere usata anche su un PC con uno schermo molto più grande, ma probabilmente una parte dello spazio resterà inutilizzata. È possibile personalizzare l'app per visualizzare più contenuto quando lo schermo è superiore a una determinata dimensione. Ad esempio, un'app di shopping potrebbe visualizzare una sola categoria di prodotti alla volta su un tablet, ma mostrare più categorie e prodotti contemporaneamente su un PC o un portatile.

  Inserendo più contenuto sullo schermo, si riduce la quantità di navigazione che l'utente deve eseguire.

• Per sfruttare al meglio le funzionalità dei dispositivi

  Alcuni dispositivi hanno maggiori probabilità di avere determinate funzionalità del dispositivo. I portatili, ad esempio, potrebbero disporre di un sensore di posizione e una fotocamera, mentre una TV potrebbe non esserne dotata. L'app può rilevare quali funzionalità sono disponibili e abilitare le funzionalità che le usano.

• Per ottimizzare l'app per l'input

  La libreria di controlli universali funziona con tutti i tipi di input (tocco, penna, tastiera, mouse), ma puoi comunque ottimizzare per determinati tipi di input riordinando gli elementi dell'interfaccia utente. Ad esempio, se si posizionano gli elementi di spostamento nella parte inferiore dello schermo, sarà più facile per gli utenti del telefono accedere, ma la maggior parte degli utenti del PC si aspetta di visualizzare gli elementi di spostamento verso la parte superiore dello schermo.

Quando si ottimizza l'interfaccia utente dell'app per larghezze dello schermo specifiche, si dice che si sta creando una progettazione reattiva. Ecco sei tecniche di progettazione reattive che puoi usare per personalizzare l'interfaccia utente dell'app.

Suggerimento

Molti controlli UWP implementano automaticamente questi comportamenti reattivi. Per creare un'interfaccia utente reattiva, è consigliabile prendere in esame i controlli UWP.

Proposta

Puoi modificare la posizione degli elementi dell'interfaccia utente per sfruttare al meglio le dimensioni delle finestre. In questo esempio la finestra più piccola impila gli elementi verticalmente. Quando l'applicazione passa a una finestra di dimensioni maggiori, gli elementi possono sfruttare la maggiore larghezza della finestra.

In questo esempio di progettazione per un'app di foto, l'app foto riposiziona il contenuto su schermi più grandi.

Ridimensiona

Puoi ottimizzare le dimensioni delle finestre regolando i margini e le dimensioni degli elementi dell'interfaccia utente. In questo modo puoi migliorare l'esperienza di lettura su uno schermo più grande semplicemente espandendo il frame del contenuto.

Nuovo flusso

Modificando il flusso degli elementi dell'interfaccia utente in base al dispositivo e all'orientamento, l'app può offrire una visualizzazione ottimale del contenuto. Ad esempio, con uno schermo di dimensioni maggiori può essere preferibile aggiungere colonne, usare contenitori più grandi e generare le voci degli elenchi in modo diverso.

Questo esempio mostra come una singola colonna di contenuto con scorrimento verticale su uno schermo di dimensioni ridotte possa essere adattata dinamicamente su uno schermo più grande per visualizzare due colonne di testo.

Mostrare/nascondere

Puoi mostrare o nascondere gli elementi dell'interfaccia utente in base allo spazio disponibile sullo schermo oppure nei casi in cui il dispositivo supporta funzionalità aggiuntive, situazioni specifiche oppure orientamenti dello schermo preferiti.

Ad esempio, i controlli dei lettori multimediali riducono il set di pulsanti su schermi più piccoli e li espandono su schermi più grandi. Il lettore multimediale in una finestra di grandi dimensioni è ad esempio in grado di gestire molte più funzionalità sullo schermo rispetto a quelle disponibili in una finestra di dimensioni ridotte.

Parte della tecnica reveal-or-hide include la scelta di quando visualizzare più metadati. Con finestre di dimensioni ridotte è preferibile mostrare una quantità minima di metadati. Con finestre di dimensioni maggiori invece è possibile presentare una quantità significativa di metadati. Di seguito sono riportati alcuni esempi di quando mostrare o nascondere i metadati:

• In un'app di posta elettronica è possibile visualizzare l'avatar dell'utente.
• In un'app musicale puoi visualizzare altre informazioni su un album o un artista.
• In un'app video è possibile visualizzare altre informazioni su un film o uno spettacolo, ad esempio visualizzare i dettagli del cast e dell'equipaggio.
• In qualsiasi app è possibile suddividere le colonne e visualizzare altri dettagli.
• In qualsiasi app, puoi prendere qualcosa che è impilati verticalmente e steso orizzontalmente. Quando si passa dal telefono o dal phablet ai dispositivi più grandi, gli elementi elenco in pila possono cambiare per rivelare righe di elementi di elenco e colonne di metadati.

Sostituzione

Questa tecnica ti consente di cambiare l'interfaccia utente per punti di interruzione specifici. In questo esempio il riquadro di spostamento e la relativa interfaccia utente compatta funzionano bene per uno schermo di piccole dimensioni, ma su uno schermo più grande le schede potrebbero rappresentare una scelta migliore.

Il controllo NavigationView supporta questa tecnica reattiva, consentendo agli utenti di impostare la posizione del riquadro sulla parte superiore o a sinistra.

Riarchitettare

Puoi comprimere o creare una copia tramite fork dell'architettura dell'app per assegnare dispositivi specifici migliori. In questo esempio espandendo la finestra viene visualizzato l'intero modello elenco/dettagli.

Argomenti correlati

• Dimensioni dello schermo e punti di interruzione
• Layout reattivi con XAML
• Controlli e modelli UWP