Navigazione gerarchica, dall'inizio alla fine (HTML)

Articolo
12/11/2015

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

Usa un modello di navigazione gerarchico per la tua app di Windows Store quando il contenuto può essere separato in sezioni o categorie distinte, ma correlate, con vari livelli di dettaglio. Si tratta di un modello comune e noto che funziona con strutture di informazioni relazionali, attraversabili in una sequenza o con un ordine preferenziale.

Il modello di navigazione da scegliere dipende dagli scenari supportati dalla tua app. Se la tua app offre svariate esperienze e contenuto organizzato e strutturato, molto probabilmente il modello gerarchico è il più appropriato. Invece, se la tua app non presenta molte informazioni o una gerarchia organizzativa, vedi il modello descritto in Navigazione semplice, dall'inizio alla fine, progettato per consentire agli utenti di spostarsi velocemente tra un numero limitato di pagine correlate.

In questo argomento descriveremo come creare un'app di Windows Store con JavaScript che usa il modello di navigazione gerarchico e soddisfa tutti i requisiti di base della certificazione per Windows Store, dall'inizio alla fine. Sono incluse informazioni sugli aspetti seguenti:

Risorse immagine per esporre la tua app in tutto il sistema operativo.
Barre delle app per supportare lo spostamento e i comandi.
Impostazioni per fornire info sulla privacy, la Guida e altre info relative all'app.
Roaming dei dati per sincronizzare l'app in sessioni e dispositivi diversi.
Globalizzazione per raggiungere i clienti in tutto il mondo.
Accessibilità per aiutare gli utenti a svolgere le loro attività indipendentemente dalle abilità fisiche e dal dispositivo di input.

Ecco una struttura gerarchica di base insieme a un wireframe del modello di spostamento gerarchico in un'app di Windows Store.

Implementazione di base del modello di navigazione gerarchico

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

Il controllo Hub della libreria di Windows per JavaScript è progettato in modo specifico per questo tipo di app. In ordine dalla più generale alla più specifica, questo controllo usa pagine hub, pagine delle sezioni e pagine dei dettagli per permetterti di collegare informazioni di vario tipo in una struttura intuitiva e coerente.

Pagina	Descrizione
Hub	L'hub è la pagina di ingresso dell'app e la posizione in cui puoi presentare un'anteprima degli scopi generali della tua app. Mostra una o più sezioni di contenuto, ognuna con un piccolo campione di elementi associati alla sezione in questione. Si possono applicare vari criteri, a seconda dell'app o delle preferenze dell'utente, per stabilire quali sezioni ed elementi visualizzare. In genere, per ogni elemento verranno visualizzati un'anteprima, un riepilogo o un estratto del contenuto. Da questa pagina, gli utenti possono passare a una pagina di sezione o dei dettagli. Ti consigliamo di progettare l'hub con numerosi elementi visivi eterogenei, in modo da attirare l'attenzione degli utenti e guidarli verso le diverse aree dell'app.
Sezione	Le pagine delle sezioni sono il secondo livello di un'app, nel quale vengono visualizzati l'anteprima, il riepilogo o un estratto per gli elementi associati alla sezione. Gli elementi in questa pagina possono essere visualizzati nella forma più adatta a rappresentare il contesto e il contenuto della sezione. In genere, in questa pagina vengono visualizzati più elementi rispetto alla pagina hub. Ogni elemento è collegato a una pagina dei dettagli.
Dettagli	Le pagine dei dettagli corrispondono al terzo livello di un'app, nel quale viene visualizzata la maggior parte del contenuto o delle funzionalità, se non per intero, per l'elemento specifico selezionato nella pagina hub o nella pagina della sezione. Alcune app, come i lettori di feed, potrebbero includere link ad articoli e siti esterni, se il contenuto viene considerato troppo esteso per la visualizzazione in-app. Le pagine dei dettagli possono contenere numerose informazioni, ma anche un unico oggetto, ad esempio un'immagine o un video, oppure altre funzionalità dell'app.

