Layouts são modelos estruturais que fornecem uma estrutura para manter consistência visual em todo o aplicativo. Ao definir grades visuais, espaçamento, e seções, os layouts estabelecem uma estrutura coesa e organizada para apresentação de informações e elementos de UI.
Destaques
- Ao contrário da Web ou de dispositivos móveis, as TVs têm uma proporção de tela fixa de 16:9.
- Otimizar layouts em eixos horizontais e verticais para facilitar o uso e o controle de acesso.
Princípios
Diretrizes para ajudar você a tomar decisões ao projetar layouts para TV.
Design para telas grandes
Desde a popularização da HDTV, as TVs retangulares com uma proporção de 16:9 se tornaram o padrão. Historicamente, as televisões eram fabricadas em um formato quadrado conhecido como proporção de 4:3 ou 1,33 para 1.
Projetar na plataforma Android
Ao projetar, use dp para mostrar elementos de maneira uniforme em telas com diferentes densidades, como acontece com qualquer outro dispositivo Android. Projete sempre com resolução MDPI em 960 px * 540 px.
Com MDPI 1 px = 1 dp.
A resolução dos recursos precisa ser de 1080p. Isso permite que o sistema Android reduza os elementos de layout para 720p, se necessário.
Garanta visibilidade e segurança de overscan
Os elementos importantes precisam estar sempre visíveis para os usuários. Para fazer isso, posicione os elementos com uma margem de 48 dp de 5% nos lados esquerdo e direito e 27 dp nas partes superior e inferior de um layout. Isso garante que os elementos da tela do layout estejam dentro do overscan.
Preencher a tela cheia
Não ajuste nem corte os elementos da tela de fundo na área segura de overscan. Em vez disso, permita a exibição parcial de elementos fora da tela. Isso garante que todas as telas mostrem corretamente o plano de fundo e os elementos fora da tela.
Otimizar com eixos
Considere como as pessoas usam o controle remoto com a TV. Verifique se a interface da TV é simples de usar com o controle remoto. Crie cada direção (para cima, para baixo, para a esquerda, para a direita) com um propósito e um padrão de navegação claros para ajudar os usuários a entender como navegar por grandes grupos de opções.
Layout
Os tamanhos de tela da TV variam de acordo com o dispositivo. Como uma TV moderna tem com proporção de 16:9, é recomendável projetar seu app com uma Tamanho da tela de 960 x 540 pixels. Isso garante que todos os elementos possam ser redimensionadas proporcionalmente para telas HD ou 4K.
Margens de overscan
Margens de overscan são os espaços entre o conteúdo e o as extremidades esquerda e direita da tela.
960 * ~5% = 48dp
540 * ~5% = 27dp round off to 24dp
Essas margens protegem os elementos primários de possíveis problemas de overscan. Para manter o conteúdo e as informações seguros, use um layout de margem de 5%. (58 dp nas laterais e 28 dp nas bordas de cima e de baixo).
Colunas e medianizes
O conteúdo é colocado em áreas da tela que têm colunas e medianizes. O sistema de grade tem 12 colunas. Medianizes são os espaços entre das colunas que ajudam a dividir o conteúdo.
Use 12 colunas com 52 dp de largura com 20 dp de espaço entre elas. É preciso ter 58 dp de espaço em ambos os lados e 4 dp de espaço vertical espaçamento entre linhas.
Padrões de layout
Há três padrões de layout disponíveis, dependendo do que você pretende finalidade e dispositivo de exibição: layout de pilha horizontal, layout de pilha vertical, e layout de grade.
Layout de pilha horizontal
Um layout de pilha horizontal organiza os componentes horizontalmente. Eles podem variar em tamanho, proporção ou formato. Esse layout costuma ser para agrupar conteúdo e componentes.
Layout de pilha vertical
Um layout de pilha vertical organiza os componentes de forma vertical, permitindo um tamanho, proporção e formato flexíveis. É comum usada para agrupar vários tipos de texto, componentes interativos e os padrões de layout padrão.
Layout de grade
Uma grade é uma coleção de colunas e linhas que se cruzam, e uma grade O layout exibe o conteúdo nesta grade. Ele organiza o conteúdo de forma lógica simplificando a navegação e a navegação dos usuários.
Para evitar a sobreposição, é importante considerar o padding entre e o aumento do tamanho dos estados em foco. Por exemplo, quando um foco (como um card) é destacado. Se você estiver usando nossas sugestões Layout de grade (12 colunas em 52 dp, com medianizes em 20 dp). Consulte cards para layouts e visualizações de componentes recomendados.
Estruturas de layout
Aqui estão algumas estruturas de layout para ajudar você a fazer melhor decisões ao projetar layouts de TV. Ao dividir as telas da TV horizontalmente, ele pode ajudar a separar diferentes tipos de componentes, comunicar informações hierarquia e lógica de navegação. Um painel pode conter várias colunas de unidade. Cada painel pode hospedar diferentes padrões de layout, como o de layout de pilha e layout de grade.
Layout de painel único
Um layout de painel único pode ajudar a chamar a atenção para o conteúdo principal. Use com páginas de informações importantes e experiências focadas em conteúdo.
Layout de dois painéis
O layout de dois painéis funciona melhor quando a página mostra conteúdo hierárquico. Ele é muito usado em experiências de tarefas focadas em tarefas.
Sobrecarga cognitiva
Conteúdo complicado e pouco claro pode causar confusão, irritação e queda e engajamento. Torne seu design fácil de encontrar, organizado e presente apenas informações essenciais.
Evite usar painéis em excesso para agrupar o conteúdo. Isso cria carga cognitiva e hierarquia desnecessárias para os usuários.
O que fazer
O que não fazer
Navegação e hierarquia expressas
Os painéis separam e organizam visualmente o conteúdo. Eles ajudam a orientar os usuários, e criar uma interface mais intuitiva para melhorar a experiência.
O que fazer
O que não fazer
Modelos de layout
Os modelos de layout promovem ordem, consistência e familiaridade. O design cria uma experiência de IU confortável que comunica claramente onde o o usuário está e para onde ele pode ir.
Procurar
O modelo de navegador exibe "clusters" de conteúdo de mídia ou linhas em uma pilha vertical. Os usuários navegam para cima e para baixo para navegar pelas linhas e para a direita e esquerda para navegar pelo conteúdo de uma linha específica.
Sobreposição à esquerda
O modelo de navegação à esquerda mostra um painel de sobreposição no lado esquerdo da tela. Geralmente, ele mostra itens de navegação ou itens relevantes para o conteúdo em segundo plano.
Sobreposição à direita
O modelo de sobreposição à direita mostra um painel de sobreposição no lado direito da tela. Ele geralmente mostra os itens em que você pode interagir independentemente do conteúdo em segundo plano.
Sobreposição central
O modelo de sobreposição central mostra um elemento modal que se sobrepõe a uma visualização existente. Elas são usadas para comunicar informações urgentes ou para embasar uma decisão.
Sobreposição inferior
O modelo de sobreposição inferior normalmente é usado para as páginas inferiores. As páginas inferiores são superfícies com conteúdo complementar ancorado na parte de baixo da tela. Eles permitem criar minifluxos sem perder o contexto da página atual.
Ações
O modelo de ação mostra o título e o subtítulo à esquerda, com opções ou ações à direita. Em geral, os usuários são solicitados a escolher uma opção ou realizar uma ação com esse modelo.
Detalhes do conteúdo
O modelo de detalhes mostra conteúdo em um layout empilhado horizontal. O conteúdo geralmente inclui título, metadados, descrição breve, ações rápidas e clusters de informações relacionadas.
Compilação
O modelo de compilação mostra detalhes de um item no lado esquerdo da tela, como um podcast, com os elementos dele (como episódios) no painel direito.
Grade
O modelo de grade mostra coleções de conteúdo em uma grade organizada. Ele mostra conteúdo com uma lógica clara de navegação remota e uma experiência de navegação ideal.
Alerta
O modelo de alerta mostra uma mensagem em tela cheia. Geralmente, é necessário desbloquear o alerta e voltar à tela anterior.
Colunas do card
1 layout de card
Largura do card: 844 dp
Layout com dois cards
Largura do card: 412 dp
Layout com 3 cards
Largura do card: 268 dp
Layout com 4 cards
Largura do card: 196 dp
Layout com 5 cards
Largura do card: 124 dp
