Hub centrale dell'app con sezioni riquadro (controllo hub) (app di Windows Phone Store)

Il modello presentato in questo argomento è simile al modello descritto in Hub centrale dell'app con menu home page (controllo hub o Pivot) per Windows Phone. Come nel caso precedente, hai diverse aree di funzionalità da esporre all'utente. La differenza qui è che puoi presentare tutta l'interfaccia utente principale a livello superiore senza bisogno di un menu nella home page.

Interfaccia utente dell'hub centrale dell'app per la gestione di una squadra di calcio

Se l'app non dispone di aree secondarie da esplorare, tutta l'interfaccia utente può essere inserita in un set di sezioni accessibili in orizzontale. Puoi comunque usare il controllo hub , ma in questo caso non è necessaria una sezione home. È il caso dell'hub Contatti di Windows Phone. L'immagine seguente mostra che il layout di base dell'hub è lo stesso.

L'hub Contatti

Nell'hub Contatti ogni sezione ha un'interfaccia utente specifica e presenta un'area di funzionalità. La differenza tra questo modello di progettazione e quello descritto in Hub centrale dell'app con menu home page (controllo hub o Pivot) per Windows Phone è che non stai solo visualizzando delle aree inferiori dell'app nell'hub. Nel modello precedente le sezioni a destra della sezione home ti danno una rapida indicazione dei contenuti a cui puoi accedere dal menu. Con il modello descritto qui, le sezioni non riportano in superficie aree che si trovano da altre parti.

Una sezione per ogni area

Per la tua progettazione devi stabilire quale sezione selezionare all'avvio dell'app. Un'opzione è di selezionare la sezione in cui si trovava l'utente quando è uscito dall'app. Puoi anche decidere di selezionare sempre la prima sezione. La prima sezione è quella con l'immagine di sfondo a sinistra con sopra il bordo più a sinistra del titolo dell'hub.

Puoi decidere quante sezioni tenere a destra, ma è consigliabile avere al massimo quattro sezioni. Con più di quattro sezioni gli utenti hanno difficoltà a tenere traccia di dove sono.

Puoi personalizzare l'interfaccia utente come preferisci in ogni sezione. Se hai quattro aree funzionali principali, puoi mettere un'area in ognuna delle quattro sezioni. La prima sezione può essere progettata con il contenuto che ritieni che gli utenti vorrebbero vedere all'avvio dell'app. L'immagine precedente mostra questo tipo di uso dell'hub come un hub centrale dell'applicazione.

Ogni sezioni dell'hub ha degli elementi da selezionare che rimandano ai dettagli dell'elemento. Ad esempio, l'hub Contatti ha una sezione novità con degli elementi da selezionare. Gli elementi sono presentati in un elenco a scorrimento verticale e possono rappresentare post su Facebook. Se selezioni uno degli elementi, esci dall'hub per accedere ai dettagli del post. Ci sono più destinazioni di tocco per ogni voce della sezione novità. Una indirizza al post per vederne le riposte. L'altra destinazione di tocco è il nome della persona. Selezionandola, si passa al controllo pivot di quella persona in cui puoi vedere vari elementi Pivot con le informazioni sulla persona.

Un altro esempio

Ogni sezione può essere un'area separata e non essere necessariamente collegata ad altre sezioni. L'utente esce dall'hub principale se tocca il contenuto nelle sezioni individuali. La navigazione avviene nei dettagli del contenuto selezionato e non in un'area secondaria completamente nuova come da un menu della sezione home.

L'app Samsung Now usa tre sezioni del controllo hub come hub centrale dell'app. Il tema dell'app è di mostrare agli utenti le informazioni a cui vogliono accedere rapidamente e nel corso della giornata: meteo, notizie, informazioni sulla borsa.

App Samsung Now

L'utente può uscire dall'hub. Ad esempio, facendo clic sul simbolo di un'azione nella sezione azioni vieni portato a una pagina con i dettagli di quella società.

Consiglio

L'argomento Hub centrale dell'app con menu home page (controllo hub o Pivot) per Windows Phone e questo argomento usano il controllo dell'hub e molti dei consigli e delle avvertenze descritti in quell'argomento valgono anche per questo.

Argomenti correlati

Hub

Pivot