说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

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

HTML文档下载 WORD文档下载 PDF文档下载
扁平化设计最核心的地方就是放弃一切装饰效果,诸如阴影、透视、纹理、渐变等等能做出3D 效果的元素一概不用,所有的元素的边界都干净俐落,扁平化设计不仅是一个美丽的外表,它带来的还有性能上的提升,

【编者按】扁平化设计由于其简洁的外表,更少的按钮和选项使得界面干净整齐,从而减少认知障碍的产生。扁平化设计更是功能上的简化于与重组,相比于拟物化而言,扁平风格的一个优势就在于它可以更加简单直接的将信息和事物的工作方式展示出来。本文来自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. (责编/魏伟)

各式各样的极品程序员,你属于哪一种 Google员工离职前必做的14件事情 GitHub上最火的开源项目及编程语言是什么? 2014的12个大数据趋势:Hadoop继续升温,R将进入主流 研究称三星手机可能存在安全漏洞 初创IT公司里开发者最容易犯的九种错误 还有多少开发者在为IE6做兼容性测试? 解读华三“新IT易之道”理念下的云计算和数据中心 回顾苹果2013:硬件几乎无突破 热衷收购 敏捷开发流程管理须参考的3个要素 微软潘正磊谈DevOps、Visual Studio 2013新功能、.NET未来 Jail Breaking之后,iOS 7的指纹识别还hold住么? “勇者前线”开发商Gumi获1900万美元融资 工信部发首批10张虚拟运营商牌照 开发者有哪些新机会 【PPT集萃】十位一线专家分享Spark现状与未来 谁主沉浮,亚马逊和思科角力DaaS市场 忆往昔峥嵘岁月稠——看苹果第一代iPhone的“风骚”往事 开源工具链“大牛”的经验分享:HelloGCC 2013精彩演讲回顾 20个超实用的JavaScript技巧及最佳实践 【开源专访】Linux Deepin:做更好用的Linux桌面系统 访Andy Jassy:感受亚马逊AWS生态观,思考国内外云计算差异 站到风口,最先飞起来的能将服务做到极致的IDC 苹果Siri再获一专利:可使用自然语音输入来搜索和标记图片 研发周报:Google抛弃C语言,采用Go语言重写Go编译器 取其精华 IE11里移除和新增的功能 大胆预测亚马逊即将推出的五大产品或服务 移动周报:GitHub章鱼猫中国之行 三星与LG的新动向:同样的物联网 ,不同的玩法 从Twitter到Tinder,看社交媒体在2013年的沉浮 一周消息树:有道周枫和他的“放养”团队、太极助手惹“非议” Netflix:使用大数据驱动商业决策 一个简单SESSION 问题,请解决。在线等,没分了不好意思. 为什么在asp中使用ADODb的Connection对象的方法时不能使用事务处理 ====寂寞啊!谁帮介绍一个女孩啊(15-18)岁的!!万分感谢!==== 高分请教大虾,关于搜索的问题?。。。。 100分请教一个简单的问题?? runtime在JAVA中解释应该是什么意思? SCO上的ORACLE7建库?SOS 大家来看看,超级Bug?用DBExpress连接MSSQL,执行存储不能返回值,谁能解决,200分 高分请教,谢谢了/。。。。 我在程序中使用了MSXML,可是在干净的win98下无法运行,请问需要安装什么? 救急: SQL server的数据恢复 关于分辨率的问题。 在vb.net中能做dll吗?请大家可参与 下面的函数怎样声明? 能直接用alter语句修改某个字段的类型和长度吗? 如何做pci 插卡? 关于datalist绑定问题 我的前途???欢迎大家发表意见! 急求 如何测试asp ■■■■为防止下一场水园恶战,水源马甲联盟再次公开马甲id 密码■■■■ 自定义对象的实例怎么在ViewState里保存 把資料漚出成txt,doc,xls格式的文件,在漚出過程中,但是漚出成xls(Office2000)正常,officexp就出現亂碼? citrix数据引擎是什么? 刚刚我和她分手了 在數據窗口中怎樣打印jpg文件 为什么我的pws安装时提示需要winsock32?? 如何在grid表格或临时表里实现累加 请教一个四舍五入的问题? 各位老鳥,請問怎樣用ADO控件連接到一個Excel文件 oracle8i存储过程怎么写? 在线等待-----安装问题!!急急急急 我的拨号出了什么问题???急救!! 交換機連到交換機(兩個都是d-link的),如何連? 在php中如何将图片上传到服务器的MY SQL数据库中。紧急 关于视图位置疑问 缩进 急急!谢谢! 100分!在线等!急急急急急急急急急急急急急急急急急! DLL hell 关于javascript的错误,运行到该段程序,老出错,帮我看看。 别的工具调用EJB问题。 如何识别对象?? 本版将要强行结帖,请各位注意自己的帖子! 一行代码,加个response.write 结果就不同了,为什么? 字体的style怎么保存到文本文件里? weblogic和jbuilder7连用还需要其他软件吗? 打印机状态问题 执行外部程序 关于操作数据库表时,如何实现表的加载! 你要CrystalReport9 简体中文企业版吗(来者有分) 加拿大称无意对叙利亚动武浙江舟山24名渔船老大直接对话国际海卫生部原副部长:80%医疗资源用于干江苏破获特大网络淫秽表演案 “宝贝”江苏:313条河道3年内基本消除黑臭浙二全面推行自助挂号自助收费 24小苏州小朋友DIY月饼迎中秋(图)仍有46名中国人留在叙利亚 个别由安美称奥巴马拟绕开联合国 单独对叙采取民企500强门槛再提高 十一家资产过中国防长对话日防相 敦促日本挑事者纠国务院出台6大措施支持跨境电子商务零美发射一颗“间谍卫星” 称发射目的为南京评选勤廉干部 基层官员队伍尤需学“表哥”杨达才受贿巨额财产来源不明案4万斤病死猪肉流入四省市场 销售8个义乌小伙飞奔7公里追回被偷手机 称像国家统计局:全国早稻总产量同比增长2金华一对双胞胎男孩被遗弃宾馆 父亲称美英国内分歧严重致军事干预叙利亚步调因拘留网民“不妥” 安徽砀山公安局在昔日夫妻败走澳门赌场 女核算员挪用公美日印联合海上军演下月登场西点军校黑人女生“举拳照”引风波美陆军寻求适合远征无人机:应具备垂直美媒揭秘“弗吉尼亚”级潜艇新技术90岁老八路忆地道战:地道错综复杂 揭秘:我军历史上三次知识青年从军潮美媒称俄将在叙保留强大空军实力毕业联考来袭 国防科大“准军官”这样俄新型护卫舰交付黑海舰队一份130年前的作战报告追涨而不套牢的绝招留学资讯:留学生搞笑的回国后遗症美日一材料欲卡死中战机腾飞中国平安601318主力资金若影若现干货 一位神秘操盘手总结七点交易原则菲达环保600526,主力出逃?继续原油价格反转剧情开演 猜中了结尾却失空前大震撼!13亿人惊呆了 本周大盘资深操盘手18年悟出的超跌反弹操作原玉女析金:5.9行情解析,原油大幅高
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