Os apps que usam layouts responsivos e se adaptam automaticamente a diferentes tamanhos de tela oferecem mais valor aos usuários e oferecem experiências mais produtivas e envolventes.
Os layouts responsivos formatam e posicionam elementos como botões, campos de texto e caixas de diálogo de forma dinâmica para uma experiência de usuário ideal. Ofereça automaticamente valor extra aos usuários do app em telas maiores usando práticas de design responsivo. Seja mais texto visível de relance, mais ações na tela ou áreas de toque maiores e mais acessíveis, as práticas responsivas oferecem uma experiência aprimorada para usuários de telas maiores.
Adicionar valor com o design responsivo
O que fazer
- Use a biblioteca de componentes do Compose M3, que tem comportamento responsivo e adaptável integrado.
- Use layouts responsivos, que se ajustam de forma automática e suave para preencher o espaço disponível em todos os tamanhos de tela.
O que não fazer
- Alongue os elementos da interface, incluindo campos de texto, botões e caixas de diálogo, para preencher o espaço extra.
- Aumente os tamanhos das fontes, a menos que elas tenham uma finalidade principalmente gráfica.
Criar apps e Blocos responsivos para Wear OS
As interfaces responsivas se estendem e mudam para aproveitar ao máximo todo o espaço de tela disponível, não importa o tamanho da tela em que elas são renderizadas.
Ao projetar layouts responsivos em uma tela redonda, as visualizações roláveis e não roláveis têm requisitos exclusivos para manter a escala dos elementos da IU e preservar um layout e uma composição equilibrados. Para visualizações de rolagem, use porcentagens para definir todas as margens superior, inferior e lateral para evitar o corte e fornecer redimensionamento proporcional dos elementos. Para visualizações sem rolagem, use porcentagens e restrições verticais para todas as margens. Dessa forma, o conteúdo principal no meio pode ser esticado para preencher a área disponível.
Visualizações de rolagem
Todas as margens superior, inferior e lateral precisam ser definidas em porcentagens para evitar cortes e fornecer dimensionamento proporcional dos elementos.
Visualizações sem rolagem
Todas as margens precisam ser definidas em porcentagens, e as restrições verticais precisam ser definidas para que o conteúdo principal no meio possa se esticar para preencher a área disponível.
Exemplos
As imagens a seguir mostram exemplos de apps responsivos e otimizados.
Botões que se ajustam às bordas
Lista de cards
Lista de botões e alternadores
Bloco com cards de imagem
Lista de cards com imagens
Bloco com gráfico
