Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Material Design Animations
Search
Ana Coimbra
August 31, 2017
Design
0
52
Material Design Animations
Ana Coimbra
August 31, 2017
Tweet
Share
More Decks by Ana Coimbra
See All by Ana Coimbra
Realidade Aumentada em dispositivos móveis
anacoimbrag
0
55
Realidade Aumentada & Android
anacoimbrag
0
210
A dive into cors
anacoimbrag
1
190
Como estruturar e manter seguro meus dados no Firebase?
anacoimbrag
0
120
Introdução ao Firebase
anacoimbrag
0
32
Custom View Components
anacoimbrag
0
26
Inclusão, engajamento e Colaboração
anacoimbrag
0
38
Design Thinking para Desenvolvedores
anacoimbrag
0
52
Backend as a Service
anacoimbrag
0
38
Other Decks in Design
See All in Design
Мышление историями. Как текстовые модели поведения помогают дизайнеру проектировать
ashapiro
0
110
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
2.2k
portfolio_YumiYasuda
yum0418
0
290
今日から意識できるアクセシビリティ
fumiko
0
250
RAKSUL_DESIGN_DECK_20250319
raksulrecruiting
0
390
Storyboard Honey
rocioparronrubio
0
280
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
450
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
0
370
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
320
クライアントワークにおける UXリサーチの実践
kozotaira
0
700
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.3k
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
140
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
How to Ace a Technical Interview
jacobian
278
23k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
KATA
mclloyd
30
14k
How GitHub (no longer) Works
holman
314
140k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Transcript
Material Design Animations
Material Design “We challenged ourselves to create a visual language
for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science.”
Material Design “Motion is meaningful and appropriate, serving to focus
attention and maintain continuity.”
Material Motion Descreve relações espaciais, funcionalidade e interação com beleza
e fluidez
O que o movimento provê?
Foco guiado entre views
Indicações do que acontece ao completar uma ação
Relações hierárquicas e espaciais entre elementos
Distrações para operações em background
Caráter, polimento e prazer
Recomendações
Durações Animações Curtas 150 - 200 ms Animações Longas 300
- 400 ms
Ondulações confirmam interação do usuário
Mostre a conexão entre novas superfícies e os elementos que
as criaram
Movimentos devem seguir a trajetória de um arco
Os elementos e seus agregados devem seguir uma coreografia que
define suas relações
Elementos devem se combinar a medida que se aproximam
Uma transição guia o usuário para o próximo passo
Animações podem servir para chamar a atenção do usuário
Bibliotecas
None
None
Coordinator Behaviors
Material Transition Animation
Ana Coimbra @anacoimbrag (31) 9 9248-2436
[email protected]
Referências • Material Design: https://material.io/guidelines/material-design/introduction.html • Material Motion: https://material.io/guidelines/motion/material-motion.html •
Lottie: http://airbnb.io/lottie • Coordinator Behaviors: https://github.com/ttymsd/coordinator-behaviors • MaterialTransitionAnimations:https://github.com/Cutta/MaterialTransitionAnimation