|
November 7, 2017
|

Material.io – O Layout de plataformas da Google

A informática, assim como o universo, está sempre se expandindo e, como os seres vivos, nunca para de evoluir. Ela cresce em altura, largura e profundidade. Esses conceitos se aplicam muito bem quando, de maneira mais especifica, falamos de design.
Dadas tais circunstâncias, é preciso estar sempre muito atento aos mais diversos detalhes. Construindo cada vez mais interfaces dinâmicas, harmoniosas e com uma usabilidade pra lá de excelente. Pensando nisso, a Google está sempre lançando um tipo de portfólio modelo para estas aplicações UI. Está “documentação” é conhecida como Material.io.

Material Design

O Quantum Paper é o Material Design da Google que vem trazendo uma abstração estilo papel e tinta. Gerando assim, uma sensação de tato reconfortante. Ou seja, é a atual linguagem de design modelo para as aplicações, não só web, como android e IOS. De forma que cumpra o seu intuito de unificar o visual, a movimentação e a iteração entre estas plataformas. Tanto é que a própria Google lançou uma API para que desenvolvedores possam incorporar este modelo em seus programas.

Polymer

O Material é baseado numa espécie de abstração em polímero. Bem, mas como isto acontece? Simples, este Polymer é como uma caixa de ferramentas que facilitam a programação de projetos mais responsivos, funcionando de forma personalizável, afinal, gosto cada um tem o seu. Deste modo, tanto os sites como os aplicativos poderão se ajustar os tamanhos mais diversos de dispositivos e telas. A implementação do Polymer nas aplicações web consiste em um shim que disponibiliza a API com os componentes web e um catalogo de elementos. Sendo assim, até mesmo navegadores que não implementam nativamente este padrão conseguiria exibir estes elementos visuais.

Origem, princípios…

Como já citado, o Material parte da origem tinta e papel, trabalhando sempre em comparação com o mundo real. E por isso adotaram alguns meios para isto, sendo eles:

  • Materiais, objetos e sólidos que, assim como no mundo real, ocupam espaços individuais.
  • Camadas, luzes e sombras como forma de separar os materiais digitais
  • Utilização do eixo Z como meio para representar a profundidade dos objetos
    Animações baseadas na força, onde há aceleração e desaceleração (porém é dispensável o uso do delay para ensinar o usuário).
  • Transições de telas acontece de maneira construtiva e suave, evitando a mudança brusca entre screens.

… e conceitos

Todo padrão de layout das empresas, seja IOS, Windows, Google Now, tem uma particularidade que as tornam únicas. Fazendo com que o usuário as identifiquem assim que as veja.
Essas características peculiares vem através das:

  • Formas: São usadas para dar clareza ao conteúdo, através do uso de retângulos, grades espaços em branco, borda, grids, cores suaves e etc.
  • Profundidade: Deve ser claro para o usuário em qual camada ele está, se já mudou ou se está na mesma e etc. Para isso, o material trabalha com as luzes e sombras, tendo ainda o uso da terceira dimensão. Usando os 3 eixos e criando uma espécie de elevação e espessura, dando uma uniformidade na interface gráfica, mesmo quando em telas diferentes.
  • Tipografia: As fontes padrão do material são: Noto e a Roboto (Android). Diferente do que acontece com os ícones, é difícil manter algo tão rígido em relação as fontes. Pois até mesmo pessoas que não são especializadas nessa área, se arriscam criando novos tipos de fontes. Então neste quesito, recomenda-se o uso Noto e Roboto porém é livre para aderir a qualquer outra fonte. Até porque, o conjunto tipografia, cores, imagens, animações e ícones criam algo chamativo, que prende a atenção do usuário.

E também nos aspectos mais visuais…

  • Cores: Elas costumam ser mutáveis e solidas. Os materiais digitais tem dois tipos de cores distintas: primary e accent (primaria e secundaria). Estes canais se diferenciam através do contraste (entre primary/accent) e a frequência com que elas aparecem, mesmo que diferindo somente de intensidade. Tudo isso colabora para que se crie um Ambiente e Sombra, que ajuda a ser intuitivo, chamativo e mais realista. Estes textos, ícones e divisores também usam do canal alpha da cor, trabalhando sua opacidade. O Material oferece o Material IO Color Tool 1 e o Material Palette 2 como meio para encontrar um conjunto de cores que melhor se aplica a sua necessidade.
  • Ícones: Os ícones normalmente são divididos entre o ícone do aplicativo (ícone de produto) e o dos que servem para identificar uma funcionalidade (ícone de sistema). Sendo permitido para os de produtos, mais de uma cor, borda e forma, deixando-o mais complexo, tendo em vista que indicam uma marca. Já os de sistema devem ser simples, simétricos e uni-colors (devem ser todos da mesma cor), com exceção dos presentes em lugares de pouco contraste, neste caso, é permitido uma cor diferente, mas ela continua sendo única mas que dê contraste com a cor de fundo. Para isso, a google disponibiliza uma serie de ícones no Material Design Icons 3.
  • Imagens: São frequentemente associadas ao conteúdo, logo, devem estar junto a eles e trabalhando com outros materiais do layout, sendo colocadas sem bordas e espaçamentos.
  • Animações: São baseadas na realidade tátil, devendo ser natural e com objetos que manuseamos no mundo real, de forma suave e rápido, conseguindo simular a força que usamos para mover algo na vida real. Essa simulação levando em conta a aceleração, caminho curvado e desaceleração contribuem para criar algo cinético, de forma que proporcione foco e não interfira na continuidade.

E o que vem depois?

Bem, este material é muito novo e tem como objetivo unificar as interfaces UI. E, devido ao grande sucesso em seu objetivo, entende-se que o que venhamos ter seja atualizações deste modelo de layout.

A TotalCross não poderia ficar de fora, também implementado o Material, possibilitando que, além de seu aplicativo funcionar nos mais diversos Sistemas Operacionais, ele também será bonito. Afinal, precisamos conquistar o Cliente, não é mesmo?

 

Comments

More articles

Aplicativos: O que conhecer antes de criar um

November 13, 2018

Google Play: Entenda o que é e qual a sua função

October 18, 2018

Por que os sites precisam se adaptar ao mundo mobile?

August 1, 2018

Design de Interface: O que é e como funciona?

July 31, 2018