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

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

【PPT集萃】十位一线专家分享Spark现状与未来(三) 万元奖品等你拿!2014创客118新年大Party! Firefox OS的2013回顾和2014展望 Strom8 CEO:搞好手游开发,合伙人很重要 2013年Q4全球PC出货量同比下滑6.9% 已连续下滑七个季度 一周消息树:2013年十大产品、图书、公司盘点 专访Wunderlist主设计师Jan Martin:永远不要盲目跟风流行趋势 研发周报:超实用的JavaScript技巧及最佳实践 2013最吃香的技能:Java称霸、Android势头正猛 移动周报:最火原型设计工具盘点 “京东电商云”起航,零售企业及品牌商是重点 教育乃立国之本:教育类开源项目大汇集 Hugo Barra首度谈离开谷歌后在中国工作的感受 对中国赞不绝口 母婴行业最早试水者 优谈宝宝借助轻应用全面布局移动产品线 腾讯云平台部总经理纪顺友:微云将彻底迈过文件传输的门槛 豌豆“荚”油!B轮融资1.2亿美元的豌豆荚 2013年终盘点:10款最精巧的硬件开发板 SquareWear:可替代Lilypad Arduino的开发板 开放数据:2014年最热门的竞争领域 IE11虚拟机免费面向广大开发者 九城搭建的一个以Hadoop为基础的大数据平台 Windows 8复杂性的代价到底有多大? 在发布前,第一代iPhone其实并不完善 市场占有率调查:iOS 7秒杀Android 4.4 AWS会赢、OpenStack会消亡、Connected Cars可防僵尸攻击 谷歌以32亿美金收购iPod之父的创业公司Nest 物联网时代来临 微软2014,有你期待的吗? 映趣科技发布inWatch Z/inWatch X 后者采用全彩透明柔性屏 程序员没有天才:暴风影音首席架构师鲍金龙访谈 开放式创新改变世界——OpenStack生态系统将重新洗牌 Java 8最终发布日期敲定,即使有bug也要发布 我要移动listbox中的值!! 急问Flash... 对于高手很easy问题! 这个语句错在哪里:能不能用字符去逐个的初始化一个字符串 安装SQL时没有选择默认,而是自己新建一个实例,这样如何实现远程代码连接?? 急问Flash conning333(chen)来接分 webapps\ROOT\WEB-INF\web.xml的配置问题 如何清除WEBSPHERE的缓存?一个JSP文件总是无法更新,我重启WEBSPHERE也好,修改该JSP并重新保存也好,都是显示旧页面,真气人! 源代码分析 怎样在DW中制作垂直的线条????急 ! 急!在线等待!!!! 关于dir()的小问题, 这个问题已困惑我几天啦,均没人帮我解决真的好盼望呀 急问FLash 高分求教:一个DataGrid显示双DataTable!走过路过都有份! 怎样代码控制servers中excel的合并单元格?? google能找到我了,散分咯 急问Flash. ADOCE怎样访问excel数据表格? 请 ccmoon(IzuaL) 和 cloudchen(陈系上) 进来领分, 我该怎么做? 关于将输入字母转换为大写的问题! 谁给我解释这个sql语句! 怎么将sql server 6.x 的备份文件,恢复到sql server 7上 请教pb中有没有模式窗口和非模式窗口的概念?? 设备内容句柄在Delphi中有这个类吗?如何表示? hxzhappy(冰雨)快来接分 请问在contexMenu控件中show方法如何写 请问用VC,如何在WIN2000下连接一个SQL数据源? 入参与出参 关于国外发布的软件,可以使注册用户在线或取注册码! win2000下怎样建立代理服务器 有关DBGrid的问题。 在其他版看到一个很有意思的贴子“如果是你招聘人,你会不会招和自己技术,资历差不多的,甚至超过自己水平的?”欢迎大家讨论。 急!关于innerhtml的错误? hxzhappy(冰雨)快来接分 在线求助,急 请教各位,我的sybase的数据库的log设备(即syslogs表)最近增长很快,每天增长40多兆,如何解决??? 想做一个网络代理上网 c语言中三维数组的问题??? 求助:word文件加密后忘记密码如何打开原文件? 请教 : photoshop 中--highlight shadow midtone 提问,非高手勿入,打印的问题,100分,不够另加 关于oracle预留字作字段名的问题。 ● 求助,2000 Professional一登录就自动注销,怎么解决? 一个很棘手的问题? 谁给我解释这个JS函数 請高手幫改寫一段datagrid程序. (100分相送) (2)菜鸟问题!!容易拿分呀!! 如何在SQL SERVER上实现ORACLE中的package的功能 对windows编程,如何控制鼠标箭头阿 平行导线,同向电流,相互吸引.但不旋转是为什么?其中一根导线的磁场对自己的运动状态无影响吗?我知道一根导线的磁场,作用于另一根通电导线,使其有垂直指向第一根导线的安培力.但老师 在鲁宾孙漂游记中的“星期五”的的引号有什么作用 有人说:《格列佛游记》是对《鲁宾孙漂流记》的全面模仿 你是怎样看有人说:《格列佛游记》是对《鲁宾孙漂 在游泳池边向水底看去,感觉池水并不深,下水后才知道不是那么回事,试分析,为什么池水深度看起来比实际浅? 关于光的折射渔民架船在水里,眼前有一条鱼叉子已经在水里,问:是否按照在空气里一样操作,还是按照光的折射定率去叉? 我脸上的油抹到眼镜上就越擦越花,为什么?是什么油脂?怎么清理? 为什么浴室里的镜子被雾气蒸过后,怎么擦都是花的,象有油一样, 驻车叩马,以刀画地,大言数主之失 “吾言干车长弓”是什么意思? 能率热水器gq-1060fe是烧的天然气还是管道液化气,或者是管道液化气和天然气都可以使用的呢? 刘谦镜子里面的手怎么来的 男子假冒将军谎称中央领导女婿 诈骗超朝鲜在联大声称将继续发射卫星 抵制安日本创意小商品 别针收纳箱美共和党参议员计划推迟耶伦的美联储主美华裔家庭母子5人惨遭凶杀 凶手系孩西班牙巴塞罗那发生列车脱轨事故 造成美国旧金山湾区万圣节前多起驾车枪击 一名联合国维和人员在刚果(金)丧生安哥拉中国商会开讲中华礼仪墨西哥石油公司前三季度出现巨额亏损昆西·琼斯向杰克逊信托人索赔6080中国瑞士建交65周年:新苏黎世交响乐日内瓦时光之芯:瑞士制表文化之源中国瑞士建交65周年活动:吉他四重奏瑞士艺术家解构王家卫电影美学Alexandre Joly声音互动美比基尼大号女模成时尚杂志宠儿(组图台湾复兴航空坠机遇难者增至32人 1哈登27分全单打无队友助攻 麦帅竟没中国赴黎巴嫩维和医疗队为儿童体检义诊粮食局:粮食浪费惊人 存储加工等环节澳联储降息创新低 经济学家解读敲警钟
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