SlideShare uma empresa Scribd logo
Material Design
thiengo.com.br
Vinícius Thiengo
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.
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.
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+.
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.
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.
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.
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
Principais características
- Formas;
- Cores;
- Ícones;
- Tipografia;
- Imagens;
- Animação;
- Profundidade.
Formas
Google Now
Retângulos, grandes
espaços em branco, grids
e bordas suaves para
aumentar a clareza do
conteúdo
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
Í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
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
- 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
- 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
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.
Componentes comuns
Barra de topo (toolbar)
Menu gaveta
(NavigationDrawer) Dialog Framework de lista
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.
Material Design
https://www.thiengo.com.br
Vinícius Thiengo
thiengocalopsita@gmail.com

Mais conteúdo relacionado

Semelhante a Material Design

Trabalho iOS e Android
Trabalho iOS e AndroidTrabalho iOS e Android
Trabalho iOS e Android
novastecnologiaspromove
 
Aproveitando as ferramentas do Tableau para criatividade e produtividade
Aproveitando as ferramentas do Tableau para criatividade e produtividadeAproveitando as ferramentas do Tableau para criatividade e produtividade
Aproveitando as ferramentas do Tableau para criatividade e produtividade
Ligia Galvão
 
iOS Design - Processo Criativo de Aplicações
iOS Design - Processo Criativo de AplicaçõesiOS Design - Processo Criativo de Aplicações
iOS Design - Processo Criativo de Aplicações
Rui Barroca
 
Android e ios (1)
Android e ios (1)Android e ios (1)
Android e ios (1)
sandra da silva marcelino
 
Desenvolvimento de Apps e Games para iOS - Parte 2
Desenvolvimento de Apps e Games para iOS - Parte 2Desenvolvimento de Apps e Games para iOS - Parte 2
Desenvolvimento de Apps e Games para iOS - Parte 2
Erisvaldo Junior
 
Minicurso iniciando com Android no Androidos Day
Minicurso iniciando com Android no Androidos DayMinicurso iniciando com Android no Androidos Day
Minicurso iniciando com Android no Androidos Day
Messias Batista
 
LIVRO PROPRIETÁRIO - PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
LIVRO PROPRIETÁRIO - PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEISLIVRO PROPRIETÁRIO - PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
LIVRO PROPRIETÁRIO - PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
Os Fantasmas !
 
Workshop WP.pptx
Workshop WP.pptxWorkshop WP.pptx
Workshop WP.pptx
Microsoft
 
Artigo unity3 d
Artigo unity3 dArtigo unity3 d
Artigo unity3 d
Alan Brito Dos Santos
 
Android Game Engine
Android Game EngineAndroid Game Engine
Android Game Engine
Hewerson Freitas
 
Mini Curso Design de Dispositivo Moveis
Mini Curso Design de Dispositivo MoveisMini Curso Design de Dispositivo Moveis
Mini Curso Design de Dispositivo Moveis
Paolo Passeri
 
Design de Interfaces para Dispositivos Móveis
Design de Interfaces para Dispositivos MóveisDesign de Interfaces para Dispositivos Móveis
Design de Interfaces para Dispositivos Móveis
Instituto Faber-Ludens
 
Trabalho Pratico 1 - Introdução ao Design Digital
Trabalho Pratico 1 - Introdução ao Design DigitalTrabalho Pratico 1 - Introdução ao Design Digital
Trabalho Pratico 1 - Introdução ao Design Digital
Acemir Sousa Mendes
 
Launchpad Build-BH - Migrando para um mundo material
Launchpad Build-BH - Migrando para um mundo materialLaunchpad Build-BH - Migrando para um mundo material
Launchpad Build-BH - Migrando para um mundo material
Ana Paula Batista
 
TelemóVeis E Sistemas Operativos
TelemóVeis E Sistemas OperativosTelemóVeis E Sistemas Operativos
TelemóVeis E Sistemas Operativos
Cidadania e Profissionalidade
 
Introdução aos aplicativos web
Introdução aos aplicativos webIntrodução aos aplicativos web
Introdução aos aplicativos web
profclaubordin
 
