O Google está comprometido em promover a equidade racial para as comunidades negras. Veja como.
Esta página foi traduzida pela API Cloud Translation.
Switch to English

Diretrizes de design das configurações do Android

Este documento destaca os princípios e diretrizes para qualquer um que esteja criando configurações da plataforma Android, configurações principais do GMS (Configurações do Google) ou qualquer desenvolvedor desenvolvendo configurações para seu aplicativo Android.

Princípios de design

Forneça uma boa visão geral

Os usuários devem poder olhar para as telas de configurações e entender todas as configurações individuais e seus valores.

Figura 1. As configurações e seus valores atuais são apresentados na tela de nível superior

Organize itens intuitivamente

Coloque as configurações usadas com frequência na parte superior da tela. Limite o número de configurações em uma tela. Mostrar mais de 10 a 15 itens pode ser avassalador. Crie menus intuitivos movendo algumas configurações para uma tela separada.

Figura 2. Configurações comuns estão na parte superior da tela

Facilite a localização das configurações

Em alguns casos, pode ser útil duplicar uma configuração individual em duas telas diferentes. Diferentes situações podem fazer com que os usuários alterem uma configuração, portanto, incluir a configuração em vários locais ajudará os usuários a encontrar esse item.

Para configurações duplicadas, crie uma tela separada para a configuração e tenha pontos de entrada de diferentes locais.

Figura 3 e 4. "Som de notificação padrão" aparece nas telas "Notificação" e "Som"

Use um título e status claros

Faça os títulos das suas configurações breves e significativos. Evite usar títulos vagos como "Configurações gerais". Abaixo do título, mostre o status para destacar o valor da configuração. Mostre os detalhes específicos em vez de apenas descrever o título.

Os títulos devem:

  • Coloque o texto mais importante do seu rótulo primeiro.
  • Reformule palavras negativas como "não" ou "nunca" em termos neutros, como "bloquear".
  • Use rótulos impessoais como "Notificações" em vez de "Notificar-me". Exceção: se for necessário fazer referência ao usuário para entender a configuração, use a segunda pessoa ("você") em vez da primeira pessoa ("I").

Os títulos devem evitar:

  • Termos genéricos, como definir, alterar, editar, modificar, gerenciar, usar, selecionar ou escolher.
  • Repetindo palavras do divisor de seção ou título da subtela.
  • Jargão técnico.

Tipos de página

Lista de configurações

Este é o tipo mais comum de tela. Ele permite que várias configurações sejam colocadas juntas. As listas de configurações podem ser uma mistura de controles, como opções, menus e controles deslizantes.

Se houver muitas configurações em uma categoria, elas poderão ser agrupadas. Consulte Agrupamento e divisores para obter mais detalhes.

Figura 5. Exemplo de lista de configurações

Exibição de lista

A exibição em lista é usada para mostrar uma lista de itens como aplicativos, contas, dispositivos e muito mais. Controles para filtrar ou classificar podem ser adicionados à tela.

Figura 6. Exemplo da visualização em lista

Tela de entidade

A tela da entidade é usada para apresentar configurações de um item distinto, como aplicativo, conta, dispositivo, rede Wi-Fi, etc.

Visualmente, a entidade é mostrada na parte superior com um ícone, título e legenda. Todas as configurações nesta tela devem estar relacionadas a esta entidade.

Figura 7. Exemplo de tela de entidade usada em informações do aplicativo

Figura 8. Exemplo de tela de entidade usada no armazenamento

Configuração principal

A configuração principal é melhor usada quando um recurso inteiro pode ser ativado ou desativado, como Wi-Fi ou Bluetooth. Ao usar um botão na parte superior da tela, o usuário pode controlar facilmente esse recurso. O uso da configuração principal para desativar o recurso desativa todas as outras configurações relacionadas.

Se um recurso precisar de uma descrição de texto mais longa, a configuração principal pode ser usada, pois esse tipo de tela permite um texto de rodapé mais longo.

