您的位置: 首页  >  文章  >  谁说优美动画和高效性能不可两全其美？

谁说优美动画和高效性能不可两全其美？

分类: 文章 • 2025-04-14 21:31:34

谁说优美动画和高效性能不可两全其美？

作者 / Neil Shankar, Designer, Creative Engineering, Google

去年，Google Chrome 浏览器迎来了 10 岁生日，这是个重大的里程碑。我的工作涉及 UI 和视觉设计以及内容策略，并最终提升 Chrome 的市场表现。2018 年 9 月，我的团队 (设计开发 / Chrome 增长部门) 对 Chrome 主页进行了重新设计，以庆祝这个重大里程碑。
 
在进行重新设计时，我们将大部分重点聚焦在产品教育上: 让用户知道 Chrome 的优良之处。Chrome 是一款快速而强大的浏览器，其工作原理的各种细节本质上是非常技术的。但是用户并不需要计算机科学学位才能了解 Chrome 的妙处。因此，我与 Laura Polkus、MelissaCastaño 和 Lydia Weber 合作，为 Chrome 创建了一种新的视觉语言，旨在吸引所有用户，包括那些对技术不太熟悉的用户。

我们的视觉框架基于几何形状和 Google 核心品牌的色调。我们以 Chrome 产品团队、Google 硬件团队和内部视觉设计指南为基础，为 Chrome 打造了一套个性化的视觉风格，其中包含一系列产品介绍页面的动画。每个动画都旨在表达一个功能，从而用最少的文字简洁地传达出 Chrome 的优势所在。

谁说优美动画和高效性能不可两全其美？谁说优美动画和高效性能不可两全其美？

谁说优美动画和高效性能不可两全其美？谁说优美动画和高效性能不可两全其美？


第 1 步: Sketch

动画在动起来之前，都是一张张静态图，所以首先我在 Sketch 里绘制了每一个动画的设计稿。像许多人一样，我通常使用 Illustrator 进行图形设计，使用 Sketch 进行 UI 设计。但是因为 Sketch 非常适合扁平的、几何风格明显的矢量绘制，所以这次我是直接在 Sketch 里绘制的。我非常刻意地避免使用 Illustrator，仅在某些复杂的矢量布尔运算时才打开它。

我还给每一张设计稿保存了一份完全静态的版本 (PNG 格式)，作为无法渲染动画时的备选图案。在有些旧版浏览器上，或者用户自己选择关闭动画以节省流量的时候，提供一份静态图作为备选是必要的。

谁说优美动画和高效性能不可两全其美？

△ Sketch 设计稿

第 2 步: Sketch2AE

然后我使用 Sketch2AE (AEUX 的前身) 将所有 Sketch 图层导入 After Effects。在 AE 中，我使用了很多 precomp 和 null 对象。我不是一次将所有图层复制到 AE 中，而是使用 Sketch2AE 逐个图层组地复制，这样可以轻松隔离我想要制作动效的组件，而无需手动拖拽整理过长的图层列表。
谁说优美动画和高效性能不可两全其美？
  • AEUX
    https://aeux.io

第 3 步: After Effects

在 After Effects 中，我开始逐一制作每一个动画 (各 5 秒)，每个动画讲述一个 Chrome 功能。我使用 Material 动效指南来确保动画切换平滑，并保持风格和速度的统一。我还使用了 Google 的品牌色绘制出彩色线条的动画，并将这个线条整合到各个动画中，以表达各个状态之间的连续性。

谁说优美动画和高效性能不可两全其美？

第 4 步: Bodymovin

然后我在 After Effects 中使用 Bodymovin 插件为每个动画生成一个 JSON 文件。每个 JSON 文件都包含整个动画需要用到的代码。当然，我也将每个动画导出了一个 MOV 视频，这个后面会再解释原因。
谁说优美动画和高效性能不可两全其美？
  • Bodymovin
    https://aescripts.com/bodymovin/

第 5 步: Lottie

我将 JSON 文件交给我们的视觉开发人员，他们使用 Lottie (一个 Javascript 库) 为每个动画生成一个 SVG。SVG 本身可以记录时间轴指令等信息，而且可以直接嵌入 HTML 里，这意味着网页不需要额外发起网络请求来下载大体积的 GIF 或者视频文件。

谁说优美动画和高效性能不可两全其美？

△ SVG 本身已经包含在 HTML 文件里，不需要额外下载
我们的开发人员还编写了在滚动页面时触发动效播放的机制，并在点击动画时也会重新开始播放。这比粗暴地无限循环这些动画的体验更好，能给用户带来更强的控制感。

如果您没有编程经验，可以使用 LottieFiles 等在线平台上传 JSON 文件并预览动画。

  • Lottie

    https://github.com/airbnb/lottie-web

  • LottieFiles

    https://lottiefiles.com/

第 6 步: Photoshop

在制作演示幻灯片时，我喜欢使用 GIF。这样我就可以轻松地在整个设计流程里快速展示工作成果并获得反馈。为此，我将之前使用 After Effects 生成的 MOV 导入进 Photoshop。然后我使用 Photoshop 将动画导出为 GIF。

这只适合不太长的动画，如果动画包含数千帧，Photoshop 的导出过程可能会很漫长。在这种情况下，我会使用一些在线的 MOV→GIF 转换工具。但请记住，这些在线工具有时是有损压缩，因此最终得到的 GIF 品质可能不及原始的 MOV。

谁说优美动画和高效性能不可两全其美？

第 7 步: 优化

对于有文档洁癖的我来说，我通常会进一步压缩和优化图片。一般我会先使用无损压缩工具，比如 ImageOptim。无损压缩将在不影响质量的情况下减小文件体积。如果文件体积在压缩后仍然太大，我也会选择有损压缩，比如 ezGif，但尽量使用最低的压缩率。
谁说优美动画和高效性能不可两全其美？
  • ImageOptim
    https://imageoptim.com/
  • ezGif
    https://ezgif.com/

完成！

在完成前面的一系列工作后，您将拥有一个 JSON 文件 + 轻量级 SVG 动画。还将拥有 MOV 和优化过的 GIF，以便轻松分享工作成果。另外还有每个动画的静态 PNG 版本。

  • 在 Chrome 官方网站看看这些动画

    https://www.google.com/chrome/productivity/

这些步骤使我们能够成功地将动画整合进 Chrome 主页中，同时不影响页面性能。我还使用相同的工作流程为下载确认页面创建了动画，并为登录页面创建了一些实验用的版本。此外，我还与谷歌的其他团队分享了这套工作流程，帮他们在自己的网站中加入动画。

希望这些技巧能对您和您的团队有所帮助，如果您有属于自己的动画制作小技巧，欢迎在评论区和我们分享。


谁说优美动画和高效性能不可两全其美？ 点击屏末 | 阅读原文 | 进一步了解 Material Design 动效设计规范

谁说优美动画和高效性能不可两全其美？

谁说优美动画和高效性能不可两全其美？

  想了解更多 Material Design 内容？

  • 在公众号首页发送关键词 "Material Design"，获取相关历史技术文章；

  • 还有更多疑惑？欢迎点击菜单 "联系我们" 反馈您在开发过程中遇到的问题。

推荐阅读

相关推荐