Scheda dell'app (controllo Pivot) (app di Windows Phone Store)

Il modello Scheda dell'app viene usato per le pagine dell'interfaccia utente tra cui l'utente si sposta di frequente. Questo modello è utile in particolare se l'app si basa su un unico tema (ad esempio, film, baseball e così via). Ogni pagina mostrerebbe all'utente qualcosa relativo ai dati generali presentati nell'app. Il modello Scheda dell'app potrebbe costituire l'intera app o potrebbe essere usato in un'area secondaria dell'app. Ad esempio, il controllo dell' hub potrebbe essere il primo livello dell'app (come descritto negli argomenti precedenti) e da lì l'utente deve navigare in una sezione secondaria dell'app che usa il modello Scheda dell'app (con il controllo Pivot).

Immagina di volere un'app che cataloghi i film che hai nella tua raccolta. Potresti usare il modello Scheda dell'app per fornire delle visualizzazioni filtrate dei film. Potresti volere una visualizzazione che mostri i film che hai contrassegnato come preferiti. Un'altra visualizzazione filtrata potrebbe mostrare solo i film d'azione. E un'altra visualizzazione ancora potrebbe mostrare i film che hai disposto nell'ordine in cui li guarderai quando hai tempo. Inoltre vorrai anche una pagina per visualizzare l'elenco completo di film senza filtro.

L'immagine seguente consente di visualizzare la struttura dell'app. All'avvio dell'app vieni indirizzato a una delle pagine filtrate. Da lì puoi scorrere in orizzontale le pagine che fungono da schede nella tua interfaccia utente.

Schede dell'app per la Posta in arrivo di Outlook

In pratica, ogni app potrebbe essere un modo diverso per filtrare e visualizzare i dati che vuoi presentare all'utente. Se premi il pulsante Indietro in una di queste pagine con la visualizzazione filtrata, esci dall'app.

Usa il modello Scheda dell'app per le app con un tipo centrale di dati intorno a cui presenti le diverse visualizzazioni filtrate.

Uso del controllo Pivot come implementazione della Scheda dell'app

Puoi usare il controllo Pivot per implementare il modello Scheda dell'app. Questo controllo consente all'utente di navigare a sinistra e a destra in ogni pagina (chiamata elemento pivot).

L'app client Outlook di Microsoft usa il modello Scheda dell'app perché l'app mostra un unico tipo di dati: elenchi di e-mail con diversi filtri applicati a ciascun elemento pivot. Quando controlli la Posta in arrivo con l'app Outlook, vedi tre elementi pivot: tutti, non letti e urgenti. In questo modo puoi vedere in tutta facilità solo le e-mail urgenti se è quello che vuoi. Così non devi scorrere le e-mail nell'elemento pivot tutti per cercare le e-mail contrassegnate come urgenti.

App client Outlook

Un'altra app esistente che usa il modello Scheda dell'app è Netflix. Ogni elemento Pivot mostra elenchi di film. L'elenco in ogni elemento Pivot è diverso a causa del filtro applicato. Puoi fare un confronto e vedere che ogni elenco è unico e utile. L'elemento Pivot instant mostra i film che hai messo in quella coda per vederli quando vuoi tramite il dispositivo di streaming. L'elemento Pivot home mostra i film che Netflix ritiene potrebbero interessarti. L'elemento Pivot search mostra i film che corrispondono alle parole chiave della ricerca.

Gli elementi Pivot sono finalizzati ed efficienti. L'obiettivo principale è l'azione basata sull'attività, ad esempio filtrare, ordinare e mostrare i relativi elementi. Gli hub sono ampi, complessivi ed esplorativi. Vengono usati per promuovere e mostrare i contenuti recenti. In alcune circostanza un controllo è più appropriato di un altro.

App Netflix

Funzionalità tipo scheda

Ogni elemento Pivot è una scheda e le schede sono elencate nella parte superiore. Come illustrato nell'immagine dell'app Netflix, l'app è sull'elemento Pivot home e puoi vedere che l'elemento Pivot genres è disponibile a destra. Per passare all'elemento Pivot genres, toccalo o spostati verso di esso.

