Navigazione semplice, 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 ]

Puoi usare il modello di navigazione semplice per la tua app di Windows Store quando include un numero limitato di pagine e le informazioni non sono organizzate gerarchicamente. In altri termini, quando le pagine, le schede e le modalità sono sullo stesso livello dal punto di vista logico.

La tua app dovrebbe consentire agli utenti di concentrarsi sugli aspetti importanti dei contenuti e delle funzionalità offerti, senza perdere tempo con i come, i dove e i perché. Se la tua app non è caratterizzata da un'alta densità di contenuto, da molte pagine o da scenari che richiedono una gerarchia e una struttura, prendi in considerazione un modello semplice che consenta agli utenti di spostarsi velocemente tra le pagine. Tuttavia, se la tua app offre svariate esperienze e contenuto con un'organizzazione e una struttura che richiedono l'esplorazione con una sequenza o un ordine preferenziale, leggi Navigazione gerarchica, dall'inizio alla fine.

In questo argomento descriveremo come creare un'app di Windows Store con JavaScript che usa il modello di navigazione semplice 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 piatta di base insieme a un wireframe del modello di spostamento piatto in un'app di Windows Store.

Implementazione di base del modello di navigazione semplice

Wireframe dell'app di esempio.

Come dimostrano queste immagini, in base alla struttura di contenuto semplice definita da questo modello è necessario che ogni pagina nell'app sia accessibile da qualsiasi altra pagina. Un utente può spostarsi avanti e indietro casualmente tra le pagine, senza diramazioni.

Usa la barra di spostamento dell'app (visualizzata nel wireframe di sopra) per consentire spostamenti rapidi tra le pagine nelle app con navigazione semplice. 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.

L'immagine seguente illustra l'implementazione del modello di navigazione semplice nell'app Calcolatrice. Potrai notare che questa app usa una barra di spostamento permanente invece di quella temporanea standard. Questo è un esempio di come la piattaforma per app di Windows Store possa adattarsi a scenari specifici per le tue app.


Pagina della calcolatrice Standard	Pagina della calcolatrice Scientifica	Pagina della calcolatrice Convertitore

L'uso del modello di spostamento corretto, insieme al layout appropriato per l'interfaccia utente (vedi Interfaccia utente delle app, dall'inizio alla fine), 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 piatta

Puoi considerare l'esempio di struttura di spostamento piatta 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 due pagine: una pagina iniziale introduttiva e una seconda pagina che puoi usare per il layout dei tuoi contenuti. 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 1 dell'applicazione di esempio

Pagina 1 dell'applicazione di esempio con la barra di spostamento dell'app

Pagina 2 dell'applicazione 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 piatta

Apri l'esempio di struttura di spostamento piatta o inizia dal modello di progetto App di navigazione 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.

Aggiungere 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'app

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.