Animation in UI UX

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