-
Você sabe o que revolucionou
a forma como pensamos
-
layouts e interfaces digitais?
-
Bom, foram os 12 princípios
do UX em movimento.
-
Sabe o que é isso?
-
Há 20 anos,
quando o UX Motion surgiu,
-
criou-se a necessidade
de ter princípios
-
que validassem e fundamentassem
esses movimentos,
-
essas novas animações
que começaram a pipocar
-
nas interfaces digitais
no mundo todo.
-
Antes disso,
-
o mercado da animação
se fundamentava teoricamente
-
nos 12 princípios da animação
da Disney.
-
Mas quando o UX Motion surgiu
tendo que lidar com telas,
-
com smartphones, com desktops,
com interfaces digitais como um todo,
-
criou-se a necessidade de ter
novos fundamentos teóricos
-
que representassem essa nova forma
de trabalhar animação.
-
Foi aí que Issara Willenskomer
que é um educador,
-
figura carimbada e de destaque
-
no mundo do design
de interfaces digitais,
-
criou um manifesto seguido
de 12 princípios que fundamentava
-
essa base teórica para criar
animações para as interfaces digitais,
-
para as telas de celulares, desktops
e por aí vai.
-
E o objetivo dele era democratizar
o acesso à animação.
-
E a partir disso,
ele se tornou uma figura inspiradora
-
para os designers de interfaces
do mundo todo.
-
Mas o que são esses 12 princípios?
-
Para responder essa pergunta,
-
Willenskomer criou
quatro pilares fundamentais
-
que se aplicados de forma estratégica,
-
vai melhorar, e muito,
a sua experiência
-
ou a experiência do usuário
em interfaces digitais.
-
Esses quatro pilares são:
-
expectativa, continuidade
narrativa e relação.
-
A expectativa é quando a animação
molda o que o usuário
-
espera que aconteça.
-
A continuidade é quando
a animação cria um fluxo
-
suave e consistente pela experiência
do usuário na interface.
-
A narrativa é quando
a animação cria uma história,
-
guiando o usuário pela interface.
-
E a relação é quando a animação
cria conexão entre os elementos,
-
direcionando o usuário
para onde ela quer que ele vá.
-
Com esses pilares em mente,
vamos para o primeiro princípio,
-
que é o princípio da facilitação,
ou "easing" em inglês.
-
Como você pode perceber
aqui na tela,
-
temos o princípio da facilitação
e como você pode ver,
-
o movimento dele é não linear.
-
Ele começa lentamente e depois
ganha uma velocidade no fim.
-
Isso é chamado de ease-in.
-
Quando ele começa com velocidade
e termina lento,
-
chamamos de ease-out.
-
Ou se ele começa lento,
ganha velocidade e termina lento,
-
é o ease-in-out,
é uma junção de ambos.
-
E por fim,
o custom que você pode personalizar
-
onde ele ganha velocidade,
onde ele perde velocidade.
-
Esse é o principal e o mais popular
princípio da animação de interfaces.
-
Você vai encontrá-lo em praticamente
todas as telas que você navegar.
-
O segundo princípio é o "offset & delay"
-
ou em português,
compensação e atraso.
-
Como vocês podem perceber,
a animação consiste em criar
-
uma hierarquia visual
através do movimento,
-
dando uma sequência
de quem aparece primeiro.
-
Por exemplo,
aqui você pode perceber
-
que parece um "ola" de estádio.
-
Começa um,
depois vai o outro
-
descendo e criando uma sequência
de movimentações.
-
Esse é o princípio da compensação
e do atraso.
-
Chegamos agora no princípio
da parentalidade
-
ou "parenting" em inglês.
-
Como vocês podem perceber
aqui na tela,
-
existe uma relação hierárquica
entre eles.
-
Embora o movimento seja distinto
e não uniforme,
-
eles se conectam
pelas suas características,
-
então isso cria
um parentesco entre eles.
-
E temos também
o princípio da transformação
-
ou "transformation" em inglês.
-
Neste caso,
como você pode perceber,
-
é uma elipse se transformando
em um quadrado
-
ou vice-versa.
-
Temos também
o princípio da mudança de valor
-
ou em inglês "value change".
-
Como você pode perceber
aqui na tela,
-
ele altera através da animação
o estado de valor daquele objeto,
-
daquele elemento.
-
Ele pode ser muito utilizado
em buffer,
-
pode ser utilizado
em contagem regressiva e etc.
-
Chegamos então
ao princípio do mascaramento
-
ou em inglês "masking".
-
Como vocês podem perceber
aqui na tela,
-
ele oculta e revela um elemento
-
com o objetivo
de dar continuidade a ele.
-
Chegamos ao sétimo princípio
da animação,
-
que é a sobreposição
ou inglês "overlay".
-
E esse princípio como você
pode perceber aqui na tela,
-
consiste basicamente
em criar uma sobreposição
-
de um objeto sobre o outro.
-
E agora o princípio da clonagem
ou "cloning" em inglês.
-
Como vocês podem perceber aqui,
-
uma elipse que se transforma
em diversas outras variantes idênticas
-
e volta a se transformar em uma elipse.
-
É a fundição de vários elementos
idênticos.
-
Temos aqui também
o princípio do obscurecimento
-
ou "obscuration" em inglês.
-
Como você pode ver,
-
ele tem um certo quê de sobreposição
com transparência,
-
porque o objetivo dele é causar
um certo suspense,
-
revelando mais ou menos o que tem
atrás daquele objeto em movimento.
-
Chegamos ao décimo princípio,
que é o Paralaxx.
-
Aqui na tela você percebe
que o objetivo dele é criar
-
uma ilusão de profundidade
em um ambiente 2D.
-
Chegamos ao penúltimo princípio
do UX em movimento,
-
que é a dimensionalidade.
-
Aqui na tela você pode perceber
que o objetivo dele
-
é causar uma sensação
de tridimensionalidade do movimento.
-
Aqui parece que você
está abrindo uma porta para o fundo.
-
Esse movimento é o que chamamos
de dimensionalidade
-
ou inglês "dimensionality".
-
E por fim,
o último princípio que conhecemos
-
como Dolly & Zoom,
cujo objetivo,
-
como vocês podem ver aqui,
é simular o zoom de uma câmera
-
para dar destaque
a um determinado elemento.
-
Os 12 Princípios do UX em Movimento
-
têm o objetivo de facilitar
e melhorar a usabilidade,
-
de melhorar a comunicação
com o usuário,
-
de agregar valor à sua marca
e de aumentar o engajamento.
-
Então, se aprofunde no que são
os 12 princípios do UX em Movimento
-
de Issara Willenskomer,
-
mas também procure estudar
e se aprofundar
-
nos 12 princípios
da animação da Disney,
-
que é um fundamento clássico
da nossa profissão.
