O Android abrange uma grande variedade de dispositivos, formatos e tamanhos de tela. Portanto, criar designs específicos e perfeitos em pixels não é apenas ineficaz, mas também pode afetar negativamente a experiência do usuário. Em vez disso, crie, desenvolva e pense de forma adaptável. Recentemente, apresentamos novas APIs que trazem alguns conceitos de design conhecidos para ajudar a criar layouts adaptáveis.
O Pawparazzi é um app de exemplo que mostra esses conceitos. Ele foi projetado e criado para destacar o design adaptável usando APIs adaptáveis, como Grid e Flexbox.
Pensar de forma adaptável não é apenas uma questão de criar com breakpoints, mas de pensar no conteúdo em contêineres flexíveis.
Tudo é uma grade!
Ter uma base para estruturar o conteúdo ajuda na prática de um bom design e pode ajudar você a decidir como o conteúdo precisa se adaptar. O Android tem uma grade de linha de base de 8 dp que podemos alinhar todo o conteúdo em um nível micro.
O Pawparazzi usa uma grade de layout hierárquica, em vez de uma grade modular uniforme ou uma grade de coluna unidirecional, o que significa que as colunas e linhas que a compõem são decididas com base na hierarquia de conteúdo.
A decisão sobre o tipo de grade depende do conteúdo. Comece com o conteúdo do app e pense em como ele é agrupado. Isso ajuda a determinar a estrutura geral do layout. Confira Grades e unidades, Estrutura de conteúdo e Introdução no computador para saber mais sobre como pensar em painéis.
Para o Pawparazzi, o objetivo principal era mostrar os pets da equipe de várias maneiras, começando com uma visão geral, detalhes e, em seguida, pets classificados. Isso significa que a galeria de pets ocuparia o painel de conteúdo principal e mais da grade, seguida pelos elementos de navegação e filtro. Quando mais espaço está disponível, a galeria pode ser expandida em mais linhas, mais pets e mostrar detalhes ao mesmo tempo. Esse princípio adaptável é a revelação ou a exibição de mais conteúdo em layouts maiores.
O objetivo principal do app e o conteúdo ajudaram a determinar como e quando a grade de layout precisaria se adaptar: quais tamanhos de classe de janela, posicionamento da dobradiça e orientações do dispositivo.
Na grade de layout, as subgrades ajudam a criar estruturas de conteúdo mais flexíveis. As galerias são uma grade. Para tamanhos compactos, uma grade de 2 colunas é usada.
As grades são um conceito de layout bidirecional, então o conteúdo pode fluir nas direções horizontal e vertical.
Isso pode ser usado para criar layouts mais interessantes ou uma hierarquia visual mais clara, como o Pet da semana, em que a grade é usada para transmitir os pets mais bem classificados. A grade pode ser 2x4, mas o primeiro lugar abrange 2 colunas e linhas.
Tudo isso é feito com a API Grid.
Flexione esses componentes
Enquanto a grade abrange a estrutura de conteúdo macro e micro, o Flexbox ajuda com componentes que precisam responder ao conteúdo. Isso é usado para conteúdo unidirecional, em que apenas horizontal ou vertical é ditado. Por exemplo, os chips de filtro podem responder aos rótulos, e a área de filtro pode ser expandida dependendo da quantidade de filtros. Use a opção "Revelar" em telas maiores para mostrar mais filtros de uma só vez.
Consultas detalhadas
Ao criar uma grade de layout e usar a grade e o Flexbox, permitimos um layout adaptável em várias telas e até mesmo acomodamos formas exclusivas, como dobráveis. Mas e quanto a diferentes contextos de usuário? Os usuários do Android podem se conectar a uma tela ou conectar um mouse. O MediaQuery permite que tomemos decisões de design detalhadas para acomodar usuários em todos os contextos.
No Pawparazzi, isso significava aproveitar as entradas de ponteiro precisas, com áreas de destino menores e conteúdo mais denso.
Amostras do Android AdaptiveUI
Confira designs inspiradores e otimizados para dispositivos de tela grande. Navegue pelos modelos de interface/UX para categorias de apps populares, incluindo mídia, criatividade, jogos e muito mais.
