Upload
chris-chen
View
619
Download
1
Embed Size (px)
Citation preview
Chris Chen
Animation In UI UX
為什麼要用動畫?
互動 設計Interaction Design
互動 設計設計『人』與『介面』之間的情感與關係
Interaction Design
http://www.billverplank.com/Lecture/images/InteractionDesign.gif
沒有動畫元素的介面,無法讓使用者產生預期心理,容易讓人摸不著頭緒,導致使用經驗不完美
“ 動畫讓介面有了溫度,有了人性”
竟然動畫有那麼多的好處,那我是不是應該在介面上塞滿動畫?
Turkish Airline iPad Design is an example too much…
https://vimeo.com/132487615
使用動畫的最佳時機?
狀態、模式的改變Change of States & Modes
吸引使用者的注意Attract User’s Attention
視覺回饋Visual Feedback
減少等待的不耐煩Reduce the stress in Waiting Time
引導使用者至下個動作Guiding the user to next action
建立空間感 ( 心智模型 )Increase Spatial Awareness (Mental Model)
什麼時候使用動畫?狀態、模式的改變
吸引使用者的注意視覺回饋
減少等待的不耐煩引導使用者至下個動作建立空間感 ( 心智模型 )
如何製作一個好動畫?
Frank Thomas & Oille Johnston“The nine old man”
The illusion of life12 Principles
Squash and Stretch 擠壓與伸縮
Created by Way Chang
Squash and Stretch 擠壓與伸縮
Time and Spacing時間與間距
Time and Spacing時間與間距
0.3 是個不錯的數字
0.3 是個不錯的數字http://www.humanbenchmark.com/tests/reactiontime
Anticipation預備動作
Anticipation預備動作
“ 沒有預期動作的動畫,顯的僵硬以及不自然”John Lasseter
Arc弧線
Arc弧線
Pose to Pose Animation
“Layered Animation” is about give each property their individual timing
https://vimeo.com/51370027
與線性動畫的差別?
時間掌握在使用者手中
調整動畫的方式
程式碼 沒有動畫曲線
動畫範例網站http://uigifs.comuiGIFs
capptivate.coCapptivate.co
http://useyourinterface.comUse Your Interface
UI Movementhttp://uimovement.com
APP ANIMATIONhttp://www.appanimations.com
and more…
如何與工程溝通?
善用 Prototyping Tool
Resources
https://code.facebook.com/posts/234067533455773/introducing-pop-the-animation-engine-behind-paper/
Facebook animation engine - POP
Spring for Swift by MengTohttps://github.com/MengTo/Spring
即使是 MVP ,情感設計也是一部份
Referencehttps://medium.com/elepath-exports/spatial-interfaces-886bccc5d1e9#.pi6lx9a0v
Spatial Interfaces - Pasquale D’Silva
http://markgeyer.com/pres/the-art-of-ui-animationsThe Art of UI animation
https://www.google.com/design/spec/motion/material-motion.htmlGoogle Material Design - Motion
https://medium.com/p/f450432731e5/edit介面動畫設計要瞭解的事情 - 奧革設計
https://medium.com/@becca_u/the-principles-of-ux-choreography-69c91c2cbc2a#.dmg8kgt0d
The Principles of UX Choreography
https://medium.com/@jakely/the-why-of-using-animation-in-interaction-design-350aad16dea0#.3t768tvql
Why using Animation in Interaction