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

•

49 likes•6,873 views

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.

Technology Spiritual

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

Sunday, October 27, 13

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

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

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

Sunday, October 27, 13

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

Sunday, October 27, 13

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

Sunday, October 27, 13

AR (Augmented Reality)

Sunday, October 27, 13

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

Sunday, October 27, 13

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

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. 善⽤用多執⾏行緒
主⾏行程處理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
在處理⼤大部份的圖形要
求上, 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. 元件顯⽰示階層
越多的顯⽰示階層代表有越多
的⼯工作需要處理.

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. 減少畫⾯面演算次數
Opacity
Blend
Shadow
Mask
還有更多...

Sunday, October 27, 13

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

Sunday, October 27, 13

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

Sunday, October 27, 13

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

Sunday, October 27, 13

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

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. 網路連線限制
例如：iPhone 最多容忍4條
連線數.

Sunday, October 27, 13

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

Sunday, October 27, 13

9. 使⽤用最少資源佔⽤用
Camera
Compass
ScrollView
還有許多...

Sunday, October 27, 13

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

Sunday, October 27, 13

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

Compass
Gyroscope

Sunday, October 27, 13

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

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

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

Symfony - Introduction

Piers Warmers

Getting the Most our of your Tools_FrontEnd DevConf2013_Minsk

Wooga

Getting the Most out of Your Tools

Krzysztof Szafranek

Ruby on Windows (RubyConf.tw 2011)

Ming-hsuan Chang

Why can't organizations be designed as sexy as an iPad?

Bertie Du Plessis

Attend this fun, fast-paced session and see five AWS-powered start-ups launch on-stage with Amazon.com CTO, Dr. Werner Vogels. You'll hear directly from these hand-selected companies and learn how they went from an idea to launch, using the AWS cloud. This exciting hour is your firsthand look at some of the hottest new start-ups, as well as a chance to get access to their new products and features. Whether you’re a booming enterprise or a blossoming start-up, this is a re:Invent activity that’s not to be missed.

2nd Annual Start-up Launches with Dr. Werner Vogels (SPOT101) | AWS re:Invent...

Amazon Web Services

100% JS

__lucas

Similar to MOPCON 2013 - APP急速視覺UX回饋應用 (7)

Symfony - Introduction

Getting the Most our of your Tools_FrontEnd DevConf2013_Minsk

Getting the Most out of Your Tools

Ruby on Windows (RubyConf.tw 2011)

Why can't organizations be designed as sexy as an iPad?

2nd Annual Start-up Launches with Dr. Werner Vogels (SPOT101) | AWS re:Invent...

100% JS

More from anistar sung

Mopcon2017 - AppDevKit x CameraKit

anistar sung

Yahoo Open Source - The Tour & Mystery of AppDevKit (MOPCON 2016)

anistar sung

AppDevKit is an iOS development library that provides developers with useful features to fulfill their everyday iOS app development needs. AppDevKit has five major parts that include command, user interfaces, animations, image view, and list view support libraries. AppDevKit could be installed by CocoaPods. Please feel welcome to use AppDevKit in your iOS projects as it is licensed under the permissive open source BSD license. These materials are accessible: https://github.com/anistarsung/AppDevKitLearning

Practicing AppDevKit in kata training

anistar sung

AppDevKit for iOS Development

anistar sung

Best Strategy for Developing App Architecture and High Quality App

anistar sung

MOPCON 2015 - Tips of Mobile Continuous Delivery

anistar sung

Yahoo2013 hackday - Frosted Glass Effect on iOS app

anistar sung

談笑揭秘CSS3

anistar sung

More from anistar sung (8)

Mopcon2017 - AppDevKit x CameraKit

Yahoo Open Source - The Tour & Mystery of AppDevKit (MOPCON 2016)

Practicing AppDevKit in kata training

AppDevKit for iOS Development

Best Strategy for Developing App Architecture and High Quality App

