Material Design

Tudo bem?

Neste artigo vamos ao estudo do Material Design, saber o porquê dessa linguagem de design, as origens e como será daqui para frente: se já há outra linguagem de design em trabalho, no Google, ou se será mantida a evolução do material design.

Caso você tenha seguido o último conteúdo apresentado aqui no Blog, Como Criar Protótipos Android, e tenha se confundido ou se perdido sobre como partir das características de layout que utilizei naquele vídeo e artigo, saiba que este conteúdo sobre Material Design é que vai lhe mostrar o porquê de utilizarmos os componentes visuais como utilizamos no protótipo daquele conteúdo.

A seguir os tópicos que estaremos abordando:

• O que era utilizado anteriormente?;
• Origem;
• Lançamento;
• Objetivos:
  • Regras a serem respeitadas.
• Principais características:
  • Formas;
  • Cores;
  • Ícones;
  • Tipografia;
  • Imagens;
  • Animação;
  • Profundidade.
• Componentes comuns;
• O que vem depois do Material Design;
• Slides;
• Vídeo;
• Conclusão;
• Fontes.

O que era utilizado anteriormente?

Antes do Material Design, os desenvolvedores Android tinham o Holo Design, introduzido a partir do Android 4.0 (em outubro de 2011), versão Android também conhecida como Ice Cream Sandwich.

A seguir a imagem de como era o aplicativo do Gmail com o Holo design:

O objetivo do Holo era colocar um padrão de interface de usuário para os aplicativos Android, isso, pois antes dele os desenvolvedores de apps seguiam suas próprias linhas de design.

A seguir a imagem de como era o aplicativo do Gmail, no Android, antes do Holo design:

Notou que faltou algo no motivo do desenvolvimento do Holo design?

Sim, em nenhum momento o objetivo, ao menos o principal, foi a melhoria considerável na experiência do usuário, ou seja, o Holo veio para colocar "ordem na casa", mesmo que temporariamente enquanto algo melhor ainda não era minimamente finalizado, no caso, o Material Design.

Origem

Para aqueles que são somente desenvolvedores é possível pensar que o Material Design não veio do Google e sim de uma empresa que trabalha somente com isso, design. Mas não, o Material Design veio sim da empresa do famoso buscador e não somente para o Android, mas também para o Chrome OS e aplicativos Web.

Estudando mais sobre como surgiu o Material Design, descobrimos que na verdade o Material Design que temos hoje chamava-se Quantum Paper.

O Quantum Paper faz parte da linha de pensamento e estudo "espaços racionalizados e sistemas em movimento", alias esta linha de estudo foi desenvolvida pelo Google, nela há também o estudo de "tinta e papel", este último que a princípio deu origem as formas e cores intensas adotadas dentro do Material Design.

O objetivo do projeto Quantum Paper era unificar as interfaces dos aplicativos Google, independente da plataforma: Android, Web e iOS. Conseguir isso sem perder a qualidade na experiência do usuário.

Nessa época havia já um projeto no Google, para Web apps, que era parte da base do Quantum Paper, um com trabalho em polímeros, onde o foco era a responsividade, o layout facilmente se ajustava em qualquer tamanho de tela.

Hoje esse projeto se chama Polymer e é mais do que somente a extensão do Material Design para aplicativos Web.

O Quantum Paper, a princípio, se tornou o Material Design e a ambição de atingir também o sistema da Apple não foi continuada, digo, o que se deu foi que parte do objetivo do Material Design se tornou permitir a fácil identificação, pelo usuário, de qual sistema operacional estaria sendo utilizado, ou seja, o foco não mais era somente o design dos aplicativos e sim também dos sistemas, SOs, controlados pelo Google.

Lançamento

O Material Design foi lançado no Google I/O de 2014, apresentado por um dos responsáveis pelo seu desenvolvimento, Matias Duarte, e junto a mais nova versão do Android na época, o Android 5, ou: Android Lollipop.

