O documento discute as melhores práticas de design para aplicativos Android usando o Material Design. Ele explica os princípios e objetivos do Material Design, como criar uma experiência adaptativa e combinar design clássico com tecnologia. Também fornece diretrizes sobre ergonomia, convenções e estilo visual, além de exemplos inspiradores de aplicativos.

1. UX & Material Design
Agosto 2017
Criando aplicativos Android do jeito certo

2. Agenda
• Entendendo o Material Design
• Guidelines, como lidar?
• Vários exemplos legais :)
• Erros e dúvidas mais comuns

3. material.io

4. Parte - I
Entendendo o Material Design

6. =

9. O Material Design possui
2 principais objetivos

11. Design adaptativo

12. Design adaptativo
Desenvolver um sistema
que permita uma
experiência unificada em
todas as plataformas e
tamanhos de
dispositivos e formas de
input

14. Contexto - Como uma pessoa usa essa tela?
Conteúdo - Por que os usuários olham para isso?
Método de input - toque, mouse, teclado, voz
Necessidades do usuário - acessibilidade,
internacionalização
Limitações do dispositivo - uso de banda, poder de
processamento.
O que é design adaptativo?

15. Design Clássico + Tecnologia

16. Design Clássico + Tecnologia
Sintetizar os princípios
clássicos do bom design
com a inovação e
possibilidades da ciência
e tecnologia

17. Como?

18. Princípios de Design
Material é a metáfora Ousado, gráfico,
intencional
O movimento cria
significado

19. Princípio I
Material é a metáfora

21. Apresentando, o papel:

22. As superfícies (papel) possuem elevação

23. Tudo que vai na superfície (tinta), não

24. As superfícies são intuitivas

27. Usa conceitos existes no mundo real,
como luz, sombra, gravidade.
Ultrapassa as limitações do mundo
real, podendo esticar, separar e
juntar-se novamente.
Reage ao seu toque - FEEDBACK
sempre!

28. Por quê?

29. Conhecem esse velhinho?

30. Affordances
Feedback

31. Don Norman
“Uma affordance é o potencial de um
objeto de ser usado como foi projetado
para ser usado.”
Ou seja, eu consigo de forma intuitiva
entender que consigo interagir com essa
superfície.
http://www.usabilidoido.com.br/propiciacao_e_clicabilidade.html
Entenda mais aqui:

32. Princípio II
Ousado, gráfico e intencional

33. De onde vem isso?

36. Cores

37. 50 #FFEBEE
100 #FFCDD2
200 #EF9A9A
300 #E57373
400 #EF5350
500 #F44336
600 #E53935
700 #D32F2F
800 #C62828
900 #B71C1C
A100 #FF8A80
A200 #FF5252
A400 #FF1744
A700 #D50000
50 #FCE4EC
100 #F8BBD0
200 #F48FB1
300 #F06292
400 #EC407A
500 #E91E63
600 #D81B60
700 #C2185B
800 #AD1457
900 #880E4F
A100 #FF80AB
A200 #FF4081
A400 #F50057
A700 #C51162
50 #F3E5F5
100 #E1BEE7
200 #CE93D8
300 #BA68C8
400 #AB47BC
500 #9C27B0
600 #8E24AA
700 #7B1FA2
800 #6A1B9A
900 #4A148C
A100 #EA80FC
A200 #E040FB
A400 #D500F9
A700 #AA00FF
50 #EDE7F6
100 #D1C4E9
200 #B39DDB
300 #9575CD
400 #7E57C2
500 #673AB7
600 #5E35B1
700 #512DA8
800 #4527A0
900 #311B92
A100 #B388FF
A200 #7C4DFF
A400 #651FFF
A700 #6200EA
50 #E8EAF6
100 #C5CAE9
200 #9FA8DA
300 #7986CB
400 #5C6BC0
500 #3F51B5
600 #3949AB
700 #303F9F
800 #283593
900 #1A237E
A100 #8C9EFF
A200 #536DFE
A400 #3D5AFE
A700 #304FFE
50 #E3F2FD
100 #BBDEFB
200 #90CAF9
300 #64B5F6
400 #42A5F5
500 #2196F3
600 #1E88E5
700 #1976D2
800 #1565C0
900 #0D47A1
A100 #82B1FF
A200 #448AFF
A400 #2979FF
A700 #2962FF