Le app dovrebbero ridurre al minimo il numero di elementi Pivot. Gli utenti potrebbero perdersi se continuano a saltare da un elemento Pivot all'altro. Cerca di usare al massimo cinque elementi Pivot. Se ritieni di aver bisogno di più elementi Pivot, uno dei controlli Pivot deve contenere un controllo elenco con i link che collegano alle altre pagine o un altro livello di navigazione che funge da controllo Pivot. Per capire se è quello che ti serve, vedi Elenco con diagramma Pivot per Windows Phone.

  Con il controllo Pivot puoi spostarti da un elemento a un altro toccando le intestazioni degli elementi. Questa operazione non è possibile con il controllo hub.

Considerazioni sui filtri di dati

All'inizio di questo argomento abbiamo detto che il controllo Pivot viene usato in modo ottimale se ogni elemento Pivot contiene lo stesso tipo di dati ma presenta un diverso filtro dei dati. Abbiamo inoltre detto che il controllo hub può essere usato per mostrare le sezioni con dati non correlati. Potresti usare nello stesso modo il controllo Pivot se i dati fossero diversi ma fossero sempre associati con un tipo di argomento. Ad esempio, supponiamo che devi presentare delle informazioni su New York in un'app per turisti. Potresti avere un controllo Pivot con un elemento Pivot che contiene le statistiche, come ad esempio posizione, popolazione e gettito fiscale annuo. Poi potresti avere altri elementi Pivot per informazioni quali attrazioni da vedere e un altro elemento Pivot per gli hotel in cui soggiornare.

L'app ESPN ScoreCenter è un esempio di modello di navigazione Scheda dell'app in cui ogni elemento Pivot contiene dati eterogenei che si basano su un tema centrale.

App ESPN ScoreCenter

Combinazione del controllo Pivot con un controllo hub

Dalla pagina home del controllo hub, come ad esempio quello dell'app Facebook, puoi toccare un elemento di navigazione nell'elenco e navigare a un controllo Pivot. È quello che succede con la selezione profile della sezione hub home di Facebook. Quando l'utente tocca la selezione profile, viene portato a un controllo Pivot che presenta gli elementi Pivot, come ad esempio wall, info, photos of me e così via. In questo modo puoi navigare da un controllo a un altro.

Passaggio dal controllo hub principale a un controllo Pivot nell'app Facebook

Potresti provare a navigare da una selezione della sezione hub home a un altro hub. Non è una buona idea perché potresti confondere gli utenti perché possono dimenticare facilmente quale app stanno usando. Spesso l'hub ha un'immagine estesa come sfondo per tenere l'utente ancorato come se fosse nella parte superiore. Se l'utente passa a un'area secondaria che funge da hub con uno sfondo diverso, si sentirà confuso.

Barra delle applicazioni in un controllo Pivot

Dato che tutti i dati sono dello stesso tipo, in molti casi puoi fornire una barra inferiore dell'app con i pulsanti che corrispondono a quello che viene mostrato. Come illustrato nell'immagine seguente, l'app Outlook ha una barra delle applicazioni che è sempre visibile perché contiene le azioni che servono all'utente e in qualche modo influisce su quello che viene mostrato.

App client Outlook

Nell'app Outlook la barra delle applicazioni può consentire le stesse azioni indipendentemente dall'elemento Pivot. Nell'immagine precedente puoi vedere che ci sono pulsanti per creare una nuova e-mail, mostrare le caselle di selezione, passare da una cartella all'altra e risincronizzare le e-mail. Questa è un'altra differenza tra il controllo Pivot e il controllo hub perché probabilmente non posizioneresti mai una barra delle applicazioni nella parte inferiore.

Non partire dal presupposto che puoi sempre mantenere gli stessi pulsanti nella parte inferiore a meno che non ritieni che sia appropriato per il tipo di elemento Pivot. Alcuni usi del controllo Pivot non tengono lo stesso tipo di dati in ogni elemento Pivot.

Elemento Pivot "Home"

Puoi usare il primo elemento Pivot per presentare un elenco degli altri elementi Pivot. In questo modo l'utente può toccarne uno e passare direttamente a quell'elemento Pivot invece di scorrere fino all'elemento. L'elenco può contenere anche voci che avviano altre app.

Se non lo ritieni necessario, l'utente non deve per forza essere indirizzato all'elemento Pivot home. Ad esempio, in un'app con l'elenco dei film, anziché indirizzare l'utente all'elemento Pivot home, puoi indirizzarlo a un elemento Pivot che mostra la grafica dei film più recenti e più popolari. In questo modo l'utente apre l'app visualizzando qualcosa di più accattivante.

Argomenti correlati

Hub

Pivot