Se uma configuração precisar ser duplicada ou vinculada de várias telas, use a configuração principal. Como a configuração principal é uma tela separada, você evitará vários comutadores em locais diferentes para a mesma configuração.

Figura 9. Exemplo de configuração principal usada na tela de notificações do aplicativo; desativar a alternância principal desativará todo o recurso deste aplicativo

Figura 10. Exemplo de configuração principal usada na tela de notificações do aplicativo com a alternância principal desativada

Tela de seleção de botão de opção

Essa tela é usada quando o usuário precisa fazer uma seleção para uma configuração. Os botões de opção podem ser mostrados em uma caixa de diálogo ou em uma tela separada. Os botões de opção não devem ser usados ​​ao lado de controles deslizantes, menus ou comutadores.

Uma tela de botão de opção pode conter uma imagem na parte superior e o texto do rodapé na parte inferior. Os botões de opção individuais podem ter subtexto junto com um título.

Figura 11. Os botões de opção não devem ser usados ​​na lista de configurações

Figura 12. É como usar os botões de opção corretamente nas configurações

Componentes

A partir do Android 8.0, a barra de ferramentas de ação apresenta pesquisa e ajuda, além de outras ações relacionadas. Os menus de estouro são desencorajados, pois os usuários podem não descobrir ações ocultas nesses menus.

Para barras de ferramentas sem ações específicas da tela. Mostrar ações de pesquisa e ajuda.

Figura 13. Barra de ferramentas com ações de pesquisa e ajuda

Para barras de ferramentas com uma ação : apresente a ação antes da pesquisa.

Figura 14. Barra de ferramentas com uma ação antes das ações de pesquisa e ajuda

Para barras de ferramentas com mais de uma ação : considere colocar a ação principal antes da pesquisa, enquanto coloca ações avançadas no menu de estouro.

Se todas as ações forem avançadas ou úteis apenas para um pequeno conjunto de usuários, considere colocar todas as ações no menu de estouro.

Figura 15. Barra de ferramentas com um menu de estouro para ações

Cabeçalho da entidade

O cabeçalho da entidade pode mostrar apenas um cabeçalho ou cabeçalho com subtexto (várias linhas são permitidas para o subtexto). A ação abaixo é opcional. Você pode ter no máximo duas ações.

Figura 16. Cabeçalho da entidade

A parte do ícone e do cabeçalho (App1) rolará sob o cabeçalho (Informações do aplicativo).

Figura 17. O título das informações do aplicativo aqui faz parte da barra de ferramentas, enquanto o restante da tela rola sob ela

O título é obrigatório. Você também deve mostrar o subtexto que destaca o status da configuração. Usar um ícone é opcional.

Tente manter o texto do título conciso. Se os títulos forem longos, eles podem continuar na próxima linha em vez de serem truncados. Não ative menus ou ações com pressão longa.

Exemplos:

Figura 18. Link do menu com ícone, título e subtexto

Figura 19. Link do menu com título e subtexto

Figura 20. Link do menu apenas com o título

Link do menu com ícone, título, subtexto e um alvo de acerto separado à direita

Outros pontos de toque devem usar a cor do tema.

Figura 21. Exemplo de menu de destino com dois toques

Link do menu com o ícone, título, subtexto e estatísticas / número / ícone de alerta

Valores numéricos como porcentagem e tempo podem ser mostrados à direita junto com o subtexto, enquanto um gráfico de barras pode ser mostrado abaixo.

Geralmente, os valores numéricos são apresentados à direita para que os usuários possam olhar e compará-los facilmente.

Figura 22. Exemplo de menu com ícone, título, estatística e gráfico

Agrupamento e divisórias

Se uma tela tiver muitas configurações, elas podem ser agrupadas e separadas por um divisor. Diferentemente das versões anteriores do Android, os divisores agora são usados ​​para agrupar configurações em um grupo, em vez de separar configurações individuais.

Se as configurações de um grupo estiverem intimamente relacionadas, você poderá adicionar um cabeçalho de grupo. Se você usa um cabeçalho de grupo, sempre deve incluir um divisor.

Figura 23. Configurações agrupadas com divisores

