Entenda os modelos de layout do Compose e os layouts de design de exemplo para projetar e criar telas de apps exclusivas.
A maioria dos apps usa um layout de rolagem ou sem rolagem, que consiste nos seguintes elementos:
- Texto de hora:como o dispositivo é um relógio, recomendamos mostrar o texto de hora mesmo em uma jornada de app (opcional, mas recomendado).
- Título da página:orientação e lembretes de onde o usuário está na jornada (opcional, mas recomendado).
- Indicador de rolagem:só em layouts de rolagem; indica que há mais conteúdo abaixo da dobra da tela.
- Botões de ação: recomendados na parte de baixo da página. Confirmam, concluem ou continuam a jornada do usuário.
Seções do layout do app
Seção superior
A seção de cima tem a opção de texto de tempo, um botão compacto e exibição de título como um localizador de caminho e navegação clara. Todas são opcionais.
Um botão compacto pode ser usado em casos especiais em que a página é muito longa, e um botão de pesquisa ou ação ajuda o usuário a navegar pela lista sem precisar rolar até o fim.
Seção do meio
A seção do meio pode conter qualquer um dos Composes disponíveis (fora de tela cheia) ou componentes personalizados em uma lista. Essa seção pode conter outros cabeçalhos para agrupar conteúdo e a barra de rolagem.
Todos os componentes na seção de conteúdo do meio precisam ser responsivos, preenchendo a largura disponível até as margens percentuais. Todos os layouts de rolagem vão ter o comportamento de dimensionamento de colunas lentas, mostrando os componentes dimensionados e desbotados na tela.
Seção de baixo
A seção de baixo oferece espaço para botões de ação primários e secundários ou pode ser deixada vazia se for o fim de uma jornada.
É recomendável usar um botão que abraça a borda no final da lista, porque ele utiliza o espaço limitado e complementa a tela redonda.
Mais de uma ação pode ser necessária, o que pode aparecer em uma pilha de botões ou em um grupo de botões com dois ícones.
Visualizações de apps sem rolagem
Com título
Sem título
Com título e sem seção na parte de baixo
Sem título ou seção inferior
Como rolar as visualizações do app
Com título
Sem título
Com título e sem seção na parte de baixo
Sem título ou seção inferior