Posturas e orientação

O design do Android abrange uma ampla variedade de aspectos e dispositivos exclusivos. Analisar apenas os pontos de interrupção não é suficiente. Os usuários podem ajustar e reorientar as janelas de apps nos dispositivos. Com dispositivos dobráveis, um único dispositivo pode abranger todos esses casos de uso. É essencial pensar em painéis para a adaptabilidade do conteúdo.

Mudanças de orientação

Não bloqueie apps no modo retrato. Isso pode parecer um bug e cria letterboxing indesejável ao realizar várias tarefas ao mesmo tempo.

Os usuários costumam reorientar os dispositivos para melhorar a ergonomia e a visualização do conteúdo. Seu app precisa oferecer suporte a essas mudanças de orientação.

Em dispositivos maiores, os modos retrato e paisagem podem ter efeitos mais sutis à medida que passam de um tamanho médio para grande, mas o modo paisagem oferece um tamanho de janela médio com uma visualização vertical compacta.

Considere as seguintes práticas de design para orientação paisagem:

• Compatibilidade com barras de sistema de ponta a ponta.

• Decida qual componente de navegação é mais adequado para seu conteúdo, como uma barra de navegação horizontal ou uma coluna de navegação.

• Considere refluir o conteúdo ou mudar a densidade.

Layouts paisagem podem usar uma interface de largura média.

A orientação paisagem pode aproveitar a altura reduzida de uma barra de navegação inferior orientada horizontalmente.

Para o conteúdo, tente usar um contêiner para fazer o letterbox ou use uma orientação diferente quando disponível, como vídeo vertical em vez de horizontal. O conteúdo de largura total em um retrato compacto ocupa a maior parte da tela em um layout paisagem grande. Se o conteúdo não rolar na orientação retrato, não faça com que ele role na orientação paisagem, porque isso pode confundir os usuários.

A imagem principal ocupa o espaço em destaque e fica fixa. A barra de apps da parte de baixo é desancorada.

Do modo retrato para o paisagem: os dois agrupamentos de contêineres giram no mesmo lugar.

Para uma página de filtro, o componente pode mudar para uma página lateral. Se for necessário mais atenção, a página vai permanecer em tela cheia, mas vai se adaptar a um layout de duas colunas.

Posturas

Considere casos de uso de formatos exclusivos, como posturas de dobragem (dobrado, plano e de mesa).

Seu app não precisa considerar especificamente todas as posturas, mas pense em aproveitar uma delas para o app. Por exemplo, um player de mídia pode mostrar uma interface de mesa e capa exclusiva.

fixo

Um dispositivo dobrável fica na posição plana quando desdobrado. A tela geralmente é de tamanho médio ou grande.

Dobrado

Quando um dispositivo dobrável está fechado, ele fica dobrado. Nessa postura, você interage com a tela externa, que geralmente é compacta.

Suporte de mesa

A posição de mesa é parcialmente dobrada em uma posição horizontal. Essa postura permite usar layouts exclusivos, como controles grandes e vídeo horizontal.

Hinge

Faça com que o app reconheça a dobradiça para que o conteúdo flua sem problemas com continuidade e não se perca na dobradiça. Isso pode não ser necessário em layouts de painel único. No entanto, considere se os controles e o texto devem evitar o espaço da dobradiça.

Se você estiver criando um design com uma grade de layout e painéis, permita uma margem mais larga para acomodar a dobradiça, como em um layout de detalhes e listas de dois painéis.

Alguns dobráveis, como os triplos, têm várias dobradiças.

Capa

Alguns smartphones dobráveis podem ter uma tela externa com proporção quadrada, como um smartphone dobrável.

Ao criar telas de capa, siga estas diretrizes:

• Verifique se os apps são de ponta a ponta.
• Verifique se os elementos da interface não estão cobertos pelos cortes da câmera.
• Mantenha o foco nos casos de uso e na interface.

Por exemplo, quando um dispositivo é usado apenas como um player de mídia, a arte da capa pode se tornar o plano de fundo para revelar uma visualização rápida que requer menos informações.

Em telas e proporções menores, considere a experiência do conteúdo focado. A imagem principal ocupa a maior parte da capa para atrair a atenção, com uma prévia do título e do conteúdo para facilitar a rolagem e a legibilidade.

A capa precisa continuar focada na entrada. Por exemplo, quando o teclado aparece, a mensagem é o foco principal.

Em telas menores, como capas, a página de filtro é em tela cheia, mas o posicionamento e o dimensionamento do botão se adaptam.

Embora compacta, uma coluna de navegação pode ser mais ergonômica em uma tela de capa.

Capas maiores podem aproveitar qualquer orientação de navegação. Considere como os usuários podem interagir com o conteúdo.

Uma pequena barra de navegação pode evitar cortes na interface do sistema e na câmera, respeitando a altura condensada.