Neste lançamento ficou claro que o Material Design veio com a proposta toda focada na qualidade da experiência do usuário e que este, o Material Design, estaria em constante evolução.

Essa constante evolução é fácil de identificar quando se falando, por exemplo, do BottomNavigationDrawer (barra de navegação no rodapé do aplicativo), componente que hoje tem suas próprias especificações no site de specs do Material Design, algo que, ao menos até 2015, não existia no site.

Objetivos

Tendo como base a busca da simulação de objetos reais no mundo digital, o estudo de tinta e papel e o foco na experiência do usuário também por meio da aplicação da realidade tátil, com o Material Design os seguintes objetivos são conseguidos:

• Unificação das interfaces gráficas dos sistemas Google;
• Responsividade imediata a interação do usuário;

• Trabalho com objetos, materiais, sólidos que ocupam espaços individuais, como no mundo real;
• Trabalho com luzes, sombras e camadas para permitir a separação dos materiais digitais;
• Trabalho com o eixo Z para permitir a apresentação da profundidade dos objetos;
• Animação baseada em força, onde há aceleração e desacelaração, como acontece na vida real.

Algumas características somente do mundo digital também são permitidas, mais especificamente em relação a animação de materiais digitais, isso tendo como objetivo:

• A junção ou separação de objetos de mesmo nível, camada;

• A transição de telas de maneira suave e construtiva, onde não há aquela mudança brusca de uma screen para a outra.

Regras a serem respeitadas

Apesar de no mundo digital nós termos uma flexibilidade não atingível no mundo real, junto as especificações do Material Design vieram também algumas regras de negócio sobre o que não se pode fazer com os materiais digitais, mesmo sendo possível.

A seguir algumas dessas regras:

• Em uma animação, os materiais devem se movimentar de forma curvada até a posição final, digo, quando dois eixos tiverem suas coordenadas alteradas no posicionamento final do objeto;
• Objetos somente podem se movimentar de forma linear se a posição final mudar somente em um eixo;
• A velocidade de movimentação deve seguir a linha de força aplicada no mundo real, com aceleração e desaceleração;
• Quando objetos ocuparem camadas diferentes, diferentes hierarquias, isso deve ficar óbvio aos olhos do user, deve haver trabalho com luzes e sombras;
• Objetos não podem passar uns dentro dos outros, pois isso não é possível no mundo real;
• Animações devem ser perceptíveis aos usuários, porém rápidas, não chegando nem mesmo a casa dos segundos;
• A responsividade deve levar em conta somente os objetos acionados e não aplicar animação a todos os materiais em tela.

Há ainda mais regras, essas são as mais evidentes quando se tendo em mente que o Material Design tem também como objetivo manter alguns padrões que existem em objetos reais.

Principais características

Apesar do Material Design ter algumas características similares de linguagens de design de empresas concorrentes ao Google, como, por exemplo, as formas retangulares e com grandes espaços em branco do Metro UI da Microsoft e as cores vibrantes que estão presentes dede o iOS 7, o Material Design não menciona em nenhum momento os concorrentes como inspiração.

Alias, as características similares apontadas acima também já estavam presentes nos cards do Google Now antes do lançamento do Material Design.

Note que mesmo havendo algumas similaridades entres os designs das empresas citadas, todos os sistemas são facilmente identificados por qualquer usuário, ou seja, eles têm particularidades que os deixam únicos.

Formas

Retângulos, grandes espaços em branco, grids e bordas suaves para aumentar a clareza do conteúdo.

A seguir uma imagem do Google Now com o Material Design:

Cores

São sólidas, mutáveis e os materiais digitais, não imagens, têm disponíveis a eles ao menos duas distintas: primária (primary) e secundária (accent).

Textos, ícones e divisores fazem uso também do canal alpha da cor, para trabalhar a opacidade dela:

Duas boas fontes para testar / buscar um conjunto ideal de cores são:

• Material IO Color Tool;
• Material Palette.

