# Instagram 提高了其应用程序的性能。 这是如何做。 > 原文： [http://highscalability.com/blog/2014/9/29/instagram-improved-their-apps-performance-heres-how.html](http://highscalability.com/blog/2014/9/29/instagram-improved-their-apps-performance-heres-how.html)  [平面设计](http://en.wikipedia.org/wiki/Flat_UI_Design)只是另一张漂亮的面孔，还是作为 UI 革命掩盖的巨大性能突破？ 事实证明，扁平化设计是赢得冷战的坚石。 Instagram 工程师 [Tyler Kieft](http://tylerkieft.com/) 在他在 [@scale 会议](http://atscaleconference.com/)上发表的简短且内容丰富的演讲中，对上述内容进行了详尽的解释：[在典型 Android](https://www.youtube.com/watch?v=GHTO2WKDO6I#t=8927) 上的 Instagram ]。 该演讲是[系列演讲](/blog/2014/9/22/how-facebook-makes-mobile-work-at-scale-for-all-phones-on-al.html)的一部分，该演讲由 Facebook 进行，主题是如何为全球范围内的移动应用程序设计现实，与美国相比，这种手机的速度较慢，屏幕较小，网络速度较慢。 。 为典型的手机而不是高端手机进行设计需要 Instagram 团队深入思考其设计。 泰勒（Tyler）演讲的启示之一是**向平面设计**的转移极大地提高了应用程序的美观性，可用性和实用性，并且极大地提高了性能。 这真是一个惊喜。 我只是将平面设计视为思考如何构建漂亮的 UI 的一种方式。 傻我 感谢泰勒（Tyler）如此清晰，有力地解释了平面设计的好处，并使用 Instagram 作为可能的典范。 平面设计是反拟态的，它是数字化本地人，避免了对现实外观的痴迷，采用简单的元素，简单的版式，平面颜色和简单的设计。 使用平面设计，Instagram 可以从冷启动时间缩短 120 毫秒。 它还能够将显示提要屏幕所需的资产数量从 29 个减少到 8 个。 同时，使应用程序更美观，更易用，并更加关注不同手机尺寸的内容。 平面设计如何使这一切成为可能？ ## 转向平面设计 * Instagram 改写了他们的 UI，以专注于 Android 上提供的各种 UI 的更好性能。 * Instagram 于 2012 年在 Android 上发布时，它是由 3 个人在大约 4 个月内建成的。 两名工程师和一名设计师。 Android 版本使用与 iOS 版本相同的设计。 * 该设计使用了甜美的渐变色和许多 UI 元素。 * 向 iOS7 过渡到平面设计，使产品变得更加简单和美观。 没有更多的渐变。 拿出箱子。 没有更多的阴影。 * 他们从适应平面设计**的经验中学到了**： * **平面设计是减少**，更快开发代码和更快交付产品的机会。 这对开发人员来说很棒。 * **平面设计的性能更高**。 开发人员不仅做得更少，而且手机在显示 UI 方面也做得更少。 * 使用从 iOS7 平面设计重新设计中学到的新 Android 版本的目标： * **使其平坦，使其更快**。 这不是重写。 导航模式没有改变。 * **注意屏幕空间**。 重新浏览每个屏幕，并弄清楚如何更好地适应所有屏幕尺寸。 * **变得漂亮**。 这是他们在 Instagram 上所做的一切的基础。 * 总体效果是极大的简化。 进行了哪些更改？ * **将所有内容从 Chrome** 中删除。 拿出所有渐变和光泽按钮。 去勾勒形状而不是图标的渐变按钮。 剩下的是纯色和扁平形状。 希望用户界面淡入背景。 * **拿出注释图标**，使注释全屏显示，为注释文本留出更多空间。 使内容在屏幕上脱颖而出。 用户界面越少，使用小屏幕的人就有更多的空间阅读文本。 * **分叉了用于拍照的手机布局**。 在小型电话上，他们使用在屏幕顶部带有动作按钮的设计。 对于较大的屏幕，所有命令都在底部。 * **删除了整个应用程序不必要的 UI，以使内容更加集中**。 搜索屏幕上的三层铬减少到两层。 这在小型电话上腾出了很多空间。 由于三星 Galaxy 的按钮纤薄，采用扁平化设计很容易以编程方式进行操作，从而为内容腾出了很多空间。 * 请注意，演讲中有很多关于不同设计的精美图片，因此非常值得观看之前和之后的图片。 ## 为什么要进行平面设计？ * **使用资产着色**运送更少的资产。 这意味着 APK 的大小较小，这在小型网络上非常有用。 魔术是**资产着色** **（**我以前从未听说过）。 [资产着色](http://blog.danlew.net/2014/08/18/fast-android-asset-theming-with-colorfilter/)表示资产（在这种情况下为图像）可以通过程序进行着色。 例如，可以通过编程方式将灰色的心脏染成红色。 资产着色意味着需要运输的资产更少。 传统上，每种按钮状态（按下，未按下，选择等）都需要单独的图像。通过着色，可以将不同状态的所有图像都不再需要运送了。 仅需要图像，并且可以设置不同的状态。 * **加载更少的资产**。 这意味着 UI 显示速度更快，并且用于存储位图的内存更少。 必须从闪存中读取每个需要显示的资产，并将其解码为位图。 完成的次数越少，应用程序变得越快。 * **更快的迭代时间**。 如果您要更改颜色或进行新开发，则不再需要设计师。 只需更改代码并重新编译即可。 * 结果： * **在进行平面设计之前，需要 29 种不同的资源来显示供稿屏幕**。 平面设计后， **8 个资产**显示同一页面。 仅需要形状即可显示图标和徽标。 其他所有内容均以代码形式绘制为纯色和矩形。 仅仅是从所有设备的冷启动时间起将**缩短了 120ms** 。 * **采用扁平化设计，整个应用变得更快**。 每个屏幕的工作量都减少了。 更少的资产被加载，整个应用变得更加生气。 评论中的用户评论了应用程序在重新设计后的感觉。 人们真的很喜欢它。 人们赞赏与平台匹配的设计所带来的速度提升。 ## 缩短冷启动时间 * 冷启动时间是应用程序启动并变得响应所需的时间。 从点击图标到在应用程序周围单击，它均有效。 我们的目标是让**应用能够超快速地启动**，以便使用低端手机的用户拥有丰富的体验。 * 几年前，在低端 Galaxy Y 上，Instagram 的启动时间为 3 秒。 在高端 Galaxy S5 上，启动时间为 750 毫秒。 * 现在，在 Galaxy Y 上，Instagram 需要 1.5 秒才能启动。 在 Galaxy S5 上，需要花费 **400 毫秒**。 * 怎么样？ （除去资产） * **对应用程序**进行配置。 * 找出导致应用速度下降的原因。 * 在 Android 上，您可以使用**方法跟踪**，并且可以在代码中放置计时语句。 方法跟踪数较小的方法。 **时序声明**是墙上时钟时间，而不是机器时间。 同时使用这两种功能可以让您对缓慢的情况有良好的感觉。 * **解决最慢的问题**。 * **延迟加载**。 从冷启动路径中删除项目。 * **重写慢速代码**。 例如，慢速 JSON 解析代码被重写为更快。 * **延迟到后台线程**。 不要在 UI 线程中执行操作，而可以在后台执行。 * **迭代**。 再次开始配置文件步骤。 * **应用范围内的单身人士发现速度很慢**。 通过计时发现。 * 在应用启动之前，已经启动了许多**重单例**：HTTP 客户端，Cookie 存储，图像缓存，视频缓存。 确实不需要这些东西即可向用户显示用户界面。 它们可以并行加载到后台。 * **两部分延迟加载** * 想要**在后台**中初始化单例，但程序员仍将其视为始终可用于该应用的单例。 不想让程序员必须检查单例是否可用，因为那不是单例。 * **在 UI 线程**上创建足够的对象，以便公共 API 完全起作用，并且可供程序员使用。 将艰苦的工作推迟到后台线程。 对于高速缓存，这意味着打开和读取磁盘存储。 对于客户端，证书将在后台加载。 Cookies 在后台反序列化和解码。 通过这些更改，UI 可以更快地出现在屏幕上。 * **Newsview 运行缓慢**。 通过方法跟踪找到。 * 新闻视图最初显示为网络视图，其中显示了您的所有喜欢和评论。 需要在启动时加载它以尽快向用户显示其数据。 * 问题是无法控制 Webview。 它具有自己的堆栈和缓存系统。 **将其转换为本地**。 花了 2-4 周的时间。 原始转换后，冷启动时间将**降低了 30％**。 ## 得到教训 * **可以实现快速的冷启动时间**。 如果他们很快，他们甚至会变得更快。 剖析，修复，迭代。 * **谨慎使用像素**。 查看每个屏幕，查看不需要的内容。 与美国相比，其他国家/地区的用户使用的手机要小得多。 * 移动电话喜欢简单的设计，移动开发人员也喜欢。 这要容易得多，也要快得多。 ## 相关文章 * [在 Reddit 上](http://www.reddit.com/r/programming/comments/2iqfr7/how_instagram_improves_their_apps_performance/) * [Facebook 斥资 10 亿美元收购 Instagram 架构](http://highscalability.com/blog/2012/4/9/the-instagram-architecture-facebook-bought-for-a-cool-billio.html) * [Instagram 体系结构更新：Instagram 有何新功能？](http://highscalability.com/blog/2012/4/16/instagram-architecture-update-whats-new-with-instagram.html) * [有人可以表达 Google 的材料设计与苹果公司的平面设计吗？](http://www.quora.com/Can-someone-articulate-Googles-material-design-vs-Apples-flat-design) 我发现有趣的是，这种平面设计运动是由 Microsoft 与 Windows Phone 一起发起的。 总是会有更多的高档用户界面（如游戏中），但从总体上看，功能正在取代形式。 我喜欢那个。 它以功能为基础，对我有很多帮助。 直到观看了这个出色的演示，我才知道平面设计是什么。 现在，在许多不同的层次上它变得更加有意义。 正如文章所提出的那样，功能必须战胜视觉障碍。 但是作为仍然使用 iOS6.1.3 的匕首，我必须要求您承认，自 iOS7 以来，奇怪而与众不同的选择令人困惑：白色文本的鲜绿色背景，窄字体，细腻的灰色阴影以及总体而言太多了 屏幕上呈鲜亮的白色，而对于发现此效果实际上令人痛苦的用户则无能为力。 而且，即使使用 iOS8.0.2，提供的修改也是如此之小，以至于令人怀疑。 好吧，渐变对处理程序征税-如果处理器不能比程序员领先一步，就消除渐变。 但是至少要为用户提供背景颜色选项。 给一些真实的对比度控制。 为需要的人提供一些粗细的字体。 我们生活在一个这样的世界中，所有用户都将以正确的视线来到餐桌上，这一假设和期望越来越普遍。 但这是一个精英主义的假设。 使它精简，使其快速，但不要把我们中的很多人甩在后面。