Windows Dev Center

Linee guida per le barre di spostamento (app di Windows Store)

Segui queste linee guida quando lavori con le barre di spostamento delle app di Windows Store. La barra di spostamento viene visualizzata nella parte superiore dell'app e contiene i controlli di esplorazione. È ideale per passare tra più contesti, tra cui schede, documenti e sessioni di messaggistica o di gioco.

Quando usare una barra di spostamento

Puoi inserire i controlli di esplorazione sul canvas principale dell'app oppure nella barra di spostamento. Scegliere la superficie appropriata può fare la differenza tra un'app facile da usare e una complicata. La barra di spostamento è la soluzione ottimale quando vuoi fornire l'accesso globale a tutte le aree della tua app su richiesta. Il canvas è la scelta giusta quando l'esplorazione è fondamentale per completare un'attività. In un'app di esplorazione di foto, ad esempio, che consiste nel trovare e visualizzare file di foto, tutti gli spostamenti devono essere eseguiti nel canvas tramite tocco, panoramica o selezione di contenuto e la casella di ricerca deve essere posizionata nel canvas per consentire agli utenti di trovare facilmente i file.

Analisi dettagliata della barra di spostamento

La barra di spostamento viene visualizzata quando gli utenti fanno scorrere rapidamente un dito dal bordo superiore o inferiore. L'animazione usata è la stessa della barra dell'app, in quanto la barra di spostamento è inclusa nella barra dell'app superiore. Anche se puoi applicare uno stile agli elementi della barra di spostamento, l'aspetto predefinito è un semplice pulsante. Tuttavia, un altro effetto visivo consiste nell'uso di pulsanti e anteprime.

Immagine di barra di spostamento con pulsanti e anteprime

Puoi anche decidere di includere altre funzionalità nella barra dell'app superiore, ad esempio aggiungere un pulsante ‘+’ per la creazione di una nuova scheda oppure integrare una casella di ricerca. Inserisci le funzionalità aggiuntive sul lato destro della barra di spostamento.

Puoi anche dividere la barra di spostamento in più aree, come nel caso dell'app Store. Come puoi vedere, in questa app la sezione superiore è destinata all'esplorazione globale, mentre quella inferiore è riservata alle categorie di app.

Immagine della barra di spostamento dell'app Store

Cosa fare e cosa non fare

Cosa fare
  • Mantiene separate le opzioni di esplorazione dai comandi. Se possibile, inserisci l'esplorazione nella barra di spostamento superiore e gli strumenti e i comandi nella barra dell'app inferiore.
  • Applica ai pulsanti di esplorazione uno stile ottimizzato per il contenuto. Usa ad esempio un pulsante rettangolare più grande per rappresentare le anteprime.
  • Raggruppa i comandi e i controlli sulla barra di spostamento in sezioni distinte per significato. Ad esempio, nell'app Store la sezione superiore è destinata all'esplorazione globale, mentre quella inferiore è riservata alle categorie di app.
  • Usa i pulsanti di menu combinati per organizzare i comandi di esplorazione di primo e di secondo livello.
  • Passa al layout verticale per le finestre di dimensioni più piccole.
Cosa non fare
  • Non nascondere nella barra di spostamento elementi dell'interfaccia utente fondamentali per lo scenario di base. Inseriscili invece nel canvas dell'app. Se ad esempio la ricerca è fondamentale per lo scenario di base, inserisci una casella di ricerca nel canvas, non nella barra di spostamento o nella barra dell'app.
  • Non aggiungere un pulsante Indietro nella barra di spostamento.

 

Argomenti correlati

Per progettisti
Progettazione dei comandi
Progettazione dell'esplorazione
Per sviluppatori (app di Windows Store in JavaScript)
Guida introduttiva: Aggiunta di una barra di spostamento (NavBar)
Come rendere accessibile la barra dell'app
Per sviluppatori (app di Windows Store in C++, C# o Visual Basic)
Guida introduttiva: Spostamenti tra le pagine
Per sviluppatori (app di Windows Store in DirectX con C++)
Creazione di una barra dell'app o di pulsanti per le impostazioni

 

 

Mostra:
© 2015 Microsoft