-
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 Mocha 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
-
Como ele 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 Isin 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.
-
O ele começa
-
lentamente e depois ganha uma velocidade.
-
No fim.
-
Isso é chamado de ISE em quando ele começa
com velocidade e termina lento.
-
Chamamos de Exit Alt ou se ele começa
-
lento, ganha velocidade e termina lento.
-
E o ISE em Auth é 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 em delay
-
ou em português, compensação é 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 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 perto, 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 pelo seu,
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.
-
O inglês velo 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.
-
O input pode ser utilizado
em contagem regressiva e etc.
-
Chegamos então
ao princípio do mascaramento em inglês,
-
mas 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 é 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 clone
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
-
e a fundição de vários elementos
idênticos.
-
Temos aqui também
o princípio do obscurecimento
-
ou do screenshot 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
num 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 dimensional.
-
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.