Curso de Desenvolvimento Mobile - Android - Começo e SDK
Curso de Desenvolvimento Mobile - Android - Começo e SDKCurso de Desenvolvimento Mobile - Android - Começo e SDK
Curso de Desenvolvimento Mobile - Android - Começo e SDK
Jackson F. de A. Mafra
 
Palestra Desenvolvimento de Apps Móveis: Iniciando no iOS e Android
Palestra Desenvolvimento de Apps Móveis: Iniciando no iOS e AndroidPalestra Desenvolvimento de Apps Móveis: Iniciando no iOS e Android
Palestra Desenvolvimento de Apps Móveis: Iniciando no iOS e Android
Carlos Eugenio Torres
 
Android vs iOS - Qual é o melhor S.O [Délcio de Carvalho].pptx
Android vs iOS - Qual é o melhor S.O [Délcio de Carvalho].pptxAndroid vs iOS - Qual é o melhor S.O [Délcio de Carvalho].pptx
Android vs iOS - Qual é o melhor S.O [Délcio de Carvalho].pptx
DlciodeCarvalho
 
Pie.157055.ioc grupo 3 - android e i os
Pie.157055.ioc grupo 3 - android e i osPie.157055.ioc grupo 3 - android e i os
Pie.157055.ioc grupo 3 - android e i os
Patricia Cruz
 

Semelhante a Material Design (20)

Trabalho iOS e Android
Trabalho iOS e AndroidTrabalho iOS e Android
Trabalho iOS e Android
 
Aproveitando as ferramentas do Tableau para criatividade e produtividade
Aproveitando as ferramentas do Tableau para criatividade e produtividadeAproveitando as ferramentas do Tableau para criatividade e produtividade
Aproveitando as ferramentas do Tableau para criatividade e produtividade
 
iOS Design - Processo Criativo de Aplicações
iOS Design - Processo Criativo de AplicaçõesiOS Design - Processo Criativo de Aplicações
iOS Design - Processo Criativo de Aplicações
 
Android e ios (1)
Android e ios (1)Android e ios (1)
Android e ios (1)
 
Desenvolvimento de Apps e Games para iOS - Parte 2
Desenvolvimento de Apps e Games para iOS - Parte 2Desenvolvimento de Apps e Games para iOS - Parte 2
Desenvolvimento de Apps e Games para iOS - Parte 2
 
Minicurso iniciando com Android no Androidos Day
Minicurso iniciando com Android no Androidos DayMinicurso iniciando com Android no Androidos Day
Minicurso iniciando com Android no Androidos Day
 
LIVRO PROPRIETÁRIO - PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
LIVRO PROPRIETÁRIO - PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEISLIVRO PROPRIETÁRIO - PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
LIVRO PROPRIETÁRIO - PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
 
Workshop WP.pptx
Workshop WP.pptxWorkshop WP.pptx
Workshop WP.pptx
 
Artigo unity3 d
Artigo unity3 dArtigo unity3 d
Artigo unity3 d
 
Android Game Engine
Android Game EngineAndroid Game Engine
Android Game Engine
 
Mini Curso Design de Dispositivo Moveis
Mini Curso Design de Dispositivo MoveisMini Curso Design de Dispositivo Moveis
Mini Curso Design de Dispositivo Moveis
 
Design de Interfaces para Dispositivos Móveis
Design de Interfaces para Dispositivos MóveisDesign de Interfaces para Dispositivos Móveis
Design de Interfaces para Dispositivos Móveis
 
Trabalho Pratico 1 - Introdução ao Design Digital
Trabalho Pratico 1 - Introdução ao Design DigitalTrabalho Pratico 1 - Introdução ao Design Digital
Trabalho Pratico 1 - Introdução ao Design Digital
 
Launchpad Build-BH - Migrando para um mundo material
Launchpad Build-BH - Migrando para um mundo materialLaunchpad Build-BH - Migrando para um mundo material
Launchpad Build-BH - Migrando para um mundo material
 
TelemóVeis E Sistemas Operativos
TelemóVeis E Sistemas OperativosTelemóVeis E Sistemas Operativos
TelemóVeis E Sistemas Operativos
 
