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

2021-01-10 CSDN技術社區

【編者按】扁平化設計由於其簡潔的外表,更少的按鈕和選項使得界面乾淨整齊,從而減少認知障礙的產生。扁平化設計更是功能上的簡化於與重組,相比於擬物化而言,扁平風格的一個優勢就在於它可以更加簡單直接的將信息和事物的工作方式展示出來。本文來自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的速度。在Android上你可以使用method tracing,以及timing statements,兩者兼用會事半功倍。

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

很多重度單例模式先於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.

 (責編/魏偉)

相關焦點

  • 手把手教你如何在Instagram上銷售產品
    今天我們的話題就是呢,教大家如何在Instagram上銷售產品!再次強調一下,那些做快消品的,女性產品的,如包包,鞋子,衣服,指甲油,化妝品,首飾,寵物用品,在instagram這麼大紅利期的時候沒有去做,真是太可惜了….okay,here we go..
  • 領淘寶優惠券的app公眾號 教你如何領券
    18183首頁 領淘寶優惠券的app公眾號 教你如何領券 領淘寶優惠券的app公眾號 教你如何領券 來源:18183
  • 記兩次Instagram APP密碼重置POC
    Redmi Note 6 Pro; tulip; qcom; en_IN; 152830654)Accept-Language: en-IN, en-USContent-Type: application/x-www-form-urlencoded; charset=UTF-8Accept-Encoding: gzip, deflateHost: i.instagram.com
  • 一個好的工程師抵300個普通工程師!
    資訊產業, 這個產業主要是以網路服務舉凡網站, app 為主. 有以接案為主的公司(幫人架設官網, 活動網站.etc.), 有做自己產品的公司(ex: facebook , instagram 做自己的服務.etc.) 而這個產業中充滿工作機會與大量湧入人潮的工程師, 就是我們今天要聊的.
  • 揭秘航空公司飛機性能工程師
    圖:工作中的王寧 攝影:梁立群   民航資源網2014年8月6日消息:飛機性能工程師——這個聽起來頗有幾分神秘的職業,連許多民航內部人士都並不清楚其具體工作職責。而其實,航空公司新開闢航線、航路優化、新飛機引進等一系與旅客密切相關的工作,背後都有性能工程師的身影。8月5日,筆者走進南航新疆分公司運行指揮部,揭秘這一「神秘」職業。  在南航數萬名員工中,只有16名飛機性能工程師。而在新疆,則僅有3人,王寧便是其中之一。
  • 一臺電腦上如何多開instagram?不用虛擬機或者雲控
    一臺電腦上如何多開facebook?不用虛擬機或者雲控   我今天來寫ins的操作!其實這個就更簡單了!操作起來跟手機沒有什麼區別,也不需要什麼軟體 也不會付費!是這樣的,你先要學習我在之前講FB的操作一樣,先多管理用戶,這樣的。之後呢,就直接每個用戶的瀏覽器添加一個ins插件就可以了!
  • 時尚APP,教你如何變成時髦精!
    VOGUE Collections這個app網羅了紐約、巴黎、米蘭、倫敦四大時裝周的秀場照片,讓我們了解最新潮流時尚。雜誌迷app幾乎涵蓋了日本所有的時尚雜誌,。PS,上面的雜誌以日文為主,不會日文的可以直接看圖片搭配哈!wear個人認為這是穿搭界的小紅薯,超多明星和時尚博主在上面分享自己的日常搭配,這裡還可以關注喜歡的博主,分享自己的日常穿搭,和同好們一起討論最新的流行趨勢!
  • 如何利用Instagram將你的產品打造成網紅?
    在社交網站成為我們生活主要部分的今天,來看看Instagram上有哪些你不知道的神奇功能,它們可以讓你的產品秒變成網紅。Instagram上你不知道的那些小工具Instagram已經成為網絡營銷的一個重要平臺,目前,Instagram開發的小工具有2個,其他關於instagram的小工具有4個:  1)Boomerang
  • 羅技工程師告訴你 如何測試滑鼠準確性
    羅技工程師告訴你 如何測試滑鼠準確性 2013年06月12日 00:42作者:趙子悅編輯:趙子悅     泡泡網滑鼠頻道6月11日 近日,國外科技網站
  • 教你如何改善駝背擁有氣質美
    ▲版權屬SunGuts《簡單幾步驟,教你如何改善駝背|你不知道的冷姿勢【三個字SunGuts】》,YouTube
  • 機器學習技術如何幫助人們學習音樂,flowkey學鋼琴app給你答案
    機器學習技術如何幫助人們學習音樂,flowkey學鋼琴app給你答案 機器學習(Machine Learning) 是近年來科技界最受關注的話題之一。
  • 教你如何把App上架到蘋果官方認可的內測分發渠道testflight
    今天跟大家聊一下TF籤名TestFlight上架的優勢以及教你如何把App上架到蘋果官方認可的內測分發渠道testflight詳細教程。TF籤名是什麼?勾選Strip Swift symbols來 減少 app size4、選擇發布的證書來完成發布(這個要在developer.apple.com的account中設置)好了,下面就會自動檢測了,如果不通過會給你一些提示。按提示來修改再次打包就可以了。
  • Photopile.me:Instagram 照片牆
    沒有安裝Instagram app的你也可以通過Web端瀏覽美麗的Instagram照片咯!該平臺使用instagram API捕捉Instagram上美麗的照片。創建了一個愉快而又有趣的方式來查看Instagram上的熱門照片。
  • 「打」兩份工還獨自成功開發APP,這位女工程師經歷了什麼?
    Jen Yip是一個女工程師,在推特有 4 年的工作經驗,後來在矽谷和合伙人共同創辦了一家寵物健康初創公司。由於厭倦了矽谷的生活,她決定週遊世界,旅遊結束後再也沒有正經上班,而是當一個自由自由職業者,並獨立開發一款基於訂閱的個人理財和預算的web app——Lunch Money。
  • 領淘寶優惠券的app真假 教你如何找券
    領淘寶優惠券的app真假 淘寶天貓每年都會返利幾個億,50%的商品都有隱藏優惠券,90%的都有返利!而且這些都可以來免費獲取!所以呀一定是真的的!
  • PM與工程師,在「對立」中協作
    如果協作雙方都有牴觸情緒的話,項目進展不順利也就可想而知了。以下是自己與工程師協作過程中的經驗,與大家分享。以下是從PM角度出發的觀點1、選擇哪種類型的工程師與自己配合?要選擇一個「針對你」的工程師。這裡所說的「針對」,指的是獨立思考,擁有較強的邏輯思維能力,喜愛產品(有產品思維)。
  • Instagram上如何簡單快速漲粉
    如何運營Instagram的帳號才能獲得更多的粉絲、更高的知名度和參與度? 一個帳號,粉絲關注度是非常重要的,怎麼獲取關注度呢? 新註冊的帳號如何漲粉?
  • 如何通過改善背屈肌來提升跑步性能?
    當所有的動作都在引導肌肉向上移動時,跑步者應尋求改善錯誤的背屈,以避免腿部、臀部、背部和頸部的短期以及長期損傷。減少摔倒的機率:背屈不佳可能會增加跑步者摔倒的風險,因為腳沒有著地,因此背屈也被稱為「腳下垂」;這一點在短跑時尤為明顯,因為腳部的衝擊對速度和力量至關重要。
  • [福利] 封殺後正常使用instagram方法輯略
    <方法一>本次福利的教程是針對iOS設備的,android設備同理操作即可。第三步,輸入框中的代碼:4k7c7z0q8d並點擊鍵盤的換行確認,z後面的字元是數位0不是字母O 第四步,會自動跳轉到流覽器頁面,要求安裝描述檔,點擊安裝,如果你的設備有鎖屏密碼,輸入你的鎖屏密碼即可;安裝描述檔需要一點點時間,耐心點兒等待提示安裝成功
  • Instagram是什麼?Instagram帳戶架構及營銷目的
    從事多年站外推廣,擅長紅人營銷,海外Deal以及谷歌,Facebook廣告投放 2019-08-29 14:04 Instagram 是當今成長最快的在線社群平臺之一,目前全球Instagram的月活躍用戶已經超過10億,全球社交類app