MOPCON 2015 - Tips of Mobile Continuous Delivery

Yahoo2013 hackday - Frosted Glass Effect on iOS app

談笑揭秘CSS3

Recently uploaded

Finology Group – Insurtech Innovation Award 2024

The Digital Insurer

What are drone anti-jamming systems? The drone anti-jamming systems and anti-spoof technology protect against interference, jamming, and spoofing of the UAVs. To protect their security, countries are beginning to research drone anti-jamming systems, also known as drone strike weapons. The anti-jam and anti-spoof technology protects against interference, jamming and spoofing. A drone strike weapon is a drone attack weapon that can attack and destroy enemy drones. So what is so unique about this amazing system?

What Are The Drone Anti-jamming Systems Technology?

Antenna Manufacturer Coco

GenCyber Cyber Security Day Presentation

Michael W. Hawkins

How to Troubleshoot Apps for the Modern Connected Worker

ThousandEyes

ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke

Product Anonymous

💉💊+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHABI}}+971581248768 +971581248768 Mtp-Kit (500MG) Prices » Dubai [(+971581248768**)] Abortion Pills For Sale In Dubai, UAE, Mifepristone and Misoprostol Tablets Available In Dubai, UAE CONTACT DR.Maya Whatsapp +971581248768 We Have Abortion Pills / Cytotec Tablets /Mifegest Kit Available in Dubai, Sharjah, Abudhabi, Ajman, Alain, Fujairah, Ras Al Khaimah, Umm Al Quwain, UAE, Buy cytotec in Dubai +971581248768''''Abortion Pills near me DUBAI | ABU DHABI|UAE. Price of Misoprostol, Cytotec” +971581248768' Dr.DEEM ''BUY ABORTION PILLS MIFEGEST KIT, MISOPROTONE, CYTOTEC PILLS IN DUBAI, ABU DHABI,UAE'' Contact me now via What's App…… abortion Pills Cytotec also available Oman Qatar Doha Saudi Arabia Bahrain Above all, Cytotec Abortion Pills are Available In Dubai / UAE, you will be very happy to do abortion in Dubai we are providing cytotec 200mg abortion pill in Dubai, UAE. Medication abortion offers an alternative to Surgical Abortion for women in the early weeks of pregnancy. We only offer abortion pills from 1 week-6 Months. We then advise you to use surgery if its beyond 6 months. Our Abu Dhabi, Ajman, Al Ain, Dubai, Fujairah, Ras Al Khaimah (RAK), Sharjah, Umm Al Quwain (UAQ) United Arab Emirates Abortion Clinic provides the safest and most advanced techniques for providing non-surgical, medical and surgical abortion methods for early through late second trimester, including the Abortion By Pill Procedure (RU 486, Mifeprex, Mifepristone, early options French Abortion Pill), Tamoxifen, Methotrexate and Cytotec (Misoprostol). The Abu Dhabi, United Arab Emirates Abortion Clinic performs Same Day Abortion Procedure using medications that are taken on the first day of the office visit and will cause the abortion to occur generally within 4 to 6 hours (as early as 30 minutes) for patients who are 3 to 12 weeks pregnant. When Mifepristone and Misoprostol are used, 50% of patients complete in 4 to 6 hours; 75% to 80% in 12 hours; and 90% in 24 hours. We use a regimen that allows for completion without the need for surgery 99% of the time. All advanced second trimester and late term pregnancies at our Tampa clinic (17 to 24 weeks or greater) can be completed within 24 hours or less 99% of the time without the need surgery. The procedure is completed with minimal to no complications. Our Women's Health Center located in Abu Dhabi, United Arab Emirates, uses the latest medications for medical abortions (RU-486, Mifeprex, Mifegyne, Mifepristone, early options French abortion pill), Methotrexate and Cytotec (Misoprostol). The safety standards of our Abu Dhabi, United Arab Emirates Abortion Doctors remain unparalleled. They consistently maintain the lowest complication rates throughout the nation. Our Physicians and staff are always available to answer questions and care for women in one of the most difficult times in their lives. The decision to have an abortion at the Abortion Cl

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...

?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@

Imagine a world where information flows as swiftly as thought itself, making decision-making as fluid as the data driving it. Every moment is critical, and the right tools can significantly boost your organization’s performance. The power of real-time data automation through FME can turn this vision into reality. Aimed at professionals eager to leverage real-time data for enhanced decision-making and efficiency, this webinar will cover the essentials of real-time data and its significance. We’ll explore: FME’s role in real-time event processing, from data intake and analysis to transformation and reporting An overview of leveraging streams vs. automations FME’s impact across various industries highlighted by real-life case studies Live demonstrations on setting up FME workflows for real-time data Practical advice on getting started, best practices, and tips for effective implementation Join us to enhance your skills in real-time data automation with FME, and take your operational capabilities to the next level.

From Event to Action: Accelerate Your Decision Making with Real-Time Automation

Safe Software

Tata AIG General Insurance Company - Insurer Innovation Award 2024

The Digital Insurer

The value of a flexible API Management solution for Open Banking Steve Melan, Manager for IT Innovation and Architecture - State's and Saving's Bank of Luxembourg Apidays New York 2024: The API Economy in the AI Era (April 30 & May 1, 2024) ------ Check out our conferences at https://www.apidays.global/ Do you want to sponsor or talk at one of our conferences? https://apidays.typeform.com/to/ILJeAaV8 Learn more on APIscene, the global media made by the community for the community: https://www.apiscene.io Explore the API ecosystem with the API Landscape: https://apilandscape.apiscene.io/

Apidays New York 2024 - The value of a flexible API Management solution for O...

apidays

What is a good lead in your organisation? Which leads are priority? What happens to leads? When sales and marketing give different answers to these questions, or perhaps aren't sure of the answers at all, frustrations build and opportunities are left on the table. Join us for an illuminating session with Cian McLoughlin, HubSpot Principal Customer Success Manager, as we look at that crucial piece of the customer journey in which leads are transferred from marketing to sales.

04-2024-HHUG-Sales-and-Marketing-Alignment.pptx

HampshireHUG

[2024]Digital Global Overview Report 2024 Meltwater.pdf

hans926745

How to Troubleshoot Apps for the Modern Connected Worker

ThousandEyes

This presentation explores the impact of HTML injection attacks on web applications, detailing how attackers exploit vulnerabilities to inject malicious code into web pages. Learn about the potential consequences of such attacks and discover effective mitigation strategies to protect your web applications from HTML injection vulnerabilities. for more information visit https://bostoninstituteofanalytics.org/category/cyber-security-ethical-hacking/

HTML Injection Attacks: Impact and Mitigation Strategies

Boston Institute of Analytics

Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024

The Digital Insurer

Handwritten Text Recognition for manuscripts and early printed texts

Maria Levchenko

MySQL Webinar, presented on the 25th of April, 2024. Summary: MySQL solutions enable the deployment of diverse Database Architectures tailored to specific needs, including High Availability, Disaster Recovery, and Read Scale-Out. With MySQL Shell's AdminAPI, administrators can seamlessly set up, manage, and monitor these solutions, ensuring efficiency and ease of use in their administration. MySQL Router, on the other hand, provides transparent routing from the application traffic to the backend servers in the architectures, requiring minimal configuration. Completely built in-house and supported by Oracle, these solutions have been adopted by enterprises of all sizes for their business-critical applications. In this presentation, we'll delve into various database architecture solutions to help you choose the right one based on your business requirements. Focusing on technical details and the latest features to maximize the potential of these solutions.

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...

Miguel Araújo

Scaling API-first – The story of a global engineering organization Ian Reasor, Senior Computer Scientist - Adobe Radu Cotescu, Senior Computer Scientist - Adobe Apidays New York 2024: The API Economy in the AI Era (April 30 & May 1, 2024) ------ Check out our conferences at https://www.apidays.global/ Do you want to sponsor or talk at one of our conferences? https://apidays.typeform.com/to/ILJeAaV8 Learn more on APIscene, the global media made by the community for the community: https://www.apiscene.io Explore the API ecosystem with the API Landscape: https://apilandscape.apiscene.io/

Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe

apidays

The presentation explores the development and application of artificial intelligence (AI) from its inception to its current status in the modern world. The term "artificial intelligence" was first coined by John McCarthy in 1956 to describe efforts to develop computer programs capable of performing tasks that typically require human intelligence. This concept was first introduced at a conference held at Dartmouth College, where programs demonstrated capabilities such as playing chess, proving theorems, and interpreting texts. In the early stages, Alan Turing contributed to the field by defining intelligence as the ability of a being to respond to certain questions intelligently, proposing what is now known as the Turing Test to evaluate the presence of intelligent behavior in machines. As the decades progressed, AI evolved significantly. The 1980s focused on machine learning, teaching computers to learn from data, leading to the development of models that could improve their performance based on their experiences. The 1990s and 2000s saw further advances in algorithms and computational power, which allowed for more sophisticated data analysis techniques, including data mining. By the 2010s, the proliferation of big data and the refinement of deep learning techniques enabled AI to become mainstream. Notable milestones included the success of Google's AlphaGo and advancements in autonomous vehicles by companies like Tesla and Waymo. A major theme of the presentation is the application of generative AI, which has been used for tasks such as natural language text generation, translation, and question answering. Generative AI uses large datasets to train models that can then produce new, coherent pieces of text or other media. The presentation also discusses the ethical implications and the need for regulation in AI, highlighting issues such as privacy, bias, and the potential for misuse. These concerns have prompted calls for comprehensive regulations to ensure the safe and equitable use of AI technologies. Artificial intelligence has also played a significant role in healthcare, particularly highlighted during the COVID-19 pandemic, where it was used in drug discovery, vaccine development, and analyzing the spread of the virus. The capabilities of AI in healthcare are vast, ranging from medical diagnostics to personalized medicine, demonstrating the technology's potential to revolutionize fields beyond just technical or consumer applications. In conclusion, AI continues to be a rapidly evolving field with significant implications for various aspects of society. The development from theoretical concepts to real-world applications illustrates both the potential benefits and the challenges that come with integrating advanced technologies into everyday life. The ongoing discussion about AI ethics and regulation underscores the importance of managing these technologies responsibly to maximize their their benefits while minimizing potential harms.

Artificial Intelligence: Facts and Myths

Joaquim Jorge

Axa Assurance Maroc - Insurer Innovation Award 2024

The Digital Insurer

Boost Fertility New Invention Ups Success Rates.pdf

sudhanshuwaghmare1

Recently uploaded (20)

Finology Group – Insurtech Innovation Award 2024

What Are The Drone Anti-jamming Systems Technology?

GenCyber Cyber Security Day Presentation

How to Troubleshoot Apps for the Modern Connected Worker

ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...

From Event to Action: Accelerate Your Decision Making with Real-Time Automation

Tata AIG General Insurance Company - Insurer Innovation Award 2024

Apidays New York 2024 - The value of a flexible API Management solution for O...

04-2024-HHUG-Sales-and-Marketing-Alignment.pptx

[2024]Digital Global Overview Report 2024 Meltwater.pdf

How to Troubleshoot Apps for the Modern Connected Worker

HTML Injection Attacks: Impact and Mitigation Strategies

Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024

Handwritten Text Recognition for manuscripts and early printed texts

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...

Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe

Artificial Intelligence: Facts and Myths

Axa Assurance Maroc - Insurer Innovation Award 2024

Boost Fertility New Invention Ups Success Rates.pdf

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

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