Introdução aos aplicativos web
Introdução aos aplicativos webIntrodução aos aplicativos web
Introdução aos aplicativos web
 
Curso de Desenvolvimento Mobile - Android - Começo e SDK
Curso de Desenvolvimento Mobile - Android - Começo e SDKCurso de Desenvolvimento Mobile - Android - Começo e SDK
Curso de Desenvolvimento Mobile - Android - Começo e SDK
 
Palestra Desenvolvimento de Apps Móveis: Iniciando no iOS e Android
Palestra Desenvolvimento de Apps Móveis: Iniciando no iOS e AndroidPalestra Desenvolvimento de Apps Móveis: Iniciando no iOS e Android
Palestra Desenvolvimento de Apps Móveis: Iniciando no iOS e Android
 
Android vs iOS - Qual é o melhor S.O [Délcio de Carvalho].pptx
Android vs iOS - Qual é o melhor S.O [Délcio de Carvalho].pptxAndroid vs iOS - Qual é o melhor S.O [Délcio de Carvalho].pptx
Android vs iOS - Qual é o melhor S.O [Délcio de Carvalho].pptx
 
Pie.157055.ioc grupo 3 - android e i os
Pie.157055.ioc grupo 3 - android e i osPie.157055.ioc grupo 3 - android e i os
Pie.157055.ioc grupo 3 - android e i os
 

Mais de Vinícius Thiengo

Android: Qual Tecnologia de Desenvolvimento Utilizar?
Android: Qual Tecnologia de Desenvolvimento Utilizar?Android: Qual Tecnologia de Desenvolvimento Utilizar?
Android: Qual Tecnologia de Desenvolvimento Utilizar?
Vinícius Thiengo
 
7 Livros Que Não São de TI, Mas Que Um Programador Deveria Ler
7 Livros Que Não São de TI, Mas Que Um Programador Deveria Ler7 Livros Que Não São de TI, Mas Que Um Programador Deveria Ler
7 Livros Que Não São de TI, Mas Que Um Programador Deveria Ler
Vinícius Thiengo
 
Annotation Span Para Estilização de Texto no Android
Annotation Span Para Estilização de Texto no AndroidAnnotation Span Para Estilização de Texto no Android
Annotation Span Para Estilização de Texto no Android
Vinícius Thiengo
 
5 livros que não são de TI, mas que um desenvolvedor deveria ler
5 livros que não são de TI, mas que um desenvolvedor deveria ler5 livros que não são de TI, mas que um desenvolvedor deveria ler
5 livros que não são de TI, mas que um desenvolvedor deveria ler
Vinícius Thiengo
 
SelectionTracker Para Seleção de Itens no RecyclerView Android
SelectionTracker Para Seleção de Itens no RecyclerView AndroidSelectionTracker Para Seleção de Itens no RecyclerView Android
SelectionTracker Para Seleção de Itens no RecyclerView Android
Vinícius Thiengo
 
Android About Page API Para Construir a Tela Sobre
Android About Page API Para Construir a Tela SobreAndroid About Page API Para Construir a Tela Sobre
Android About Page API Para Construir a Tela Sobre
Vinícius Thiengo
 
Estudando Android - Lista de Conteúdos do Blog
Estudando Android - Lista de Conteúdos do BlogEstudando Android - Lista de Conteúdos do Blog
Estudando Android - Lista de Conteúdos do Blog
Vinícius Thiengo
 
Como Impulsionar o App Android - Compartilhamento Nativo
Como Impulsionar o App Android - Compartilhamento NativoComo Impulsionar o App Android - Compartilhamento Nativo
Como Impulsionar o App Android - Compartilhamento Nativo
Vinícius Thiengo
 
Como Utilizar Métodos Binding Adapter no Android
Como Utilizar Métodos Binding Adapter no AndroidComo Utilizar Métodos Binding Adapter no Android
Como Utilizar Métodos Binding Adapter no Android
Vinícius Thiengo
 