Interruptor

Alternar com ícone, título e subtexto

Figura 24. Alterne com ícone, título e subtexto

Alternar com título e subtexto

Figura 25. Alterne com título e subtexto

Mudar apenas com o título

Os títulos podem ser acompanhados por um ícone à esquerda.

Figura 26. Alterne apenas com o título

Item da lista + alternar

Você pode combinar um item da lista com uma opção. Tocar no lado esquerdo da linha vertical atua como um link e leva o usuário para a próxima tela. O lado direito se comporta como um interruptor padrão.

Para o item da lista no lado esquerdo, um título é obrigatório. O ícone e o subtexto são opcionais.

Figura 27. Item da lista e uma opção

Slider

O ícone é opcional no controle deslizante.

Figura 28. Slider

Botão na tela

Ações positivas usam a cor do tema, enquanto ações negativas são cinza. As ações positivas podem incluir a abertura de um aplicativo, a instalação de um aplicativo, a adição de um novo item etc. As ações negativas incluem a limpeza de dados, a desinstalação de um aplicativo, a exclusão de itens etc.

Figura 29. Botões cinza para "Desinstalar" e "Forçar parada"

Figura 30. Botão azul para "Ligue agora"

Divulgação progressiva (avançado)

As configurações que não são usadas com frequência devem estar ocultas. Use "Avançado" somente quando houver pelo menos três itens a serem ocultados.

Aqui, o subtexto mostra os títulos das configurações ocultas. O subtexto deve ser apenas uma linha. O texto adicional é truncado com reticências.

Figura 31. Avançado usado na tela "Display"

Os menus suspensos estão disponíveis, mas, idealmente, você deve usar uma caixa de diálogo ou tela de seleção de botão de opção. Isso é recomendado para simplificar as configurações, pois atualmente existem três padrões diferentes para a seleção única.

Se necessário, os menus suspensos podem ser usados ​​nos casos em que a configuração possui opções simples.

Figura 32. Menu suspenso

Checkbox

Use alternar entre caixas de seleção quando possível.

As caixas de seleção podem ser usadas:

  • Para ações negativas, como restringir aplicativos ou bloquear um serviço.
  • Para evitar ter muitos interruptores na tela.

Figura 33. As caixas de seleção são usadas para reduzir o número de opções nesta tela

O uso de links nas configurações não é recomendado. Use somente links onde for absolutamente necessário. Os links devem usar uma cor de destaque sem sublinhado.

Figura 34. Link usado nas configurações

O texto do rodapé pode ser usado para adicionar conteúdo explicativo. O rodapé deve sempre ter um divisor no topo. O rodapé é mostrado na parte inferior da tela. Rodapés podem ter links, se necessário.

Figura 35. Texto do rodapé

Padrões

Dados

Dados críticos podem ser mostrados em um gráfico como um gráfico de barras ou de torta. Esses dados podem ser mostrados no cabeçalho da entidade. Exemplos incluem dados e armazenamento móveis.

Outros dados menos críticos podem ser apresentados usando uma exibição de lista regular.

Figura 36. Exemplo mostrando armazenamento

Figura 37. Exemplo mostrando rede

Educação do usuário

Alguns recursos podem precisar de uma explicação ou educação do usuário. Você pode usar uma animação ou imagem junto com o texto. A animação ou imagem deve ser apresentada na parte superior da tela, enquanto o texto do rodapé pode ser usado para adicionar uma explicação.

Figura 38. Configuração usando animação e texto de rodapé

Formulários

Se o formulário tiver um campo de entrada, use uma caixa de diálogo normal. Isso fornece uma maneira fácil para os usuários inserirem uma única entrada.

No entanto, se o formulário tiver vários campos, considere usar uma caixa de diálogo em tela cheia . Isso fornece mais espaço na tela para organizar os campos em um padrão claro.

Figura 39. Formulário com um diálogo normal

Procurar Resultados

Os resultados da pesquisa mostram o título, o subtexto (se disponível) e o local da localização da configuração.

Figura 40. Resultado da pesquisa