I layout sono modelli strutturali che forniscono una struttura per mantenere e coerenza visiva in tutta l'applicazione. mediante la definizione di griglie visive, spaziatura e sezioni, i layout stabiliscono una struttura coesa e organizzata per presentazione delle informazioni e degli 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 una maggiore facilità d'uso e controllo.
Princìpi
Linee guida per aiutarti a prendere decisioni relative al design nella progettazione dei layout per i televisori.
Progetta per schermi grandi
Da quando la TV HD è stata diffusa, le TV rettangolari con proporzioni 16:9 sono diventate la norma. Storicamente, i televisori venivano prodotti in una forma quadrata nota come proporzioni 4:3 o 1,33 a 1.
Progetta sulla piattaforma Android
Durante la progettazione, utilizza i dp per visualizzare gli elementi in modo uniforme su schermi con densità diverse, come in qualsiasi altro dispositivo Android. Progetta sempre con una risoluzione MDPI a 960 x 540 px.
A MDPI 1 px = 1 dp.
Le risorse devono avere una risoluzione di 1080p. In questo modo, il sistema Android può ridurre la scalabilità degli elementi del layout a 720p, se necessario.
Garantisci visibilità e sicurezza di 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 di 27 dp nella parte superiore e inferiore di un layout. In questo modo ti assicuri che gli elementi dello schermo del layout rientrino nell'overscan.
Riempire la schermata a schermo intero
Non regolare e non tagliare gli elementi dello schermo di sfondo nell'area di sicurezza di overscan. Consenti invece la visualizzazione parziale degli elementi fuori schermo. Ciò garantisce che tutti gli schermi visualizzino 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 usare con il telecomando. Progetta ogni direzione (in alto, in basso, a sinistra, a destra) per avere uno scopo e un modello di navigazione chiari e aiutare gli utenti a capire come spostarsi tra ampi gruppi di opzioni.
Layout
Le dimensioni degli schermi della TV variano in base al dispositivo. Poiché una TV moderna ha Proporzioni 16:9, è consigliabile progettare l'app con una Dimensione dello schermo 960 x 540 px. In questo modo tutti gli elementi possono ridimensionato proporzionalmente per gli schermi HD o 4K.
Margini di overscan
I margini di overscan sono gli spazi tra i contenuti e i ai bordi sinistro e destro dello schermo.
960 * ~5% = 48dp
540 * ~5% = 27dp round off to 24dp
Questi margini proteggono gli elementi principali da potenziali problemi di overscan. Per proteggere i tuoi contenuti e le tue informazioni, utilizza un layout con margine del 5% (58 dp ai lati e 28 dp ai bordi superiore e inferiore).
Colonne e grondaie
I contenuti vengono collocati in aree dello schermo che hanno colonne e grondaie. Il sistema a griglia ha 12 colonne. Le grondaie sono gli spazi tra le colonne che contribuiscono a dividere i contenuti.
Utilizza 12 colonne di 52 dp di larghezza con 20 dp di spazio tra loro. Devono esserci 58 dp di spazio su entrambi i lati e 4 dp in verticale tra le righe.
Pattern di layout
Sono disponibili tre pattern di layout a seconda lo scopo e il dispositivo di visualizzazione: layout pila orizzontale, layout pila verticale, e Layout a griglia.
Layout impila orizzontale
Un layout Impila orizzontale dispone i componenti orizzontalmente. Possono variare per dimensioni, proporzioni o formato. Questo layout è spesso usati per raggruppare contenuti e componenti.
Layout stack verticale
Un layout Impila verticale dispone i componenti in modo verticale, consentendo dimensioni, proporzioni e formati flessibili. Di solito utilizzati per raggruppare vari tipi di testo, componenti interattivi pattern di layout.
Layout griglia
Una griglia è una raccolta di colonne e righe che si intersecano, mentre una Layout mostra i contenuti in questa griglia. Organizza i contenuti in modo rendendo più semplice la navigazione e la navigazione.
Per evitare sovrapposizioni, è importante considerare la spaziatura interna tra elementi e l'aumento delle dimensioni degli stati attivi. Ad esempio, quando un elemento (come una scheda) viene evidenziato. Se stai utilizzando i nostri suggerimenti Layout a griglia (12 colonne a 52 dp, con grondaie a 20 dp), vedi Schede per layout e anteprime dei componenti consigliati.
Strutture di layout
Ecco alcune strutture di layout che ti aiuteranno a migliorare decisioni in merito alla progettazione dei layout per i televisori. Dividendo gli schermi TV orizzontalmente può aiutare a separare i diversi tipi di componenti, a comunicare gerarchia e logica di navigazione. Un riquadro può contenere più colonne di unità di misura. Ogni riquadro può ospitare diversi pattern di layout, ad esempio Layout dell'elenco filtri e Layout a griglia.
Layout a riquadro singolo
Il layout a un unico riquadro può contribuire ad attirare l'attenzione sui contenuti principali. Utilizzalo con l'esperienza con i contenuti e le pagine di informazioni fondamentali.
Layout a due riquadri
Un layout a due riquadri ha un rendimento migliore quando la pagina mostra contenuti gerarchici. È ampiamente utilizzato nelle esperienze con priorità in base al compito.
Sovraccarico cognitivo
I contenuti complessi e poco chiari possono causare confusione, fastidio e un calo e il coinvolgimento degli utenti. Rendi il tuo progetto consultabile, ordinato e presentato solo informazioni essenziali.
Evita di usare troppi riquadri per raggruppare i contenuti. Questo crea carichi cognitivi e gerarchia non necessari per gli utenti.
Cosa fare
Cosa non fare
Gerarchia e navigazione Express
I riquadri separano e organizzano visivamente i contenuti. Aiutano a guidare gli utenti, e creare un'interfaccia più intuitiva che migliora l'esperienza.
Cosa fare
Cosa non fare
Modelli di layout
I modelli di layout promuovono ordine, coerenza e familiarità. Il design crea una comoda esperienza UI che comunica chiaramente dove si trova l'utente e dove può andare.
Sfoglia
Il modello di browser mostra i "cluster" di contenuti multimediali o righe in una pila verticale. Gli utenti spostati verso l'alto e verso il basso per sfogliare le righe e a destra e sinistra per sfogliare i contenuti di una riga specifica.
Overlay a sinistra
Il modello di navigazione sinistro mostra un riquadro overlay sul lato sinistro dello schermo. In genere mostra la navigazione o gli elementi su cui puoi agire, pertinenti ai contenuti in background.
Overlay a destra
Il modello overlay destro mostra un riquadro overlay sul lato destro dello schermo. In genere, mostra in background gli elementi su cui agisci indipendentemente dai contenuti.
Overlay centrale
Il modello overlay centrale mostra un elemento modale che si sovrappone a una visualizzazione esistente. Viene utilizzato per comunicare informazioni urgenti o per prendere una decisione.
Overlay inferiore
Il modello di overlay inferiore viene solitamente utilizzato per i fogli inferiori. I fogli inferiori sono superfici con contenuti complementari ancorati alla parte inferiore dello schermo. Consentono di creare mini flussi senza perdere il contesto della pagina corrente.
Azioni
Il modello di azione mostra il titolo e il sottotitolo a sinistra, con le opzioni o le azioni a destra. In genere agli utenti viene chiesto di selezionare un'opzione o eseguire un'azione con questo modello.
Dettagli dei contenuti
Il modello di dettagli dei contenuti mostra i contenuti in un layout in pila orizzontale. I contenuti includono in genere titolo, metadati, descrizione breve, azioni rapide e cluster di informazioni correlate.
Compilation
Il modello di compilation mostra i dettagli di un elemento sul lato sinistro dello schermo, ad esempio un podcast, con i suoi elementi, ad esempio le puntate, nel riquadro a destra.
Griglia
Il modello di griglia mostra raccolte di contenuti in una griglia organizzata. Mette in mostra i contenuti con una chiara logica di navigazione remota e un'esperienza di navigazione ottimale.
Avviso
Il modello di avviso mostra un messaggio a schermo intero. Solitamente richiede un'azione per sbloccare l'avviso e tornare alla schermata precedente.
Colonne della scheda
Layout a 1 scheda
Larghezza scheda: 844 dp
Layout scheda 2
Larghezza scheda: 412 dp
Layout a 3 schede
Larghezza scheda: 268 dp
Layout a 4 schede
Larghezza scheda: 196 dp
Layout a 5 schede
Larghezza scheda: 124 dp
