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

APP急速視覺UX回饋應⽤用Anistar Sung

Sunday, October 27, 13

Anistar Sung 宋志峰Work @

http://www.facebook.com/anistarsunghttp://blog.riaproject.com

Mobile DeveloperClient DeveloperServer DeveloperInstructor & Consulter & Author

專注：iOS, Android, HTML5, Flash, PHP...


New York Times TOP10 photography APPUS App Store TOP 2 paid photography APPWorld TOP 40 APPBest APP review in some review sites

http://www.riaproject.com


什麼是UI與UX？


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

那這個呢？


UX不是就是特效嗎？


體驗經濟：塑造感官體驗及思維認同.


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


10個技巧讓你遠離效能低落陷阱


AR (Augmented Reality)


1. 使⽤用極短轉場效果


使⽤用者討厭等候, 別挑戰他們的耐⼼心.



轉場動畫別超過1秒鐘.通常建議0.4秒就要完成.



2. 善⽤用多執⾏行緒


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



Phone Middle Layer Service


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



PROCESS 1

PROCESS 2 PROCESS 3


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


3. CPU vs GPU


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


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


3. CPU vs GPU

CPU Rendering

GPU Rendering


4. 元件顯⽰示階層


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


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

Layer 1Layer 2Layer 3Layer 4Layer 5



Layer 1 Layer 2 Layer 3 Layer 4 Layer 5

越多的顯⽰示階層代表有越多的⼯工作需要處理.



過多階層正確做法


5. 減少畫⾯面演算次數


5. 減少畫⾯面演算次數

OpacityBlend

ShadowMask

還有更多...


5. 減少畫⾯面演算次數讓每個畫⾯面render次數降低.


6. 重複使⽤用元件


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


6. 重複使⽤用元件

偵測 Viewport 的範圍來決定是否需要被 Reuse.


6. 重複使⽤用元件Reusable Identifier.建⽴立記憶機制.


https://developer.apple.com/library/ios/documentation/uikit/reference/UITableView_Class/Reference/Reference.html#//apple_ref/occ/instm/UITableView/dequeueReusableCellWithIdentifier:

https://developer.apple.com/library/ios/documentation/uikit/reference/UITableView_Class/Reference/Reference.html#//apple_ref/occ/instm/UITableView/dequeueReusableCellWithIdentifier:

7. 圖⽚片讀取效能


7. 圖⽚片讀取效能JPG 消耗較多CPU運算.

PNG 消耗較少CPU運算.JPG 消耗較少容量.PNG 消耗較多容量.


7. 圖⽚片讀取效能2795x1899的圖⽚片

JPG: 567msPNG: 4ms


7. 圖⽚片讀取效能圖⽚片格式.圖⽚片尺⼨寸.圖⽚片⾊色域.


8. 網路連線限制


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


8. 網路連線限制例如：iPhone 最多容忍4條連線數.


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


9. 使⽤用最少資源佔⽤用


9. 使⽤用最少資源佔⽤用CameraCompassScrollView還有許多...


9. 使⽤用最少資源佔⽤用Camera



GyroscopeCompass

Camera


9. 使⽤用最少資源佔⽤用減少callback的頻率.減少取回資源的品質.


10. 效能測試⼯工具


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


Q&[email protected]


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

Technology

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