Baixado 12 vezes
Carregado porMilton Alcântara
Introdução ao material design
O documento apresenta uma introdução ao Material Design, destacando suas diretrizes e princípios fundamentais. Aborda a importância de interfaces amigáveis e a necessidade de um design adaptativo, além de enfatizar a priorização do conteúdo visual e a clareza nas ações do usuário. O autor também menciona recursos e links adicionais para aprofundar o conhecimento sobre o tema.
Introdução ao material design
- 1.
- 2. Sobre: milton.neto.alcantara@gmail.com • Publicidade • Ciênciada Computação • Projetos Acadêmicos • BBTS • Startups Milton Alcântara milton.neto.alcantara@gmail.com
- 3.
- 4.
- 5.
- 6.
- 7.
- 8. GuideLines milton.neto.alcantara@gmail.com https://developer.android.com/design https://google.com/design • Reclamação •Recomendaçõeseboaspráticas • Exemplo:BotãoVoltar
- 9.
- 10. DesignFlat milton.neto.alcantara@gmail.com • Simplista>Realista • Menosémais •Tendênciademercado(Exemplo:Comercias)
- 11.
- 12.
- 13.
- 14.
- 15. 3º- Dimensionalidade milton.neto.alcantara@gmail.com • Ênfasenonecessário •Terelementosatrás para busca • Exemplo:Receberchamada
- 16.
- 17. 4º-DesignerAdaptativo milton.neto.alcantara@gmail.com • RebootparaúnicaGuideLine • Menorcurvadeaprendizadoparaousuário • Padrãovisual emtodasua plataforma • Dispositivorefletevisãodiferentedosistemaoculto • Cores,iconografia,hierarquiaerelaçõesespaciaisconstantes. • Exemplo:inbox • Próximosalvos:Carros,TVs,óculos...
- 18.
- 19. 5º-ConteúdoGráfico milton.neto.alcantara@gmail.com • Sergráficoeintencional • Designersesqueciamdepriorizaroconteúdo •Foconoconteúdo • Mídias • “Queresqueeudesenhe?” • BotõesdoDialog
- 20.
- 21.
- 22. 8º-Animações milton.neto.alcantara@gmail.com • Baseadasnafísica real •Componentesmais realistas
- 23.
- 24.
- 25.
- 26.
Notas do Editor
- #2 Agradecer pelo convite da organização e pela presença de todos.
- #3 Falar sobre a carreira, publicidade, ciência da computação, experiência pré-cobra em startups, cobra, e novas startups.
- #4 Primeira impressão Material Design no Google I/O 2014 | Não vou falar o que deve ou não se fazer | Mas vou voltar no tempo antes da Era touch
- #5 Vamos voltar bastante, para a época do papel (anotar recado, nº de telefones, agenda, mandar uma carta)
- #6 Até chegar a Era dos computadores. Onde grandes geringonças foram se transformando em computadores mais pessoais, até que criaram uma tela, onde você conseguia ver o que estava digitando, com uma interface que era chamada de command line interface, que foi a primeira interação, foi a primeira quebra de paradigma referente a interface, e ao digitar você tinha que memorizar o que era digitado, para fazer um comando no computador, tinha que anotar comandos, ou usar as ajudas dos comandos, geralmente digitando barra + ponto de interrogação, era uma interface que era complicada para ser pessoal, era mais para trabalho, os computadores nessa época eram para nerds, programadores, cientistas, não era realmente um computador pessoal.
- #7 Foi ai que chegou uma empresa do Vale do Silício, eles viram algo diferente numa visita a Xerox, algo que o Stevie Jobs gostou tanto, que acabou contratando alguns funcionários para criar o computador pessoal chamado de Lisa, que tinha a primeira Graphic User Interface, e usava algo que ele tinha visto na visita a xerox que utilizava das coordenadas X e Y para facilitar a interação usuário/computador, algo que conhecemos hoje em dia como Mouse. O que acabou com esse padrão de linha de comando, onde você tinha que memorizar, para algo que você já tinha tudo na sua tela. Tinha padrões ali que você poderia reconhecer, imagina você sair de um padrão onde você tinha linhas e linhas de comando, e se depara com uma tela onde você pode acessar seus documentos facilmente, mas não precisa decorar mais linhas de comandos, basta visualizar e dar dois clicks. A Graphic Interface se tornou então popular com o mac. O mouse revolucionou, fazia com que as pessoas interagissem com objetos na tela, com tudo aquilo que ele via, para aquela época, 1984, isso era incrível, Então, para esse novo paradigma que estava surgindo ser de fácil entendimento para os usuários, os designers da época tiveram que buscar alguns símbolos, ir atrás de convenções, para os usuários novos ou aqueles que vinham das linhas de comando pudessem entender com o que estavam lidando, então eles foram atrás de símbolos reais.
- #8 De coisas que já existiam no mundo real, para ser mais intuitivo para o usuário, então, para um documento nada melhor do que um papel, para um agrupamento desses documentos, uma pasta! E quando você apaga um documento, vai para a lixeira, onde você pode ficar com o documento lá por um tempo, pode restaurar ou simplesmente apagar esse documento. Tudo baseado no mundo real, tornando tudo muito mais intuitivo para o usuário, bem, isso são os ícones. E assim eles foram criando algumas convenções, o que muito bom, porque você consegue ter fácil entendimento, ter segurança, nós vivemos cercados de convenções, de coisas que nem paramos para pensar, mas já conhecemos.
- #9 E pensando em convenções para designer de interfaces, foram criadas as guide lines, muita gente reclama, porque acha que os guides lines amarram os designers, que todos os apps acabam ficando iguais, mas não é isso, eles são recomendações e boas práticas, a maioria de aplicação técnica ou de organização do aplicativo, um exemplo, é o botão de voltar, apertando ele, tem que funcionar, e executando a tarefa para qual ele foi criado, não pode se mudar o comportamento, outro exemplo de erro que algumas pessoas cometem, é confirmar antes de sair do aplicativo, nunca se deve fazer isso. Bem, e falando de Android que a alguns anos é o sistema operacional carro chefe da Google, com o passar dos anos foram chegando novas APIs e com elas novas features, mas o que acontecia era que apesar dos designers já estarem pirando em interfaces, o Android ainda não estava preparado para o designer, apresentava sempre algo novo, mas nada fixo, e os designers acabavam esquecendo de priorizar o conteúdo, tem que priorizar o que é importante, e pensando nisso, muitas plataformas tiveram que dar um reboot nos sistemas, repensando isso, criando apenas um paradigma, usando símbolos de fácil entendimento, alguns imudáveis, podemos colocar tudo em flat, mas o documento continua sendo representado por um papel, o agrupamento pela pasta, e apagar um documento pela lixeira. Você pode fazer um app bonito, mas com informações claras, sempre priorizando o conteúdo, nosso app não é uma arte, pode ser bonito sim, mas eles são feitos para ter interação.
- #10 E foi para isso que o Material chegou, algumas pessoas se assustaram, mas os designer piraram, finalmente o Android amava o design, além de novas features, agora olharam para o designer e estabeleceram um convenção, todos os apps antigos, como já acontece a algum tempo com o cinema, começariam a ter uma reboot, assim tendo uma única guide line, assim celulares, web, wearables, tv, som veicular, todos teriam um mesmo paradigma facilitando o aprendizado dos usuários. Em vez de pensar apenas em aplicativo, pensaram numa plataforma, e não apenas visualmente, a partir disso, você tem no seu bolso uma plataforma inteira, porque agora ela pode se comunicar, e se eles não se comunicassem, os usuários teriam sempre que reaprende isso, e o Material Design chegou para ser a solução para esse problema.
- #11 Design Flat, mais simplista, com ícones sem degrade, fugindo do padrão realista. A principal característica do design “flat” é ser clean e livre de qualquer coisa que possa poluir e causar interferência visual. o famoso “MENOS é MAIS” nos dias de hoje. A simplicidade se tornou uma evolução no design visual, que vem se modernizado com a simplificação de informações e elementos estéticos. Atualmente é uma tendência de mercado. (Falar sobre comercias).
- #12 Agora ele adotou cores vivas para suas barras, ícones, tem um padrão com fundos brancos, mas ainda tem a opção dark para os usuários com problema com tela com muito claras.
- #13 Eu vou falar um pouco sobre os princípios do Material Design, que são divididos em 9,
- #14 Eu já falei antes sobre o papel, e ele foi usado como base, o papel e a tinta, porque nós já conhecíamos o papel, e o Material é a metáfora, o papel, pode se dividir, pode passar por cima doutro, dando visibilidade para o que esta em cima em relação ao que esta por baixo, eles foram atrás dessa gama de possibilidades que o papel poderia ter dentro do digital, e por que o papel? Porque ele tem forma, pode ter movimento e identificação fácil, eles usaram ele como um fundamento para construir e a tinta para dar mais vida a esse mundo.
- #15 Logo depois indo com a base do papel, você pode ver o que esta na frente, você tem sombras, bordas, brilhos, consegue entender o que esta por cima, o que esta por baixo, eles foram atrás de superfícies, e o usuário já conhece isso, assim tornando muito mais simples, mais intuitivo do que antes.
- #16 Com falei a pouco, colocando um papel em cima de outro você consegue ver o que está na frente e o que esta atrás, assim mesmo acontece no Material Design, você consegue dar ênfase no necessário, ter elementos atrás para serem buscados, ter elementos na frente mais importante, mas você ainda ter a possibilidade de buscar o que está atrás, isso é algo que acontece por toda a plataforma. Um exemplo disso é quando alguém liga e você esta usando uma aplicação, abre um card com a foto e nome da pessoa que está ligando na frente da sua aplicação e gera como uma grande sombra, mas você ainda consegue enxergar a aplicação atrás, caso queira voltar para aplicação, você cancela a chamada, o card some e a aplicação volta ao primeiro plano.
- #17 Inteirações em terceira dimensão: Aplicação de um sistema de camadas, que pulam umas em frente às outras para separar e trazer novas informações;
- #18 Essa parte é um das principais, e mais interessantes, o Designer, porque agora o Google gerou um padrão visual estético em toda sua plataforma, a mesma aplicação funcionando em vários devices diferentes, de tamanhos de telas diferentes, cada dispositivo reflete uma visão diferente do mesmo sistema oculto, você cria um mesmo layout mas ajustado para cada tamanho e proporção de dispositivo. Cores, iconografia, hierarquia e relações espaciais permanecem constantes. Como o inbox, que tanto no Android, quanto no IOS, tem a mesma aparência, assim o usuário não tem que reaprender, assim como quando ele vai acessar pelo desktop, acontece a mesma interação, isso pensando no agora, mas no futuro terá muito mais, serão os computadores de bordo de carros, óculos, relógios, tvs, tudo com o mesmo designer.
- #19 Facilidades na transição de um aplicativo em plataformas diferentes como móveis, como smartphones e tablets, ou mesmo em desktop (Usar o Google Keep como exemplo);
- #20 Bem, e o conteúdo tem que ser gráfico, tem que ser intencional, claro, tem que ser o principal elemento de sua tela, e tem que ser mudado para apresentar o que tem que ser necessário, de forma que o usuário saiba o que é a informação primaria, a informação secundária, coloque mídias retratando um sentimento, uma ação, uma foto com tickets para referenciar uma compra de ingressos por exemplo... Você transformando o conteúdo em gráfico, fica bem mais fácil o entendimento. (Fazer referencia ao ditado popular: “Queres que eu desenhe?”), e se você conseguir transmitir uma informação de maneira gráfica, você ganhou nos dois sentidos, porque além de estar passando uma informação, ou seja um conteúdo, ainda esta deixando ao mesmo tempo o seu trabalho mais bonito. Sempre lembrando que isso é focando no conteúdo, então tem que ter um intuito por trás, não apenas a aparência, as vezes dependendo do caso, menos é mais, é só pensar nos novos botões dos dialogs do Android, que agora não tem mais bordas, basta mesmo estar no canto inferior direito, com um espaçamento feito por um grid, a cor primaria da aplicação, e é o suficiente para ficar bonito e ao mesmo tempo intuitivo.
- #21 Ações claras, usando como exemplo o app do gmail, antes era bem cheio de informações, vários ícones da barra, o app todo em tom de cinza, e com a chegada do Material Design, eles tiveram que repensar, qual é a função principal do e-mail? O que é mais usado? Para que o usuário usa aquilo? (Recomendar as pessoas sempre pensarem isso quando estiverem desenvolvendo seus apps), e chegaram a conclusão de que era para ler ou escrever um e-mail, então eles perceberam que para ler o e-mail já tinha a listagem apenas deram uns espaçamentos para a tela não ficar tão poluída visualmente, e destacaram a outra função principal, a de escrever o e-mail nesse botão flutuantes já na cor da aplicação. Você pode essa listagem e essa função principal sempre estará lá, flutuando sobre a listagem. E na actionbar deixa apenas as ações secundárias, pode-se observar que na actionbar antiga, o ícone de escrever e-mail ficava até ao lado do de procurar, funcionalidades de prioridades diferentes no mesmo lugar, além de bagunçado deixava o visual bem poluído. Bem legal esse destaque das funcionalidades dos apps, você vai observar cada vez mais isso, pois já esta se espalhando por todos os apps essa convenção.
- #22 Isso diz respeito a interação do usuário com as aplicações, ela só deve ter alguma ação quando o usuário interagir com ela, então, não mandem nada pra ele, que ele não esteja esperando, a interação do touch é o dedo, é direta, o usuário clica e ai vem uma resposta da ação para ele. Hoje em dia além do touch já tem os comandos de voz para praticamente todas as plataformas, mas de qualquer maneira a ação só deve ser feita com a interação com o usuário.
- #23 Algo que vai dar bastante vida ao seu aplicativo, e agradar visualmente os seus usuários, são as Animações, foram baseadas na física real, para que os componentes fiquem mais realistas, como uma onda de tinta como efeito de resposta ao toque em listas e botões. O ideal, não é usar animação para ser bonito apenas, mas sim, usando de maneira harmoniosa no embelezar com o ser útil, interagindo com o usuário quando ele exercer uma ação no aplicativo, como clicar em um ícone, num card, numa lista ou algo assim.
- #24 Tem que mostrar que algo esta acontecendo, por exemplo, que esta indo de uma tela para outra, ou que o botão flutuante se transformou em uma sequencia de funcionalidades principais do aplicativo, ou para mostrar os detalhes de um card.