[devcamp 2014] melhorando a usabilidade com animações

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

• Slow in & slow out

• Arcs

• Secondary action

• Timing

• Exaggeration

• Solid drawings

• Appeal

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 Rich Clients

Obrigado

Obrigado

• self@douglasdrumond.com

• google.com/+DouglasDrumond

• twitter.com/douglasdrumond