Hub

L'hub è la pagina di ingresso dell'app e la posizione in cui puoi presentare un'anteprima degli scopi generali della tua app. Mostra una o più sezioni di contenuto, ognuna con un piccolo campione di elementi associati alla sezione in questione. Si possono applicare vari criteri, a seconda dell'app o delle preferenze dell'utente, per stabilire quali sezioni ed elementi visualizzare. In genere, per ogni elemento verranno visualizzati un'anteprima, un riepilogo o un estratto del contenuto.

Da questa pagina, gli utenti possono passare a una pagina di sezione o dei dettagli.

Ti consigliamo di progettare l'hub con numerosi elementi visivi eterogenei, in modo da attirare l'attenzione degli utenti e guidarli verso le diverse aree dell'app.

Sezione

Le pagine delle sezioni sono il secondo livello di un'app, nel quale vengono visualizzati l'anteprima, il riepilogo o un estratto per gli elementi associati alla sezione. Gli elementi in questa pagina possono essere visualizzati nella forma più adatta a rappresentare il contesto e il contenuto della sezione.

In genere, in questa pagina vengono visualizzati più elementi rispetto alla pagina hub. Ogni elemento è collegato a una pagina dei dettagli.

Dettagli

Le pagine dei dettagli corrispondono al terzo livello di un'app, nel quale viene visualizzata la maggior parte del contenuto o delle funzionalità, se non per intero, per l'elemento specifico selezionato nella pagina hub o nella pagina della sezione. Alcune app, come i lettori di feed, potrebbero includere link ad articoli e siti esterni, se il contenuto viene considerato troppo esteso per la visualizzazione in-app.

Le pagine dei dettagli possono contenere numerose informazioni, ma anche un unico oggetto, ad esempio un'immagine o un video, oppure altre funzionalità dell'app.

La barra di spostamento, solitamente usata nelle app con navigazione semplice, può essere utile anche per attraversare il contenuto di un'app gerarchica. Questa barra è un elemento temporaneo che può essere visualizzato nel bordo superiore dello schermo quando gli utenti scorrono rapidamente dal bordo superiore o inferiore, fanno clic con il pulsante destro del mouse, premono il tasto logo Windows+Z oppure usano il tasto del menu con una tastiera.

Prova a realizzare la tua app in modo che sia la struttura del contenuto stessa a guidare gli utenti in modo intuitivo nelle diverse parti dell'app senza che sia necessaria la barra di spostamento. Nei casi in cui questo non è possibile, usa la barra di spostamento al posto delle intestazioni di sezione nella pagina hub e per rendere disponibili controlli di spostamento globali. La barra dovrebbe comparire in tutte le pagine e a tutti i livelli dell'app.

Nota Assicurati che gli utenti possano spostarsi in ordine inverso, ripercorrendo a ritroso il percorso usato per raggiungere la pagina corrente. WinJS rende disponibile BackButton, in combinazione con PageControl, per questi scopi.

L'uso del modello di spostamento corretto, insieme al layout appropriato per l'interfaccia utente, ti permette di evitare di occupare spazio con i controlli permanenti e l'utente può così concentrarsi sul contenuto importante dell'app.

Esempio di struttura di spostamento gerarchica

Puoi considerare l'esempio di struttura di spostamento gerarchica di base come punto di partenza per l'aggiunta dei tuoi contenuti e delle tue esperienze. Dimostra i principi, le procedure consigliate e i dettagli di implementazione qui descritti in un'app che soddisfa tutti i requisiti di certificazione di base di Windows Store. Come puoi vedere in basso, l'app include una pagina hub con varie sezioni, una pagina di sezione guidata dai dati (Section 3) e pagine dei dettagli per tale sezione. Se necessario, l'app può essere estesa con altre pagine. Con questo esempio potrai vedere come abbiamo messo in pratica le nostre linee guida. In questo modo potrai risparmiare tempo e usare l'esempio come struttura di base per la tua creatività.

