Entretanto, essa liberdade gerava um efeito que atingia at\u00e9 mesmo os programas criados pela empresa: o design e a experi\u00eancia do usu\u00e1rio (UX), duas grandes\u00a0demandas do mercado<\/a>, se tornavam completamente diferentes.<\/p>\n Por mais que seja interessante manter uma ampla variedade de possibilidades para o desenvolvedor, certas caracter\u00edsticas de um software funcionam bem melhor do que outras. Quanto mais os desenvolvedores percebiam que a experi\u00eancia do usu\u00e1rio \u00e9 fundamental para o sucesso do aplicativo, mais eles buscavam implementar um design otimizado.<\/p>\n Ao perceber isso, o Google estudou os formatos mais eficientes e unificou esses conceitos, criando o Material Design. Basta olhar para aplicativos e plataformas como Gmail, YouTube, Drive, Maps, Classroom e tantos outros para perceber como as interfaces seguem certos padr\u00f5es que otimizam a experi\u00eancia do usu\u00e1rio.<\/p>\n Assim, estamos falando de uma verdadeira linguagem de design que visa a orientar o desenvolvimento de softwares. De acordo com a Google, o Material Design se baseia em papel e tinta, al\u00e9m de utilizar nomenclaturas ligadas a materiais do mundo real\u00a0\u2014 como sheets\u00a0(folhas de papel), pallete\u00a0(paleta), toolbar\u00a0(barra de ferramentas)\u00a0etc.<\/p>\n Para isso, foram feitos v\u00e1rios experimentos para identificar princ\u00edpios e caracter\u00edsticas que formassem a base desse conceito, como mostraremos a seguir.<\/p>\n Ao analisar aspectos\u00a0dos materiais f\u00edsicos, alguns pontos foram\u00a0destacados pelos pesquisadores do Google. Em primeiro lugar, algumas caracter\u00edsticas\u00a0\u2014 os materiais s\u00e3o\u00a0s\u00f3lidos e\u00a0impenetr\u00e1veis, podem ser criados e destru\u00eddos, podem se fundir, entre outras.<\/p>\n Em seguida, certos pontos relacionados ao comportamento foram levantados, pois interferem na manipula\u00e7\u00e3o dos objetos. Estamos falando de sombreamento, a f\u00edsica e a fluidez dos\u00a0movimentos (os objetos podem se mover em qualquer eixo), a import\u00e2ncia de ser intuitivo etc.<\/p>\n Com base nessas observa\u00e7\u00f5es, foi poss\u00edvel, ent\u00e3o, lidar com as possibilidades que o software tem e n\u00e3o s\u00e3o encontradas em objetos f\u00edsicos. Toda a criatividade do desenvolvedor pode ser colocada em pr\u00e1tica a partir de tr\u00eas princ\u00edpios.<\/p>\n O primeiro \u00e9 o material. Conforme mostramos anteriormente, o Material Design \u00e9 inspirado no comportamento dos\u00a0objetos f\u00edsicos. Em segundo, est\u00e1 o princ\u00edpio de bold, graphic, intentional\u00a0(ou direto, gr\u00e1fico, intencional). Ou seja, ele adota elementos tradicionais\u00a0do design, indicando o uso de letras grandes, cores marcantes etc.<\/p>\n Por fim, temos o conceito de uso do movimento. O objetivo n\u00e3o \u00e9 apenas adot\u00e1-lo para dar um estilo, mas para gerar significado. Quando uma janela se move para o lado, por exemplo, sabemos intuitivamente que ela pode ser trazida de volta ao deslizarmos o dedo na dire\u00e7\u00e3o contr\u00e1ria.<\/p>\n Para mostrar como isso funciona na pr\u00e1tica, falaremos a seguir de algumas possibilidades de aplica\u00e7\u00e3o do Material Design para seus\u00a0projetos<\/a>.<\/p>\n O mais interessante do Material Design \u00e9 que ele permite a utiliza\u00e7\u00e3o de pr\u00e1ticas bastante variadas, desde as mais simples at\u00e9 conceitos complexos para quem busca um resultado espec\u00edfico. Falaremos aqui das a\u00e7\u00f5es que se destacam nos aplicativos em geral.<\/p>\n O Material Design tomou como base alguns conceitos de tipografia para otimizar o uso da fonte do texto, que pode ser a Roboto ou a Nato. A primeira foi desenvolvida pelo pr\u00f3prio Google, com o objetivo de ser compat\u00edvel com os mais variados dispositivos. Ainda assim, ela est\u00e1 dispon\u00edvel em 6 formatos diferentes, al\u00e9m das vers\u00f5es em it\u00e1lico.<\/p>\n A Nato, por sua vez, tem como objetivo cobrir uma gama de alfabetos que a Roboto n\u00e3o suporta (japon\u00eas, chin\u00eas e indiano, por exemplo). As varia\u00e7\u00f5es s\u00e3o diferentes para cada l\u00edngua. O Material Design adota o uso de fontes em grande escala para otimizar a identifica\u00e7\u00e3o e compreens\u00e3o dos textos.<\/p>\n A iconografia do Material Design indica o uso de formatos geom\u00e9tricos simples, que sintetizam o objetivo do aplicativo. Cada item deve ser desenvolvido para parecer real e t\u00e1til, como se fosse uma folha de papel com objetos sobre ela. A grade de \u00edcones do sistema oferece uma s\u00e9rie de op\u00e7\u00f5es para a defini\u00e7\u00e3o do formato.<\/p>\n O uso de grid \u00e9 uma alternativa bastante interessante para quem quer fugir do formato comum de listas. Ele permite a utiliza\u00e7\u00e3o tanto de texto como \u00edcones e imagens para elencar as fun\u00e7\u00f5es em seu programa.<\/p>\n A implementa\u00e7\u00e3o por meio do Material Design \u00e9 extremamente simples e o grande benef\u00edcio \u00e9 a otimiza\u00e7\u00e3o do espa\u00e7o. O layout se torna muito mais atraente e intuitivo, melhorando a experi\u00eancia do usu\u00e1rio.<\/p>\n Um card \u00e9 uma esp\u00e9cie de folha que funciona como entrada para informa\u00e7\u00f5es mais detalhadas sobre um item ou uma fun\u00e7\u00e3o. Ele pode conter uma imagem, um texto ou um link. O Material Design oferece tamb\u00e9m a possibilidade de unificar cards em um \u00fanico layout.<\/p>\n Trata-se de uma forma muito eficiente para exibir diferentes elementos. \u00c9 poss\u00edvel, por exemplo, inserir uma foto com legenda, descri\u00e7\u00e3o e bot\u00f5es para acesso a fun\u00e7\u00f5es relacionadas a ela.<\/p>\n Os toasts, por sua vez, foram utilizados inicialmente na base da tela para exibi\u00e7\u00e3o de mensagens \u2014\u00a0enquanto as snackbars ficam localizadas no topo, com algumas op\u00e7\u00f5es. Ambos funcionam como pop-ups e podem ser programados para desaparecerem automaticamente ap\u00f3s alguns segundos ou com um toque na tela.<\/p>\n O Material Design permite ainda a utiliza\u00e7\u00e3o de dois tipos diferentes de bot\u00f5es\u00a0\u2014 os fixos na tela e os m\u00f3veis. A diferen\u00e7a \u00e9 que os primeiros n\u00e3o desaparecem conforme a tela \u00e9 rolada para baixo ou para cima.<\/p>\n Da mesma forma, \u00e9 poss\u00edvel estabelecer \u00e1reas delimitadas para que o bot\u00e3o esteja presente apenas at\u00e9 aquele limite\u00a0\u2014 ao ultrapassar certa parte da p\u00e1gina, ele \u00e9 rolado junto com o resto do conte\u00fado.<\/p>\n Al\u00e9m de otimizar significativamente o processo de desenvolvimento, o Material Design d\u00e1 tra\u00e7os de realismo important\u00edssimos ao software. A intuitividade no uso \u00e9 aumentada conforme o mundo digital replica comportamentos f\u00edsicos do mundo real, algo que esse conceito da Google aplica com maestria.<\/p>\n Ao adotarem o Material Design, empresas que desenvolvem diversos aplicativos diferentes passam a contar com uma identidade muito forte em suas solu\u00e7\u00f5es. Assim que um cliente ou usu\u00e1rio bate os olhos no aplicativo, sabe quem \u00e9 o criador.<\/p>\n Isso coloca a experi\u00eancia do usu\u00e1rio em foco e projeta um diferencial competitivo important\u00edssimo. Cada vez mais, \u00e9 preciso investir em a\u00e7\u00f5es que facilitem a vida das pessoas\u00a0\u2014 o programa deve ser simples, de uso f\u00e1cil, aprendizagem r\u00e1pida e com layout agrad\u00e1vel.<\/p>\n Assim, o processo de cria\u00e7\u00e3o se torna mais r\u00e1pido,\u00a0seus custos s\u00e3o reduzidos<\/a>\u00a0e o produto ganha ainda mais em qualidade. Vale a pena fazer um teste com o Material Design e verificar as vantagens que ele oferece para seus projetos!<\/p>\nCaracter\u00edsticas gerais<\/h3>\n
Os tr\u00eas princ\u00edpios<\/h3>\n
![](\"https:\/\/www.meupositivo.com.br\/panoramapositivo\/wp-content\/uploads\/2019\/07\/700x250_03-1.png\")
<\/a><\/div>\nAs pr\u00e1ticas mais eficientes<\/h2>\n
1. As\u00a0fontes<\/h3>\n
2. Os \u00edcones<\/h3>\n
3. Grid<\/h3>\n
4. Cards<\/h3>\n
5. Toasts e snackbars<\/h3>\n
6. Bot\u00f5es<\/h3>\n
Diferencial do Material Design<\/h2>\n