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
44
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
52
Realidade Aumentada & Android
anacoimbrag
0
160
A dive into cors
anacoimbrag
1
160
Como estruturar e manter seguro meus dados no Firebase?
anacoimbrag
0
120
Introdução ao Firebase
anacoimbrag
0
30
Custom View Components
anacoimbrag
0
23
Inclusão, engajamento e Colaboração
anacoimbrag
0
26
Design Thinking para Desenvolvedores
anacoimbrag
0
47
Backend as a Service
anacoimbrag
0
34
Other Decks in Design
See All in Design
231129_FOSS4G-ASIA-2023_kato
hjmkth
1
310
noteのアクセシビリティ これまでのプロダクト・組織へのアプローチとこれからのこと
tatsuyasawanobori
1
1.1k
SUKEDACHI DESIGN NIGHT発表スライド
sugiyama_sukedachi
0
240
デザインをみんなのものに 「デザインの脱植民地化」を日本の文脈で考える
mayunak
7
4.1k
Web 組版の課題とその解法
yamatoiizuka
0
110
3D空間を扱うUI表現とユーザビリティ
akinen
0
460
豊かな自然を守るための、 クラフトビール造りのプロジェクトとデザイン
kazuakiebe
0
450
雑誌『広告』をサイズ展開する
takuro_nakajima
PRO
0
1.4k
マルチプロダクトの価値と開発をスケールさせる、パターンレベルのデザインシステム
fkady
1
400
Desarrollo de Carrera en Diseño y Producto
solmesz1
2
180
#コムデナ vol.2 「初めてのデザインカンファレンス協賛!共有したい3つのやらかし」
kiyoshifuwa
1
340
丸井グループが取り組むエンタープライズアジャイルと プロダクトマネージャーの役割
muture
0
210
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
The Cost Of JavaScript in 2023
addyosmani
20
3.9k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Become a Pro
speakerdeck
PRO
13
4.6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
79
43k
Designing the Hi-DPI Web
ddemaree
276
33k
Visualization
eitanlees
137
14k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
20
1.8k
BBQ
matthewcrist
80
8.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
The Art of Programming - Codeland 2020
erikaheidi
43
12k
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