作者 / Jonas Naimark, Motion Designer, Material Design Team
在之前的文章《剥茧抽丝做 UI 动效,其实很简单》中,我着重强调了 “设计” 一词,这是因为相比较 “实现”,”设计” 还是更简单和自由一些。但我们都知道,如果一个想法不能切实地实现出来,设计得再精巧也是没用的。
正如我们之前有介绍过的,Material Design 的灵感来自 “智能纸” 的隐喻 (我们称为 “量子纸” , Quantum Paper)。它们代表着一系列的表面,可以不断自行适应界面的需求进行变化,从而引导用户进行体验。我们已经使用高程系统 (即量子纸下方的阴影) 准确地渲染了光和影,从而部分实现了这个隐喻。但是,如何以巧妙而优雅的方式让这些表面与动效进行配合,则是一个更加艰巨的挑战。现在,Material 团队很高兴和大家分享一个新项目,来帮助大家更轻松地实现这种动效。
Material 动效系统
我们刚刚发布了新的设计指南和开发文档 (包括 Android 和 Flutter 代码版本),用于满足最重要的应用动效场景: UI 转场。
- 动效设计指南https://material.io/design/motion/the-motion-system.html
- Android 开发文档https://github.com/material-components/material-components-android/blob/master/docs/theming/Motion.md
- Flutter 开发文档https://pub.dev/packages/animations
强大的动效基础始于精良的转场,这也是可用性的基础特征。有四种过渡模式可以处理组件和全屏视图之间的动画: 容器变换、共享轴、淡入淡出和弹出效果。
下面是您可以实现的转场示例:
△ Material 动效系统实现的转场示例
动效系统还提供自定义选项,从而实现个性化的转场样式。您可以调整转场的持续时间、缓动和动画路径,以反映应用的风格。如果打算实现简单直白的风格,您可以使用较短的持续时间、标准缓动和线性路径。要获得更加生动和突出的风格,您可以使用较长的持续时间、更夸张的缓动和弧线路径。
△ 左侧: 简单直白;右侧: 生动突出
雕琢转场效果是使用动效对应用进行个性化的理想起点。请查阅我们的个性化指南以了解详情。
- 个性化指南https://material.io/design/motion/customization.html
动效协同
实现动效有时候比较困难,部分原因在于能够帮助设计师与工程师协作的工具不是很多。我们都经历过这种情况: 我们挥舞着双手,哑着嗓子,试图向对方解释动效的设计思路。规范动效的过程非常棘手,但是很遗憾,这个过程对于弥合设计与实现之间的差距是很有必要的。这是 Material 团队想要简化动效实现过程中另一个颇具挑战性的课题。
更新过的动效指南以交互式时间轴的方式显示了动效的细节。其中包括理解和制作动画所需的所有基本信息。
△ 在 Direct 中创建的动效规范演示
这些演示是在一个名为 Direct 的网络应用中编写的,该应用由 Google 的动效设计师 John Schlemmer 创建。它已成为 Google 内部交流动效的常用工具。现在,我们很高兴地在我们的指南中公开分享这些动效规范,以帮助阐述动效设计的所有细节。如果您要使用 Direct 创建和托管自己的动效规范文件,可以在 GitHub 上获取其开源代码。
- Directhttps://github.com/material-motion/direct
这仅仅是个开始
您可能已经注意到,本文提及的内容在 Material Design 页面中被标记为 beta 版。这是因为,Material 团队希望尽早发布此版本,以确保我们在讨论更多功能之前,首先确保正确的技术和设计方法。做这项工作的可选方向很多,请大家务必多多分享您的反馈。希望这仅仅是个开始,我们今后将继续致力于让动效更加易于实现。
您的作品中有使用 Material Design 动效吗?有什么疑问或者建议?欢迎和我们分享。
推荐阅读