-
Você sabe o que revolucionou
a forma como pensamos
-
Leiautes e interfaces digitais?
-
Bom, foram os 12 princípios
do UX em movimento.
-
Sabe o que é isso?
-
Há 20 anos atrás,
quando o UX Motion surgiu,
-
criou se a necessidade de ter
princípios que validasse
-
e fundamentasse 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 a gente ter novos fundamentos
teóricos que representasse
-
essa nova forma de trabalhar animação.
-
Foi aí que Sara Willems
como 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 e 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,
-
Willems
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 o usuário 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 em 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.
-
E o "ease in-out
é uma junção de ambos.
-
E por fim,
o constam 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 encontrar ele 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 uma olá 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 pareting em inglês.
-
Como vocês podem perceber
aqui na tela,
-
existe uma relação hierarquia
entre eles.
-
Embora o movimento seja distinto
e não uniforme,
-
ele 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,
-
ele 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 Parallax.
-
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.
-
Quando aqui parece que você
está abrindo uma porta para o fundo.
-
Esse movimento é o que chamamos
de dimensionalidade
-
ou inglês dimensionality.
-
Edit.
-
E por fim,
o último princípio que conhecemos
-
como Dolly ISON, 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 Hex em Movimento
-
tem 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 esse movimento de Sara e na comer,
-
mas também procure estudar
e se aprofundar os 12 princípios
-
da animação da Disney, que é um fundamento
clássico da nossa profissão.
