Práticas recomendadas para o design de apps

Otimize o app para layouts verticais

Simplifique o design do app usando layouts verticais, que permitem que os usuários rolem a tela em uma única direção para navegar pelo conteúdo.

Faça isso

O objetivo do app é levar o usuário do ponto A ao ponto B.

Não faça isso

Use a rolagem vertical e horizontal, já que isso pode confundir a experiência do usuário.

Mostre a hora

Mostre a hora (sobreposição) na parte de cima, assim, o usuário poderá olhar sempre para um mesmo lugar.

Faça isso

Mostrar a hora na parte de cima da sobreposição, assim, o usuário poderá olhar sempre para um mesmo lugar.

Não faça isso

Mostre a hora em uma caixa de diálogo temporária, uma sobreposição de confirmação ou um seletor. Por exemplo, é provável que o usuário só veja uma tela de confirmação por um breve período.

Pontos de entrada inline acessíveis

Confira se todas as ações são exibidas inline, usando ícones e rótulos claros para fins de acessibilidade. Isso inclui pontos de entrada para configurações e preferências.

Faça isso

Usar ícones e rótulos sempre que possível.

Não faça isso

Usar apenas ícones para solicitar ações do usuário.

Use rótulos para orientar os usuários

Para caixas de diálogo mais longas, use rótulos para ajudar a orientar o usuário ao rolar o conteúdo.

Faça isso

Usar quebras de seção, rótulos e outras indicações para organizar o conteúdo e ajudar a orientar o usuário ao rolar a tela em visualizações mais longas com conteúdo misto.

Não faça isso

Adicione um rótulo para caixas de diálogo com um único tipo de conteúdo.

Destaque as ações principais

Coloque as ações principais na parte de cima da sobreposição para facilitar a ação do usuário.

Faça isso

Colocar as ações principais que não são não ambíguas na parte de cima.

Não faça isso

Coloque a ação principal na parte de baixo de uma página muito longa.

Mostrar a barra de rolagem em telas de rolagem

Use o indicador de rolagem apenas em telas de rolagem para evitar a expectativa de interação errada. Da mesma forma, adicione o indicador de rolagem nas telas de rolagem para indicar em que ponto da tela você está.

Faça isso

Mostrar o indicador de rolagem se a visualização inteira rolar.

Não faça isso

Mostre o indicador de rolagem em visualizações sem rolagem ou não mostre a barra de rolagem em visualizações com rolagem.

Criar designs responsivos para telas maiores

Confira se os componentes que você usa preenchem a largura disponível e considere a altura em layouts sem rolagem.

Todos os componentes do Compose são criados de forma responsiva, mas recomendamos qualquer personalização para melhorar o design e agregar valor a telas maiores.

Faça isso

O conteúdo precisa preencher a largura e a altura disponíveis, e os elementos em tela cheia (ProgressIndicators, TimeText etc.) precisam se adaptar de forma responsiva em layouts sem rolagem.

Não faça isso

Use componentes com uma largura fixa que não preencham a tela de forma responsiva ou não ajustem o comportamento do conteúdo para preencher o espaço disponível.

Usar margens responsivas (em percentual)

Recomendamos usar margens percentuais para que o tamanho delas se adapte à curva de crescimento da tela.

Faça isso

Use outras margens percentuais para garantir que o conteúdo não seja cortado na parte de cima e de baixo.

Não faça isso

Os componentes não devem ser dimensionados apenas para preencher o espaço disponível sem margens adicionais.