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
portfolio_YumiYasuda
yum0418
0
290
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
1.8k
札幌の雪を観光資源に変える:デザインプログラムSESSAの挑戦
ittyann
0
260
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
710
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
550
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
990
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
580
AI時代に淘汰されないデザインのしごと
akinen
1
140
Storyboard Honey
rocioparronrubio
0
280
minpaku-community-scrum-patterns
norinity1103
1
120
Crisp Code inc. ブランドガイドライン
so_kotani
1
190
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.8k
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Invisible Side of Design
smashingmag
301
51k
Optimizing for Happiness
mojombo
379
70k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Designing for Performance
lara
610
69k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
A better future with KSS
kneath
238
17k
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