[DevCamp 2014] Melhorando a Usabilidade com Animações
-
Upload
douglas-drumond -
Category
Technology
-
view
52 -
download
1
description
Transcript of [DevCamp 2014] Melhorando a Usabilidade com Animações
![Page 1: [DevCamp 2014] Melhorando a Usabilidade com Animações](https://reader033.fdocuments.net/reader033/viewer/2022052900/5562cd29d8b42a63498b46e1/html5/thumbnails/1.jpg)
Melhorando a usabilidade com animações
Douglas Drumond [email protected]
+DouglasDrumond @douglasdrumond
![Page 2: [DevCamp 2014] Melhorando a Usabilidade com Animações](https://reader033.fdocuments.net/reader033/viewer/2022052900/5562cd29d8b42a63498b46e1/html5/thumbnails/2.jpg)
Agenda
![Page 3: [DevCamp 2014] Melhorando a Usabilidade com Animações](https://reader033.fdocuments.net/reader033/viewer/2022052900/5562cd29d8b42a63498b46e1/html5/thumbnails/3.jpg)
Agenda
• Animações
![Page 4: [DevCamp 2014] Melhorando a Usabilidade com Animações](https://reader033.fdocuments.net/reader033/viewer/2022052900/5562cd29d8b42a63498b46e1/html5/thumbnails/4.jpg)
Agenda
• Animações
• Exemplos de apps existentes
![Page 5: [DevCamp 2014] Melhorando a Usabilidade com Animações](https://reader033.fdocuments.net/reader033/viewer/2022052900/5562cd29d8b42a63498b46e1/html5/thumbnails/5.jpg)
Agenda
• Animações
• Exemplos de apps existentes
• Princípios
![Page 6: [DevCamp 2014] Melhorando a Usabilidade com Animações](https://reader033.fdocuments.net/reader033/viewer/2022052900/5562cd29d8b42a63498b46e1/html5/thumbnails/6.jpg)
Agenda
• Animações
• Exemplos de apps existentes
• Princípios
• Exemplos de códigos Android
![Page 7: [DevCamp 2014] Melhorando a Usabilidade com Animações](https://reader033.fdocuments.net/reader033/viewer/2022052900/5562cd29d8b42a63498b46e1/html5/thumbnails/7.jpg)
whoami
![Page 8: [DevCamp 2014] Melhorando a Usabilidade com Animações](https://reader033.fdocuments.net/reader033/viewer/2022052900/5562cd29d8b42a63498b46e1/html5/thumbnails/8.jpg)
whoami
• Movile
![Page 9: [DevCamp 2014] Melhorando a Usabilidade com Animações](https://reader033.fdocuments.net/reader033/viewer/2022052900/5562cd29d8b42a63498b46e1/html5/thumbnails/9.jpg)
whoami
• Movile
• SwipesApp
![Page 10: [DevCamp 2014] Melhorando a Usabilidade com Animações](https://reader033.fdocuments.net/reader033/viewer/2022052900/5562cd29d8b42a63498b46e1/html5/thumbnails/10.jpg)
whoami
• Movile
• SwipesApp
• GDG-Campinas
![Page 11: [DevCamp 2014] Melhorando a Usabilidade com Animações](https://reader033.fdocuments.net/reader033/viewer/2022052900/5562cd29d8b42a63498b46e1/html5/thumbnails/11.jpg)
AVISO!
![Page 12: [DevCamp 2014] Melhorando a Usabilidade com Animações](https://reader033.fdocuments.net/reader033/viewer/2022052900/5562cd29d8b42a63498b46e1/html5/thumbnails/12.jpg)
Animações em excesso
![Page 13: [DevCamp 2014] Melhorando a Usabilidade com Animações](https://reader033.fdocuments.net/reader033/viewer/2022052900/5562cd29d8b42a63498b46e1/html5/thumbnails/13.jpg)
Animações em excesso
• Extremamente irritantes
![Page 14: [DevCamp 2014] Melhorando a Usabilidade com Animações](https://reader033.fdocuments.net/reader033/viewer/2022052900/5562cd29d8b42a63498b46e1/html5/thumbnails/14.jpg)
Animações em excesso
• Extremamente irritantes
• SÉRIO, NÃO FAÇA
![Page 15: [DevCamp 2014] Melhorando a Usabilidade com Animações](https://reader033.fdocuments.net/reader033/viewer/2022052900/5562cd29d8b42a63498b46e1/html5/thumbnails/15.jpg)
Animações
![Page 16: [DevCamp 2014] Melhorando a Usabilidade com Animações](https://reader033.fdocuments.net/reader033/viewer/2022052900/5562cd29d8b42a63498b46e1/html5/thumbnails/16.jpg)
Animações
Engajamento
![Page 17: [DevCamp 2014] Melhorando a Usabilidade com Animações](https://reader033.fdocuments.net/reader033/viewer/2022052900/5562cd29d8b42a63498b46e1/html5/thumbnails/17.jpg)
Animações
Engajamento
Personalidade
![Page 18: [DevCamp 2014] Melhorando a Usabilidade com Animações](https://reader033.fdocuments.net/reader033/viewer/2022052900/5562cd29d8b42a63498b46e1/html5/thumbnails/18.jpg)
Animações
Engajamento
Informação
Personalidade
![Page 19: [DevCamp 2014] Melhorando a Usabilidade com Animações](https://reader033.fdocuments.net/reader033/viewer/2022052900/5562cd29d8b42a63498b46e1/html5/thumbnails/19.jpg)
Animações
Engajamento
Informação
Personalidade
Contexto
![Page 20: [DevCamp 2014] Melhorando a Usabilidade com Animações](https://reader033.fdocuments.net/reader033/viewer/2022052900/5562cd29d8b42a63498b46e1/html5/thumbnails/20.jpg)
Exemplos
![Page 21: [DevCamp 2014] Melhorando a Usabilidade com Animações](https://reader033.fdocuments.net/reader033/viewer/2022052900/5562cd29d8b42a63498b46e1/html5/thumbnails/21.jpg)
Timely
![Page 22: [DevCamp 2014] Melhorando a Usabilidade com Animações](https://reader033.fdocuments.net/reader033/viewer/2022052900/5562cd29d8b42a63498b46e1/html5/thumbnails/22.jpg)
Dots
![Page 23: [DevCamp 2014] Melhorando a Usabilidade com Animações](https://reader033.fdocuments.net/reader033/viewer/2022052900/5562cd29d8b42a63498b46e1/html5/thumbnails/23.jpg)
Yelp
![Page 24: [DevCamp 2014] Melhorando a Usabilidade com Animações](https://reader033.fdocuments.net/reader033/viewer/2022052900/5562cd29d8b42a63498b46e1/html5/thumbnails/24.jpg)
Características
![Page 25: [DevCamp 2014] Melhorando a Usabilidade com Animações](https://reader033.fdocuments.net/reader033/viewer/2022052900/5562cd29d8b42a63498b46e1/html5/thumbnails/25.jpg)
Características
Curta
![Page 26: [DevCamp 2014] Melhorando a Usabilidade com Animações](https://reader033.fdocuments.net/reader033/viewer/2022052900/5562cd29d8b42a63498b46e1/html5/thumbnails/26.jpg)
Características
Curta Suave
![Page 27: [DevCamp 2014] Melhorando a Usabilidade com Animações](https://reader033.fdocuments.net/reader033/viewer/2022052900/5562cd29d8b42a63498b46e1/html5/thumbnails/27.jpg)
Características
Curta Suave
Natural
![Page 28: [DevCamp 2014] Melhorando a Usabilidade com Animações](https://reader033.fdocuments.net/reader033/viewer/2022052900/5562cd29d8b42a63498b46e1/html5/thumbnails/28.jpg)
Características
Curta Suave
Natural Propósito
![Page 29: [DevCamp 2014] Melhorando a Usabilidade com Animações](https://reader033.fdocuments.net/reader033/viewer/2022052900/5562cd29d8b42a63498b46e1/html5/thumbnails/29.jpg)
The illusion of life
http://dd19.tk/illusion-of-life
![Page 30: [DevCamp 2014] Melhorando a Usabilidade com Animações](https://reader033.fdocuments.net/reader033/viewer/2022052900/5562cd29d8b42a63498b46e1/html5/thumbnails/30.jpg)
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
![Page 31: [DevCamp 2014] Melhorando a Usabilidade com Animações](https://reader033.fdocuments.net/reader033/viewer/2022052900/5562cd29d8b42a63498b46e1/html5/thumbnails/31.jpg)
Demo
![Page 32: [DevCamp 2014] Melhorando a Usabilidade com Animações](https://reader033.fdocuments.net/reader033/viewer/2022052900/5562cd29d8b42a63498b46e1/html5/thumbnails/32.jpg)
O que não cobrimos
![Page 33: [DevCamp 2014] Melhorando a Usabilidade com Animações](https://reader033.fdocuments.net/reader033/viewer/2022052900/5562cd29d8b42a63498b46e1/html5/thumbnails/33.jpg)
O que não cobrimos
Transitions (API 19, KitKat)
![Page 34: [DevCamp 2014] Melhorando a Usabilidade com Animações](https://reader033.fdocuments.net/reader033/viewer/2022052900/5562cd29d8b42a63498b46e1/html5/thumbnails/34.jpg)
Referências
• DevBytes
• A Moving Experience(Google IO 2013)
• Qualquer coisa do Chet Haase e Romain Guy
• Filthy Rich Clients
![Page 35: [DevCamp 2014] Melhorando a Usabilidade com Animações](https://reader033.fdocuments.net/reader033/viewer/2022052900/5562cd29d8b42a63498b46e1/html5/thumbnails/35.jpg)
Obrigado