googledesign
Share on facebook
Share on twitter
Share on linkedin

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.

material 1                 material 2

 

 

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. Seus elementos fundamentais são tipografia, grades, escalas, aproveitamento e valorização de espaços, cor e uso de imagens que orientam o olhar. Juntos, esses elementos fazem mais que agradar aos olhos. Eles criam hierarquia, significado, clareza e foco.

 

material 3   material 4

 

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

 

material 6                           material 5

 

O mundo em 3D para o desenvolvedor.

Dessa vez a Google inovou ao utilizar em dispositivos mobile o eixo Z, no qual 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:

 

 

material 7                                         Certo: o quadrado azul está acima do quadrado branco, seguindo o eixo z.

 

Errado: Quadrado azul e branco ocupam o mesmo lugar no espaço ao mesmo tempo
Errado: Quadrado azul e branco ocupam o mesmo lugar no espaço ao mesmo tempo

 

material 10                material 11

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.

 

material 13                     material 12

 

Luz e sombra:

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.

 

material 14        material 14

 

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. Os cartões possuem largura constante e altura variável.

 

 

 

material 16

 

 

Já 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. Nesse caso, a caixa de diálogo interrompe a tarefa do usuário até que a decisão seja tomada.

 

material 17

 

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

Recomendações:

Para utilizar o material design para Android, o desenvolvedor deve seguir o manual de design e especificação para utilizar os novos componentes. 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. Existem várias bibliotecas que simulam o Floating Action Button, Flat Button e Raised Button para dispositivos Android anterior ao 5.0

O Resultado:

material 18   material 19 material 20

 

material 21

 

Visual limpo, organizado, alegre, vibrante e completamente repaginado. Como é 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