扁平化設計僅僅只是一個漂亮的外表，還是一個性能利器，從而觸發一場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%。

經驗

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