➙ Conteúdo completo, texto e vídeo, em: https://www.thiengo.com.br/material-design
Apresentação da linguagem de design do Google: Material Design.
Vamos abordar: o que era utilizado anteriormente, origem, lançamento, objetivos, regras a serem seguidas, principais características e o que esperar para o futuro do Material Design.
➙ Para receber os conteúdos do blog em primeira mão, assine a lista de emails em: http://www.thiengo.com.br
*Obs. : os GIFs animados não funcionam no LinkedIn SlideShare.
Abraço.
▶ Treinamento oficial:
➙ Prototipagem Profissional de Aplicativos Android:
↳ https://www.udemy.com/android-prototipagem-profissional-de-aplicativos/?persist_locale&locale=pt_BR
▶ Livros oficiais:
➙ Desenvolvedor Kotlin Android - Bibliotecas para o dia a dia:
↳ https://www.thiengo.com.br/livro-desenvolvedor-kotlin-android
➙ Receitas Para Desenvolvedores Android:
↳ https://www.thiengo.com.br/livro-receitas-para-desenvolvedores-android
➙ Refatorando Para Programas Limpos:
↳ https://www.thiengo.com.br/livro-refatorando-para-programas-limpos
▶ Redes:
➙ Udemy: https://www.udemy.com/user/vinicius-thiengo/?persist_locale&locale=pt_BR
➙ YouTube: https://www.youtube.com/user/thiengoCalopsita
➙ Facebook: https://www.facebook.com/thiengoCalopsita
➙ LinkedIn: https://www.linkedin.com/in/vin%C3%ADcius-thiengo-5179b180/
➙ GitHub: https://github.com/viniciusthiengo
➙ Twitter: https://twitter.com/thiengoCalops
➙ Google Plus: https://plus.google.com/+ThiengoCalopsita
▶ Blog App:
➙ https://play.google.com/store/apps/details?id=br.thiengocalopsita&hl=pt_BR
2. Anterior ao Material Design
Holo Design
- Lançado em 2011 junto ao
Android 4, Ice Cream
Sandwich;
- Permitiu um padrão de
interface entre os aplicativos
Android - o foco ainda era
somente para este SO;
- Não teve o mesmo esforço e
trabalho em UX como no
Material Design.
3. Origem
Android com o Quantum
Paper Design
- Quantum Paper;
- Polymer (2013);
- Unificação das interfaces;
- "Espaços racionalizados e
sistemas em movimento";
- Tinta e papel.
4. Lançamento
Google+, Android App,
com o Material Design
- Google I/O 2014;
- Android 5, Lollipop;
- Foco na experiência do usuário;
- Constante evolução, aceitando
toques de "criatividade e magia".
Ex: BottomNavigationDrawer;
- Primeiro App oficial do Google com
o Material Design: Google+.
5. Objetivos
Realidade tátil
- Unificação das interfaces:
Android, Chrome OS e Web
Apps;
- Mundo real no mundo digital:
- Resposta imediata;
- Objetos sólidos e individuais;
- Sombras, luzes e camadas;
- Eixo Z, simulando
profundidade;
- Animação em força.
6. Objetivos - vindos do mundo digital
Materiais em mesmo nível
- Animação de objetos em mesmo
nível (junção e separação);
- Transição de telas de maneira
suave e construtiva, sem
mudanças bruscas de uma
screen para a outra.
7. Regras a serem seguidas
Animação lenta, quebrando
regras do Material Design
- Animação / movimento no modelo
curvado, simulando força aplicada,
incluindo aceleração e desaceleração;
- Animação linear quando somente um
eixo tem a coordenada atualizada no
posicionamento final;
- Utilizar sombras e luzes para
identificação dos níveis dos objetos;
- Materiais digitais não podem passar
uns dentro dos outros;
- Animações devem ser rápidas, na
casa dos milissegundos;
- Responsividade somente em objetos
acionados.
8. Similaridades
Similaridade com o Metro UI e com o design aplicado ao iOS desde a versão 7.
Porém formas retangulares, com grandes espaços em branco e cores intensas já
eram utilizados nos cards do Google Now.
Microsoft Metro UI
Android N -
Material DesignApple iOS 7
11. São sólidas, mutáveis e
os materiais digitais têm
disponíveis a eles ao
menos duas: primária
(primary-color) e
secundária (accent-color).
Textos e ícones fazem
uso do canal alpha.
Cores
Primary e accent color
12. Ícones
Ícone de produto
Divididos em dois tipos:
produto e sistema.
- Produto (launcher icon):
pode ser complexo, com
mais de uma cor;
- Sistema (interno ao app):
simples e uni-color.
Ícone de sistema
13. Fontes comuns: Roboto e
Noto.
O trabalho com família de
fontes é flexível. Com o
Android já tínhamos o
Typeface.
A partir do Android O temos o
Fonts XML que facilita ainda
mais o uso de fontes
personalizadas.
Tipografia
Fontes personalizadas sem
perder qualidade na entrega
14. - Apresentação de conteúdos
e avatares;
- Devem ser relevantes ao
que o usuário está
consumindo;
- Não devem ter bordas ou
espaçamentos, padding.
Imagens
Imagens de conteúdo e
avatares
15. - Simular o movimento de
objetos no mundo real;
- Ter resposta imediata a
interação do usuário.
Realidade tátil;
- Ser simples, perceptível e
rápida.
Animação
Movimento ao
acionamento do usuário
16. Profundidade
- Objetos individuais,
como no mundo real;
- Separação em nível,
camada, perceptível
ao usuário: luzes e
sombras;
- Espessura dos objetos,
eixo Z, tendo 1dp em
tamanho.
18. Devemos aguardar uma nova linguagem de Design?
A princípio o que está por vir são apenas
atualizações no próprio Material Design,
digo, mais adições do que atualizações.
Pois desta vez o projeto foi feito para ser
não somente uma maneira de identificar
e unificar os sistemas Google, mas
também ser algo que materializa o que
temos no mundo real, melhorando em
muito a experiência do usuário em
relação ao que se tinha anteriormente,
onde o foco principal era a padronização
das interfaces gráficas dos aplicativos.