No último evento de E / S de 2014, o Google voltou com suas novas surpresas. Além de lançar oficialmente a nova atualização do Android com o codinome Lollipop, o Google também apresentou sua nova linguagem de design, o Material Design . É um sistema de design que não é apenas proposto para as novas melhorias na interface de usuário do Lollipop, mas também para dispositivos e ambientes.
O Material Design tem alguns recursos importantes que o diferenciam entre outras tendências de design com suas próprias maneiras exclusivas. Assim como seu nome, foi inspirado em materiais reais e os combinou em um sistema de design para criar uma experiência de usuário elegante, intuitiva, bonita e interativa. Neste post, veremos o que está dentro do Material Design e forneceremos um guia rápido sobre como implementá-lo. Ao citar o blog do Google, vou dizer: "Isto é material design".
Uma introdução
Material Design é um sistema de design unificado, significa que foi feito para funcionar com todos os dispositivos e plataformas disponíveis atualmente. De tablet, smartphone a desktop e de plataformas Android, iOS, Windows a Web. Todo o design parece e deve ser o mesmo onde quer que esteja.
Princípios Principais
Existem três princípios principais que constroem o design de material. Estas são as partes mais fundamentais do que o Material oferece em geral.
- Material é a metáfora . O desenvolvimento do Material foi inspirado no estudo dos elementos táteis que usamos todos os dias, papel e tinta . Faz com que o objeto luz, superfície e movimentos sejam melhores quando interagindo uns com os outros.
- Ousado, gráfico e intencional . Tipografia, grades, espaço, escala, cor e uso de imagens usadas na base do design baseado em impressão tornam o conteúdo do Material melhor.
- Movimento fornece significado . Esta é uma das coisas mais notadas. Em Material, você deve ter um movimento significativo e apropriado, feedback sutil e claro e transição eficiente e coerente.
Os componentes
O Material Design presta atenção a todos os detalhes de seus componentes para que possam ser usados universalmente. Esses componentes ajudarão você a criar aplicativos e sites incríveis. Existem muitos componentes fornecidos pelo Material, como botões, chave, cartão, entrada de texto, fab (botão de ação flutuante), caixa de diálogo, brinde, submenu, guia e muito mais. Cada um deles tem sua própria regra e guia sobre como criá-los para que você não tenha elementos inconseqüentes.
Coisa de padrões
Além de componentes, o Material também fornece alguns padrões básicos para interface do usuário adicional. Esses padrões melhorarão a interface do usuário que você criou com os componentes do Material. Os padrões, incluindo formato de dados, gaveta de navegação, erros, gestos, técnica de rolagem, pesquisa, configurações, carregar imagens, deslizar para atualizar e muito mais.
Cores de design de material
As cores do Material foram projetadas de tal forma que não farão você se sentir desconfortável, estranho e liso. Inspirando-se em nossos ambientes diários, como placas de trânsito, arquitetura contemporânea, fitas para marcação de pavimentos e quadras de esportes, o Material Design traz para você cores inesperadas e de alto astral. Há tantas paletas de cores para escolher, oferecendo mais conveniência ao desenvolver aplicativos ou sites. Você também pode baixar as amostras de cores para uso local, como para a sua coleção do Photoshop.
Material's Icon
Se você é um desenvolvedor do Android, deve estar familiarizado com alguns pacotes de ícones gratuitos fornecidos pelo Google. Eles geralmente são usados apenas para o elemento principal e para a barra de ação. Enquanto para outros recursos, temos que procurar outros ícones como por pasta, arquivo, copiar e colar, etc manualmente. Em material design Google corrigiu o problema com toneladas de pacotes de ícones que você pode usar.
Cada um dos ícones passou por uma abordagem de design que também usa o estudo de materiais táteis. Eles estão mantendo o princípio material também, isso é consistente. Você pode baixar esses ícones no GitHub, eles vêm com alguma opção para uso diferente como para iOs, web, Android ou svg. Se você quiser uma opção mais ampla para facilitar a personalização, provavelmente desejará ver os pacotes de ícones do Material Design no FlatIcon. Dentro do pacote, você obterá o ícone vector (SVG & EPS), PSD e PNG.
Animação de Material
Estas são as características do Material que mais gosto. As animações em Material são tão reais e intuitivas. Toda animação tem uma transição de tempo significativa, consistente e correta. A demonstração do gif mostrada abaixo é apenas uma das belas animações de Material. Para fornecer uma interação envolvente e responsiva, a equipe do Google também cria uma animação semelhante à ondulação da água para o efeito de entrada do usuário. É usado principalmente em botões e cartões.
Esses recursos que expliquei são apenas uma pequena parte do que o Material Design oferece. Para aprender mais sobre o mundo material, basta ir até a página de documentação.
Implementação
Por padrão, o Material Design vem como a nova atualização da interface do usuário para o Android Lollipop. Todas as diretrizes que o Material foi aplicado dentro dele. Como o Material é voltado para todos os tipos de ambientes, implementá-lo em outro sistema não será difícil. E graças às comunidades, é ainda mais fácil com algumas ferramentas que eles criaram.
Estas são várias maneiras que você pode conseguir para obter material de design fora do Android, web, por exemplo.
Usando CSS Frameworks
Esta é a maneira mais fácil se você quiser implementar o Material Design na plataforma web. Com frameworks, tudo o que você precisa fazer é inicializá-lo e depois escrever os elementos que você precisa. Existem muitos frameworks que você pode usar como Materialize, Material UI ou Polymer para citar alguns. Minha escolha pessoal se enquadra no Materialize. É mais fácil de usar e entender e tem uma ótima documentação com uma boa demonstração.
Segue as diretrizes
Se você deseja implementar o material sem a ajuda da estrutura e prefere mexer com os códigos mais, então você deve seguir as diretrizes materiais. Lá, você encontrará todos os fazer e não fazer para perceber os princípios materiais. Você verá todo o guia básico para criar componentes, layout, animação, cores, padrões e muito mais. Você pode querer ver algumas listas de materiais para facilitar o desenvolvimento.
Conclusão
O design de materiais é um ótimo sistema de design e se tornou uma das tendências mais esperadas do ano. Nos próximos meses, podemos ver isso em todos os lugares. Mais aplicativos e sites serão aprimorados com a nova atualização de design do Google.
E com o Material Design, o Google provou sua superioridade como uma das maiores empresas de tecnologia. Isso faz com que o Google não apenas lidere no mecanismo de pesquisa e na área de sistemas operacionais móveis, mas também no campo do design. Até agora, não há outras empresas que desenvolvem essa grande coisa como o Google fez. Mas a experiência diz que não durará muito tempo. Vamos apenas esperar que outras empresas respondam ao material design do Google.
