教你如何改善App的性能

扁平化設計由于其簡潔的外表，更少的按鈕和選項使得界面干凈整齊，從而減少認知障礙的產生。扁平化設計更是功能上的簡化于與重組，相比于擬物化而言，扁平風格的一個優勢就在于它可以更加簡單直接的將信息和事物的工作方式展示出來。

以下為譯文：

扁平化設計僅僅只是一個漂亮的外表，還是一個性能利器，從而觸發一場UI革命？實踐證明是后者。

Tyler Kieft 是Instagram一名工程師，他詳細解釋了這其中的緣由，更詳細的內容請關注他在@scale會議上的演講: 標準安卓手機上的Instagram 。這個演講是由Facebook提供的，是“如何在實際情況下設計移動應用程序”系列的一部分，這里的“實際情況”是指那些手機速度更慢、屏幕更小、網絡比美國更慢的地方。

為標準手機設計App和高端手機并不一樣，Instagram團隊需要重新思考他們的設計。從Tyler的談話中得到的啟示之一是轉變到扁平化設計，因為這將讓應用程序更美觀、更實用、并且還能大大提高性能。

這的確出乎我的意料，我曾經認為扁平化設計只是構建更美觀的UI?，F在想想真是愚蠢之極。感謝Tyler如此詳細的解釋了扁平化設計的好處， Instagram說明了一切。

扁平化設計是反擬物化，它采用簡單的元素、簡單的排版、單調的顏色以及簡單的設計。

使用扁平化設計，Instagram可以減少120 ms的冷啟動時間，同時應用程序更美觀、更好用、并且更專注將內容傳送到不同大小的手機上。

那么扁平化設計是如何實現的呢？

轉變到扁平化設計

• 為了更專注性能，Instagram重寫他們的UI。
• Instagram在2012年發布Android版本時，只有3個人的團隊，花了大約4個月完成。其中兩個工程師，一個設計師。Android版本使用了和iOS版本相同的設計。
• 使用的豐富的漸變特性和大量的UI元素。
• 過渡到扁平化設計后，產品更簡單和更美觀。沒有更多的漸變，沒有更多的陰影。
• 通過采用扁平化設計，他們得到的經驗是：

• 扁平化設計使開發量更小，開發代碼更快、更新產品更快，這對開發人員來說是個好消息。
• 扁平化設計帶來的是性能的提升，不僅開發人員做的少，而且速度更快。

• 新Android版本的目標就是利用他們從iOS7扁平化設計中學習到的經驗來重新設計：

• 讓它更扁平、更快。這不是重寫，導航模式并沒有改變。
• 要有強烈的屏幕空間意識。用全新的眼光看待每一塊屏幕，盡量讓設計能更好地適應所有的屏幕尺寸。
• 讓它更美觀。這是Instagram團隊所做一切的基礎。

• 整體效果發生了顯著的簡化，那么發生了那些變化呢？

• 去掉所有的漸變和光滑按鈕。讓圖標回歸鮮明的輪廓，取代漸變效果。保留純色和扁平形狀，以便UI融入背景。
• 去掉評論圖標，使評論占據屏幕的全部寬度，給予評論更多的文本空間。屏幕上重點強調內容，讓小屏幕手機用戶有更多的空間來讀正文內容。
• 拍照功能的重新布局。在小手機上，動作按鈕設計在屏幕的頂部，而大屏幕手機所有的命令在底部。
• App上不必要的UI全部去掉，讓用戶更多的關注內容。chrome搜索屏幕從三層減為兩層。這給了小手機很多空間，給內容很多空間。

為什么扁平化設計

• APK將更小，這對小型網絡非常適合。神奇的是Asset tinting（我從來沒聽說過的東西）。Asset tinting意味著assets，在這種情況下是圖像、可以以編程方式著色。例如，一個灰色的心可以通過編程方式變為紅色。
• 加載較少的assets。這意味著UI顯示更快并且以更少的內存來存儲位圖。每個需要被顯示的assets必須以閃存的方式讀取并且解碼成一個位圖。越少這么做，App就會越快。
• 更快的迭代時間。如果你想改變顏色或重新開發，你不需要一個設計師了，需要的事更改代碼和編譯。
• 結果：

• 在扁平化設計之前，需要29個不同的assets來顯示feed screen。扁平化設計之后，只用了8個。僅憑這些，就在所有設備上減掉120 ms的冷啟動時間。
• 扁平化設計之后，整個App更快了。更少的assets被加載，整個App變得更靈巧，速度變得更快了。

改善冷啟動時間

• 冷啟動時間是指應用程序啟動和響應的時間。目標就是讓應用程序啟動更快，讓用戶在低端手機上有一個好的體驗。
• 幾年前，在低端三星Y系列手機上 Instagram的啟動時間是3秒，在高端三星S5上，啟動時間是750 ms。
• 現在三星Y系列上 Instagram啟動需要1.5秒。在三星S5上是400 ms。
• 怎么做？

• 配置App。

• 找出是什么減慢了這個App的速度。
• 在Android上你可以使用method tracing，以及timing statements，兩者兼用會事半功倍。

• 修復最慢的部分。

• 延遲加載。將項目從冷啟動路徑刪除。
• 重寫代碼。例如，緩慢的JSON解析代碼重寫后會更快。
• 遵從后臺線程。能在后臺完成的不要在UI線程上做。

• 迭代。再次啟動配置步驟。

• App-wide 單例模式被發現是緩慢的。

• 很多重度單例模式先于App啟動：HTTP客戶機、Cookie存儲、圖像緩存、視頻緩存。真的不需要這些東西來顯示UI給用戶。它們可以并行地在后臺加載。
• Two-part 延遲加載

• 在后臺初始化單例模式，不要讓程序員必須檢查一個單例模式是否是可用的。

• 在UI線程上創建足夠的對象，以便完善公共API功能。將功夫用到后臺線程上。緩存從磁盤存儲打開和閱讀，客戶端證書在后臺加載。Cookies反序列化和解碼在后臺。通過這些改變，UI將更快地出現在屏幕上。

• Newsview變慢。通過method tracing發現。

• Newsview，顯示你所有的喜好和評論，最初作為webview編寫。它需要在啟動時加載，以便盡可能快的顯示用戶數據。
• 問題是沒有控制webview，它有它自己的堆棧和緩存系統。轉換到本地，需要2 - 4周。本地轉換后的冷啟動時間減少了30%。

經驗

• 快速冷啟動時間是可以實現的，通過配置、修復、迭代。
• 審慎使用像素?？纯疵恳粋€屏幕不需要什么。其他國家用戶手機的屏幕顯著小于美國的。
• 移動手機喜歡簡單的設計，移動開發者也是如此，他們喜歡更簡單、更快的設計。
• CDA數據分析師培訓官網