Diretrizes de design para configurações do Android

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

Princípios de design

Ofereça uma boa visão geral

Os usuários precisam conseguir visualizar as telas de configurações e entender todas as configurações individuais e os valores delas.

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

Organizar itens de maneira intuitiva

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

Figura 2. As configurações comuns aparecem na parte de cima da tela

Facilite a localização das configurações

Em alguns casos, pode ser útil duplicar uma configuração individual em duas telas diferentes. Situações diferentes podem fazer com que os usuários mudem uma configuração. Por isso, incluir a configuração em vários lugares ajuda os usuários a encontrar o item.

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

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

Use um título e status claros

Faça com que os títulos das suas configurações sejam 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.

Sobre os títulos:

  • Coloque o texto mais importante do seu marcador primeiro.
  • Reformule palavras negativas como "não" ou "nunca" em termos neutros, como "bloquear".
  • Use marcadores não pessoais, como "Notificações" em vez de "Receber notificação". Exceção: se for necessário mencionar o usuário para entender o cenário, use a segunda pessoa ("você") em vez da primeira pessoa ("eu").

Os títulos devem evitar:

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

Tipos de página

Lista de configurações

Esse é o tipo mais comum de tela. Ele permite que várias configurações sejam unidas. As listas de configurações podem ser uma combinação de controles, como interruptores, menus e controles deslizantes.

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

Figura 5. Exemplo de lista de configurações

Lista

Ela é usada para mostrar itens como apps, contas, dispositivos e muito mais. É possível adicionar controles para filtrar ou ordenar os itens na tela.

Figura 6. Exemplo da visualização em lista

Tela de entidade

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

De forma visual, a entidade é mostrada na parte de cima com um ícone, título e subtítulo. Todas as configurações desta tela precisam estar relacionadas a essa entidade.

Figura 7. Exemplo de tela de entidade usada nas informações do app

Figura 8. Exemplo da tela de entidade usada no Storage

Configuração principal

A configuração principal é melhor usada quando um recurso inteiro pode ser ativado ou desativado, como Wi-Fi ou Bluetooth. Usando um interruptor na parte de cima da tela, o usuário pode controlar esse recurso. Usar a 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 poderá ser usada, já que esse tipo de tela permite um texto de rodapé mais longo.

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

Figura 9. Exemplo da configuração principal usada na tela "Notificações de apps". Desativar o botão principal desativa todo o recurso desse app

Figura 10. Exemplo da configuração principal usada na tela de notificações do app com o botão principal desativado

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

Essa tela é usada quando o usuário precisa selecionar uma configuração. Os botões de opção podem ser exibidos em uma caixa de diálogo ou em uma tela separada. Botões de opção não podem ser usados com controles deslizantes, menus ou interruptores.

Uma tela de botão de opção pode conter uma imagem na parte superior e um texto de 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 podem ser usados na lista de configurações

Figura 12. Saiba 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. Menus flutuantes não são recomendados, já que os usuários podem não descobrir ações ocultas nesses menus.

Para barras de ferramentas sem ações específicas para a 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, mas as ações avançadas no menu flutuante.

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

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

Cabeçalho da entidade

O cabeçalho da entidade pode mostrar apenas um cabeçalho ou um cabeçalho com subtexto (é permitido usar várias linhas para ele). A ação abaixo é opcional. É possível ter no máximo duas ações.

Figura 16. Cabeçalho da entidade

A parte do ícone e do cabeçalho (App1) vai rolar abaixo do cabeçalho (Informações do app).

Figura 17. O título das informações do app faz parte da barra de ferramentas, enquanto o restante da tela vai rolar abaixo dele

O título é obrigatório. Você também precisa mostrar um subtexto que destaque o status da configuração. O uso de um ícone é opcional.

Tente manter o texto do título conciso. Se os títulos forem longos, eles poderão continuar na próxima linha em vez de ficarem truncados. Não ative menus ou ações ao tocar e manter a tela pressionada.

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 cardápio apenas com título

Link do menu com ícone, título, subtexto e uma área de hit separada à direita

Outros pontos de toque precisam usar a cor do tema.

Figura 21. Exemplo de menu de destino com dois toques

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

À direita, são mostrados valores numéricos, como porcentagem e tempo, com o subtexto, enquanto um gráfico de barras é mostrado abaixo.

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

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

Agrupamento e divisores

Se uma tela tiver muitas configurações, elas poderão ser agrupadas e separadas por um divisor. Ao contrário das versões mais antigas 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 relacionadas, você poderá adicionar um título de grupo. Ao usar um cabeçalho de grupo, sempre inclua um divisor.

Figura 23. Configurações agrupadas com divisores

Trocar

Alternar com ícone, título e subtexto

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

Alternar com título e subtexto

Figura 25. Alternar com título e subtexto

Mudar apenas com o título

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

Figura 26. Alternar apenas com o título

Chave de adição do item da lista

Você pode combinar um item da lista com um interruptor. Tocar no lado esquerdo da linha vertical funciona 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, é obrigatório ter um título. O ícone e o subtexto são opcionais.

Figura 27. Item da lista e um interruptor

Controle deslizante

O ícone é opcional no controle deslizante.

Figura 28. Controle deslizante

Botão na tela

As ações positivas usam a cor do tema, e as ações negativas são cinza. Ações positivas podem incluir abrir e instalar um app, adicionar um novo item etc. As ações negativas incluem limpar dados, desinstalar um app, excluir itens etc.

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

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

Divulgação progressiva (avançado)

As configurações que não são usadas com frequência devem ser ocultadas. Use "Avançado" somente quando houver pelo menos três itens para ocultar.

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

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

Menus suspensos estão disponíveis, mas o ideal é usar uma caixa de diálogo ou uma tela de seleção de botão de opção. Isso é recomendado para simplificar as configurações, porque há três padrões diferentes para seleção única.

Se necessário, os menus suspensos podem ser usados quando a configuração tem opções simples.

Figura 32. Menu suspenso

Caixa de seleção

Use interruptores em vez de caixas de seleção sempre que possível.

Caixas de seleção podem ser usadas:

  • Para ações negativas, como restrição de apps ou bloqueio de 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 interruptores nessa tela.

Não é recomendável usar links nas configurações. Use links apenas quando 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 na parte superior. O rodapé é exibido na parte inferior da tela. Os rodapés podem ter links, se necessário.

Figura 35. Texto do rodapé

Padrões

Dados

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

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

Figura 36. Exemplo de armazenamento

Figura 37. Exemplo mostrando a rede

Instrução do usuário

Alguns recursos podem precisar de uma explicação ou instruções para o usuário. Você pode usar uma animação ou imagem junto com o texto. A animação ou imagem precisa ser apresentada na parte de cima da tela, e 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 oferece uma maneira fácil para os usuários inserirem uma única entrada.

No entanto, se o formulário tiver vários campos, use 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

Resultados da pesquisa

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

Figura 40. Resultado da pesquisa