Pagina hub dell'app di esempio

Pagina della sezione dell'app di esempio

Pagina dei dettagli dell'app di esempio

Conformità per Windows Store

Windows Store è lo strumento principale per la distribuzione delle app di Windows Store ai clienti e per mettere in contatto i clienti con il maggior numero possibile di app valide e interessanti. Le app nello Store devono rispettare i Criteri per Windows e Windows Phone Store.

L'esempio correlato implementa le funzionalità qui illustrate e i requisiti di base di tutte le app di Windows Store per il superamento della certificazione, inclusi:

Immagini della schermata iniziale e dei riquadri
Supporto completo dell'input tramite tocco, mouse e tastiera
Supporto di dimensioni delle finestre, orientamenti dei dispositivi e dimensioni dello schermo diversi
Roaming e stato della sessione
Ottimizzazione per globalizzazione, localizzazione e accessibilità

Durante lo sviluppo dell'app, tieni conto dei Criteri per Windows e Windows Phone Store e cerca di evitare gli errori di certificazione comuni.

Implementare la struttura di spostamento

Apri l'esempio di struttura di spostamento gerarchica o inizia dal modello di progetto App hub in Visual Studio. Se lo desideri, puoi leggere questi argomenti di descrizione dei modelli:

Modelli di progetto JavaScript per app di Windows Runtime: contiene un riepilogo dei dettagli di implementazione per il modello di navigazione, il modello di dati, la gestione dello stato di visualizzazione e così via.
Modelli di elemento JavaScript per app di Windows Store: include codice usato comunemente che consente di ridurre il tempo necessario per lo sviluppo.

Usare la struttura di spostamento a pagina singola

Informazioni dettagliate su come l'oggetto PageControl supporta lo spostamento a pagina singola. In Aggiunta di controlli pagina vengono spiegati i vari modi disponibili per l'implementazione.

Posizione nell'esempio: l'oggetto PageControl è definito nel file \js\navigator.js e usato in \pages\home\home.js e \pages\page2\page2.js.

Aggiungere l'interfaccia utente e le immagini

Specifica le risorse immagine (elementi visivi come le immagini per la schermata iniziale e i riquadri) per la tua app nella scheda Interfaccia utente dell'applicazione del manifesto dell'applicazione. A tale scopo, apri package.appxmanifestda Esplora soluzioni. Vedi l'argomento relativo all'uso di Progettazione manifesto.

Nota L'app di esempio include immagini segnaposto che soddisfano i requisiti per Windows Store. Per scopi dimostrativi, nel modello sono state incluse altre immagini che supportano l'accessibilità con impostazioni di contrasto diverse e le versioni localizzate in francese (fr-FR). La maggior parte delle immagini viene fornita con più risoluzioni.

	Scegliere le immagini per rappresentare l'app Specifica immagini in grado di offrire la migliore esperienza possibile. Includi versioni ridimensionate per le diverse risoluzioni dello schermo. Per superare la certificazione per Windows Store, l'app deve includere un set di immagini di base. Logo di Windows Store Visualizzato insieme alla voce relativa all'app nei risultati di ricerca e con la descrizione dell'app nella pagina di presentazione. Logo Visualizzato nel riquadro quadrato per l'app nella schermata Start. Vedi Creazione di riquadri e notifiche e l'esempio di riquadri e notifiche dell'app. Logo piccolo Il logo piccolo viene visualizzato con il nome visualizzato della tua app nei risultati di ricerca restituiti nella schermata Start. Compare anche nell'elenco delle app che supportano la ricerca e nella visualizzazione ridotta della pagina iniziale. Schermata iniziale Visualizzata all'avvio dell'app e rimossa non appena l'app è pronta per le interazioni. La schermata iniziale è costituita da un'immagine e da un colore di sfondo, entrambi personalizzabili. Vedi Aggiunta di una schermata iniziale e l'esempio di schermata iniziale.
	Aggiungere risorse di tipo file o immagine Segui queste istruzioni per denominare le risorse di file e organizzarle in cartelle.
	Ottimizzare le immagini per risoluzioni dello schermo diverse Crea le risorse immagine per la tua app, aggiungile al progetto e identificale nel manifesto dell'applicazione.
	Aggiungere barre dell'app Usa le barre per presentare elementi per lo spostamento, comandi e strumenti agli utenti su richiesta. Sulla barra dell'app vengono visualizzati comandi pertinenti al contesto dell'utente, in genere la pagina o la selezione corrente. Personalizza questi elementi in base alle tue esigenze. Per un esempio più dettagliato, vedi Esempio di controllo AppBar HTML.
	Aggiungere impostazioni dell'app Consenti l'accesso a tutte le impostazioni rilevanti per il contesto corrente dell'utente. Personalizza questi elementi in base alle tue esigenze. Vedi Esempio di impostazioni dell'applicazione. L'app di esempio include sia un'informativa sulla privacy che contenuto della Guida accessibili dall'accesso alle impostazioni.

