Instagram工程師教你如何改善App的性能

【編者按】扁平化設計由於其簡潔的外表，更少的按鈕和選項使得介面乾淨整齊，從而減少認知障礙的產生。 扁平化設計更是功能上的簡化于與重組，相比于擬物化而言，扁平風格的一個優勢就在於它可以更加簡單直接的將資訊和事物的工作方式展示出來。 本文來自Instagram一名工程師的分享。

以下為譯文：

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

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

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

這的確出乎我的意料，我曾經認為扁平化設計只是構建更美觀的UI。 現在想想真是愚蠢之極。 感謝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%。

經驗

快速冷啟動時間是可以實現的，通過配置、修復、反覆運算。 審慎使用圖元。 看看每一個螢幕不需要什麼。 其他國家用戶手機的螢幕顯著小於美國的。 移動手機喜歡簡單的設計，移動開發者也是如此，他們喜歡更簡單、更快的設計。

原文連結：Instagram Improved Their App's Performance. Here's How. （責編/魏偉）