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 de seus usuários.

Princípios de design

  • Superfícies e sombras são usadas como metáforas. Os elementos da IU precisam ser superfícies dispostas individualmente, uma sobre a outra ou lado a lado. As sombras são usadas para mostrar quais superfícies estão na frente de outras, ajudando a manter a atenção e estabelecendo uma hierarquia.
  • As imagens precisam ser sem margens. 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 precisam ser usadas de maneira ousada para enfatizar a marca e os elementos importantes da IU. Escolha uma cor principal e de destaque para proporcionar uma experiência consistente em todo o app. É possível usar a API Palette para extrair cores diretamente do conteúdo, criando assim uma experiência mais imersiva.
  • As métricas e 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 facilita a leitura e cria 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 enquanto fazem a transição de uma tela para outra. Na narrativa visual, os movimentos significativos são importantes para deixar a experiência do usuário interessante e ajudar na continuidade visual.
  • As interações responsivas , como um feedback básico de toque, precisam 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 precisam se elevar com o contato para acompanhar o dedo do usuário durante o toque, e as mudanças devem 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ões posteriores precisa ser colorida para complementar a cor principal do app ou do conteúdo atual na tela. Nas imagens sem margens, a barra de status pode ser transparente. Para o nível 23 da API ou mais recente, é 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 precisam 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 precisam seguir as interações e os 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 precisa aparecer na frente da barra do app e dos conteúdos da tela e 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 telas 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, caixas de diálogo, menus e campos de texto para os padrões do Material Design.
  • Os 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 mudanças 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), um botão visualmente diferente que flutua acima de todos os elementos da IU.
  • Os blocos e as listas precisam 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.
  • Os cards precisam ser usados quando houver uma combinação 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, mas lembre-se de que o uso excessivo deles cria um incômodo visual desnecessário. Use o widget CardView ao criar conteúdo para o 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.
  • Os 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, use 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