38. 0 #FFF8E1
00 #FFECB3
00 #FFE082
00 #FFD54F
00 #FFCA28
00 #FFC107
00 #FFB300
00 #FFA000
00 #FF8F00
00 #FF6F00
100 #FFE57F
200 #FFD740
400 #FFC400
700 #FFAB00
50 #FFF3E0
100 #FFE0B2
200 #FFCC80
300 #FFB74D
400 #FFA726
500 #FF9800
600 #FB8C00
700 #F57C00
800 #EF6C00
900 #E65100
A100 #FFD180
A200 #FFAB40
A400 #FF9100
A700 #FF6D00
50 #FBE9E7
100 #FFCCBC
200 #FFAB91
300 #FF8A65
400 #FF7043
500 #FF5722
600 #F4511E
700 #E64A19
800 #D84315
900 #BF360C
A100 #FF9E80
A200 #FF6E40
A400 #FF3D00
A700 #DD2C00
50 #EFEBE9
100 #D7CCC8
200 #BCAAA4
300 #A1887F
400 #8D6E63
500 #795548
600 #6D4C41
700 #5D4037
800 #4E342E
900 #3E2723
50 #FAFAFA
100 #F5F5F5
200 #EEEEEE
300 #E0E0E0
400 #BDBDBD
500 #9E9E9E
600 #757575
700 #616161
800 #424242
900 #212121
50 #ECEFF1
100 #CFD8DC
200 #B0BEC5
300 #90A4AE
400 #78909C
500 #607D8B
600 #546E7A
700 #455A64
800 #37474F
900 #263238

39. material.io/color

40. Tipografia

44. fonts.google.com

45. Iconografia

47. material.io/fonts

48. Imagens

49. 49

50. 50

51. 51

52. 52

53. 53

54. 54

55. 55

56. Grid

57. O que você vê?

58. Que tipo de app é esse?
Mapa
Fotos
Contatos✓

60. Gestalt = psicologia cognitiva
Doutrina da psicologia baseada na ideia
da compreensão da totalidade para que
haja a percepção das partes

61. Princípios da Gestalt
fonte: Wikipedia

63. Lei da proximidade
“Esses objetos estão
próximos, então devem estar
relacionados”

64. Lei da semelhança
“Esses objetos são
semelhantes, então devem
estar relacionados”

65. Lei da experiência passada
“Hmm… isso me lembra um
relógio, então deve estar
relacionado com algo sobre
tempo”

66. Grid de Colunas Grid Modular

67. Módulo: 8x8 pixels/dps

70. Princípio III
O movimento cria significado

71. Use transições para criar
fluidez
No mundo real, as coisas não aparecem
simplesmente do nada.

72. Use animações para
encantar
Animações, além de divertidas,
incentivam as pessoas a fazer a mesma
ação novamente.

73. Parte - II
Guidelines

74. Guidelines não são REGRAS.
São recomendações de uso e boas práticas que nem
sempre podem estar adequadas a todas as situações

75. Camada 1
Ergonomia

76. Como interagimos
com o dispositivo?

77. Fora de alcance
Esticando
Confortável
Seja amigo do dedão
• Evite deixar ações
importantes fora da
zona de conforto do
dedão
• Respeite a área mínima
de toque de um dedo
(aprox. 48dp)
• Arraste para mudar de
tab

80. Princípios de usabilidade
Metáfora do papel e tinta
Camada 1 - Ergonomia
NÃO MUDE

81. Camada 2
Convenções

82. O que faz o aplicativo ser intuitivo?
Modelo conceitual
Como ele realmente
funciona?
Modelo mental
Como eu imagino que
aplicativo funciona?
Um bom aplicativo une o
modelo mental com o
conceitual

83. Há mais de uma solução
para o mesmo problema.

84. Uma ampla consistência cria uma
familiaridade imediata.
Mesmo que o usuário nunca tenha usado seu aplicativo,
ele vai saber como usar os componentes.

85. Mudando de padrão de
navegação
Sempre tenha em mente que mudar o
padrão de navegação vai causar
estranheza e dificuldade para os usuários.
Por isso apenas mude com um propósito
e teste com usuários para encontrar a
melhor forma de ensinar esse novo
padrão.

87. Padrões de navegação
Sempre em evolução
Camada 2 - Convenções
MUDE SE
NECESSÁRIO

88. Camada 3
Look & Feel

89. Crie sua própria personalidade

90. Cor, tipografia, transições,
animações, etc
Camada 3 - Look & Feel
MUDE E SEJA
FELIZ! :)

91. Parte - III
Inspiração

92. Explorando as superfícies

93. Brinque com as
superfícies
O aplicativo RobinHood usa e abusa dos
princípios das superfícies para tornar a
experiência mais imersiva

94. Brinque com as
superfícies
O aplicativo Plaid também brinca com os
princípios de elevação das superfícies

95. Explorando componentes

96. Explore o uso do FAB
O aplicativo GroupMe usa um bela
transição do FAB para uma folha de
navegação.

97. Explore novas formas
de interação
O aplicativo Primer usa gestos de arrasto
para navegar entre cartões

98. Experimente atalhos
de navegação
Uma das ações mais realizadas dentro da
lista de transações do app GuiaBolso é o
de recategorizar uma transação.
Decidimos criar um atalho para facilitar
essa ação.

99. Desvie com um
propósito
Não possuindo uma quantidade suficiente
de itens para um SideNav e ao mesmo
possuindo um padrão de navegação que
não combina com tabs, resolveram criar
uma nova forma navegação