Roaming dei dati dell'applicazione

Gestire i dati dell'app

È necessario gestire i dati dell'applicazione, inclusi lo stato di runtime, le preferenze dell'utente e altre impostazioni. Questi dati vengono creati, letti, aggiornati ed eliminati quando l'app è in esecuzione.

Roaming dei dati dell'applicazione

Mantieni i dati e lo stato dell'app sincronizzati in più dispositivi e riduci così le attività di configurazione e le operazioni ripetitive che l'utente deve eseguire negli altri dispositivi che usa. Windows replica i dati nel cloud durante l'aggiornamento e sincronizza i dati negli altri dispositivi in cui è installata l'app.

Globalizzare

Verifica che la globalizzazione sia coerente e accertati che gli screenshot dimostrino che la tua app è localizzata. Tieni presente che le lingue e i mercati sono due cose diverse.

Risorse e localizzazione delle app

Progetta le app di Windows Store in modo da poter gestire e localizzare le risorse in modo indipendente, nonché personalizzarle per diversi fattori di scala, opzioni di accessibilità e altri contesti dell'utente e del computer. Vedi l'esempio di risorse dell'applicazione e localizzazione.

Localizzare il manifesto del pacchetto

Localizza il nome visualizzato, la descrizione e altre funzionalità identificative dell'app, descritti nel manifesto dell'app.

Globalizzare l'app

Adatta il software a lingue, mercati, culture e aree geografiche diversi.

Supportare l'accessibilità

Dichiara l'app come accessibile solo se è stata espressamente progettata e testata per gli scenari di accessibilità.

Testare l'accessibilità dell'applicazione

Scopri gli strumenti di testing dell'accessibilità inclusi in Windows Software Development Kit (SDK) per Windows 8, utili per verificare l'accessibilità della tua app.

Dichiarare l'app come accessibile in Windows Store.

Se hai testato la tua app per l'accessibilità puoi segnalarlo selezionando la casella di controllo Accessibilità nella pagina Dettagli di vendita.

Operazioni finali

Certifica la tua app con il Kit di certificazione app Windows.

Esegui il Kit di certificazione app Windows per assicurarti che la tua app soddisfi i requisiti per Windows Store. Esegui queste verifiche ogni volta che aggiungi una funzionalità principale alla tua app.

Hai completato le attività di sviluppo e sei pronto per inviare la tua app a Windows Store.

Individua il pubblico di destinazione corretto per la tua app prima di inviarla.
Crea una descrizione dell'app il più dettagliata possibile, in modo che rappresenti chiaramente gli scopi dell'app.
Inizia il processo di distribuzione.
Usa gli strumenti di promozione disponibili con Windows Store per aiutare i clienti a scoprire la tua app.
Usa i dati di telemetria per analizzare i dati sull'utilizzo e migliorare qualità e prestazioni dell'app.