This document discusses techniques for improving UI performance on mobile applications. It provides 10 tips for avoiding performance issues, including using very short transition animations under 1 second, taking advantage of multiple threads of execution, leveraging the GPU over the CPU for graphics processing, reducing the number of screen renderings, reusing components, optimizing image loading, limiting network connections, using sensors and resources efficiently, and using performance testing tools. Speed and responsiveness are important for good user experience.

1. APP急速視覺UX回饋應⽤用
Anistar Sung
Sunday, October 27, 13

2. Anistar Sung 宋志峰
Work @
http://www.facebook.com/anistarsung
http://blog.riaproject.com
Mobile Developer
Client Developer
Server Developer
Instructor & Consulter & Author
專注：iOS, Android, HTML5, Flash, PHP...
Sunday, October 27, 13

3. New York Times TOP10 photography APP
US App Store TOP 2 paid photography APP
World TOP 40 APP
Best APP review in some review sites
http://www.riaproject.com
Sunday, October 27, 13

4. 什麼是UI與UX？
Sunday, October 27, 13

5. 這是UI還是UX？
Sunday, October 27, 13

6. 這是UI還是UX？
Sunday, October 27, 13

7. 那這個呢？
Sunday, October 27, 13

8. UX不是就是特效嗎？
Sunday, October 27, 13

9. Sunday, October 27, 13

10. 體驗經濟：
塑造感官體驗及
思維認同.
Sunday, October 27, 13

11. 速度是重要的體驗
所以我們今天要討論UI Performance 這個主題
Sunday, October 27, 13

12. 10個技巧讓你遠離
效能低落陷阱
Sunday, October 27, 13

13. AR (Augmented Reality)
Sunday, October 27, 13

14. AR (Augmented Reality)
Sunday, October 27, 13

15. 1. 使⽤用極短轉場效果
Sunday, October 27, 13

16. 1. 使⽤用極短轉場效果
使⽤用者討厭等候, 別挑戰他們的耐⼼心.
Sunday, October 27, 13

17. 1. 使⽤用極短轉場效果
轉場動畫別超過1秒鐘.
通常建議0.4秒就要完成.
Sunday, October 27, 13

18. 2. 善⽤用多執⾏行緒
Sunday, October 27, 13

19. 2. 善⽤用多執⾏行緒
PROCESS 1
Sunday, October 27, 13
PROCESS 2
PROCESS 3

20. 2. 善⽤用多執⾏行緒
Phone
Sunday, October 27, 13
Middle Layer
Service

21. 2. 善⽤用多執⾏行緒
Phone
Sunday, October 27, 13
Middle Layer
Service

22. 2. 善⽤用多執⾏行緒
主⾏行程處理UI要求.
⼦子⾏行程處理其他⼯工作.
Sunday, October 27, 13

23. 2. 善⽤用多執⾏行緒
PROCESS 1
PROCESS 2
Sunday, October 27, 13
PROCESS 3

24. 2. 善⽤用多執⾏行緒
能量守恆定律：
多執⾏行緒不是萬能的, 你可
以使⽤用的總資源是不變的.
Sunday, October 27, 13

25. 3. CPU vs GPU
Sunday, October 27, 13

26. 3. CPU vs GPU
在處理⼤大部份的圖形要
求上, GPU總是遠遠快過
CPU運算.
Sunday, October 27, 13

27. 3. CPU vs GPU
EX: 同⼀一個圖⽚片做Blur運
算, GPU可以快上近50倍.
Sunday, October 27, 13

28. 3. CPU vs GPU
CPU Rendering
GPU Rendering
Sunday, October 27, 13

29. 4. 元件顯⽰示階層
Sunday, October 27, 13

30. 4. 元件顯⽰示階層
越多的顯⽰示階層代表有越多
的⼯工作需要處理.
Sunday, October 27, 13

