Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
APP急速視覺UX回饋應⽤用
Anistar Sung

Sunday, October 27, 13
Anistar Sung 宋志峰
Work @
http://www.facebook.com/anistarsung
http://blog.riaproject.com
Mobile Developer
Client Developer
S...
New York Times TOP10 photography APP
US App Store TOP 2 paid photography APP
World TOP 40 APP
Best APP review in some revi...
什麼是UI與UX?

Sunday, October 27, 13
這是UI還是UX?
Sunday, October 27, 13
這是UI還是UX?
Sunday, October 27, 13
那這個呢?

Sunday, October 27, 13
UX不是就是特效嗎?

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

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

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

Sunday, October 27, 13
AR (Augmented Reality)

Sunday, October 27, 13
AR (Augmented Reality)

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

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

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

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

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

Sunday, October 27, 13

PROCESS 2

PROCESS 3
2. 善⽤用多執⾏行緒
Phone

Sunday, October 27, 13

Middle Layer

Service
2. 善⽤用多執⾏行緒
Phone

Sunday, October 27, 13

Middle Layer

Service
2. 善⽤用多執⾏行緒
主⾏行程處理UI要求.
⼦子⾏行程處理其他⼯工作.

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

PROCESS 2

Sunday, October 27, 13

PROCESS 3
2. 善⽤用多執⾏行緒
能量守恆定律:
多執⾏行緒不是萬能的, 你可
以使⽤用的總資源是不變的.

Sunday, October 27, 13
3. CPU vs GPU

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

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

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

GPU Rendering

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

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

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

L r L r 2 a 3e a4
Layeay1 ayLr yLr yer 5
e e

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

Layer 1

Sunday, October 27, 13

Layer 2

Layer 3

Layer 4

Layer 5
4. 元件顯⽰示階層

過多階層

Sunday, October 27, 13

正確做法
5. 減少畫⾯面演算次數

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Compass
Gyroscope

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

Compass
Gyroscope

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

Compass
Gyroscope

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

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

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

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

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

Sunday, October 27, 13
Prochain SlideShare
Chargement dans…5
×

MOPCON 2013 - APP急速視覺UX回饋應用

在APP中最重要的一環就是UX,而且這常常是非常視覺化的,要如何以快速的方法回應使用者的操作,一直都是一個不可忽略的重要主題,此議題在解說在建立APP UX時該如何透過一些該注意的編程技巧,讓使用者的體驗可以順暢的被延續,而不會因為劣質的程式結構而造成中斷,並以AR應用為案例主軸,分析如何設計AR擴充實境應用。

http://mopcon.org/2013/

  • Soyez le premier à commenter