Ajuste de Texto com Autosizing TextView - Android Jetpack
Ajuste de Texto com Autosizing TextView - Android JetpackAjuste de Texto com Autosizing TextView - Android Jetpack
Ajuste de Texto com Autosizing TextView - Android Jetpack
Vinícius Thiengo
 
Live Templates Para Otimização de Tempo no Android Studio
Live Templates Para Otimização de Tempo no Android StudioLive Templates Para Otimização de Tempo no Android Studio
Live Templates Para Otimização de Tempo no Android Studio
Vinícius Thiengo
 
Data Binding Para Vinculo de Dados na UI Android
Data Binding Para Vinculo de Dados na UI AndroidData Binding Para Vinculo de Dados na UI Android
Data Binding Para Vinculo de Dados na UI Android
Vinícius Thiengo
 
Observable Binding Para Atualização na UI Android
Observable Binding Para Atualização na UI AndroidObservable Binding Para Atualização na UI Android
Observable Binding Para Atualização na UI Android
Vinícius Thiengo
 
PhotoView Android Para a Completa Implementação de Zoom
PhotoView Android Para a Completa Implementação de ZoomPhotoView Android Para a Completa Implementação de Zoom
PhotoView Android Para a Completa Implementação de Zoom
Vinícius Thiengo
 
Lottie API Para Animações no Android
Lottie API Para Animações no AndroidLottie API Para Animações no Android
Lottie API Para Animações no Android
Vinícius Thiengo
 
True Time API Para Data e Horário NTP no Android
True Time API Para Data e Horário NTP no AndroidTrue Time API Para Data e Horário NTP no Android
True Time API Para Data e Horário NTP no Android
Vinícius Thiengo
 
Utilizando Intenções Para Mapas de Alta Qualidade no Android
Utilizando Intenções Para Mapas de Alta Qualidade no AndroidUtilizando Intenções Para Mapas de Alta Qualidade no Android
Utilizando Intenções Para Mapas de Alta Qualidade no Android
Vinícius Thiengo
 
Leitor de Códigos no Android com Barcode Scanner API - ZXing
Leitor de Códigos no Android com Barcode Scanner API - ZXingLeitor de Códigos no Android com Barcode Scanner API - ZXing
Leitor de Códigos no Android com Barcode Scanner API - ZXing
Vinícius Thiengo
 
Como Reter Objetos Utilizando Android-State API
Como Reter Objetos Utilizando Android-State APIComo Reter Objetos Utilizando Android-State API
Como Reter Objetos Utilizando Android-State API
Vinícius Thiengo
 
Trabalhando Análise Qualitativa em seu Aplicativo Android
Trabalhando Análise Qualitativa em seu Aplicativo AndroidTrabalhando Análise Qualitativa em seu Aplicativo Android
Trabalhando Análise Qualitativa em seu Aplicativo Android
Vinícius Thiengo
 

Mais de Vinícius Thiengo (20)

Android: Qual Tecnologia de Desenvolvimento Utilizar?
Android: Qual Tecnologia de Desenvolvimento Utilizar?Android: Qual Tecnologia de Desenvolvimento Utilizar?
Android: Qual Tecnologia de Desenvolvimento Utilizar?
 
7 Livros Que Não São de TI, Mas Que Um Programador Deveria Ler
7 Livros Que Não São de TI, Mas Que Um Programador Deveria Ler7 Livros Que Não São de TI, Mas Que Um Programador Deveria Ler
7 Livros Que Não São de TI, Mas Que Um Programador Deveria Ler
 
Annotation Span Para Estilização de Texto no Android
Annotation Span Para Estilização de Texto no AndroidAnnotation Span Para Estilização de Texto no Android
Annotation Span Para Estilização de Texto no Android
 
5 livros que não são de TI, mas que um desenvolvedor deveria ler
5 livros que não são de TI, mas que um desenvolvedor deveria ler5 livros que não são de TI, mas que um desenvolvedor deveria ler
5 livros que não são de TI, mas que um desenvolvedor deveria ler
 
