Nível 2: otimização adaptativa

Os apps otimizados oferecem suporte total a todos os tipos de tela e estados do dispositivo, inclusive as transições de estado.

Representação dos três níveis de qualidade como camadas empilhadas verticalmente com o nível intermediário em destaque.

Diretrizes

Crie seu app para que ele se adapte a todos os tamanhos de tela e estados de dispositivos.

Interface do usuário

Guideline ID Test IDs Description
Responsive_adaptive_layouts T-Layout_Flow

O app tem layouts responsivos e adaptáveis para todos os tamanhos de tela. Todos os layouts são responsivos (consulte Migrar a interface para layouts responsivos). A implementação de layouts adaptáveis é determinada pelas classes de tamanho de janela.

A interface do app pode incluir o seguinte:

  • Colunas de navegação de ponta que se expandem em tamanhos de janela maiores para painéis de navegação completos.
  • Layouts de grade que ajustam o número de colunas para acomodar mudanças de tamanho da janela.
  • Colunas de texto em telas grandes.
  • Painéis de borda finais que são abertos por padrão em tamanhos de tela de computadores. São fechados em telas menores.

Crie layouts de vários painéis (quando apropriado) para aproveitar o espaço grande da tela. Consulte Layouts canônicos.

A incorporação de atividades permite que apps baseados em atividade criem layouts de vários painéis mostrando atividades lado a lado.
UI_Secondary_Elements T-Layout_Flow

Modais, menus de contexto e outros elementos secundários são formatados corretamente em todos os tipos de tela e estados do dispositivo. Por exemplo:

  • As páginas inferiores não têm largura total em telas grandes. Aplique uma largura máxima para evitar alongamento. Consulte Comportamento em Páginas: inferiores.
  • Os botões não têm a largura total em telas grandes. Consulte Comportamento em Botões.
  • Os campos e as caixas de texto não se estendem até a largura total em telas grandes. Consulte Comportamento em Campos de texto.
  • Pequenos menus ou modais de edição não cobrem toda a tela e mantêm o máximo possível do contexto para o usuário. Consulte Menus.
  • Os menus de contexto aparecem ao lado do item selecionado pelo usuário. Consulte o tópico "Menus de contexto" em Menus.
  • As colunas de navegação substituem as barras para melhorar a ergonomia em telas grandes. Consulte Coluna de navegação.
  • As gavetas de navegação são atualizadas para colunas de navegação expandidas. Consulte Gaveta de navegação.
  • As caixas de diálogo são atualizadas para o componente do Material Design mais recente. Consulte Caixas de diálogo.
  • As imagens são exibidas com uma resolução adequada e não são esticadas nem cortadas.
Touch_Targets T-Touch_Targets As áreas de toque têm no mínimo 48 dp. Consulte as diretrizes de Layout e tipografia do Material Design (em inglês).
Drawable_Focus T-Drawable_Focus Um estado focado é criado para drawables personalizados interativos. Um drawable personalizado é qualquer elemento de interface visual não fornecido pelo framework do Android. Se os usuários puderem interagir com um drawable personalizado, ele vai precisar ser focalizável quando o dispositivo não estiver no modo de toque, e uma indicação visual do estado focado precisará ser aparente.

Teclado, mouse e trackpad

Guideline ID Test IDs Description
Keyboard_Navigation T-Keyboard_Navigation A tarefa principal flui no app com suporte à navegação pelo teclado, incluindo a navegação com as teclas Tab e de seta. Consulte Criar apps mais acessíveis.
Keyboard_Shortcuts T-Keyboard_Shortcuts O app oferece suporte a atalhos do teclado para ações usadas com frequência, como selecionar, recortar, copiar, colar, desfazer e refazer. Consulte Compatibilidade de entrada.
Keyboard_Media_Playback T-Keyboard_Media_Playback O teclado pode ser usado para controlar a reprodução de mídia. Por exemplo, a barra de espaço reproduz e pausa a mídia.
Keyboard_Send T-Keyboard_Send A tecla Enter do teclado realiza uma função de envio em apps de comunicação.
Context_Menus T-Context_Menus Os menus de contexto podem ser acessados pelo comportamento de clique com o botão direito do mouse e do trackpad (botão secundário do mouse ou toque secundário).
Content_Zoom T-Content_Zoom O conteúdo do app pode ser ampliado usando a roda de rolagem do mouse (junto com a tecla Control ou Ctrl) e os gestos de pinça do trackpad.
Hover_States T-Hover_States Os elementos de ação da interface têm estados de passagem de cursor, quando adequado, para indicar aos usuários do mouse e do trackpad que os elementos são interativos.

Testes

Para garantir que seu app esteja otimizado e responsivo a todas as configurações de tela, faça os seguintes testes.

Interface do usuário

Test ID Guideline IDs Description
T-Layout_Flow Responsive_adaptive_layouts,
UI_Secondary_Elements

Execute o app em dispositivos com uma grande variedade de tamanhos de tela, incluindo smartphones, smartphones dobráveis, tablets pequenos e grandes e dispositivos desktop. Execute o app no modo de várias janelas nos dispositivos.

Verifique se o layout do app responde e se adapta a diferentes tamanhos de tela e janela. Confira se o app expande e reduz as colunas de navegação, dimensiona o número de colunas em layouts de grade, flui o texto em colunas e assim por diante. Observe se os elementos da interface estão formatados para estética e função.

Em apps que usam a incorporação de atividades, teste se as atividades são exibidas lado a lado em telas grandes e empilhadas em telas pequenas.
T-Touch_Targets Touch_Targets Verifique se as áreas de toque mantêm um tamanho e uma posição acessíveis e consistentes e não estão ocultas ou obscurecidas por outros elementos da interface para todos os tamanhos de tela e configurações. Para saber mais sobre acessibilidade, consulte o Scanner de acessibilidade.
T-Drawable_Focus Drawable_Focus Em cada tela do app que contém um drawable personalizado interativo, confira se ele pode ser focado usando um teclado externo, um botão direcional ou outro dispositivo que permita o foco de elementos da interface. Verifique se há uma indicação visual do estado em foco. Para conferir informações relacionadas, consulte o Modo de toque.

Teclado, mouse e trackpad

Test ID Guideline IDs Description
T-Keyboard_Navigation Keyboard_Navigation Navegue pelos componentes focalizáveis do app usando as teclas Tab e de seta de um teclado externo.
T-Keyboard_Shortcuts Keyboard_Shortcuts Use os atalhos em um teclado externo para selecionar, recortar, copiar, colar, desfazer e refazer ações.
T-Keyboard_Media_Playback Keyboard_Media_Playback Use um teclado externo para iniciar, parar, pausar, voltar e avançar a reprodução de mídia.
T-Keyboard_Send Keyboard_Send Use a tecla Enter de um teclado externo para enviar dados.
T-Context_Menus Context_Menus Use o botão secundário do mouse ou o recurso de toque secundário do trackpad para acessar o menu de contexto dos elementos interativos.
T-Content_Zoom Content_Zoom Use a roda de rolagem do mouse (junto às teclas Control ou Ctrl) e os gestos de pinça do trackpad para controlar o zoom.
T-Hover_States Hover_States Passe o cursor do mouse ou do trackpad sobre os elementos acionáveis da interface para ativar o estado de passar o cursor sobre o elemento.