Dar vida ao seu app com o Material Design

  • Desenvolvimento
  • Design

Siga os princípios do Material Design para criar apps interessantes e inspiradores para seus usuários.

Por que isso funciona

O material design combina práticas recomendadas, convenções comuns e recursos visuais do design para ajudar você a criar apps expressivos e que fiquem bem em qualquer dispositivo. Ao se familiarizarem com essa linguagem visual, os usuários começarão a esperar por isso. Siga esse projeto para criar apps irresistíveis, aprimorar a usabilidade e aumentar o engajamento e a retenção dos seus usuários.

Princípios de design

  • Superfícies e sombras são usadas como metáforas. Os elementos da IU devem ser superfícies dispostas individualmente, uma sobre a outra ou lado a lado. As sombras devem ser usadas para mostrar quais superfícies estão na frente de outras, ajudando a manter a atenção e estabelecendo uma hierarquia.
  • As imagens devem ser sangradas. Minimize o espaçamento entre as fotos, bem como as margens entre as bordas das fotos e da tela para uma IU mais imersiva e rica em conteúdo.
  • As cores devem ser usadas de maneira ousada para enfatizar a marca e os elementos importantes da IU. Escolha uma cor principal e de destaque para fornecer uma experiência consistente em todo o app. É possível usar a Palette API para extrair cores diretamente do conteúdo, criando assim uma experiência mais imersiva.
  • As métricas e as linhas-chave são usadas para alinhar e dimensionar o conteúdo de acordo com uma grade de linha de base de 8 dp. Isso facilitará a leitura e oferecerá consistência visual. Para um posicionamento de texto mais preciso, pode ser usada uma grade de 4 dp. Quando adequado, alinhe elementos como corpo de texto, miniaturas, títulos da barra do app e similares às linhas-chave padrão.
  • Os movimentos significativos, incluindo animações e transições , são usados para guiar os usuários e ajudá-los a se concentrar ao mesmo tempo que fazem a transição de uma tela para outra. Movimento significativo em uma narrativa visual é o diferencial para oferecer uma experiência do usuário interessante e ajudar na continuidade visual.
  • As interações responsivas, como um feedback básico de toque, devem assumir a forma de ondulações na superfície. Em dispositivos anteriores à versão 5.0, as ondulações não são elementos esperados, então use o comportamento padrão android:selectableItemBackground. Além das ondulações, as superfícies interativas também devem se elevar com o contato para acompanhar o dedo do usuário durante o toque, e qualquer mudança precisa irradiar do ponto de contato.

Componentes da interface do usuário no sistema

  • A barra de status do sistema no Android 5.0 ou versão superior precisa ser colorida para complementar a cor principal do app ou do conteúdo atual na tela. Para imagens sem margens, a barra de status pode ser transparente. Para API nível 23 ou superior, é possível definir a barra de status do sistema para uma alternativa mais clara, em que os ícones ficam mais escuros.
  • A barra do app e as barras de ferramentas devem ser usadas para informar e ajudar a expressar a marca usando as cores, a tipografia e a logomarca do produto. Evite usar o ícone na tela de início. Em telas com muitas imagens, a barra do app pode ser transparente para fornecer uma experiência de IU mais imersiva, já que as imagens devem ser exibidas de borda a borda e podem aparecer atrás da barra do app ou da barra de status. Forneça uma proteção ao texto alterando o nível de transparência nos ícones na barra de apps transparente. Além disso, considere o uso de técnicas de rolagem que ofereçam uma experiência visual mais rica para o usuário.
  • As guias devem seguir as interações e estilos do Material Design. Elas precisam ser deslizantes horizontalmente e sem separadores verticais entre si. Indique guias selecionadas por meio de mudanças de cor no primeiro plano e por uma pequena faixa abaixo do texto (ou ícone) da guia com uma cor de destaque. As guias e a barra do app estão na mesma elevação de superfície, a menos que haja uma definição clara de hierarquia.
  • A gaveta de navegação precisa ter somente os elementos de navegação principais e seguir as novas diretrizes visuais. Ela deve aparecer na frente da barra do app e dos conteúdos da tela e precisa estar subjacente à barra de status do sistema. Como prática recomendada, faça com que a gaveta se abra durante a primeira execução do app para aprimorar a detecção.
  • Considere o uso da navegação inferior se o app tiver de três a cinco destinos superiores que requerem acesso direto. O padrão de navegação de deslocamento inferior é recomendado, uma vez que fornece mais impacto visual e permite strings de texto mais longas nas etiquetas. Mantenha a barra de navegação inferior acessível na maioria das telas, mas exclua as que são detalhadas em nível profundo e permita que a barra se oculte à medida que o usuário rola a tela.

Elementos e padrões da interface do usuário

  • Os temas precisam ser atualizados para o tema de material mais recente a fim de evitar que o app pareça desatualizado. Atualizar os temas do sistema é um dos modos mais rápidos de oferecer um visual mais refinado. Atualize os temas de Gingerbread e Holo para oferecer um design visual e uma experiência do usuário consistentes. Atualize os temas de elementos da IU, como controles de seleção, seletores pontuais, caixas de diálogo, menus e campos de texto para os padrões do Material Design.
  • Botões são os elementos de interação mais usados em um app. Por isso, atualizá-los para os novos padrões de design visual é uma das alterações mais impactantes que você pode fazer. Se você usar botões personalizados, evite cantos excessivamente arredondados, gradientes pesados ou superfícies brilhantes porque esses tipos de botões geralmente fazem seu app parecer desatualizado. Use botões elevados para ações importantes que precisam estar visualmente em destaque ou para layouts com muito texto, em que um botão plano ficaria perdido. Para ações simples que não precisam estar em destaque, botões planos são os mais usados. Para a ação mais importante de uma determinada tela, use o botão de ação flutuante (FAB, na sigla em inglês), um botão visualmente diferente que flutua acima de todos os elementos da IU.
  • Blocos e listas devem ser usados quando os usuários estiverem comparando itens diretamente. Use exibições de lista para conteúdo com muito texto que o usuário visualizará rapidamente. Use as telas quando o conteúdo for principalmente visual. Use o widget RecyclerView ao criar listas e blocos para ter opções de layout mais sólidas.
  • Cards devem ser usados quando houver uma mistura de tipos de conteúdo, em que o usuário explora, mas não compara diretamente strings de texto ou imagens. Use-os também quando existirem várias ações em uma superfície. Os cards conferem destaque e foco visual aos elementos na tela. Porém, lembre-se de que o uso excessivo deles cria um incômodo visual desnecessário. Use o widget CardView ao criar conteúdo para card.
  • A pesquisa no app precisa ser implementada com a pesquisa in-line na barra de apps. Se a pesquisa por conteúdo for a função principal do app, use uma barra do app como widget de pesquisa persistente.
  • Divisores serão usados somente quando separarem grandes seções de conteúdo ou fornecerem distinções importantes entre áreas de texto. Limite o número de divisores para cada item em uma exibição de lista simples porque o excesso deles gera incômodo visual, além de oferecer modificações de legibilidade insignificantes. Em vez disso, recomendamos o uso de espaços em branco e tipografia para ajudar a delinear o conteúdo.
  • Ao criar estados vazios, não deixe de comunicar ao usuário o motivo dessa opção e inclua uma call-to-action para a resolução deles.

Novidades no Android 7.0

  • As notificações foram revisadas e trazem novidades em áreas de conteúdo, interações, controles de usuário e entrada de texto curto.

Exemplos