Note que a cor primária é aquela que mais é utilizada em seu aplicativo, mesmo que em diferentes intensidades. A cor secundária é menos utilizada e tende a ter um alto contraste quando comparada a cor primária.

Ícones

Estão presentes em dois tipos: de produto e de sistema. O primeiro é o ícone do aplicativo, o segundo é referente aos ícones que são utilizados internamente para identificação de funcionalidade.

Para os ícones de produto é permitido mais de uma cor e algumas bordas e formas que indicam um ícone complexo, isso, pois este ícone é para a identificação de marca:

Os ícones de sistema devem facilmente permitir a identificação das funcionalidades acionadas por eles ou então a identificação do significado do conteúdo próximo a cada um deles, uma data de publicação, por exemplo.

Ícones de sistema têm de ser simples, simétricos e uni-colors, todos devem ter a mesma cor no aplicativo, exceto os presentes em fundos de pouco contraste, esses têm de ainda ter uma única cor, mas que dê contraste com a cor de fundo:

No caso dos ícones de sistema, o Google recomenda que os disponibilizados pela própria empresa é que sejam utilizados em aplicativos com o Material Design. Esses estão em Material IO.

Infelizmente o Material IO é um tanto limitado quando precisamos de ícones de marcas, para isso também recomendo o Material Design Icons.

Em ambas as fontes de ícones, utilize sempre termos em inglês para as buscas.

Tipografia

As fontes padrões com o Material Design são: Roboto (Android) e Noto.

Porém aqui, em fontes, é difícil manter uma regra forte como acontece com os ícones, principalmente porque é nessa parte onde até mesmo os não designers arriscam customizações, isso sem perder qualidade na entrega do conteúdo em texto.

Um forte indício de que o Google aceita outras fontes ante somente a Roboto e Noto é a não depreciação da classe Typeface, que permite a mudança de font-family em tempo de execução no Android, e também a adição do fonts in XML a partir do Android O, onde facilmente nós podemos definir famílias de fontes para o aplicativo.

Imagens

Imagens são importantes para os conteúdos, logo, elas devem ser relevantes a eles, facilmente reconhecíveis quando colocadas junto a outros materiais do layout, além de não poderem ter bordas ou espaçamentos.

São frequentemente utilizadas para a apresentação de conteúdos e avatares:

Animação

A animação tem de ser também responsiva aos acionamentos do usuário. Deve ser natural e baseada em realidade tátil, como os objetos que manuseamos no mundo real.

O movimento deve ser suave, rápido e deve conseguir simular a força aplicada a um objeto quando no mundo real, onde há: aceleração, desaceleração e caminho curvado, este último quando mais de um eixo no posicionamento final têm as coordenadas alteradas:

A animação a seguir, mesmo que pareça correta é, na verdade, falha, isso, pois no Material Design ela é considerada lenta.

Não devemos aplicar delay para mostrar aos usuários o passo a passo da animação, é possível uma animação assíncrona, em propriedades animadas, sem fazer com que o user aguarde mais do que poucos milissegundos: 

Diferente das outras características, animação não é tão trivial de se aplicar ao layout, algumas estão presentes de forma nativa no Android, outras não. Para isso temos uma série de APIs de terceiros que permitem a animação de componentes visuais no Material Design Android.

Você encontra essas APIs com maior facilidade no Android-Arsenal.

Profundidade

Os materiais devem ser trabalhados como objetos únicos, deve ficar claro ao usuário quando eles estão na mesma camada e quando não estão.

Para isso o Material Design trabalha com luzes e sombras além de ter cada material, objeto, tendo a terceira dimensão com 1dp de espessura: 

Para os três eixos trabalhados no Material Design Android, todas as medições são dadas em "densidade independente de pixels", dp. Com isso há uniformidade na interface gráfica do aplicativo mesmo quando em telas com diferentes densidades.

Componentes comuns

Mesmo o Google disponibilizando um site completo com especificações de uso do Material Design, você notará que até mesmo os aplicativos mais populares não são tão rigorosos assim, eles não deixam as specs oficiais atrapalharem na criatividade deles.

