Post on 08-Sep-2014
description
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...
Sunday, October 27, 13
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
Sunday, October 27, 13
什麼是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秒鐘.通常建議0.4秒就要完成.
1. 使⽤用極短轉場效果
Sunday, October 27, 13
2. 善⽤用多執⾏行緒
Sunday, October 27, 13
2. 善⽤用多執⾏行緒 PROCESS 1 PROCESS 2 PROCESS 3
Sunday, October 27, 13
2. 善⽤用多執⾏行緒
Phone Middle Layer Service
Sunday, October 27, 13
2. 善⽤用多執⾏行緒
Phone Middle Layer Service
Sunday, October 27, 13
2. 善⽤用多執⾏行緒主⾏行程處理UI要求.⼦子⾏行程處理其他⼯工作.
Sunday, October 27, 13
2. 善⽤用多執⾏行緒
PROCESS 1
PROCESS 2 PROCESS 3
Sunday, October 27, 13
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 GPUEX: 同⼀一個圖⽚片做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. 元件顯⽰示階層越多的顯⽰示階層代表有越多的⼯工作需要處理.
Layer 1Layer 2Layer 3Layer 4Layer 5
Sunday, October 27, 13
4. 元件顯⽰示階層
Layer 1 Layer 2 Layer 3 Layer 4 Layer 5
越多的顯⽰示階層代表有越多的⼯工作需要處理.
Sunday, October 27, 13
4. 元件顯⽰示階層
過多階層 正確做法
Sunday, October 27, 13
5. 減少畫⾯面演算次數
Sunday, October 27, 13
5. 減少畫⾯面演算次數
OpacityBlend
ShadowMask
還有更多...
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: 567msPNG: 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. 使⽤用最少資源佔⽤用CameraCompassScrollView還有許多...
Sunday, October 27, 13
9. 使⽤用最少資源佔⽤用
Sunday, October 27, 13
9. 使⽤用最少資源佔⽤用Camera
Sunday, October 27, 13
9. 使⽤用最少資源佔⽤用
GyroscopeCompass
Camera
Sunday, October 27, 13
9. 使⽤用最少資源佔⽤用
GyroscopeCompass
Camera
Sunday, October 27, 13
9. 使⽤用最少資源佔⽤用
GyroscopeCompass
Camera
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&Acfsung@yahoo-inc.com
Sunday, October 27, 13