I layout sono modelli strutturali che forniscono un framework per mantenere la coerenza visiva in tutta l'applicazione. Mediante la definizione di griglie visive, spaziatura e sezioni, i layout stabiliscono una struttura coesa e organizzata per la rappresentazione di informazioni ed elementi dell'interfaccia utente.
In evidenza
- A differenza del web o dei dispositivi mobili, le TV hanno proporzioni fisse dello schermo di 16:9.
- Ottimizza i layout lungo gli assi orizzontale e verticale per facilità d'uso e controllo.
Princìpi
Linee guida per aiutarti a prendere decisioni di progettazione durante la progettazione dei layout della TV.
Progetta per schermi di grandi dimensioni
Dal momento della diffusione della TV HD, i televisori rettangolari con proporzioni 16:9 sono diventati la norma. Storicamente, i televisori erano prodotti in una forma quadrata nota come proporzioni 4:3 o 1,33 a 1.
Progetta sulla piattaforma Android
Durante la progettazione, utilizza dp per visualizzare gli elementi in modo uniforme su schermi con densità diverse, come su qualsiasi altro dispositivo Android. Progetta sempre con una risoluzione MDPI a 960 x 540 px.
Con MDPI 1 px = 1 dp.
Gli asset devono avere un obiettivo di 1080p. Ciò consente al sistema Android di ridurre gli elementi di layout a 720p, se necessario.
Garantisci visibilità e sicurezza overscan
Assicurati che gli elementi importanti siano sempre visibili agli utenti. Per farlo, posiziona gli elementi con un margine del 5% di 48 dp sui lati sinistro e destro e 27 dp nella parte superiore e inferiore di un layout. Ciò garantisce che gli elementi dello schermo del layout siano all'interno dell'overscan.
Riempi lo schermo intero
Non regolare o ritagliare gli elementi dello schermo sullo schermo nell'area di sicurezza overscan. Consenti invece la visualizzazione parziale degli elementi fuori schermo. Ciò garantisce che tutte le schermate mostrino correttamente gli elementi di sfondo e fuori schermo.
Ottimizza con gli assi
Pensa a come le persone usano il telecomando con la TV. Assicurati che l'interfaccia della TV sia semplice da utilizzare con il telecomando. Progetta ogni direzione (in alto, in basso, a sinistra, a destra) in modo da avere uno scopo e un pattern di navigazione chiari, che aiutino gli utenti a capire come spostarsi tra ampi gruppi di opzioni.
Layout
Le dimensioni degli schermi TV variano da dispositivo a dispositivo. Poiché una TV moderna ha proporzioni 16:9, ti consigliamo di progettare l'app con dimensioni dello schermo di 960 x 540 px. Ciò garantisce che tutti gli elementi possano essere ridimensionati in modo proporzionale per gli schermi HD o 4K.
Margini di scansione eccessiva
I margini di overscan sono gli spazi tra i contenuti e i bordi sinistro e destro dello schermo.
960 * ~5% = 48dp
540 * ~5% = 27dp round off to 24dp
Questi margini del bordo proteggono gli elementi principali da potenziali problemi di overscan. Per proteggere i tuoi contenuti e le tue informazioni, usa un layout con margine del 5% (58 dp sui lati e 28 dp sui bordi superiore e inferiore).
Colonne e grondaie
I contenuti vengono inseriti in aree dello schermo con colonne e grondaie. Il sistema a griglia ha 12 colonne. Le grondaie sono gli spazi tra le colonne che aiutano a suddividere i contenuti.
Utilizza 12 colonne larghe 52 dp con uno spazio di 20 dp tra loro. Lo spazio deve essere di 58 dp su entrambi i lati e di 4 dp di spaziatura verticale tra le linee.
Pattern di layout
Sono disponibili tre pattern di layout a seconda dello scopo previsto e del dispositivo di visualizzazione: layout stack orizzontale, layout stack verticale e layout griglia.
Layout impilamento orizzontale
Un layout stack orizzontale dispone i componenti orizzontalmente. e possono variare per dimensioni, rapporto o formato. Questo layout viene spesso usato per raggruppare contenuti e componenti.
Layout impilamento verticale
Un layout stack verticale organizza i componenti in modo verticale, consentendo dimensioni, proporzioni e formato flessibili. Viene comunemente utilizzato per raggruppare vari tipi di testo, componenti interattivi e pattern di layout.
Layout griglia
Una griglia è una raccolta di colonne e righe che si intersecano, mentre un layout Griglia mostra i contenuti in questa griglia. Ordina i contenuti in modo logico, per semplificare la navigazione e la navigazione da parte degli utenti.
Per evitare sovrapposizioni, è importante considerare la spaziatura interna tra gli elementi e l'aumento delle dimensioni degli stati attivi. ad esempio quando viene evidenziato un componente attivo, come una scheda. Se utilizzi il nostro layout griglia suggerito (12 colonne in 52 dp, con grondaie in 20 dp), consulta Schede per layout e anteprime dei componenti consigliati.
Strutture di layout
Di seguito sono riportate alcune strutture di layout utili per decidere meglio il layout della TV. Dividendo gli schermi TV orizzontalmente, può essere utile separare i diversi tipi di componenti e comunicare la gerarchia delle informazioni e la logica di navigazione. Un riquadro può contenere più colonne di unità. Ogni riquadro può ospitare diversi pattern di layout, ad esempio Layout dello stack e Layout griglia.
Layout a riquadro singolo
Un layout a riquadro singolo può contribuire ad attirare l'attenzione sui contenuti principali. Utilizzalo con un’esperienza orientata ai contenuti e pagine informative essenziali.
Layout a due riquadri
Un layout a due riquadri funziona meglio quando la pagina mostra contenuti gerarchici. È ampiamente utilizzato nelle esperienze task-forward.
Sovraccarico cognitivo
Contenuti complessi e poco chiari possono causare confusione, fastidi e un calo del coinvolgimento. Fai in modo che il progetto sia leggibile, ordinato e presenta solo informazioni essenziali.
Evita di utilizzare troppi riquadri per raggruppare i contenuti. Questo crea un carico cognitivo e una gerarchia non necessari per gli utenti.
Cosa fare
Cosa non fare
Gerarchia e navigazione espressi
I riquadri separano e organizzano visivamente i contenuti. Aiutano gli utenti a guidare e possono creare un'interfaccia più intuitiva che migliora l'esperienza.
Cosa fare
Cosa non fare
Modelli di layout
I modelli di layout promuovono l'ordine, la coerenza e la familiarità. Il design crea un'esperienza UI comoda che comunica chiaramente dove si trova l'utente e dove può andare.
Sfoglia
Il modello di browser mostra "cluster" o righe di contenuti multimediali in uno stack verticale. Gli utenti possono navigare verso l'alto e verso il basso per sfogliare le righe, nonché verso destra e sinistra per sfogliare i contenuti di una riga specifica.
Overlay a sinistra
Il modello di navigazione a sinistra mostra un riquadro di overlay sul lato sinistro dello schermo. Di solito vengono mostrati elementi di navigazione o su cui puoi intervenire pertinenti rispetto ai contenuti in background.
Overlay destro
Il modello di overlay destro mostra un riquadro overlay sul lato destro dello schermo. Solitamente vengono mostrati gli elementi su cui puoi agire indipendentemente dai contenuti sullo sfondo.
Overlay centrale
Il modello overlay centrale mostra un elemento modale sovrapposto a una visualizzazione esistente. È utilizzato per comunicare informazioni urgenti o sollecitare una decisione.
Overlay inferiore
Il modello overlay inferiore viene comunemente utilizzato per i fogli inferiori. I fogli inferiori sono superfici con contenuti complementari ancorati alla parte inferiore dello schermo. Ti consentono di creare mini flussi senza perdere il contesto della pagina corrente.
Azioni
Il modello di azione mostra titolo e sottotitolo a sinistra, con opzioni o azioni a destra. In genere, agli utenti viene chiesto di creare un'opzione o eseguire un'azione con questo modello.
Dettagli dei contenuti
Il modello dei dettagli dei contenuti mostra i contenuti in un layout in pila orizzontale. I contenuti di solito includono titolo, metadati, descrizione breve, azioni rapide e cluster di informazioni correlati.
Compilation
Il modello di compilazione mostra i dettagli di un elemento sul lato sinistro dello schermo, ad esempio un podcast, e i relativi elementi nel riquadro di destra, ad esempio le puntate.
GRid
Il modello di griglia mostra raccolte di contenuti in una griglia organizzata. I contenuti vengono mostrati con una logica di navigazione remota chiara e un'esperienza di navigazione ottimale.
Avviso
Il modello di avviso mostra un messaggio a schermo intero. Di solito è necessaria un'azione per sbloccare l'avviso e tornare alla schermata precedente.
Colonne della scheda
1 layout della scheda
Ampiezza scheda: 844 dp
Layout a 2 schede
Ampiezza scheda: 412 dp
Layout a 3 schede
Ampiezza scheda: 268 dp
Layout a 4 schede
Ampiezza scheda: 196 dp
Layout a 5 schede
Ampiezza scheda: 124 dp
