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

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. (责编/魏伟)

下载自己过去的Tweets?用户准备好了吗? 微软任命研究部门新副总裁 负责北京等实验室 欧朋首席标准官:HTML5将在2014年成熟 开发利器:对游戏开发者最具价值的5类iOS应用 专访前IE浏览器内核研发工程师,带你深入了解IE10 Windows 8市场接纳速度慢于Windows 7 别只看下载量!“用户留存率”才是关键! 预计2020年出现百亿亿次级超级计算机 Google数据中心PUE的秘密 一个传奇:有个人不断赢得世界算法冠军 音乐能力开放平台合作探索之旅 社交网络海外营销技巧及工具实战 大数据谬误 —— 为什么我们需要收集更多的数据 传苹果地图负责人Rich Williamson遭解雇? 一个月:Windows 8授权许可已破四千万 里程碑:iPhone与Android企业用户市场首次超过黑莓 VMware最快下周宣布分拆Cloud Foundry 国际原子能机构服务器遭窃 百多位专家信息泄密 用户可通过Google Drive直接向Gmail添加高达10GB的文件 韩寒携个人App进军移动互联网 亮相应用汇独家发布会 摆脱谷歌 亚马逊向开发者正式发布地图API 为什么应该用模块取代C/C++中的头文件? Mozilla布道师:HTML5在移动端没有未来? 那些年,历史上留下浓重一笔的黑客们 林敏博士:透过设计看三星手机帝国崛起 OpenFeint血泪史:我们是如何被苹果逼死的 或免费升级:微软2013年推Windows Blue系统 取经:《捕鱼达人2》每月捞金160万美元的秘密 AWS推数据仓库服务Redshift 价格仅是Teradata IBM Oracle的十分之一 美国开展数据中心整合计划 简化政府IT运营 阿里巴巴数据交换平台——集大成于一身 怎样设置权限。 很简单的一个关于在文本框中换行的问题 急求VB+sqlserver开发学生档案管理方面的论文。高分(500) 还是多表问题 只要用连续打印发票时,第一张正确,第二张就不正常,我调了不是走多了就是走少了第三张一样的。 请问,ConnectionString 属性尚未初始化? 爱上一朵有主之花,郁闷ing,请各位出出注意。 为何我没法将贴子发出去?! 爱上一朵有主之花,郁闷ing,请各位出出注意。 请问全局对象为什么先赋值为NULL? 急急急急!!急死我了!大哥们帮帮忙,打印不正确走纸问题! 硬汉对照:一位计算机大师,LISP语言的创造者之人生感悟。看者玩呗。[zt] 爱上一朵有主之花,郁闷ing,请各位出出注意。 请看这段JDBC代码 ./ 是什么意思? 如何把WEB Method指定为用GET方法传递常数? 像MSN那种有邮件时就提示的那个小窗口要怎么做? 用什么API函数可以实现big5转换为gb 关于文件上传问题,大家都使用htmlcontrols.htminputfile控件吗? 各位大虾,关于扫描仪的错误2800:0000是指什么错误?急!!! 请问如何在载入页面前,跳出一个询问用户名和密码的窗口,然后验证用户身份? MSsqlserver 意外终止服务 www服务器过一段时间就停止服务? resin 中jsp文件无法显示图片,怎么回事? 请教思归!!asp.net中弹出对话框的问题 debug命令f怎么用呀? 笔记本电池,能外挂吗?~~~~ 工具欄的顯示應算較專業的問題 寻求共同创业的伙伴! COM+组件远程调用问题 如何才能把计算稿保存下来? 急。chr 与ord的运用! 为什么当我在dreamweaver里把表格的单元格宽度设定为像素了,可当我的字符串超过它的宽度,它不换行?而是拉长我的单元格 使用delphi第三方控件出现的问题 用什么函数把int转成nvarchar 关于上网的问题 关于图片的循环移动问题 寻求共同创业的伙伴! 关于Keil C51的编译问题 谁有《 Inside The C++ Object Model》英文版电子版 请教《深入浅出MFC》中有关“动态创建”的一个问题。 图像缩放和居中显示的问题 请教如何用DDraw实现屏幕随鼠标移动而滚动,就象星际中的地图比屏幕大,但可以滚动显示。 一点问题,劳驾各位高手啦。。谢谢!!! 一个双向链表得问提求救啊 截获、修改本地程序通过socket发出的包的问题 请教DDraw资源网? 可不可以把这两个合并成一句查询语句呀 问一下IDirect3DDevice8::SetTransform第一个参数的问题 如何把一个窗体放进动态链接库中? 集合Set 和 数组Array 的问题 形容气势雄伟,不同凡响的词语(最好写成语) 质量为2千克的物体从静止开始自由下落,不计空气阻力,在3秒末重力对物体做功的瞬时功率是:A150WB300WC60WD600W 春天的一个夜晚,一为久别家园的人,望者皎洁的月光不禁想起了家乡于是吟起诗来( )快 鲸的繁殖过程是怎样的? 什么是瞬时功率 工地上的沙子比水泥多65吨,用了一周后余下的数量相同.水泥还剩下4/5,用去沙子80吨,剩下多少吨水泥?答对此题者奖励500积分! 普通的降落伞正常在多高打开,最低的打开高度是多少?是不是和打开伞时的下落速度有关?还有,在17楼顶直接打开降落伞跳下去会死吗 关于物理功率的瞬时功率?从高处以40m/s^2的初速度平抛一重为10N的物体,物体在空中运动3S落地,不计空气阻力,则物体落地时的瞬时功率为 g=10m/s^2 强氧化剂像浓硫酸可以把碳粉氧化为二氧化碳,那么一定生成像co2这样的氧化物吗? 井水含有碱与小苏打的碱一样吗 虽然没有规定行号或列号写在前面,但已知点A的位置(a,b)是唯一确定的,那么a和b的大小关系是——科学:在寒冷环境下,动物的代谢速度加大的原因是—— ,其调节方式为—— .第二个问题是 乙稀能否被浓硫酸氧化成二氧化碳 在CorelDRAW怎么通过节点改变图像形状 将乙烯与O2以1:5的物质的量之比混合,常温常压下取这种混合气体a L,用电火花引燃后,恢复到原来的状态时,混合气体的体积是()?A aLB a/3 LC 2a/3 LD a/2 L应该怎么做?请写出详细过程及思路,谢谢 人怎样活着才有意义呀?2012就要到啦,我们人类还能坚持多久?什么时候上火星为什么国家一直不通知呢?请尽快回答我 含碱高的井水做豆腐有白浆是什么原因 将乙烯与氧气以1∶5的物质的量混合,120℃时取这种混合气体a L ,电火花引然后,恢复到原温度,混合气体的体积是:( )A.a/2 L B.a/3 L C.2a/3 L D.a L 关于普通话的作文 井水烧80度会结碱 我想热水锅炉用井水.有怕对锅炉有危险 有什么新鲜的方法探究物质溶解在水中是吸热还是放热 我与普通话的作文 鲸是怎样繁殖的 物质在水中电离的时候是放热还是吸热? 普通话的作文!马上要! 鲸的繁殖期在几月? 阀门中有个单位VA是什么意思啊 谁有“我与普通话的作文”? 一滴水多重,有1g吗一滴水有没有一克 电器上va代表什么单位?那么1200va的最高可以带动多少瓦? 金鱼的英语拼读怎么拼? “一滴水,承载着无比的重量;----”阅读理解,哪有?帮帮忙 现在环保的购物袋成本多少?请问大家现在哪种购物袋最环保的? 现在工地有水泥7吨 沙子10吨 石子20吨 如果把石子全部用完 水泥够不够 如果不够缺多少 如果足够 剩余多少 什么是交易行号 如农行交易行号1168是哪个地方的农业银行?如农行交易行号1168是哪个地方的农业银行?怎么查这些交易行号的地方银行呢? 哪儿有做塑料购物袋的厂家呀不要全新料,就是市场上买菜用的那种 一滴水从天上掉下来什么情况下能把人砸死 如何改变Excel列标行号大小不小心将Excel列标和行号变得很大,请问要怎么才能调回来?列表就是A.B.C.D.行号就是1.2.3.4.改变显示比例也无法灰复正常.只有列标和行号很大,其它一切正常,我的比便 春天的一个夜晚,一位久别家乡的人,望着皎洁的月光,不禁想起家乡,于是吟起来诗不是静夜诗春风又绿将难耐 听报告 用英语怎么说?要用report的。 对excel不熟悉,遇到一个问题,行号不变列号有规律地变化,两个用什么符号粘合来产生一个新的地址.行号不变列号有规律地变化,两个用什么符号粘合来产生一个新的地址,用了一起符号,老是提 春天的一个夜晚,一位久别家乡的人,望着皎洁的月光不仅想起了月光,于是吟起诗来〔…………〕— 做一个有关宠物的报告用英语怎么说 电子表格中的行号和列号是什么? 听汇报用英语怎说 高空700米掉下 黄豆大的石头能砸死人吗是不和子弹一样 又是来自某灯具说明书的句子.A minimun distance from the surface being illuminated must be maintained(fire risk).我的翻译是:哪怕灯具表面有极小距离的漏光都需要被修理.(火灾危险)不过自我感觉自己的 春天的一个夜晚,一个就别家乡的人,望着皎洁的月光不禁想起了家乡,于是便吟起诗来( ) 世界上哪个国家的人活的岁数最大? 关于灯具---这句是什么意思呢?Lamps included,NOT installed but packed in poly bag.请翻译以上句子,请注意NOT installed的翻译. 春天的一个夜晚,一位久别家乡的人,望着皎洁的月光不禁想起了家乡,于是吟起诗来 世界上有那些行星?比如说有矮行星、金星等一些行星. “健康装修健康灯(灯具)”说说这句广告语的创意.不要重复的,好的话有悬赏, 春天的一个夜晚,一位久别家乡的人,望着皎洁的人月光不禁想起了家乡,于是吟起诗 做凉糕没有石灰水用什么能代替 配置一定物质量浓度的碳酸钠溶液若称碳酸钠是所用砝码已生锈,这对所配溶液的浓度有何影响 英语翻译Dear Miss Huang Qiu,We would like to inform you that the following items belows are faulty OR damaged OR u sent wrong item:-1.MD7123A-1,the opal glass is too small,it should be the same size as MD7385 glass,QTY:18 PCS2.MX8292 = 12 pcs,829 美的空调51变频出现PR是什么意思? 戴眼镜能看显微镜吗? 句子说明了什么?“蓝天、白云、绿草”是这个国家最吸引人的地方,满眼的绿色,触手可及的朵朵白云,让人仿佛置身在童话的国度. 当代著名的物理学家之一斯帝芬.霍金,著有一本影响了全世界成千上万人的书.这本书是—— 世界前政要感受中共改革雄心老牌肌肉男星上演\"金蝉脱壳\"史泰全国物理竞赛浙江拿下7块金牌 杭二中新消法:回避\"知假买假\" \"假习近平鼓励企业加强研发不断创新西湖剪影(图)习近平“现身”中南大学 大学生欢呼雀孙杨因无证驾驶被处罚款2000元并行温州被砍男童收到爱心款超35万 家人叙政府称:日内瓦会议旨在让总统下台则16秒26 温州17岁高二女生单手玩斯诺登谴责美英情报机构为“最恶劣的侵韩总统朴槿惠对朝言论引猜测 称可与金宁波轨道交通:逃票将纳入个人信用信息印度雄心勃勃探火星 英媒议论“与中国中印时隔5年再次联合军演 更多表达政浙医二院对抗菌药动真格 去年有医生被杭州正研究建设“城市风道” 引风进城李克强看望黑龙江受灾群众:不让一个群哥伦比亚一辆巴士坠崖 致13人死亡62013浙江·杭州国际人才交流与合作湖北5小镇 入选中国特色小镇“毛主席在我家窑洞吃荞麦面”武大123周年 123对校友办集体婚费拉拉4连胜豪取“保级战”错峰游实惠小德告负无缘决赛○中超第27轮红唇“兵马俑”续:陕西3家3A级景区25岁独子不满多次逼婚 趁熟睡将父母张献忠沉银案部分涉案者获缓刑回家 村“张献忠沉银”引村民狂热:六旬大爷冬学校食堂将猪饲料当食材?官方回应:合科学洗手和咳嗽礼仪你知道吗?首个“太空国家”全球招募10万公民学校给学生吃猪食?3人被拘留6人被停我国首批特色小镇陕西有5个就业困难的“4050”人员即日起可申大学生借160万后死亡 上百名债主都力争办一场永不落幕的艺术节全国优秀舞台艺术作品全方位展示3男子酱油兑水当柴油卖
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