Material Design nasceu da coleta de informações e conhecimentos que se transformaram em diretrizes para aprimorar a relação homem-máquina, isso tornou-se em um sistema de desenvolvimento para interface do usuário, definido por um conjunto de propriedades que qualquer objeto dentro do sistema deve aderir.
É chamado Material, pois a ideia é trazer um material sólido para a interface virtual, todos os objetos têm uma altura definida, essa altura ajuda na interação com o usuário dando dicas visuais e também é responsável pelas sombras geradas, assim dando um efeito mais natural aos olhos.
As diretrizes do material design não só criam uma experiência prazerosa visualmente, mas também proveem consistência através dos dispositivos e aplicações e dicas do que virá a acontecer na tela.
Pense como um Engine de um jogo, onde toda a física, texturas, iluminação, animações são delimitadas pelas propriedades da Engine. O mesmo vale para o Material Design. Existe um ambiente 3D onde todos os elementos funcionam de formas restringidas pelas propriedades e diretrizes definidas pela Google.
No Material Design existem as propriedades físicas, propriedades de transformação e propriedades de movimento, estas propriedades são combinadas para temos componentes com um comportamento parecido com papel que pode mudar dinamicamente dependendo do seu uso.
Limitações:
Existem algumas limitações impostas pela Google que devem ser respeitadas:
- Materiais são sólidos e não podem atravessar um ao outro
- Materiais não podem ser curvados ou dobrados
- Todos os materiais tem a mesma espessura, definida pelo Google como 1DP (medida utilizada no desenvolvimento Android, que diferente do pixel, vai apresentar o mesmo resultado em diferentes resoluções).
Sombra:
A Sombra é uma das maneiras mais rápidas de identificarmos onde um objeto se localiza num espaço 3D, ou seja, a distância relativa entre eles. A sombra também nos ajuda a identificar movimento, que como estamos em um ambiente 3D pode ser relacionada a altura do material.
Movimentos:
No Material Design movimentos nos trazem um senso de objetivo. Objetos podem ser movidos livremente, e especialmente em relação a altura como mencionado acima. Essa altura é bastante utilizada como uma dica visual para indicar o local de interação do usuário. Isso é implementado usando “Dynamic Elevation Offset“, que é a posição de destino do objeto relativo a posição de repouso dele mesmo.
Por exemplo todos os componentes que sobem num clique, tem a mesma mudança de elevação relativos aos suas posições de repouso. O objetivo é que todos os movimentos do mesmo tipo possam ser agrupados, gerando consistência.
Animações:
O Google identificou que mudanças abruptas de velocidade ou direção são brutas e causam distrações indesejadas. Com isso muitas das animações contam com um processo de aceleração, e para se tornar mais próxima ao mundo real se faz uso de aceleração assimétrica.
Aceleração assimétrica pode indicar o ‘peso’ de um objeto. Objetos menores ou mais leves podem se movimentar mais rápido porque eles precisam de menos “força”, e objetos mais pesados podem demorar um pouco para acelerar porque precisam de mais “forca”.
A transição entre dois estados visuais deve ser clara, suave e de pouco esforço. Uma transição bem feita indica ao usuário onde ele deve focar a sua atenção. O Google chama isso de “Visual Continuity”, tem as seguintes diretrizes para ser consideradas:
- Onde o usuário deve focar, quais elementos e movimentos apoiam esse objetivo.
- Transições devem estar conectadas visualmente, através de elementos persistentes e cor.
- Usar os movimentos com precisão, isso traz clareza e suavidade pra transição.
Quando fazendo uma transição o Material Design considera a ordem o timing dos elementos, isso transmite qual conteúdo é mais importante, criando um caminho para o olho do usuário seguir, o Google chama isso de ” Hierarchical Timing” e deve ser sempre usado para direcionar a atenção do usuário e não deixar todas as transações ocorrerem ao mesmo tempo sem indicativos do que é mais importante.
Quando as transações de elementos são coordenadas, isso cria uma facilidade para o usuário entender o aplicativo, os destinos dos elementos na transação devem fazer sentido e ser o mais ordenados possível, isso é chamado de “Consistent Choreography”. Para obter esse resultado é indicado evitar movimentos conflitosos ou caminhos sobrepostos, a altura em que os objetos de movimentam e porquê fazem isso e indicam até visualizar se o traçando o caminho de todos os objetos movimentados obtemos uma imagem limpa e organizada.
Material Design imita a realidade, traz um sistema de design simples para um ambiente digital 3D com parâmetros e diretrizes bem definidos. Intuitivamente transmite como uma interface deveria funcionar se fosse feita de papel digital. Essa intuição auxilia no rápido entendimento e reconhecimento da interface, com o menor esforço do usuário.
Para saber mais sobre o Material Design e começar a utilizado segue o site oficial, que conta com uma vasta documentação e representações visuais para melhor entender alguns destes conceitos: https://material.io/
Também interessante ver dos próprios criadores alguns comentários da criação e desenvolvimento, segue vídeo de apresentação do Google sobre o tema: https://www.youtube.com/watch?v=rrT6v5sOwJg
Autor: Mauricio Calgaro