Responsive design e fattori di forma

Le app di Store vengono usate soprattutto in computer desktop, in computer portatili, tablet e telefoni. Progetta la tua app per gestire correttamente tutti questi fattori di forma diversi. I tuoi utenti possono spostarsi tra dispositivi diversi, passare da un metodo di input a un altro, modificare l'orientamento dello schermo oppure attivare o disattivare i diversi elementi e l'app deve spostarsi, cambiare e rispondere di conseguenza.

 

App Sveglie per fattori di forma diversi

 

Visualizzazioni fluide dell'app

Windows offre pieno controllo agli utenti. L'interfaccia utente della tua app dovrà risaltare su qualunque dispositivo, in qualunque modalità di input, con qualunque orientamento e in qualunque circostanza l'utente decida di usarla.

Quando progetti un'app con visualizzazioni fluide, l'interfaccia utente dell'app si adatta al cambiamento dell'orientamento del monitor, del dispositivo mobile o del metodo di input degli utenti. Windows gestisce questo comportamento automaticamente.

Orientamento

App Sveglie in orientamento orizzontale Orientamento orizzontale   Progetta la tua app per la visualizzazione orizzontale, perché abbia un aspetto convincente in tutti i fattori di forma. Tieni conto degli effetti dei diversi fattori di forma sulla visualizzazione con orientamento orizzontale. I nuovi tipi di dispositivi possono introdurre cambiamenti nel panorama degli schermi.
App Sveglie in orientamento verticale Orientamento verticale    Ricorda che alcuni dispositivi sono usati più spesso con l'orientamento verticale e che molti dispositivi ruotano. Ottimizza il layout del contenuto per la visualizzazione verticale e, se possibile, cerca di mantenere la funzionalità. Il passaggio dall'orientamento orizzontale a quello verticale modifica la larghezza dell'app di circa un terzo, quindi è importante riflettere sull'aspetto della struttura nel formato verticale.

 

Layout fluido con più app:

Windows: progetta la tua app tenendo conto della flessibilità delle finestre ridimensionabili. Per un aspetto ottimale, indipendentemente dal modo in cui viene ridimensionata l'app, è essenziale definire layout per specifiche visualizzazioni univoche e usare controlli flessibili per la distribuzione automatica del contenuto.

App Calcolatore, app Bing Meteo e app Great British Chefs ridimensionate e affiancate sullo schermo

 

Ridimensionamento grafico predefinito

Se gli utenti possono accedere alla tua app su più fattori di forma, devi progettare un'interfaccia utente diversa per ogni possibile dimensione dello schermo usata da Windows? Gli schermi possono avere moltissime dimensioni. La risposta è: non necessariamente. Il ridimensionamento predefinito garantisce una visualizzazione ideale dell'app e del contenuto su un dispositivo di appena 7 pollici come su un grande monitor da 30 pollici. Devi solo usare un layout fluido e verificare che gli elementi grafici nell'app vengano visualizzati correttamente anche se ridimensionati.

Per altre informazioni, vedi Linee guida per il ridimensionamento in base alla densità in pixel.

foto a 2420 pixel e a 920 pixel

 

Modelli di input:

Windows: quando progetti la tua app per consentire l'interazione tramite tocco, le interazioni tramite penna, mouse e tastiera sono supportate automaticamente. I tuoi utenti possono quindi passare da un metodo di input all'altro usufruendo di tutte le funzionalità dell'app. Un utente vuole collegare una tastiera a un tablet? Nessun problema. La tua app reagisce in modo coerente e prevedibile alle scelte degli utenti.

Per ulteriori informazioni, vedi Progettazione delle interazioni tramite tocco e Risposta alle interazioni degli utenti.

Funzionalità dei dispositivi

Se progettate in modo adeguato, le app riescono a sfruttare al meglio le funzionalità dei dispositivi in cui sono eseguite. Windows 8.1 offre supporto predefinito per queste funzionalità dei dispositivi.

icona di sensore Accelerometro e altri sensori   I dispositivi di oggi sono dotati di diversi sensori. La tua app può adattare la luminosità alla luce ambientale, ridisporre l'interfaccia utente se l'utente ruota lo schermo o rispondere a qualsiasi movimento fisico. Per altre informazioni, vedi l'argomento relativo ai sensori.
icona di georilevazione Georilevazione   Usa le informazioni di georilevazione provenienti da dati Web standard o da sensori di georilevazione per aiutare gli utenti a spostarsi, trovare la propria posizione su una mappa o ricevere notifiche su persone, attività e destinazioni presenti nelle vicinanze. Per altre informazioni, vedi l'argomento relativo alla georilevazione.
icona di fotocamera Fotocamere   Consenti agli utenti di usare le proprie fotocamere incorporate o collegate via cavo per partecipare a chat e conferenze, registrare vlog, scattare foto per il profilo, parlare del mondo che li circonda o per qualsiasi altra attività in base alle caratteristiche principali dell'app.
icona di prossimità Prossimità   Consenti agli utenti di connettere i dispositivi con un semplice tocco, per implementare le esperienze in cui prevedi che più utenti saranno fisicamente vicini, come per i giochi multiplayer. Per altre informazioni, vedi l'argomento relativo ai gesti di prossimità.

 

Quando pianifichi le funzionalità della tua app, considera i dispositivi in cui l'app potrebbe essere eseguita. Alcune funzionalità dei dispositivi sono indispensabili per il buon funzionamento dell'app oppure puoi farne a meno? Nel manifesto dell'app devi dichiarare le funzionalità supportate, ma nell'app vera e propria puoi creare fallback per le funzionalità facoltative. Ad esempio, immagina che un'app per mappe di viaggio consenta agli utenti di tenere traccia del proprio percorso su una cartina, contrassegnare luoghi, inserire commenti e appunti, inviare informazioni ai social media e aggiungere foto o video del viaggio. La georilevazione sarebbe una funzionalità indispensabile, mentre il supporto della fotocamera potrebbe essere facoltativo. Se il dispositivo non è dotato di fotocamera, gli utenti possono caricare foto o video creati con un altro dispositivo. Le app di qualità supportano tutte le opzioni.

Roaming dei dati

E se gli utenti passano da un computer desktop dell'ufficio al tablet che hanno a casa? I file, lo stato e le preferenze dell'app si spostano con loro. Gli utenti possono quindi riprendere a lavorare da dove si erano fermati, indipendentemente dal computer o dalla sessione utente in uso.

Per altre informazioni sul roaming, vedi l'argomento relativo alla gestione dei dati dell'app.

Linee guida per le dimensioni delle finestre e il ridimensionamento in base allo schermo

Linee guida per il ridimensionamento dei layout alti e stretti

Scelta di un layout