SelectionTracker Para Seleção de Itens no RecyclerView Android
SelectionTracker Para Seleção de Itens no RecyclerView AndroidSelectionTracker Para Seleção de Itens no RecyclerView Android
SelectionTracker Para Seleção de Itens no RecyclerView Android
 
Android About Page API Para Construir a Tela Sobre
Android About Page API Para Construir a Tela SobreAndroid About Page API Para Construir a Tela Sobre
Android About Page API Para Construir a Tela Sobre
 
Estudando Android - Lista de Conteúdos do Blog
Estudando Android - Lista de Conteúdos do BlogEstudando Android - Lista de Conteúdos do Blog
Estudando Android - Lista de Conteúdos do Blog
 
Como Impulsionar o App Android - Compartilhamento Nativo
Como Impulsionar o App Android - Compartilhamento NativoComo Impulsionar o App Android - Compartilhamento Nativo
Como Impulsionar o App Android - Compartilhamento Nativo
 
Como Utilizar Métodos Binding Adapter no Android
Como Utilizar Métodos Binding Adapter no AndroidComo Utilizar Métodos Binding Adapter no Android
Como Utilizar Métodos Binding Adapter no Android
 
Ajuste de Texto com Autosizing TextView - Android Jetpack
Ajuste de Texto com Autosizing TextView - Android JetpackAjuste de Texto com Autosizing TextView - Android Jetpack
Ajuste de Texto com Autosizing TextView - Android Jetpack
 
Live Templates Para Otimização de Tempo no Android Studio
Live Templates Para Otimização de Tempo no Android StudioLive Templates Para Otimização de Tempo no Android Studio
Live Templates Para Otimização de Tempo no Android Studio
 
Data Binding Para Vinculo de Dados na UI Android
Data Binding Para Vinculo de Dados na UI AndroidData Binding Para Vinculo de Dados na UI Android
Data Binding Para Vinculo de Dados na UI Android
 
Observable Binding Para Atualização na UI Android
Observable Binding Para Atualização na UI AndroidObservable Binding Para Atualização na UI Android
Observable Binding Para Atualização na UI Android
 
PhotoView Android Para a Completa Implementação de Zoom
PhotoView Android Para a Completa Implementação de ZoomPhotoView Android Para a Completa Implementação de Zoom
PhotoView Android Para a Completa Implementação de Zoom
 
Lottie API Para Animações no Android
Lottie API Para Animações no AndroidLottie API Para Animações no Android
Lottie API Para Animações no Android
 
True Time API Para Data e Horário NTP no Android
True Time API Para Data e Horário NTP no AndroidTrue Time API Para Data e Horário NTP no Android
True Time API Para Data e Horário NTP no Android
 
Utilizando Intenções Para Mapas de Alta Qualidade no Android
Utilizando Intenções Para Mapas de Alta Qualidade no AndroidUtilizando Intenções Para Mapas de Alta Qualidade no Android
Utilizando Intenções Para Mapas de Alta Qualidade no Android
 
Leitor de Códigos no Android com Barcode Scanner API - ZXing
Leitor de Códigos no Android com Barcode Scanner API - ZXingLeitor de Códigos no Android com Barcode Scanner API - ZXing
Leitor de Códigos no Android com Barcode Scanner API - ZXing
 
Como Reter Objetos Utilizando Android-State API
Como Reter Objetos Utilizando Android-State APIComo Reter Objetos Utilizando Android-State API
Como Reter Objetos Utilizando Android-State API
 
Trabalhando Análise Qualitativa em seu Aplicativo Android
Trabalhando Análise Qualitativa em seu Aplicativo AndroidTrabalhando Análise Qualitativa em seu Aplicativo Android
Trabalhando Análise Qualitativa em seu Aplicativo Android
 

Material Design

  • 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
  • 9. Principais características - Formas; - Cores; - Ícones; - Tipografia; - Imagens; - Animação; - Profundidade.
  • 10. Formas Google Now Retângulos, grandes espaços em branco, grids e bordas suaves para aumentar a clareza do conteúdo
  • 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.
  • 17. Componentes comuns Barra de topo (toolbar) Menu gaveta (NavigationDrawer) Dialog Framework de lista
  • 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.