MOPCON 2013 - APP急速視覺UX回饋應用

  1. 1. APP急速視覺UX回饋應⽤用 Anistar Sung Sunday, October 27, 13
  2. 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. 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. 4. 什麼是UI與UX? Sunday, October 27, 13
  5. 5. 這是UI還是UX? Sunday, October 27, 13
  6. 6. 這是UI還是UX? Sunday, October 27, 13
  7. 7. 那這個呢? Sunday, October 27, 13
  8. 8. UX不是就是特效嗎? Sunday, October 27, 13
  9. 9. Sunday, October 27, 13
  10. 10. 體驗經濟: 塑造感官體驗及 思維認同. Sunday, October 27, 13
  11. 11. 速度是重要的體驗 所以我們今天要討論UI Performance 這個主題 Sunday, October 27, 13
  12. 12. 10個技巧讓你遠離 效能低落陷阱 Sunday, October 27, 13
  13. 13. AR (Augmented Reality) Sunday, October 27, 13
  14. 14. AR (Augmented Reality) Sunday, October 27, 13
  15. 15. 1. 使⽤用極短轉場效果 Sunday, October 27, 13
  16. 16. 1. 使⽤用極短轉場效果 使⽤用者討厭等候, 別挑戰他們的耐⼼心. Sunday, October 27, 13
  17. 17. 1. 使⽤用極短轉場效果 轉場動畫別超過1秒鐘. 通常建議0.4秒就要完成. Sunday, October 27, 13
  18. 18. 2. 善⽤用多執⾏行緒 Sunday, October 27, 13
  19. 19. 2. 善⽤用多執⾏行緒 PROCESS 1 Sunday, October 27, 13 PROCESS 2 PROCESS 3
  20. 20. 2. 善⽤用多執⾏行緒 Phone Sunday, October 27, 13 Middle Layer Service
  21. 21. 2. 善⽤用多執⾏行緒 Phone Sunday, October 27, 13 Middle Layer Service
  22. 22. 2. 善⽤用多執⾏行緒 主⾏行程處理UI要求. ⼦子⾏行程處理其他⼯工作. Sunday, October 27, 13
  23. 23. 2. 善⽤用多執⾏行緒 PROCESS 1 PROCESS 2 Sunday, October 27, 13 PROCESS 3
  24. 24. 2. 善⽤用多執⾏行緒 能量守恆定律: 多執⾏行緒不是萬能的, 你可 以使⽤用的總資源是不變的. Sunday, October 27, 13
  25. 25. 3. CPU vs GPU Sunday, October 27, 13
  26. 26. 3. CPU vs GPU 在處理⼤大部份的圖形要 求上, GPU總是遠遠快過 CPU運算. Sunday, October 27, 13
  27. 27. 3. CPU vs GPU EX: 同⼀一個圖⽚片做Blur運 算, GPU可以快上近50倍. Sunday, October 27, 13
  28. 28. 3. CPU vs GPU CPU Rendering GPU Rendering Sunday, October 27, 13
  29. 29. 4. 元件顯⽰示階層 Sunday, October 27, 13
  30. 30. 4. 元件顯⽰示階層 越多的顯⽰示階層代表有越多 的⼯工作需要處理. Sunday, October 27, 13
  31. 31. 4. 元件顯⽰示階層 越多的顯⽰示階層代表有越多 的⼯工作需要處理. L r L r 2 a 3e a4 Layeay1 ayLr yLr yer 5 e e Sunday, October 27, 13
  32. 32. 4. 元件顯⽰示階層 越多的顯⽰示階層代表有越多 的⼯工作需要處理. Layer 1 Sunday, October 27, 13 Layer 2 Layer 3 Layer 4 Layer 5
  33. 33. 4. 元件顯⽰示階層 過多階層 Sunday, October 27, 13 正確做法
  34. 34. 5. 減少畫⾯面演算次數 Sunday, October 27, 13
  35. 35. 5. 減少畫⾯面演算次數 Opacity Blend Shadow Mask 還有更多... Sunday, October 27, 13
  36. 36. 5. 減少畫⾯面演算次數 讓每個畫⾯面render次數降低. Sunday, October 27, 13
  37. 37. 6. 重複使⽤用元件 Sunday, October 27, 13
  38. 38. 6. 重複使⽤用元件 初始化⼀一個元件需要很⼤大 的⼒力氣. Sunday, October 27, 13
  39. 39. 6. 重複使⽤用元件 偵測 Viewport 的範圍來決定 是否需要被 Reuse. Sunday, October 27, 13
  40. 40. 6. 重複使⽤用元件 Reusable Identifier. 建⽴立記憶機制. Sunday, October 27, 13
  41. 41. 7. 圖⽚片讀取效能 Sunday, October 27, 13
  42. 42. 7. 圖⽚片讀取效能 JPG 消耗較多CPU運算. PNG 消耗較少CPU運算. JPG 消耗較少容量. PNG 消耗較多容量. Sunday, October 27, 13
  43. 43. 7. 圖⽚片讀取效能 2795x1899的圖⽚片 JPG: 567ms PNG: 4ms Sunday, October 27, 13
  44. 44. 7. 圖⽚片讀取效能 圖⽚片格式. 圖⽚片尺⼨寸. 圖⽚片⾊色域. Sunday, October 27, 13
  45. 45. 8. 網路連線限制 Sunday, October 27, 13
  46. 46. 8. 網路連線限制 ⾏行動裝置過多連線數會造 成連線阻塞. Sunday, October 27, 13
  47. 47. 8. 網路連線限制 例如:iPhone 最多容忍4條 連線數. Sunday, October 27, 13
  48. 48. 8. 網路連線限制 例如:iPhone 最多容忍4條 連線數. Sunday, October 27, 13
  49. 49. 8. 網路連線限制 例如:iPhone 最多容忍4條 連線數. Sunday, October 27, 13
  50. 50. 8. 網路連線限制 合併API以減少連線數. 建⽴立連線Queue呼叫機制. Sunday, October 27, 13
  51. 51. 9. 使⽤用最少資源佔⽤用 Sunday, October 27, 13
  52. 52. 9. 使⽤用最少資源佔⽤用 Camera Compass ScrollView 還有許多... Sunday, October 27, 13
  53. 53. 9. 使⽤用最少資源佔⽤用 Sunday, October 27, 13
  54. 54. 9. 使⽤用最少資源佔⽤用 Camera Sunday, October 27, 13
  55. 55. 9. 使⽤用最少資源佔⽤用 Camera Compass Gyroscope Sunday, October 27, 13
  56. 56. 9. 使⽤用最少資源佔⽤用 Camera Compass Gyroscope Sunday, October 27, 13
  57. 57. 9. 使⽤用最少資源佔⽤用 Camera Compass Gyroscope Sunday, October 27, 13
  58. 58. 9. 使⽤用最少資源佔⽤用 減少callback的頻率. 減少取回資源的品質. Sunday, October 27, 13
  59. 59. 10. 效能測試⼯工具 Sunday, October 27, 13
  60. 60. 10. 效能測試⼯工具 Sunday, October 27, 13
  61. 61. 10. 效能測試⼯工具 Core Animation分析CPU狀態. OpenGL ES Analysis分析GPU 狀態. Sunday, October 27, 13
  62. 62. Q&A cfsung@yahoo-inc.com Sunday, October 27, 13

×