A brief about how animation can be used to improve UI UX design. A talk in UI UX Designer Night at Yahoo

1. Chris Chen
Animation In UI UX

2. 為什麼要用動畫？

3. 互動 設計
Interaction Design

4. 互動 設計
設計『人』與『介面』之間的情感與關係
Interaction Design
http://www.billverplank.com/Lecture/images/InteractionDesign.gif

5. 沒有動畫元素的介面，無法讓使用者產生預期心理，
容易讓人摸不著頭緒，導致使用經驗不完美

6. “動畫讓介面有了溫度，有了人性”

7. 竟然動畫有那麼多的好處，那我是不是
應該在介面上塞滿動畫？

8. Turkish Airline iPad Design is an example too m
https://vimeo.com/132487615

9. 使用動畫的最佳時機？

10. 狀態、模式的改變
Change of States & Modes

11. 吸引使用者的注意
Attract User’s Attention

12. 視覺回饋
Visual Feedback

13. 減少等待的不耐煩
Reduce the stress in Waiting Time

14. 引導使用者至下個動作
Guiding the user to next action

15. 建立空間感 (心智模型)
Increase Spatial Awareness (Mental Model)

18. 什麼時候使用動畫？
狀態、模式的改變
吸引使用者的注意
視覺回饋
減少等待的不耐煩
引導使用者至下個動作
建立空間感 (心智模型)

19. 如何製作一個好動畫？

20. Frank Thomas & Oille Johnston
“The nine old man”

21. The illusion of life
12 Principles

22. Squash and
Stretch
擠壓與伸縮
Created by Way Chang

23. Squash and
Stretch
擠壓與伸縮

24. Time and Spacing
時間與間距

25. Time and Spacing
時間與間距

26. 0.3 是個不錯的數字

27. 0.3 是個不錯的數字
http://www.humanbenchmark.com/tests/reactiontime

28. Anticipation
預備動作

29. Anticipation
預備動作

30. “沒有預期動作的動畫，顯的僵硬以及不自然”
John Lasseter

31. Arc
弧線

32. Arc
弧線

33. Pose to Pose
Animation

34. “Layered Animation” is about give
each property their individual timing
https://vimeo.com/51370027

35. 與線性動畫的差別？

36. 時間掌握在使用者手中

37. 調整動畫的方式
程式碼 沒有動畫曲線

38. 動畫範例網站
http://uigifs.com
uiGIFs
capptivate.co
Capptivate.co
http://useyourinterface.com
Use Your Interface
UI Movement
http://uimovement.com
APP ANIMATION
http://www.appanimations.com
and more…

39. 如何與工程溝通？

40. 善用 Prototyping Tool

41. Resources
https://code.facebook.com/posts/234067533455773/introducing-pop-the-animation-
engine-behind-paper/
Facebook animation engine - POP
Spring for Swift by MengTo
https://github.com/MengTo/Spring

42. 即使是 MVP ，情感設計也是一部
份

43. Reference
https://medium.com/elepath-exports/spatial-interfaces-886bccc5d1e9#.pi6lx9a0v
Spatial Interfaces - Pasquale D’Silva
http://markgeyer.com/pres/the-art-of-ui-animations
The Art of UI animation
https://www.google.com/design/spec/motion/material-motion.html
Google 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