De qualquer forma, há componentes visuais que você comumente estará utilizando em seus aplicativos Android, assim como acontece com vários outros apps na Play Store.

Segue:

• Barra de topo (ou Toolbar / AppBar):

• Menu gaveta (NavigationDrawer):

• Caixa modal (Dialog):

• Framework de lista (ListView, RecyclerView ou GridView). Neste podem haver várias versões de layouts de itens, mas os frameworks de lista ainda estão entre os componentes mais comuns em aplicativos com o Material Design:

Apesar de termos apresentado anteriormente o BottomNavigationDrawer, ele não é tão comum, principalmente por ele ter ainda mais regras de uso do que o menu gaveta, onde o uso do BottomNavigationDrawer ao invés do NavigationDrawer é apenas opcional.

O que vem depois do Material Design

A princípio o que está por vir são apenas atualizações no próprio Material Design, digo, mais adições do que atualizações.

Pois desta vez o projeto foi feito para ser não somente uma maneira de identificar e unificar os sistemas Google, mas também ser algo que materializa o que temos no mundo real, melhorando em muito a experiência do usuário em relação ao que se tinha anteriormente, onde o foco principal era a padronização das interfaces gráficas dos aplicativos.

Slides

A seguir os slides de apresentação da linguagem de design do Google, caso prefira este modelo de estudo. Note que as imagens GIF animadas não funcionam, isso, pois o SlideShare, até a construção deste artigo, não aceitava arquivos KeyNote.

Vídeo

A seguir o vídeo com a apresentação da linguagem de design, Material Design, caso você prefira este formato:

Conclusão

Apesar de haver algumas regras a serem seguidas no Material Design para que possamos ter um design muito próximo ao mundo real, ser criativo em alguns pontos, na apresentação de conteúdo, por exemplo, pode trazer o diferencial para o app.

O Material Design tende a persistir por um bom tempo sendo a principal linguagem de design dos sistemas Google, não vejo como inteligente tentar se preparar para algo novo, a ponto de deixar de utilizar alguns componentes visuais por terem implementações complexas.

Se algo novo vier, mesmo que de forma inesperada, provavelmente virão também APIs de suporte e um modelo de transição bem simples, como no Material Design: apenas a definição correta de tema no styles.xml.

Não deixe de comentar sua dúvida ou sugestão e também de se cadastrar na lista de emails do Blog (logo ao lado ou abaixo) para receber o conteúdo exclusivo e em primeira mão.

Para ter acesso as especificações completas do Material Design e também a algumas ferramentas disponibilizadas pelo Google, entre em: Material IO.

Abraço.

Fontes

Material Design, site oficial

Material Design Wikipédia

Material Design: um olhar aprofundado sobre o novo estilo visual da Google

Material Design is Google's new visual look for Android, Chrome OS, and more

An in-depth look behind Android's paper-like new design

Google reveals its next generation 'Material' design language — and it looks a lot like Windows and iOS

What is Google’s Material Design?

Material Design para Android

Como manter a compatibilidade

Exclusive: Quantum Paper And Google's Upcoming Effort To Make Consistent UI Simple

Quantum Paper: Novo Projeto de Design da Google para plataformas Android, Web e iOS

Relacionado

Kotlin Android, Entendendo e Primeiro ProjetoAndroid

Colocando Telas de Introdução em Seu Aplicativo AndroidAndroid

Android WordPress, Apresentação do ProjetoAndroid

Como Criar Protótipos AndroidAndroid

Comentários Blog (1)

Para código / script, coloque entre [code] e [/code] para receber marcação especifica.

Forneça seu nome válido.

Forneça seu email válido.

Forneça o comentário.

Enviar

Enviando, aguarde...

Nelson Secco Filho (2) (0)

11/04/2018

Obrigado por emprestar seu material para o GDGSJC utilizarei com muita reponsabilidade e cuidado.

Link do nosso evento - http://meetu.ps/e/DNKJY/td1l5/f

Responder