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

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

编程语言与工具专题论坛:各类编程语言使用体会分享 淘宝、腾讯、豆瓣、支付宝、网易专家热议大数据分析与BI实战 “创新或灭亡”:Google的80/20只是转移视线的说辞罢了 自动化编排,配合SDN的iMC V7更加开放 [回顾]比尔·盖茨传奇的前半生 IT基础设施与运维论坛:IT基础设施及运维经验分享 记华为HCC2013 Day1:发力高端存储 HCC 2013虚拟化论坛:虚拟化未来发展方向 Windows 8操作系统市场份额增至7.41% Windows 7仍最受欢迎 【开源专访】Sea.js创始人玉伯的前端开发之路 SDCC 2013:阿里周宝方谈“去IOE”战略及实施 百度和高德:最后谁是地图的王者? 【CTO论道】瑞智和康CEO陶建辉:软硬结合是消费电子新潮流 10大高效率原型设计工具 JIRA与敏捷:李小龙教给我们的敏捷开发之道 百度开放云:Light Up The World,与开发者共享云未来 有胆你就来!11个在线编码大赛 CTO如何避免决策失控:第一步-定义角色 后机械硬盘时代,那些引领风骚的闪存初创公司 致远文杰:传统企业如何实现移动化转型? 记华为HCC2013 Day2:SDN开放编程系统OPS打造生态圈 HCC2013:华为FusionCube融合至简,性能至优 已确认Stephen Elop候选微软下任CEO 英语对于软件开发者来说到底有多重要? SDCC 2013中国软件开发者大会成功落幕 新浪微博宋琦:PHP在微博优化中的“大显身手” 8月份浏览器份额:IE浏览器PC端出现反弹 移动端跌出前五 如何让Ruby项目速度提升10倍 跨平台进行到底:Facebook发布Unity SDK 云薪资管理初创公司ZenPayroll:年处理薪资超1亿美元,获多位知名CEO力挺 Twitter开源Summingbird:近原生编码下整合批处理与流处理 为何在BCB中用TDBimage 存取Mysql数据库的图象时出错:invalid blob size ? 如何实现全自动拔号(无用户交互) 请看这个sql语句,怎么错了? 请问,如何设置 键盘开机呀? 关于光驱 如何获取delphi中dbgrid的单元格的内容 问题征解,关于一个智力题的程序解法。 sos!!求救!!!java运行时环境设置的初级问题!各位大侠帮忙了!!!! :-(( 關于delphi6的ActionMainMenuBar组件和ActionToolBar组件 的菜鳥級問題?? 李维的电子商务篇的第二章的例子没法运行,这是为何? 谁能告诉我学VC的步骤和教材啊,还会加分啊 如何将一个可以滚动的窗口的全部内容转换为BMP保存起来(如:IE)?(提供线索就有分)欢迎参与成果供享!!! 请教关于VsPrint Oracle8i Enterprise Manager Release 2.1 相当于ORACLE8.1.几啊? 使用ListView如何操作数据 ★★★简单问题送100分★★★:如何打印框架容器里的的全部内容,包括mschart图表,label,combox等? 我的DW里加入FLASH特效时为什么中文会变成乱码?我给分的............ 我感到天昏地暗、日月无光、前途渺茫、无心睡眠、精神恍惚、双目痴呆相恋8年准备结婚的女友突然和别人结婚了!我受不了了!我快疯了! 请教有关IE5带的ActiveX控件Dhtmled.ocx的98下安装问题 程序员与高级程序员到底那个好过 关于 delphi的一点东东 access一个日期时间字段是短格式的,用什么SQL语句改成长格式的? 怎样才能在主页中显示自己的qq是否在线?????? 有没有平面按钮控件 Interdev6.0 IDE 环境下无法使用MSDN access一个日期时间字段是短格式的,用什么SQL语句改成长格式的?? 大家来帮帮我想想?应该怎么样来删除呢!!!! 各位用VB.net的兄弟,请问你们使得是 Beta1 还是 Beta2 ? 迷周星弛的请来签名啊! 如何操纵RichTextEdit控件??? 我得到GIF图像的这一点的值,怎样得到它的正确的RGB值? 我想请问在CHTML(compact html)中如何对页面进行刷新。 各位老大,你们是如何找到工作的? 在VB.net中,如何实现VB6中的 set A=createobject("XXXX.XXXX") 诸位大虾救命,如何在EDIT控件中判断DBCS字符 !!求救!!对时!!! 在VC中使用Crystal report 8的问题 如何编写c程序自动对GIF图片设置大小 请教:鼠标在windows桌面上按键是否会引发某个事件? 查看DLL的输出函数 menu的问题 web的组件由什么来编写? 嵌入式数据窗口,怎样可以动态往里插数据窗口??? 在DELPHI中如何调用NETBIOS的API函数 AddNew 怎么用?- 怎么办那,啊? 问题标题前的绿色的对号是什么意思?是不是表示问题已经解决? 怎么学VC啊,菜鸟的菜菜的问题啊。 关于打印比较 提取汉字的拼音 四级挂了,给分,气死了 当x*二分之一=y*五分之二时;y=( ) 求函数f(x)=3x^2-5x+2.x属于[0,2]的值域? 5除=5分之1解方程 4.2X除1.6—14=0.175解方程 (-五分之二x的2次方)的2次方·5y的2次方-(-二分之一x的2次方y)的2次方 函数y=(x^2-4x-5)/(x^2-3x-4)的值域是?.. 解方程4^x-2^(x+2)-12=0 二分之一X÷三分之二=五分之二求x是多少 +求函数y=(5x-1)/(4x+2)x属于【-3,-1】的值域. 5/1X-4/1X=40 怎么解(方程) (2x-3)的平方-(3x-2)的平方=0 x除以十二分之五,等于五分之三,x等于多少 求函数y=(x^2-4x+5)/(x^2-3x-4)的值域 (3x-2)(2x+3)-(x-1)的平方 已知x/x²-3x+1=2求x²/x的4次方+x²+1的值 3x的平方减5x减2分之1减3的差加2x方的和 3x平方+2x-2=3 已知X²-3X+1=0,求X的四次方+X的-4次方得值,X≠0 求函数y=3x+1/x-2的值域 2X平方+6X-1=3 X平方+3X-2=? 若x²-3x+1=0,则x²/x四次方+x²+1的值为___ 求函数Y=3x/(3x+1)的值域. 一个整式A减去-3x+2,再加x的二次方-x-7后得5x的二次方-2x-5,求这个整式A x+x分之一=2 求分式x的4次方—x的2次方+1分之3x的2次方的值 1.求函数 y=(1/3)^(-x^2+5x)的值域 2.函数y=(2/5)^(根号下7-3x+21.求函数 y=(1/3)^(-x^2+5x)的值域2.函数y=(2/5)^(根号下7-3x+2x方) 一个整式A减去—3x 2,再加x的平方—X—7后得到5x的平方—2x—5,求这个整式A. 使分式3x+6/x平方-4的值为整数的整数x的值有几个? 求函数的值域y=3x+2/x-1 2x的平方+5x+2 2x的平方-5x-3 2x的平方-3x-20 2x的平方+5x-7 要使分式3x+4/x-1的值为整数的正整数x= 已知函数f(x)=lg(2+x)+lg(2-x) 1.函数g(x)=[10^f(x)]+3x,求函数g(x)的值域.2.若不等式f(x)>m有解.求实数m的取值范围 280÷4X=14解方程, x为整数,且分式3x-1/x+3的值也为整数,求满足要求的所有x的和 若x 15分之4x(2分之1加O.8除以7分之8)等于几 若x的平方+3x+1=0,试求分式x的平方+1/x的平方 函数f(x)=(3x-1)/(3x+1)的值域最说出怎么算的注:是3的x次方 f(x)=(3^x-1)/(3^x+1) 二楼的SNOWHORSE70121,u为什么不等于1? (3x-1)除以3=1-(4x-1)除以6 如果x为整数,且分式(x的平方-1)分之(2x+2)的值为正整数,那么x的值为 6X的平方减5X等于2,用工式方法解 1除以3x-6=3除以4x-8 已知X为整数,且分式2X+2X\X的平方-1的值 解方程3分之2X-4分之1X=8分之5 20(X+5)=200 5y+1/6=9y+1/8-1-y/3 使分式(x+1)的3次方分之2X的平方-4X+2的值为整数的X的整数值有哪些 解方程:【x-20-12】乘4分之1=【x+12】乘16分之3 解下列一元一次方程;(5y)/6=(9y+1)/8×24-(1-y)×24 当x不等于零时,函数 y=3x+1/2x 的值域是 A.[-√6,√6]B.(-∞,-√6]∪(√6,+∞)C.(-∞,-√6]∪[√6,+∞) 解方程12分之x-20分之2x-1=3分之x+4-1时方程两边都乘 如果x等于5y(x、y均不等于0)那么x和y成什么比例,x:y等于什么比什么 1)y=x^2+3x-4:x^2+x+2 (2)y=x^2-5x+4:x^2-2x-8,x大于等于2小于等于3.求值域, 解方程x^3-13x-12=0 9y等于5y+120这个方程是多少 y=-x+1/2x-3(-2 15(x-12)-13x=1020 (5Y+1)/6=(9Y+1)/8-(1-Y)/3 (1)y=x^2+3x-4:x^2+x+2 (2)y=x^2-5x+4:x^2-2x-8,x大于等于2小于等于3.求值域 解方程:x-16分之3x=27.2 {11x-9y=12,-4x+3y=-5y,解方程 函数f(x)=3x的平方-5x+2.x∈[0,2]的值域是可以不用配方法求吗 有别的方法求出来吗? 解方程:2分之1:3分之1=4分之1:x . 3:x=9:27 . 6:25分之9=5分之4:x .x:12=4.2:3.5.有4题,要过程.
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn