Layout

Il layout, sia per quanto riguarda il contenuto che la struttura di navigazione tra le pagine, è fondamentale per l'aspetto e l'impatto generali della tua app. Il layout permette di creare una gerarchia, organizzare il contenuto ed essere l'espressione del tuo marchio distintivo. L'esperienza di un utente con un'app dipende dalla struttura delle pagine e del contenuto.

Layout in Windows

I layout di Windows sono digitali a tutti gli effetti. Inglobano il supporto digitale ed evitano le metafore del mondo reale che spesso si rivelano non necessarie o fuorvianti nel mondo digitale. La libertà che caratterizza i layout digitali senza vincoli permette di creare per gli utenti app ed esperienze potenti ed esteticamente straordinarie.

I layout di Windows danno una sensazione di ordine e chiarezza e tendenzialmente consentono un'organizzazione visiva ottimale del canvas. Puoi scegliere di spostare i controlli nelle barre ai bordi dell'app. Le funzionalità principali possono quindi venire poste in evidenza sul canvas per una maggiore usabilità dell'app.

A seconda del contenuto dell'app, puoi decidere di creare una composizione leggera e luminosa con grandi parti interattive oppure offrire un'esperienza più intensa e ricca di contenuti e comandi da esplorare. Ad esempio, l'app Elenco di lettura ha un layout minimo e aperto. Pensa a quali elementi sono visibili nella tua app e quali vuoi spostare all'esterno del canvas, ma anche al modo in cui le tue scelte relative al layout incidono sull'esperienza e sull'uso dell'app.

L'app Xbox Music usa una griglia verticale non tradizionale e permette di eseguire una panoramica in verticale per visualizzare una vasta gamma di contenuti tutti contemporaneamente. La barra permanente nella parte inferiore garantisce che i controlli usati con maggiore frequenza siano sempre disponibili e che gli utenti possano spostarsi rapidamente nelle loro playlist mentre esplorano altre aree dell'app.

Innovazione nel layout

Songza, un'app musicale che cambia in base allo scenario utente, usa un layout orizzontale minimale. Dato che per gran parte del tempo l'utente userà questa app per ascoltare musica e non per navigare attivamente, l'essenzialità è effettivamente la scelta vincente.

Molte app usano un sistema di navigazione gerarchico. L'hub, o pagina di destinazione, rappresenta il punto di ingresso dell'utente nell'app e in altri livelli di contenuto. Visualizza il contenuto in una panoramica sofisticata che permette agli utenti di individuare a colpo d'occhio le novità e gli elementi più interessanti, per poi approfondire il contenuto dell'app. Ti offre un framework e la flessibilità per personalizzare la tua app in base al tuo marchio.

La navigazione gerarchica è solo un modello di layout e l'app dovrebbe sfruttare il modello di layout e navigazione più adatto a rappresentare il tuo marchio e a creare l'esperienza ottimale per gli utenti. La composizione e il layout lasciano spazio alla creatività e danno agli autori una straordinaria opportunità per realizzare qualcosa di veramente unico.

Considera sia l'orientamento verticale sia quello orizzontale per l'app. Decidi se la griglia in cui è organizzato il contenuto è più efficace in un formato verticale oppure orizzontale. Man mano che sempre più applicazioni si avvalgono del linguaggio di progettazione moderno di Windows, gli approcci per il layout e la progettazione si evolvono in modo da adattarsi alle esigenze e al marchio della singola app. Il layout è l'elemento ideale per innovare e far spiccare la tua app. Vedi Definizione del layout di una pagina dell'app per altre informazioni sul sistema della griglia di Windows.

Esempi

Facebook

Facebook usa un layout basato in modo evidente su una griglia per organizzare la moltitudine di contenuti e comandi sul canvas, permettendo così agli utenti di accedere immediatamente a tutti i servizi che offre.

Foursquare

Foursquare è un'app per scoprire luoghi e nuove esperienze. Il layout di questa app riflette tale spirito con immagini vivaci che illustrano le singole località messe in evidenza. Le valutazioni e i commenti sono ancorati sotto l'immagine e questo crea una composizione unificata che permette agli utenti di valutare un luogo a colpo d'occhio e accedere ad approfondimenti con un semplice tocco.

Il layout di Foursquare è dinamico e si ristruttura automaticamente per visualizzare al meglio il contenuto in ogni area dell'app. Eseguendo la panoramica fino all'estrema sinistra dell'app, è possibile produrre una mappa dei punti più noti presenti nelle vicinanze. Toccando un luogo, viene visualizzata una pagina dettagliata con tutti i check-in e i commenti degli utenti. Basta toccare uno qualsiasi di questi elementi per visualizzare una parte del suggerimento.

NOOK

L'app NOOK di Barnes & Noble sfrutta i concetti fondamentali di un modello gerarchico basato su hub, personalizzandolo per offrire un'esperienza veramente particolare. La leggera ombreggiatura sotto ciascun libro dà un'idea della qualità fisica dei volumi invece di mostrare semplicemente le immagini di copertina. In questo caso, un riferimento al mondo reale arricchisce l'esperienza dell'utente.

Linee guida per il controllo hub

Modelli di esplorazione

Definizione del layout di una pagina dell'app

Creazione del layout dell'interfaccia utente (app di Windows Runtime)

Scelta di un layout (app di Windows Store in JavaScript e HTML)

Definizione del layout dell'interfaccia utente (XAML)

Raccolta