动画在用户界面设计中至关重要，因为它帮助增强用户体验，通过吸引注意、提供视觉反馈和引导用户行为来提高互动性。最佳的动画运用时机包括状态变化、吸引注意和减少用户等待时的不耐烦。制作优秀动画的原则包括通过时间与空间的掌握、预期动作和动态层次感来营造自然流畅的用户体验。

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