Making Motion Meaningfuil ---谷歌设计师教你如何做动效

来自Google的动态设计师分享了他们最热门的产品功能。

动态效果是带给数字产品的生命的至关重要的一部分。像点击卡片一样简单的扩展和显示更多的信息的形式加入流畅的动画会给人更好的体验。加入新内容，将分享的信息移动到新的位置，并提供清晰的焦点引导用户。在 material design 中，我们开发了四个动态效果设计原则，以帮助设计师和开发人员实施有效的动态效果设计。

在 Material Design 设计指南中，动态效果是整个设计框架中整体感觉和功能的组成部分。它传递能量，从重力和摩擦等力量中吸取灵感。正如现实世界中的物体不会突然停止或立即加速，Material Design 中的动态响应对于用户的反馈也不应该丢失节奏。同样的道理， Material Design 旨在使动态效果感觉更加自然，例如通过跟随弧而不是直线路径来获得速度或舒缓成静止状态。但不仅仅是看起来自然，动态效果应该首先帮助指导用户，在适当的时间为他们提供正确的信息。动态效果应该帮助应对复杂的挑战，并清楚地向用户传达一个元素的阻力，动力和路径。

在Google，我们有令人不可思议的设计师为您使用的产品做聪明和愉快的动态效果。他们在Google Photos，YouTube Kids，Android和Google Duo等产品上工作，今天我们将与几个这样的人交流，了解他们的流程。

Eric Henry, Google Photos 的UI设计师

添加或删除条目的传统方法是将每个项目从其旧位置以动画的形式移动到新的位置。但这产生重叠的运动路径，看起来很乱，太拟物化。

在Google相册中，当您删除图片时，我们设计了一个手势。无论您删除多少照片，整个网格向左滑动。当多个照片被删除，快速交叉褪色动画在转换图像作为一个行移动。有了这种模式，我们以象征的方式传达结果，而不是字面意义。这降低了视觉复杂性，实现了与 Material Design 原理一致的快速响应的交互。

Aaron Schurman, YouTube Kids 的UI设计师

为儿童设计应用程序可能与为成年人设计的应用程序大不相同，因为他们通常喜欢混乱而不是控制，并且喜欢散乱的而不是整齐的。在动态效果和互动中，我尝试推动团队更大胆，更疯狂的通过动态效果拥抱他们内心的孩子。

当然，在实现这些结果的道路上有许多绊脚石。 我们创建的许多动画太复杂，无法直接转换为代码，因此我们必须依赖有趣的方法，如内部运动工具，以及使用.gifs和MP4s。 如果没有我们的承诺和团队协作，我们是不可能完成这个任务的。 虽然整个过程在After Effects或C4D中启动，没有任何代码。

结束一天的工作，设计有趣的动画、愉快的故事和互动是不容易的，但收获是无价的。 我们收获的更多的是欢声笑语。

Matt Austin， Google Duo 的 UX动效设计师 

动态设计因产品而异。 动态效果有助于回归生活，Google的产品具有独特的使用案例。

使用Google Duo，我们首先关注视频，并使用动效连接有目的的简单和备用UI元素。 动效是宽泛和优雅的，周密地以合理的方式把事物结合在一起。 这就意味着，界面过渡就必须是无缝的（事实证明比预期更难，因为界面本身缺乏连接机制），界面衔接必须让人感觉到非常平滑。

Will Frohn, Android系统 视觉设计师

 

我一直对机械运动有一种孩子般的迷恋。能量的传递，反复，节奏和规律的运动是迷人的。我不厌其烦地看着拉尔夫·斯坦纳的“机械原理”，或Charles和Ray Eames的“Solar Do-Nothing Machine”。

在我给Android 6.0 棉花糖的引导画面的设计和创建动画的过程中，“构筑和建造”指导着我的思维。当Android设备开机时，对于“在后台程序中”正在发生什么来说，机器的循环和机械运动似乎是一个完美的视觉隐喻。即便如此，我们很容易被一些系统化的东西带着走向弯路，这些系统化的东西是没有生命力的。这就是为什么我试图将机械元素与惊喜和活泼的动感时刻混合在一起的原因。我最喜欢的是弹跳的黄色球，因为它给整个引导画面带来了乐趣性（对于循环动画艺术我也有一个新的认识）。

动效的力量

与设计师和工程师一起工作使这些概念成为现实，这使得Google的动效设计变得如此令人兴奋。有时，在我们的创作过程中，我们需要跳出我们的UX舒适区和弃用一些简单的动效，去尝试新的概念和技术。设计师，动画师和工程师需要彼此进行创造性沟通，创造新的交互模式，并推动我们的技术的边界。这是一种杂糅的形式，将功能和纯粹的乐趣的混合，使我们的用户（和我们！）参与并获得更多。