Melhorando a usabilidade 
com animações 
Douglas Drumond 
self@douglasdrumond.com 
+DouglasDrumond 
@douglasdrumond
Agenda
Agenda 
• Animações
Agenda 
• Animações 
• Exemplos de apps existentes
Agenda 
• Animações 
• Exemplos de apps existentes 
• Princípios
Agenda 
• Animações 
• Exemplos de apps existentes 
• Princípios 
• Exemplos de códigos Android
whoami
whoami 
• Movile
whoami 
• Movile 
• SwipesApp
whoami 
• Movile 
• SwipesApp 
• GDG-Campinas
AVISO!
Animações em excesso
Animações em excesso 
• Extremamente irritantes
Animações em excesso 
• Extremamente irritantes 
• SÉRIO, NÃO FAÇA
Animações
Animações 
Engajamento
Animações 
Engajamento 
Personalidade
Animações 
Engajamento 
Informação 
Personalidade
Animações 
Engajamento 
Informação 
Personalidade 
Contexto
Exemplos
Timely
Dots
Yelp
Características
Características 
Curta
Características 
Curta Suave
Características 
Curta Suave 
Natural
Características 
Curta Suave 
Natural Propósito
The illusion of life 
http://dd19.tk/illusion-of-life
Princípios 
• Squash & stretch 
• Anticipation 
• Staging 
• Straight ahead & pose to 
pose 
• Follow through & overlap 
•...
Demo
O que não cobrimos
O que não cobrimos 
Transitions (API 19, KitKat)
Referências 
• DevBytes 
• A Moving Experience 
(Google IO 2013) 
• Qualquer coisa do Chet 
Haase e Romain Guy 
• Filthy R...
Obrigado
Obrigado 
• self@douglasdrumond.com 
• google.com/+DouglasDrumond 
• twitter.com/douglasdrumond
Próximos SlideShares
Carregando em…5
×

[DevCamp 2014] Melhorando a Usabilidade com Animações

183 visualizações

Publicada em

Alguns slides contém vídeos que não podem ser exibidos aqui. O arquivo original (Keynote) com os vídeos encontra-se em http://dd19.tk/repo-devcamp2014
Palestra disponível em http://dd19.tk/video-devcamp2014

(apresentada no dia 17-abr-2014)

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
183
No SlideShare
0
A partir de incorporações
0
Número de incorporações
14
Ações
Compartilhamentos
0
Downloads
3
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

[DevCamp 2014] Melhorando a Usabilidade com Animações

  1. 1. Melhorando a usabilidade com animações Douglas Drumond self@douglasdrumond.com +DouglasDrumond @douglasdrumond
  2. 2. Agenda
  3. 3. Agenda • Animações
  4. 4. Agenda • Animações • Exemplos de apps existentes
  5. 5. Agenda • Animações • Exemplos de apps existentes • Princípios
  6. 6. Agenda • Animações • Exemplos de apps existentes • Princípios • Exemplos de códigos Android
  7. 7. whoami
  8. 8. whoami • Movile
  9. 9. whoami • Movile • SwipesApp
  10. 10. whoami • Movile • SwipesApp • GDG-Campinas
  11. 11. AVISO!
  12. 12. Animações em excesso
  13. 13. Animações em excesso • Extremamente irritantes
  14. 14. Animações em excesso • Extremamente irritantes • SÉRIO, NÃO FAÇA
  15. 15. Animações
  16. 16. Animações Engajamento
  17. 17. Animações Engajamento Personalidade
  18. 18. Animações Engajamento Informação Personalidade
  19. 19. Animações Engajamento Informação Personalidade Contexto
  20. 20. Exemplos
  21. 21. Timely
  22. 22. Dots
  23. 23. Yelp
  24. 24. Características
  25. 25. Características Curta
  26. 26. Características Curta Suave
  27. 27. Características Curta Suave Natural
  28. 28. Características Curta Suave Natural Propósito
  29. 29. The illusion of life http://dd19.tk/illusion-of-life
  30. 30. Princípios • Squash & stretch • Anticipation • Staging • Straight ahead & pose to pose • Follow through & overlap • Slow in & slow out • Arcs • Secondary action • Timing • Exaggeration • Solid drawings • Appeal
  31. 31. Demo
  32. 32. O que não cobrimos
  33. 33. O que não cobrimos Transitions (API 19, KitKat)
  34. 34. Referências • DevBytes • A Moving Experience (Google IO 2013) • Qualquer coisa do Chet Haase e Romain Guy • Filthy Rich Clients
  35. 35. Obrigado
  36. 36. Obrigado • self@douglasdrumond.com • google.com/+DouglasDrumond • twitter.com/douglasdrumond

×