\n Vamos come\u00e7ar!\n<\/p>\n
\n Princ\u00edpios Fundamentais do Design de Materiais\n<\/p>\n
\n Met\u00e1fora Material:
\n<\/h5>\n
\n O design de materiais coloca uma grande \u00eanfase em tornar os elementos, anima\u00e7\u00f5es e transi\u00e7\u00f5es t\u00e3o reais quanto parecem na vida real. Ap\u00f3s um estudo intensivo de papel e tinta, a equipe do Google decidiu usar uma met\u00e1fora material como o princ\u00edpio unificado de um espa\u00e7o racionalizado e um sistema de movimento. Em poucas palavras, podemos dizer que o design de materiais nada mais \u00e9 do que uma combina\u00e7\u00e3o de v\u00e1rios conceitos cl\u00e1ssicos de design e propriedades f\u00edsicas b\u00e1sicas.\n<\/p>\n
\n Superf\u00edcies Tang\u00edveis:
\n<\/h5>\n
\n No design de materiais, as superf\u00edcies e bordas do material estabelecem uma estrutura f\u00edsica para fornecer aos usu\u00e1rios dicas visuais para ajud\u00e1-los a entender rapidamente o que podem tocar e mover. Utilizando princ\u00edpios de design de impress\u00e3o, o design de material mant\u00e9m o conte\u00fado importante diante dos olhos do usu\u00e1rio, enquanto ignora outros conte\u00fados menos \u00fateis. O uso de atributos familiares, intuitivos e naturais permite que o c\u00e9rebro do usu\u00e1rio trabalhe menos e compreenda rapidamente os recursos.\n<\/p>\n
\n Acessibilidades dimensionais:
\n<\/h5>\n
\n Se houver uma pilha de pap\u00e9is em sua mesa, eles ganham dimens\u00e3o junto com a prote\u00e7\u00e3o de suas sombras. Da mesma forma, no design de materiais, ao aplicar essa propriedade \u00e0 interface do usu\u00e1rio, voc\u00ea ter\u00e1 hierarquia e sombras para chamar a aten\u00e7\u00e3o do usu\u00e1rio para o objeto mais importante com o qual ele deve interagir. Usando os conceitos b\u00e1sicos de luz, superf\u00edcie e movimento, o design de materiais transmite como um objeto ir\u00e1 interagir com os usu\u00e1rios. Al\u00e9m disso, a ilumina\u00e7\u00e3o realista permite que os usu\u00e1rios obtenham a vis\u00e3o mais realista da interface que voc\u00ea projetou.\n<\/p>\n
\n Um design adapt\u00e1vel:
\n<\/h5>\n
\n O design de materiais usa um \u00fanico sistema de design subjacente para organizar o espa\u00e7o e as intera\u00e7\u00f5es. O conceito de um design adaptativo traz coer\u00eancia ao longo de diferentes dispositivos, significa que um design unificado cria exibi\u00e7\u00f5es especializadas para diferentes tipos de dispositivos. Cada visualiza\u00e7\u00e3o \u00e9 adaptada de forma \u00fanica para a intera\u00e7\u00e3o e tamanho adequado para um determinado dispositivo. Por outro lado, nenhuma altera\u00e7\u00e3o \u00e9 feita na hierarquia, iconografia, cores e rela\u00e7\u00f5es espaciais.\n<\/p>\n
\n Conte\u00fado ousado e intencional:
\n<\/h5>\n
\n Outra coisa que voc\u00ea notar\u00e1 nessa nova linguagem visual \u00e9 seu design arrojado com esquema de cores vivas. Seguindo dicas de fita adesiva para marca\u00e7\u00e3o de pavimentos, arquitetura contempor\u00e2nea, sinais de tr\u00e2nsito e quadras esportivas, o Google apresentou cores fant\u00e1sticas e vibrantes que voc\u00ea nunca esperava. Al\u00e9m disso, eles refinaram extensivamente a fonte Roboto<\/a>, tornando-a um pouco mais larga e arredondada para tornar a leitura uma experi\u00eancia melhor. Al\u00e9m disso, o espa\u00e7o em branco deliberado e as imagens de ponta a ponta criam clareza e imers\u00e3o.\n<\/p>\n \n O design de materiais coloca muita \u00eanfase em tornar a intera\u00e7\u00e3o entre os usu\u00e1rios e as superf\u00edcies mais digitais, m\u00e1gicas e responsivas. Nesse estilo de design, quando algu\u00e9m interage com a interface do usu\u00e1rio, todo o design se transforma de forma surpreendente. A express\u00e3o gr\u00e1fica com cor, superf\u00edcie e iconografia d\u00e1 ao usu\u00e1rio uma ideia clara sobre o que um objeto pode fazer, enquanto a intera\u00e7\u00e3o responsiva estimula o usu\u00e1rio a explorar profundamente a interface: se eu tocar nisso, o que vai acontecer? E o que acontece a seguir?\n<\/p>\n \n Quando uma pessoa toca a superf\u00edcie da \u00e1gua e faz ondas, a energia derivada de suas a\u00e7\u00f5es para fazer mudan\u00e7as na interface d\u00e1 a ela uma experi\u00eancia real e tang\u00edvel. Da mesma forma, o design de materiais permite que os usu\u00e1rios toquem a interface do usu\u00e1rio como fazem na vida real. Para isso, o Google sugere que os designers levem em considera\u00e7\u00e3o uma dimens\u00e3o extra de intera\u00e7\u00e3o, que \u00e9 o “feedback de movimento”, para que o usu\u00e1rio sinta que est\u00e1 sendo ouvido pela superf\u00edcie em scrolls, drags, slides e toques.\n<\/p>\n \n No mundo real, toda a\u00e7\u00e3o tem um movimento, come\u00e7ando e terminando. Por exemplo, quando voc\u00ea abre uma caixa na vida real, voc\u00ea toca em algum lugar dela e mostra o que tem dentro. Da mesma forma, todas as a\u00e7\u00f5es do usu\u00e1rio no design de materiais ocorrem em um ambiente unificado. Cada objeto \u00e9 apresentado ao usu\u00e1rio com uma anima\u00e7\u00e3o r\u00e1pida, suave e cont\u00ednua que \u00e9 coreografada em um palco compartilhado. \u00c0 medida que todos os ativos no design de materiais se movem em um ritmo, a tela parece mais cativante e interativa do que nunca.\n<\/p>\n \n Como todos sabemos, para o Google, a experi\u00eancia do usu\u00e1rio \u00e9 mais importante do que qualquer outra coisa. A mesma regra se aplica ao \u00faltimo princ\u00edpio do design de materiais. Este princ\u00edpio diz que o movimento deve ser apropriado, significativo e cuidadosamente coreografado, e n\u00e3o deve ser usado apenas para impressionar os usu\u00e1rios. O movimento no design de materiais n\u00e3o deve ser apenas bonito, mas tamb\u00e9m criar significado sobre a funcionalidade e as rela\u00e7\u00f5es espaciais, al\u00e9m de manter a beleza e a simplicidade de uma experi\u00eancia de usu\u00e1rio perfeita.\n<\/p>\n \n Ainda n\u00e3o est\u00e1 familiarizado com o Polymer<\/a>? N\u00f3s iremos! O Polymer \u00e9 um \u00f3timo kit de ferramentas de interface do usu\u00e1rio que permite trazer o material design para a web. Com a cole\u00e7\u00e3o de elementos de papel<\/a> do Polymer, voc\u00ea ter\u00e1 acesso a todos os recursos do design de materiais e poder\u00e1 trazer tangibilidade, gr\u00e1ficos arrojados e transi\u00e7\u00f5es e anima\u00e7\u00f5es suaves para seus aplicativos na web. Voc\u00ea pode ver os padr\u00f5es de design de materiais e pol\u00edmeros em a\u00e7\u00e3o com o Topeka<\/a>, um divertido aplicativo de perguntas e respostas.\n<\/p>\n \n Agora, vou explorar os elementos de papel do Polymer e mostrar como voc\u00ea pode usar esse novo paradigma de design em seus projetos web.\n<\/p>\n \n O guia de primeiros passos<\/a> do Polymer vem com um breve tutorial e um projeto inicial para ajud\u00e1-lo a se familiarizar com os principais conceitos do Polymer. Em primeiro lugar, voc\u00ea precisa baixar o projeto inicial<\/a> que cont\u00e9m todas as depend\u00eancias e bibliotecas necess\u00e1rias para trabalhar com o Polymer. Depois de baixar o projeto inicial, descompacte-o em algum lugar da unidade local.\n<\/p>\n \n Antes de come\u00e7ar, voc\u00ea precisar\u00e1 de um servidor HTTP r\u00e1pido em execu\u00e7\u00e3o. Se voc\u00ea j\u00e1 tiver o Python instalado, execute qualquer um dos seguintes comandos no n\u00edvel superior do projeto de amostra.\n<\/p>\n \n Python 2.x:\n<\/p>\n \n Python 3.x:\n<\/p>\n \n Agora, carregue a vers\u00e3o finalizada do projeto para testar o servidor web. Por exemplo, se o servidor local estiver escutando na porta 8000:\n<\/p>\n \n http:\/\/localhost:8000\/acabado\/<\/a>\n<\/p>\n \n Depois disso, voc\u00ea precisa instalar os elementos de papel usando qualquer uma das tr\u00eas maneiras a seguir:\n<\/p>\n \n Zip<\/strong>: Baixe<\/a> o arquivo Zip e descompacte-o na raiz do projeto.\n <\/p>\n<\/li>\n \n Bower<\/strong>: Execute este comando acima na raiz do projeto:\n <\/p>\n \n Para obter mais informa\u00e7\u00f5es, fa\u00e7a a instala\u00e7\u00e3o com o Bower<\/a>.\n <\/p>\n<\/li>\n \n Github<\/strong>: Execute este comando acima na raiz do projeto:\n <\/p>\n \n Depois de obter os elementos do papel na raiz do projeto, importe o componente incluindo o seguinte c\u00f3digo no arquivo HTML:\n<\/p>\n\n \n \n \n Devido \u00e0 sua natureza declarativa, os elementos de papel s\u00e3o t\u00e3o f\u00e1ceis de usar quanto os componentes de outros frameworks front-end. Abaixo, mostrei a implementa\u00e7\u00e3o de alguns elementos de interface do usu\u00e1rio mais usados \u200b\u200bno design de materiais.\n<\/p>\n \n Para criar um bot\u00e3o de menu simples que abre um menu suspenso quando clicado, voc\u00ea precisa usar o seguinte c\u00f3digo:\n<\/p>\n \n \n \n Al\u00e9m disso, o bot\u00e3o de a\u00e7\u00e3o flutuante pode ser redimensionado para menor aplicando a classe mini.\n<\/p>\n \n Voc\u00ea pode criar guias usando o seguinte c\u00f3digo:\n<\/p>\n \n O \u00e9 um campo de texto de uma ou v\u00e1rias linhas onde os usu\u00e1rios podem inserir os valores necess\u00e1rios. Este elemento de papel pode opcionalmente ter uma etiqueta.\n<\/p>\n\n Enfatizar a\u00e7\u00f5es:
\n<\/h5>\n\n Altera\u00e7\u00e3o iniciada pelo usu\u00e1rio:
\n<\/h5>\n\n Coreografia da Anima\u00e7\u00e3o:
\n<\/h5>\n\n Movimento significativo:
\n<\/h5>\n\n Implementando Material Design para a Web com Polymer
\n<\/h3>\n\n Come\u00e7ando:
\n<\/h5>\npython -m SimpleHTTPServer<\/code><\/pre>\npython -m http.server<\/code><\/pre>\n\n Instalar elementos de papel:
\n<\/h5>\n\n
bower install Polymer\/paper-elements<\/code><\/pre>\ngit clone https:\/\/github.com\/Polymer\/paper-elements.git components\/paper-elements<\/code><\/pre>\n<\/li>\n<\/ul>\n\n
Usando componentes de interface do usu\u00e1rio de materiais:<\/code>
\n<\/h5>\nComo <a href=\"http:\/\/foundation.zurb.com\/\">Foundation<\/a> e <a href=\"https:\/\/getbootstrap.com\/\">Bootstrap<\/a>, a cole\u00e7\u00e3o de elementos de papel do Polymer \u00e9 repleta de caixas de di\u00e1logo, guias e controles de formul\u00e1rio. Abaixo est\u00e1 a lista de componentes de interface de usu\u00e1rio padr\u00e3o contidos em elementos de papel:<\/code>\n<\/p>\n\n
bot\u00e3o de papel<\/code>\n <\/li>\ncaixa de sele\u00e7\u00e3o de papel<\/code>\n <\/li>\npapel-di\u00e1logo-transi\u00e7\u00e3o<\/code>\n <\/li>\ndi\u00e1logo de papel<\/code>\n <\/li>\nmenu suspenso de papel<\/code>\n <\/li>\npapel-fab<\/code>\n <\/li>\ncom foco no papel<\/code>\n <\/li>\nbot\u00e3o de \u00edcone de papel<\/code>\n <\/li>\nentrada de papel<\/code>\n <\/li>\nitem de papel<\/code>\n <\/li>\nbot\u00e3o de menu de papel<\/code>\n <\/li>\npapel-progresso<\/code>\n <\/li>\nbot\u00e3o de r\u00e1dio de papel<\/code>\n <\/li>\ngrupo de r\u00e1dio de papel<\/code>\n <\/li>\npapel ondulado<\/code>\n <\/li>\nsombra de papel<\/code>\n <\/li>\ncontrole deslizante de papel<\/code>\n <\/li>\ngirador de papel<\/code>\n <\/li>\nguia de papel<\/code>\n <\/li>\nabas de papel<\/code>\n <\/li>\nbrinde de papel<\/code>\n <\/li>\nbot\u00e3o de alternar papel<\/code>\n <\/li>\n<\/ul>\nOs \u00edcones s\u00e3o outra parte crucial do design de materiais. O elemento do Polymer fornece v\u00e1rios \u00edcones que voc\u00ea pode usar. Voc\u00ea pode instalar <a href=\"https:\/\/www.polymer-project.org\/components\/core-icons\/demo.html\">\u00edcones principais<\/a> da mesma forma que instalou elementos de papel.<\/code>\n<\/p>\n\n bot\u00e3o de menu de papel:
\n<\/h5>\n\n<\/code><\/pre>\nWeb Design<\/code>\n<\/div>\n\n<\/pre>\n
WordPress<\/code>\n<\/div>\n\n<\/pre>\n
JavaScript<\/code>\n<\/div>\n\n<\/pre>\n
HTML5<\/code>\n<\/div>\n\n<\/pre>\n
Responsive<\/code>\n<\/div>\n\n<\/pre>\n
A visualiza\u00e7\u00e3o do bot\u00e3o de menu ser\u00e1 mais ou menos assim:<\/code>\n<\/p>\n<a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-326738-6384400ef322e.webp\" data-rel=\"lightbox\"><img class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-326738-6384400ef322e.webp\" alt=\"\" \/><\/a><\/code><\/p>\n\n
papel-fab:<\/code>
\n<\/h5>\nO \u00e9 um bot\u00e3o de a\u00e7\u00e3o flutuante usado para a\u00e7\u00f5es promovidas. Para criar um bot\u00e3o de a\u00e7\u00e3o flutuante, voc\u00ea precisa usar o c\u00f3digo abaixo:<\/code>\n<\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-326738-63844012501f5.webp\")
<\/a><\/p>\n\n abas de papel:
\n<\/h5>\n\n ITEM ONE\n ITEM TWO\n ITEM THREE\n<\/code><\/pre>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-326738-638440158a793.webp\")
<\/a><\/p>\n\n entrada de papel:
\n<\/h5>\n\n<\/code><\/pre>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-326738-638440184876c.webp\")
<\/a><\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-326738-6384401bedf34.webp\")
<\/a><\/p>\n