Modelli di esplorazione [app di Windows Store]

Articolo
05/06/2015

Organizza il contenuto della tua app di Windows Store per rendere facile e intuitiva l'esplorazione. Con i modelli di esplorazione corretti, puoi limitare i controlli permanenti sullo schermo, come le schede, lasciando che gli utenti si concentrino sul contenuto corrente.

L'esplorazione nelle app di Windows Store si basa su due modelli, uno gerarchico e l'altro semplice. Un'app può usare l'uno o l'altro oppure una combinazione di questi modelli.

Modello gerarchico

Con questo modello le app di Windows Store risultano veloci e fluide. È ideale per app con grandi quantità di contenuto o molte sezioni distinte disponibili per l'esplorazione da parte degli utenti. La maggior parte delle app di Windows Store usa un sistema di esplorazione gerarchico.

Per conoscere meglio questa funzionalità, vedi gli argomenti della serie Funzionalità dell'app, dall'inizio alla fine:: esplorazione gerarchica, dall'inizio alla fine (HTML e XAML).

Pagine hub, delle sezioni e dei dettagli in un'app di Windows Store

Le pagine hub rappresentano il punto di ingresso dell'utente nell'app. I contenuti sono visualizzati in una ricca panoramica orizzontale che consente agli utenti di individuare a colpo d'occhio i nuovi elementi disponibili.

L'hub è composto da diverse categorie di contenuto, ognuna associata alle diverse pagine delle sezioni dell'app.

Le pagine delle sezioni costituiscono il secondo livello delle app. Qui i contenuti possono essere visualizzati nella forma più adatta a rappresentarne il contesto o l'argomento.

Le pagine delle sezioni sono composte da singoli elementi, a ciascuno dei quali corrisponde una pagina dei dettagli specifica. Per le pagine delle sezioni sono spesso indicati il raggruppamento e un layout in stile panorama.

Le pagine dei dettagli sono il terzo livello delle app. Visualizzano i dettagli dei singoli elementi, il cui formato può variare enormemente a seconda del tipo di contenuto.

Le pagine dei dettagli sono costituite dai dettagli o dalle funzionalità degli elementi. Possono contenere numerose informazioni, ma anche un unico oggetto, ad esempio un'immagine o un video.

Modello semplice

Molte app di Windows Store usano un modello di esplorazione semplice. Le app come i giochi, i browser o le app per la creazione di documenti usano questo modello per consentire all'utente di spostarsi tra pagine, schede o modalità che si trovano tutte allo stesso livello gerarchico. Diversamente dal modello gerarchico, questo modello in genere non prevede un pulsante Indietro permanente né uno stack di esplorazione, perciò per spostarsi tra le pagine si usano link diretti presenti nel contenuto, come nel primo esempio seguente, o sulla barra di spostamento, come nel secondo esempio.

Per conoscere meglio questa funzionalità, vedi gli argomenti della serie Funzionalità dell'app, dall'inizio alla fine:: esplorazione semplice, dall'inizio alla fine (HTML e XAML).

esempi di esplorazione semplice

Questo modello è ideale quando lo scenario principale implica il passaggio rapido tra un numero ridotto di schede, ad esempio in app Web browser come Internet Explorer, e-book e giochi.

Esplorazione su canvas

intestazione, pulsante Indietro, intestazioni di sezione e strumenti come elementi per l'esplorazione

Intestazione e pulsante Indietro

L'intestazione contrassegna la pagina attuale ed è utile per capire dove ci si trova. Il pulsante Indietro consente di tornare rapidamente nel punto in cui ci si trovava in precedenza.
Etichette di sezioni o categorie

Queste etichette consentono di passare a diverse sezioni o categorie di contenuto.
Altre destinazioni

Puoi usare riquadri, frecce, pulsanti, risultati di ricerche o altre destinazioni personalizzate come elementi per l'esplorazione. In alcuni giochi puoi trovare esempi di elementi per l'esplorazione con forme interessanti.

App Bing Notizie che mostra l'intestazione, l'etichetta di sezione e link a maggiori dettagli

Barra dell'app superiore

Facendo scorrere rapidamente un dito dal bordo superiore o inferiore dello schermo, l'utente apre le barre dell'app. La barra dell'app superiore è anche detta barra di spostamento. Puoi inserire elementi per l'esplorazione nella barra dell'app superiore in modo da lasciare disponibile una quantità maggiore di spazio sullo schermo per mettere in risalto il contenuto della tua app. In alternativa, puoi inserire elementi per l'esplorazione nel canvas se sono spesso necessari agli utenti quando usano la tua app e se questa scelta non ha effetti negativi sull'esperienza dell'app. Sei tu a decidere se gli elementi per l'esplorazione appartengono alla barra superiore o al canvas.

accesso alla barra di spostamento

In genere, le etichette di sezioni o categorie si trovano nella barra di spostamento, come in Hulu Plus.

barra di spostamento dell'app hulu plus

Molte app usano la barra dell'app superiore per fornire scelte rapide. Ad esempio, nell'app ESPN l'utente può passare a una pagina di statistiche in tempo reale facendo clic su un tabellone sopra le etichette di sezione nella barra dell'app superiore.

barra di spostamento dell'app espn

La barra dell'app superiore può inoltre fornire agli utenti un'anteprima del contenuto nella pagina di destinazione. Nell'esempio di app per lo shopping seguente, puoi visualizzare le immagini dei prodotti in anteprima nella barra dell'app prima di passare alla pagina dei dettagli.

barra di spostamento dell'app vevo

Ti consigliamo di sviluppare ulteriormente la tua progettazione usando le barre dell'app in modi creativi. In Fresh Paint la barra dell'app superiore, oltre a offrire la funzione di spostamento prevista, diventa anche una casella degli strumenti di disegno.

barra di spostamento di fresh paint

Zoom semantico

Lo zoom semantico consente di analizzare una visualizzazione e spostarsi al suo interno in modo veloce e fluido, soprattutto quando si tratta di una lunga panoramica.

app di esempio nella visualizzazione estesa e poi in quella ridotta

La pagina hub dell'app Great British Chefs, ad esempio, include una sezione in evidenza seguita da cinque sezioni visivamente elaborate con scorrimento orizzontale. L'app usa lo zoom semantico per facilitare il passaggio a ognuna delle cinque sezioni.

zoom semantico nell'app Great British Chefs