Melhorando a usabilidade 
com animações 
Douglas Drumond 
self@douglasdrumond.com 
+DouglasDrumond 
@douglasdrumond 
Obser...
whoami 
• Movile 
• SwipesApp 
• GDG-Campinas 
Movile: empresa líder mobile e citar exemplos 
SwipesApp: app de tasks p/ i...
Animações 
Engajamento 
Informação 
Personalidade 
Contexto 
Engajamento: chama a atenção do usuário 
Personalidade: do je...
Dots 
Animação de listas, etc 
Yelp 
Chamar a atenção do usuário com movimento. Somos treinados a detectar 
movimento. 
Ex...
Características 
Curta Suave 
Natural Propósito 
Curta: animações longas são chatas 
Suave: 60fps no celular é o ideal, ev...
Demo 
Demo time! 
https://github.com/douglasdrumond/DevCamp2014 
O que não cobrimos 
Transitions (API 19, KitKat) 
Transit...
Obrigado 
• self@douglasdrumond.com 
• google.com/+DouglasDrumond 
• twitter.com/douglasdrumond
Próximos SlideShares
Carregando em…5
×

[DevCamp 2014] Melhorando a usabilidade com animações

204 visualizações

Publicada em

Apresentando alguns princípios de animações e como implementá-los no Android.
Depende de animações e vídeos, se possível use o original do Keynote disponível em https://github.com/douglasdrumond/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
204
No SlideShare
0
A partir de incorporações
0
Número de incorporações
16
Ações
Compartilhamentos
0
Downloads
1
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 Observação • Essa apresentação usa animações, o original em Keynote encontra-se em https://github.com/douglasdrumond/ DevCamp2014 Agenda • Animações • Exemplos de apps existentes • Princípios • Exemplos de códigos Android
  2. 2. whoami • Movile • SwipesApp • GDG-Campinas Movile: empresa líder mobile e citar exemplos SwipesApp: app de tasks p/ iOS, com versão para Android em breve GDG-Campinas: Fundador e co-organizador, encontros toda 1ª terça, evento de Go dia 21/05/2014 AVISO! Animações em excesso • Extremamente irritantes • SÉRIO, NÃO FAÇA
  3. 3. Animações Engajamento Informação Personalidade Contexto Engajamento: chama a atenção do usuário Personalidade: do jeito certo, torna-se uma assinatura do app, ver Timely dois slides p/ frente Informação: ensinar o usuário Contexto: animações dependendo do contexto, por exemplo, uma animação mostrando um drawer só faz sentido na primeira vez Exemplos Timely Repare que são componentes comuns do Android: ViewPager, botões, etc
  4. 4. Dots Animação de listas, etc Yelp Chamar a atenção do usuário com movimento. Somos treinados a detectar movimento. Exemplo do Quora: num treinamento de camuflagem, o instrutor depois de passar 20 minutos conversando com os alunos num campo os desafiou a achar um soldado camuflado (sem que os alunos saíssem do lugar). Após uns 5 minutos o instrutor pede para o soldado se mover, ele estava a poucos metros do instrutor durante todo o tempo (inclusive, obviamente, a primeira parte com Características
  5. 5. Características Curta Suave Natural Propósito Curta: animações longas são chatas Suave: 60fps no celular é o ideal, evitar cair abaixo de 30 Natural: a animação deve fazer parte do fluxo, não pode ser algo que sai fora do que o usuário está fazendo. Propósito: Não colocar animações sem sentido. Exemplo: Compiz com janela pegando fogo The illusion of life http://dd19.tk/illusion-of-life Princípios desenvolvidos por Frank Thomas e Ollie Johnston, dos estúdios Disney 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 Para apps tradicionais, não necessariamente aplicamos todos, mas vamos demonstrar alguns.
  6. 6. Demo Demo time! https://github.com/douglasdrumond/DevCamp2014 O que não cobrimos Transitions (API 19, KitKat) Transitions é uma nova API apresentada no KitKat, mas backported (pela comunidade, não pelo Google) para API14: https://github.com/guerwan/ TransitionsBackport Transitions funciona de forma semelhante ao Magic Move do Keynote (a transição usada do slide anterior para esse) Referências • DevBytes • A Moving Experience (Google IO 2013) • Qualquer coisa do Chet Haase e Romain Guy • Filthy Rich Clients DevBytes é uma série de tutoriais no canal Android Developers. (https:// www.youtube.com/playlist?list=PLWz5rJ2EKKc_XOgcRukSoKKjewFJZrKV0) A Moving Experience: https://www.youtube.com/watch?v=ihzZrS69i_s O livro é antigo (2007) e é em Swing, mas os princípios de animação apresentados na seção 3 ainda são válidos
  7. 7. Obrigado • self@douglasdrumond.com • google.com/+DouglasDrumond • twitter.com/douglasdrumond

×