Material Design: conheça a cara nova da Google que chegou pra ficar nos seus aplicativos

Criado pela Google com grande participação e influência do designer de interface chileno Matias Duarte, o Material Design surge para unificar os aspectos visuais de seus componentes para diferentes plataformas,  convergindo os diversos aplicativos da Google para um mesmo padrão de design. A mudança integra o visual do Android Lollipop com os dos aplicativos do navegador Chrome, que ganharam novos ícones e seguem os princípios que você vai conhecer a seguir. Além da melhoria na experiência e usabilidade do usuário, o trabalho também ficou mais fácil para o desenvolvedor, que agora pode desfrutar de tais componentes para o desenvolvimento de seus aplicativos. O Material Design apresenta-se como uma tendência na construção de aplicativos, por isso é importante que o desenvolvedor entenda e domine os princípios da tecnologia.

Para ser desenvolvido, o Material Design se baseou em alguns princípios norteadores que são muito bem explorados, como o uso de sombras e profundidade, animações e transições responsivas que possibilitam ao usuário uma agradável sensação de leveza e racionalidade no funcionamento de seus componentes. Além do aumento do uso de layouts baseados em grades (grid-based layout), a  luz, a superfície e o movimento são essenciais para mostrar como os objetos circulam, interagem, e existem no espaço e em relação um ao outro. O princípio de iluminação realista mostra costuras, divide espaços e indica partes móveis na interface do aplicativo.

                 

 

 

Metáfora Material

A metáfora material é uma teoria unificadora de um “espaço racionalizado” e um “sistema em movimento”, desenvolvida pela própria Google.

As superfície e bordas do material fornecem pistas visuais que são fundamentadas na realidade. Em que sentido? Dois corpos não ocupam o mesmo lugar no espaço, da mesma forma que um material não ocupa o espaço de outro.

O Material Design é arrojado, sempre intencional, possui cores marcantes, vivas e vibrantes. Sendo assim, seus elementos fundamentais são tipografia, grades, escalas, aproveitamento e valorização de espaços, cor e uso de imagens que orientam o olhar. Por isso, juntos, esses elementos fazem mais que agradar aos olhos. Uma vez que eles criam hierarquia, significado, clareza e foco.

 

   

 

A ideia do movimento no Material Design respeita e reforça o usuário como seu principal agente. Então, são os comandos do usuário que vão determinar o movimento do layout, já que assim vai responder ao comando da ponta dos dedos.

 

                          

 

O mundo em 3D para o desenvolvedor.

Dessa vez a Google inovou ao utilizar em dispositivos mobile o eixo Z. Desse modo, o desenvolvedor pode controlar a disposição dos seus componentes em três dimensões. Com ele é possível trazer elementos para frente quando desejar colocá-los em evidência, atendo-se sempre ao fato de que os princípios são baseados na realidade, conforme exemplos nas figuras:

                

Cada folha do material ocupa uma única posição no eixo Z e possui 1 dp (Density-independent pixel) de espessura. As dimensões de x e y podem variar, mas a espessura é sempre uniforme.

 

                     

 

Luz e sombra no material design:

Luzes virtuais iluminam o espaço no Material Design. A luz principal cria sombras direcionais enquanto a luz ambiente cria sombras de todos os ângulos.

No desenvolvimento Android as sombras ocorrem quando a fonte de luz é bloqueada pelas folhas no eixo Z. No caso de aplicação web,  as luzes são retratadas apenas ao manipular o eixo y.

 

        

 

Seguindo os princípios gerais, o material pode mudar de formato, ser redimensionado, se partir ou se unir e também pode se mover, mas nunca pode ser dobrado ou curvado.

Um exemplo de um componente importante no Material Design são os Cards (ou cartões). Eles funcionam como se fossem pedaços de papéis que servem para o suporte de informações mais detalhadas. Por exemplo: um cartão pode conter uma foto, um texto, e um link sobre algum assunto. Por isso, os cartões possuem largura constante e altura variável.

 

 

 

 

 

Entretanto, os Dialogs – ou caixas de diálogo – informam ao usuário sobre alguma informação crítica na qual é necessário a tomada de uma decisão. Sendo assim, a caixa de diálogo interrompe a tarefa do usuário até que se tome uma decisão.

 

 

Uma observação interessante é que o conteúdo dessas caixas de diálogo deve apresentar sempre as opções mais intuitivas possíveis.

Usando material design em Android:

Para utilizar o material design para Android, o desenvolvedor deve seguir o manual de design e especificação para utilizar os novos componentes. Saiba que esses componentes estão disponíveis para dispositivos com a versão do Android a partir de 5.0 (API level 21).

Para dispositivos com Android anterior ao 5.0, é necessário que o desenvolvedor utilize o AppCompat que simula a utilização do Material Design com alguns componentes como cardview, recyclerview, entre outros. Certamente existem várias bibliotecas que simulam o Floating Action Button, Flat Button e Raised Button para dispositivos Android anterior ao 5.0

O Resultado:

    

 

 

Visual limpo, organizado, alegre, vibrante e completamente repaginado. Dessa forma, é possível observar nas imagens, o resultado final é como se a tela se configurasse com ‘cartões’, colunas e informações dispostas com a mesma espessura e diferentes profundidades, tornando o layout agradável ao olhar.

O Material Design foi usado no desenvolvimento do aplicativo Tangerine, criado pela equipe da DTI, sobre o qual você descobre em breve aqui no nosso blog.

Gostou do conteúdo?  O guia completo com os princípios e os componentes podem ser visualizado em: https://www.google.com/design/spec/material-design/introduction.html

Compartilhe com a gente o que você acha!

 

 

Por: Jéssica Saliba e Hudson de Almeida Ferreira