As visualizações sem rolagem se concentram em informações rápidas e oferecem valor aos usuários com pouca ou nenhuma interação. Por isso, pode ser difícil criar um comportamento responsivo nesses layouts.
Componentes de layout predefinidos que não rolam
Dialog
Uma caixa de diálogo é uma sobreposição temporária que ocupa a tela inteira. Ele permite que os usuários realizem uma única ação.
- As caixas de diálogo concentram sua atenção para verificar se o conteúdo foi abordado.
- As caixas de diálogo precisam ser diretas ao comunicar informações e dedicadas a concluir uma tarefa.
- As caixas de diálogo precisam aparecer em resposta a uma tarefa ou ação do usuário, mostrando informações relevantes ou contextuais.
Sobreposição de confirmação
A sobreposição de confirmação mostra uma mensagem ao usuário por um curto período. Use esse componente para chamar a atenção do usuário depois que uma ação for executada.
Abrir no smartphone
A sobreposição "Abrir no smartphone" é acionada quando o usuário escolhe continuar a jornada em um smartphone. A sobreposição tem um indicador de progresso e informa ao usuário quando verificar o smartphone.
Stepper
Os steppers oferecem uma experiência de controle em tela cheia que permite que os usuários escolham um valor entre um intervalo. É possível controlar a interação usando os botões ou a coroa, e o nível específico é mostrado usando um indicador de nível curvo.
Seletor de horário
Os seletores permitem que os usuários escolham entre um número finito de itens em seções roláveis. O seletor de horário tem até três colunas, dependendo se os segundos estão disponíveis ou se o relógio é de 12 ou 24 horas. Os usuários interagem com cada coluna por vez, fazendo a seleção ao deixar o número em foco antes de continuar.
Seletor de data
Os seletores permitem que os usuários escolham entre um número finito de itens em seções roláveis. O seletor de datas tem até três colunas, que têm uma ordem intercambiável entre data, hora e ano, dependendo do caso de uso. Os seletores de data exigem strings de conteúdo mais longas. Por isso, apenas uma coluna fica visível por vez, dando uma dica do que está à esquerda ou à direita. Os usuários interagem com cada coluna por vez, fazendo a seleção ao deixar o número em foco antes de continuar.
Exemplos de layouts personalizados sem rolagem
As telas de apps que não rolam não se limitam aos componentes definidos. É possível combinar uma série de elementos para criar o layout desejado.
É importante considerar o espaço limitado em uma tela sem rolagem e usar margens e padding responsivos (porcentagem) para aproveitar o espaço disponível. Você também pode aplicar um ponto de interrupção em 225 dp para apresentar conteúdo adicional ou tornar o conteúdo atual mais fácil de visualizar em telas maiores.
Maps
Sobreposição de emergência
Alerta de emergência
Comportamento responsivo e adaptativo
Todos os componentes da biblioteca Compose se adaptam automaticamente ao tamanho maior da tela e ganham largura e altura. Para essas visualizações em particular, o uso de pontos de interrupção pode oferecer uma experiência particularmente rica e valiosa para todos os usuários.
Para muitos dos botões, cards e margens da sua interface, estique e preencha o espaço para diferentes tamanhos de tela e aproveite o espaço disponível na interface e também crie um layout bem equilibrado.
Use a lista de verificação a seguir para verificar se os parâmetros responsivos estão definidos corretamente:
- Crie layouts flexíveis que tenham uma aparência razoável em todos os tamanhos de tela.
- Aplique as margens recomendadas na parte superior, inferior e nas laterais.
- Defina margens em valores percentuais em locais onde o conteúdo possa ser cortado.
- Use restrições de layout para que os elementos façam o melhor uso possível do espaço na tela e mantenham o equilíbrio em diferentes tamanhos de dispositivos.
- Acomode o texto de hora, se usado, mas não o sobreponha à seção superior da página.
- Considere usar botões que se ajustam à borda para aproveitar mais o espaço limitado.
- Considere aplicar um ponto de interrupção em 225 dp para apresentar mais conteúdo ou tornar o conteúdo atual mais fácil de visualizar em tamanhos de tela maiores.
Várias jornadas de página sem rolagem usando paginação
Em cenários em que uma experiência exige mais conteúdo, mas quer manter um layout sem rolagem, considere um layout de várias páginas com paginação vertical ou horizontal.
