O Android abrange uma ampla variedade de dispositivos, formatos e tamanhos de tela. Por isso, projetar para bloqueios perfeitos em pixels específicos 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 adaptativa. Recentemente, lançamos 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 adaptativa não é apenas projetar com pontos de interrupção, mas 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 deve se adaptar. O Android tem uma grade de linha de base de 8 dp que pode 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 colunas unidirecional. Isso 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 Como começar no computador para saber mais sobre como pensar em painéis.
Para o Pawparazzi, o objetivo principal era ver os pets da equipe de várias maneiras, começando com uma visão geral, detalhes e, em seguida, pets classificados. Isso significava que a galeria de animais de estimação ocuparia o painel de conteúdo principal e mais espaço da grade, seguida pelos elementos de navegação e filtro. Quando há mais espaço disponível, a galeria pode ser expandida em mais linhas, mais animais de estimação e mostrar detalhes deles ao mesmo tempo. Esse princípio adaptativo é a revelação, ou seja, mostrar mais conteúdo em layouts maiores.
Analisar o objetivo principal do app e o conteúdo ajudou 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 duas colunas é usada.
As grades são um conceito de layout bidirecional, então o conteúdo pode fluir na horizontal e na vertical.
Isso pode ser usado para criar layouts mais interessantes ou uma hierarquia visual mais clara, como "Animal de estimação da semana", em que a grade é usada para mostrar os animais de estimação mais bem classificados. A grade pode ser 2x4, mas o primeiro lugar abrange duas colunas e linhas.
Tudo isso é feito com a API Grid.
Flexibilize esses componentes
Enquanto o grid cobre 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 ícones 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 vez.
Consultas complexas
Ao projetar uma grade de layout e usar grade e flexbox, permitimos um layout adaptável em várias telas e até mesmo acomodamos formas exclusivas, como dobráveis. Mas e quanto aos diferentes contextos de usuário? Os usuários do Android podem conectar a um monitor ou conectar um mouse. O MediaQuery permite tomar decisões de design sutis para acomodar usuários em todos os contextos.
No Pawparazzi, isso significou aproveitar entradas de ponteiro precisas, com áreas de destino menores e conteúdo mais denso.
Exemplos de AdaptiveUI do Android
Confira designs inspiradores e otimizados para dispositivos de tela grande. Procure modelos de interface/UX para categorias de apps populares, incluindo mídia, criatividade, jogos e muito mais.
