Linee guida per i controlli Hub nelle app di Windows Phone Store
.png "Le parti del controllo hub (intestazione dell'hub, intestazione della sezione hub, e così via)")
Descrizione
Il controllo hub, da usare nel telefono soltanto per l'orientamento verticale, visualizza una serie di sezioni che possono essere visualizzate in panoramica da lato a lato. Si tratta di un contenitore a schermo intero e di un modello di navigazione per le app.
Le esperienze hub, in precedenza note come esperienze panoramiche, fanno parte dell'aspetto e dell'esperienza nativa di Windows Phone. Diversamente dalle app progettate per rientrare nei confini dello schermo del telefono, un'app hub offre una modalità unica di visualizzare controlli, dati e servizi usando un canvas ampio e virtuale che si estende orizzontalmente oltre i confini dello schermo. Su Windows Phone, queste visualizzazioni dinamiche si servono di animazioni e contenuto su più livello, in odo tale che ciascun livello operi in maniera fluida a diverse velocità: qualcosa di simile agli effetti Parallax.
Le sezioni di una app hub fungono da punto di inizio per esperienze più dettagliate. Il tuo obiettivo deve essere quello di offrire agli utenti una presentazione visivamente ricca.
Esempi
.png "App di Windows Phone: un controllo hub")
L'interfaccia utente è composta da livelli che si spostano indipendentemente: uno sfondo con un colore o un'immagine, un'intestazione dell'hub, intestazioni delle sezioni dell'hub e sezioni dell'hub.
Se è impostata un'immagine di sfondo, questa rappresenterà il livello più basso e darà all'hub uno stile ricco, da rivista. L'immagine di sfondo, che solitamente è a pagina intera, rappresenta la parte più visiva dell'app.
L'intestazione dell'hub identifica l'app e deve essere visibile, indipendentemente dal modo in cui l'utente entra nell'app.
Le sezioni dell'hub sono i componenti dell'app hub che contengono gli altri controlli e contenuti. Le sezioni dell'hub si spostano alla stessa velocità della panoramica tramite tocco o del gesto rapido. L'intestazione della sezione dell'hub è facoltativa per tutte le sezioni dell'hub.
Le anteprime possono essere un elemento importante per rimandare a contenuto o elementi multimediali sulle altre pagine.
.png "Controllo hub con anteprime")
Indicazioni per l'uso
In base ai requisiti dell'app, puoi aggiungere diverse sezioni dell'hub al controllo hub,—ciascuna con una diversa funzione. Ad esempio, una sezione può contenere una serie di collegamenti e controlli, mentre un'altra può rappresentare un repository di immagini di anteprima. L'utente può scorrere queste sezioni usando il supporto dei gesti integrato nel controllo hub.
Linee guida per la progettazione
- Il comportamento del controllo hub e il rendering sono supportati soltanto nell'orientamento verticale.
- Puoi assegnare un tema a un controllo hub, puoi modificare i colori predefiniti, e così via.
- Usa l'effetto di wrapping del controllo hub per Windows Phone per eseguire il wrapping dall'ultima sezione alla prima, e viceversa. Per un hub che contiene 1 o 2 sezioni non verrà eseguito il wrapping. Per un hub che contiene 3 o più sezioni verrà eseguito il wrapping.
- Su Windows Phone, se usi una barra dell'app nel tuo hub, impostane la modalità su ridotta a icona. Questa modalità è progettata appositamente per massimizzare lo spazio sullo schermo in una pagina hub. Per altre info, vedi Barra dell'app per Windows Phone.
- Mentre il controllo hub si avvia, mostra una barra di stato nell'area di notifica oppure un indicatore di caricamento a schermo intero.
- Quando una sezione di un controllo hub è in fase di aggiornamento ma non blocca l'interazione dell'utente, mostra una barra di stato nell'area di notifica.
- Prima visita: la prima sezione visualizzata deve contenere l'intestazione dell'hub correttamente allineata a sinistra. Non esiste un'indicazione standard per la sezione da rendere predefinita: dipende dal contenuto che viene presentato.
- Per le visite successive allo stesso controllo hub, riporta l'utente alla sezione dalla quale era uscito.
- Non creare più di cinque sezioni in un controllo hub, sia per motivi correlati alle prestazioni, sia per limitare il numero di aree all'interno delle quali l'utente deve navigare. Quando il contenuto è più complesso, usa meno sezioni. Non opprimere l'utente con troppe sezioni. Con quattro o cinque sezioni, gli utenti possono facilmente capire dove si trovano, e cosa c'è sulla sinistra e sulla destra.
- Non usare un controllo pivot all'interno di un controllo hub e viceversa. Puoi però collegare un elemento in una sezione dell'hub a una pagina diversa contenente un controllo pivot.
- Non usare controlli che possano spostarsi o scorrere all'interno di un controllo hub. Ad esempio, se inserisci un controllo mappa all'interno di una sezione dell'hub, il controllo hub potrebbe risultare difficile da usare. L'input gestuale diverrebbe confuso. Ad esempio, se hai un dispositivo di scorrimento e tenti di scorrere a sinistra, trovandoti all'interno di una sezione del controllo hub, non risulterebbe chiaro se vuoi scorrere la sezione oppure spostare il dispositivo di scorrimento. La soluzione per un controllo che necessita di input gestuale consiste nel collocarlo nella sua pagina e passare a tale pagina. Puoi collocare un controllo con gesti disabilitati in una sezione dell'hub—, magari una mappa. Puoi sovrapporre un pulsante che attiva la mappa. Premendo il pulsante, si passa ad una nuova pagina che contiene esclusivamente la mappa. L'utente può quindi premere il pulsante Indietro per tornare alla sezione dell'hub.
- Per altre info su quando usare un controllo hub oppure un controllo pivot, consulta questi argomenti:
Intestazioni dell'hub:
- Usa testo semplice o immagini, ad esempio un logo. Puoi anche usare elementi multipli, come logo e testo (o altri elementi dell'interfaccia utente).
- Accertati che il colore del carattere o dell'immagine per l'intestazione sia visibile sull'intera immagine dello sfondo, perché i due elementi si spostano indipendentemente. Usa caratteri e stili di sistema a meno che non hai bisogno di un'esperienza specifica correlata al brand, che usa caratteri, dimensioni e colori diversi.
- Evita di animare l'intestazione o di cambiarne dinamicamente le dimensioni.
- A fini di coerenza, abbina l'intestazione dell'hub al riquadro di avvio nella schermata Start.
- Quando disponi il tuo controllo hub, evita problemi di occlusione con l'area di notifica o altri elementi.
Intestazioni della sezione dell'hub:
- Usa testo semplice o immagini, ad esempio un logo. Puoi anche usare elementi multipli, come logo e testo (o altri elementi dell'interfaccia utente).
- Accertati che il colore del carattere o dell'immagine per l'intestazione sia visibile sull'intera immagine dello sfondo, perché i due elementi si spostano indipendentemente. Usa caratteri e stili di sistema a meno che non hai bisogno di un'esperienza specifica correlata al brand, che usa caratteri, dimensioni e colori diversi.
- Evita di animare l'intestazione o di cambiarne dinamicamente le dimensioni.
Sezioni dell'hub:
- Mantieni intatta la bellezza dell'esperienza del controllo hub scegliendo con attenzione il testo e le immagini da includere nel contenuto della sezione, in modo tale che l'hub non diventi opprimente e troppo pieno.
- Se usi lo scorrimento verticale, tieni in considerazione l'orientamento. Lo scorrimento verticale in una sezione dell'hub è accettabile solo se la larghezza della sezione è maggiore della larghezza dello schermo.
- Prendi in considerazione la possibilità di nascondere sezioni dell'hub finché non hanno contenuto da visualizzare.
Grafica per lo sfondo
- Il migliore sfondo è scuro, morbido, con poco contrasto. Un colore singolo oppure una sfumatura.
- Una foto discreta e non esagerata sullo sfondo può rendere visivamente interessante un controllo hub. Devi però evitare le foto con molti colori chiari, perché potrebbero rendere difficile la lettura delle sezioni. Una tecnica pratica consiste nell'usare un filtro (rettangolo) semitrasparente nero o bianco nella parte superiore della foto. Puoi farlo in uno strumento di modifica bitmap, quindi appiattire l'immagine.
- Un'immagine di sfondo deve occupare l'intero controllo hub. Ciò significa che le sue proporzioni devono corrispondere a quelle del controllo hub, e le sue dimensioni devono tenere in considerazione la risoluzione più comune sui dispositivi, la risoluzione maggiore del dispositivo e le prestazioni. Per limitare le dimensioni del file, è consigliabile il formato JPEG.
- Puoi passare da un'immagine di sfondo a un'altra anche mentre l'app è in esecuzione, ma può essere visualizzata una sola immagine alla volta.
Anteprime
- Usa immagini ritagliate che mettono in evidenza un soggetto identificabile, invece di ridimensionare un'immagine intera. Se l'immagine non è identificabile senza testo, puoi usare un massimo di due linee di testo.
Per progettisti
Linee guida per i pulsanti Indietro
Linee guida per le barre dell'app
Per sviluppatori (XAML)
Windows.UI.Xaml.Controls Hub class
Windows.UI.Xaml.Controls HubSection class