31. 4. 元件顯⽰示階層
越多的顯⽰示階層代表有越多
的⼯工作需要處理.
L r L r 2 a 3e a4
Layeay1 ayLr yLr yer 5
e e
Sunday, October 27, 13

32. 4. 元件顯⽰示階層
越多的顯⽰示階層代表有越多
的⼯工作需要處理.
Layer 1
Sunday, October 27, 13
Layer 2
Layer 3
Layer 4
Layer 5

33. 4. 元件顯⽰示階層
過多階層
Sunday, October 27, 13
正確做法

34. 5. 減少畫⾯面演算次數
Sunday, October 27, 13

35. 5. 減少畫⾯面演算次數
Opacity
Blend
Shadow
Mask
還有更多...
Sunday, October 27, 13

36. 5. 減少畫⾯面演算次數
讓每個畫⾯面render次數降低.
Sunday, October 27, 13

37. 6. 重複使⽤用元件
Sunday, October 27, 13

38. 6. 重複使⽤用元件
初始化⼀一個元件需要很⼤大
的⼒力氣.
Sunday, October 27, 13

39. 6. 重複使⽤用元件
偵測 Viewport
的範圍來決定
是否需要被
Reuse.
Sunday, October 27, 13

40. 6. 重複使⽤用元件
Reusable Identifier.
建⽴立記憶機制.
Sunday, October 27, 13

41. 7. 圖⽚片讀取效能
Sunday, October 27, 13

42. 7. 圖⽚片讀取效能
JPG 消耗較多CPU運算.
PNG 消耗較少CPU運算.
JPG 消耗較少容量.
PNG 消耗較多容量.
Sunday, October 27, 13

43. 7. 圖⽚片讀取效能
2795x1899的圖⽚片
JPG: 567ms
PNG: 4ms
Sunday, October 27, 13

44. 7. 圖⽚片讀取效能
圖⽚片格式.
圖⽚片尺⼨寸.
圖⽚片⾊色域.
Sunday, October 27, 13

45. 8. 網路連線限制
Sunday, October 27, 13

46. 8. 網路連線限制
⾏行動裝置過多連線數會造
成連線阻塞.
Sunday, October 27, 13

47. 8. 網路連線限制
例如：iPhone 最多容忍4條
連線數.
Sunday, October 27, 13

48. 8. 網路連線限制
例如：iPhone 最多容忍4條
連線數.
Sunday, October 27, 13

49. 8. 網路連線限制
例如：iPhone 最多容忍4條
連線數.
Sunday, October 27, 13

50. 8. 網路連線限制
合併API以減少連線數.
建⽴立連線Queue呼叫機制.
Sunday, October 27, 13

51. 9. 使⽤用最少資源佔⽤用
Sunday, October 27, 13

52. 9. 使⽤用最少資源佔⽤用
Camera
Compass
ScrollView
還有許多...
Sunday, October 27, 13

53. 9. 使⽤用最少資源佔⽤用
Sunday, October 27, 13

54. 9. 使⽤用最少資源佔⽤用
Camera
Sunday, October 27, 13

55. 9. 使⽤用最少資源佔⽤用
Camera
Compass
Gyroscope
Sunday, October 27, 13

56. 9. 使⽤用最少資源佔⽤用
Camera
Compass
Gyroscope
Sunday, October 27, 13

57. 9. 使⽤用最少資源佔⽤用
Camera
Compass
Gyroscope
Sunday, October 27, 13

58. 9. 使⽤用最少資源佔⽤用
減少callback的頻率.
減少取回資源的品質.
Sunday, October 27, 13

59. 10. 效能測試⼯工具
Sunday, October 27, 13

60. 10. 效能測試⼯工具
Sunday, October 27, 13

61. 10. 效能測試⼯工具
Core Animation分析CPU狀態.
OpenGL ES Analysis分析GPU
狀態.
Sunday, October 27, 13

62. Q&A
cfsung@yahoo-inc.com
Sunday, October 27, 13