100. Explore a app bar
Não possuindo uma quantidade suficiente
de itens para um SideNav e ao mesmo
possuindo um padrão de navegação que
não combina com tabs, resolveram criar
uma nova forma navegação

101. Explorando sua marca

102. Expresse o branding
O aplicativo Skype usa o branding de
forma bem sutil em seu FAB

103. Explorando imagens

104. Seja mais visual
O aplicativo Indiegogo usa imagens para
deixar seu filtro de categorias mais
elegante.

105. Explore o movimento

106. Animações
intencionais
O aplicativo B&H Photo usa uma bela
animação quando o usuário adiciona um
item ao carrinho.
Esta animação é intencional e guia a visão
do usuário até o ícone do carrinho na
toolbar.

108. Explorando as cores

109. Use cores para
distinguir conteúdo
Cada seção do aplicativo YPlan possui
uma cor diferente de toolbar

110. Use cores para indicar
um status
Ainda no Robin Hood, a cor da app bar
indica se a ação está em alta ou baixa, e a
cor fundo fica preta quando a bolsa está
fechada e branca quando aberta.

111. Crie cores dinâmicas
Use a classe Palette para criar paletas de
cores a partir de um bitmap, como faz o
aplicativo Pocket Casts
https://www.bignerdranch.com/blog/extracting-colors-to-a-palette-with-android-lollipop/

112. Precisamos sempre
usar cores?
Se o seu aplicativo contém textos longos,
talvez seja melhor explorar a tipografia ao
invés de focar em cores que fortes que
possam distrair o usuário, como no
aplicativo Medium

113. Parte - IV
Erros e dúvidas mais comuns

114. Alinhando as grids

115. Alinhamento faz
diferença

116. Mantenha o layout coeso
usando linhas-chave e o grid
modular
Módulo: 8x8 dp

117. Keyline Pushing
https://goo.gl/mzKSRP
Opções do desenvolvedor /
Exibir limites de layout
+
Faça o ajuste fino de grid

118. Call to Actions

119. Ícones como botões de ação
Nunca use ícones que não
são comuns e
compreensíveis sem o
auxílio de um rótulo.

120. Seja explícito
principalmente
em seus call to
actions

121. Contraste

122. Cinza (#727272) com 1.0
de opacidade
Preto (#000000) com 0.54
de opacidade
Cores secundárias não são cinzas, são transparentes!!!

123. Quando usar Cards, Listas ou
Grid Lists?

124. • Escaneamento lento do conteúdo
• Servem para conteúdo variado
• Podem ter múltiplas ações
• Tem cantos arredondados (2dp)
• Possuem elevação
• Podem ser descartados e
reorganizados
• 8dps de espaçamento
Cards

125. • Escaneamento rápido do conteúdo
• Servem para conteúdo uniforme
• Podem ter no máximo duas ações
• Não tem cantos arrendodados
• Não possui elevação
• Não devem ter mais de 3 linhas de
conteúdo
Listas

126. • Solução ideal quando a imagem é o
conteúdo mais importante
• Não possui cantos arredondados
• Tem 1dp ou 4dps de espaçamento
• Também para escaneamento rápido do
conteúdo
Grid lists

127. Tamanho dos ícones

130. Área viva x área total dos ícones

131. Tenha em mente a área de toque (48dp)

133. Evite misturar tabs de
conteúdo importante com
outros menos relevantes,
como configurações e ajuda.

134. Conteúdo Escondido

136. Up button vs Back button

137. Up Button
Retorna
hierarquicamente ao
nível de navegação
anterior

138. Back Button
• Retorna
cronologicamente à
tela anterior.
• Dismiss em views
temporárias

139. Tabs vs Bottom Nav Bar

140. Tabs
• Navegação entre views
irmãs de qualquer nível
• Co-planares (aceita swipe)
• Permite 2 ou ∞ views
(tabs roláveis)

142. Bottom Nav
• Navegação de alto nível
• 3 a 5 itens
• Não muda com swipe
• Pode ou não estar visível
em todos os níveis

143. Antes de terminar
O mais importante

144. TESTE COM OS USUÁRIOS!!!1111

145. Foque no usuário,
não na tecnologia

146. https://www.thinkwithgoogle.com/intl/pt-br/marketing-resources/ux-e-design/
fundamentos-do-design-de-apps-mobile/
Evite erros comuns

147. https://www.thinkwithgoogle.com/intl/pt-br/marketing-resources/micro-momentos/
Micro-momentos
Como as pessoas usam seu app?

148. Material Design for Developers - Udacity
Roman Nurik, Nick Butcher e James Williams
http://goo.gl/xSsH1m

149. http://www.vysor.io/
https://lookback.io/

150. materialup.com

151. g.co/materialshowcase

152. Perguntas?

153. Obrigado!!!
@nvasconcelos_
nelson@nvasconcelos.com
www.nelsonvasconcelos.com