One year ago, I knew next to nothing about building motion. It didn’t help that the prospect sounded scary — motion means animating, right? And animating means I have to—what—design across time? I just mastered organizing my Sketch symbols, but okay.

一年前，我几乎对建筑运动一无所知。 前景听起来很吓人，这无济于事-动作意味着生气勃勃，对吗？ 动画意味着我必须(跨时间)设计什么？ 我刚刚掌握了组织我的Sketch符号的方法，但是可以。

After several months of diving headfirst into After Effects (it’s the industry standard for motion graphics), I’m glad to say I’ve learned the ropes of both After Effects and motion design in general. If you’re new to motion design or are looking to add it as another skill in your designer tool belt, these tips can help you master it a little faster.

经过几个月的深入研究后，After Effects(这是动态图形的行业标准 )，我很高兴地说，我已经学会了After Effects和动态设计的一般知识。 如果您是运动设计的新手，或者希望将其添加到设计人员的工具带中，那么这些技巧可以帮助您更快地掌握它。

首先，像工程师一样思考 (First, think like an engineer)

科学：学习如何物理上建立运动 (The science: Learning how to physically build motion)

The first step to learning how to build motion is to learn how to speak the language. Some of the technical aspects (and the overwhelmingly dense After Effects interface) became less scary after I familiarized myself with a few key concepts.

学习如何建立运动的第一步是学习如何说语言。 在我熟悉一些关键概念之后，某些技术方面(以及绝大多数密集的After Effects界面)变得不再那么令人恐惧。

Easing is the acceleration or deceleration of motion between two key points. “Ease out” refers to motion that decelerates as it reaches its end value and is a common form of easing in UI motion (just ask Google).

缓动是两个关键点之间运动的加速或减速。 “缓出”是指随着达到其最终值而减速的运动，并且是UI运动的一种常见放松形式(请问问Google )。

Interpolation is the calculation of values in between starting and ending values. Easing curves affect the interpolation of two key frames.

插值是在起始值和终止值之间的值的计算。 缓和曲线影响插值 两个关键帧。

Key frames are specific values in time. Key frames are what you create and manipulate in most animation programs. They mark the initial, in-between, and ending states of an object.

关键帧是时间上的特定值。 关键帧是您在大多数动画程序中创建和处理的帧。 它们标记对象的初始，中间和结束状态。

Duration is the length of an event from start to finish. In web and app development, this is measured in milliseconds, but in traditional animation tools like After Effects, you may be working with frames per second. For example:

持续时间是事件从开始到结束的时间长度。 在Web和应用程序开发中，这以毫秒为单位进行度量，但是在传统的动画工具(如After Effects)中，您可能正在使用每秒帧数。 例如：

• Shortest amount of time perceivable by the human eye = ~3 milliseconds人眼可感知的最短时间=〜3毫秒
• Button depress and release upon click = ~9 milliseconds按钮按下并在单击时释放= 9毫秒
• Card expanding upon tap on mobile screen = ~18 milliseconds在移动屏幕上轻按一下即可展开的卡片= 18毫秒

Parenting is creating object relationships by linking one object’s properties to another’s.

育儿通过将一个对象的属性链接到另一个对象的属性来创建对象关系。

Now, actually applying these concepts can take a bit more grunt work. After all, you’re working in the fourth dimension! That requires a good deal of planning, structure, and experimenting. For example, if we want to animate a card expanding into a full-page takeover, we have to consider:

现在，实际应用这些概念可能需要花费更多的精力。 毕竟，您是在第四维度上工作！ 这需要大量的计划，结构和试验。 例如，如果要对扩展为整页接管的卡片进行动画处理，则必须考虑：

• What do the initial and end states look like? (This is usually solved for in initial static design phases)初始状态和结束状态是什么样的？ (通常可以在初始静态设计阶段解决此问题)
• How soon after user input (click or tap) does the card begin to change scale?用户输入(单击或点击)后多长时间卡会开始更改比例？
• Which elements will move continually between states and which will fade in or out?哪些元素将在状态之间连续移动，哪些元素将淡入或淡出？
• How long does it take for the card to move from its original scale to full size?卡从原始尺寸到完整尺寸需要多长时间？
• How will each element’s values change over time?每个元素的值将随着时间变化吗？

然后像设计师一样思考 (Then think like a designer)

艺术：了解运动品质，原理和最佳实践 (The art: Understanding motion qualities, principles, and best practices)

Once you master the technical aspects of building motion, building a successful animation comes down to its mindful application. Luckily, the foundations of designing statically and designing with motion aren’t as different as you may think — there are steps we can take in both processes to support the user or to express a brand language.

掌握了构建动作的技术方面之后，构建成功的动画就取决于其精心的应用。 幸运的是，静态设计和动态设计的基础并没有您想像的那么多-我们可以在这两个过程中采取一些步骤来支持用户或表达品牌语言。

To get started, answer a few questions:

首先，请回答几个问题：

这种互动有多重要？ (How important is this interaction?)

When it comes to motion design, less is more. Don’t overwhelm users with too much — they don’t need a loading bar that twists itself into a checkmark then rotates in 3D and shoots confetti from both ends. We can draw just as much attention to important interactions by changing one or two values over time, like a swift change in color and increase in scale.

在运动设计方面，少即是多。 不要过多地压倒用户-他们不需要一个加载条，它会扭曲成一个选中标记，然后以3D旋转并从两端射击五彩纸屑。 通过随时间更改一个或两个值，例如颜色的快速变化和比例的增加，我们可以将同样多的注意力吸引到重要的交互上。

这种互动如何表达品牌语言？ (How can this interaction express the brand language?)

When it comes to expressing brand language, describing motion design is just as important as the words, typography, color, and images we use statically. Motion can be just as expressive as it is functional.

在表达品牌语言时，描述运动设计与我们静态使用的文字，版式，颜色和图像一样重要。 运动既可以表现又可以发挥功能。

• If the brand is playful and fun, there may be sharper easing curves and larger shifts in scale.如果品牌既有趣又有趣，则可能会有更锐利的缓和曲线和更大的规模变化。
• If it’s personal and straightforward, try softer easing curves and shorter, more abrupt moments of motion.如果它是个人且直接的，请尝试使用更柔和的缓和曲线以及更短，更突然的运动时刻。
• Keep experimenting with speed, duration, and easing to see how that affects the motion. You might be surprised how something small can change the feeling of the motion.继续尝试速度，持续时间和缓动，以查看其如何影响运动。 您可能会惊讶于小东西如何改变运动的感觉。

运动如何帮助支持用户体验？ (How can motion help support the user experience?)

We should also consider the functional purposes of motion. How can motion impact the users’ experience and perception of an interaction? How can we help them know where they’re going?

我们还应该考虑运动的功能目的。 动作如何影响用户的体验和互动感？ 我们如何帮助他们知道他们要去哪里？

• Be mindful of the direction of motion, especially in screen transitions (e.g., if a user clicks a “→” button, the destination screen could move from left to right on top of the current screen.)注意运动方向，尤其是在屏幕过渡时(例如，如果用户单击“→”按钮，则目标屏幕可能会在当前屏幕顶部从左向右移动。)

最后，如何将所有元素编排在一起？ (And, finally, how are all the elements choreographed together?)

Remember when I said “less is more”? That’s especially important to remember when choreographing motion together. What seemed like an elegant interaction in isolation may be overwhelming in the context of the entire experience. Once you’ve built a sequence of events, it’s best to take a step back and replay it several times to see if and where you can remove complexity.

还记得我说的“少即是多”吗？ 当一起编排动作时，记住这一点特别重要。 在整个体验的背景下，似乎孤立的优雅互动可能会令人不知所措。 建立一系列事件后，最好退后一步并重播几次以查看是否可以消除复杂性。

Of course, building motion is much more complex than just answering these four questions, but it’s certainly a great place to start. Luckily, there are other amazing people on the internet who have written extensively on motion design best practices.

当然，建立动作比仅回答这四个问题要复杂得多，但这无疑是一个很好的起点。 幸运的是，互联网上还有其他出色的人，他们广泛地撰写了有关运动设计最佳实践的文章。

Here are a few articles I reference often:

这是我经常引用的几篇文章：

• The ultimate guide to proper use of animation in UX

  在UX中正确使用动画的终极指南

• Motion design in digital products: A white paper

  数字产品中的运动设计：白皮书

• Creating usability with motion: The UX in motion manifesto

  通过运动创造可用性：运动中的用户体验宣言

• How do design systems incorporate motion design?

  设计系统如何整合运动设计？

最后，观察和学习 (Finally, observe and learn)

Any successful designer is like a sponge, observing and absorbing the experiences and information around them. Take your new eye for motion into the world. Notice not only the static visual design details, but also how those details change over time. The next time you’re perusing the digital world, keep an eye out for:

任何成功的设计师都像一块海绵，观察并吸收周围的经验和信息。 带动您的新视线进入世界。 不仅要注意静态的视觉设计细节，还要注意这些细节如何随时间变化。 下次浏览数字世界时，请注意以下事项：

• How long it takes content to load加载内容需要多长时间
• The direction pages move as you navigate further方向页面随着您进一步导航而移动
• How the motion feels (e.g., bouncy and playful or straightforward and pragmatic)动作感觉如何(例如，有弹性，好玩或直率而务实)
• How motion helps you understand where you are in the architecture运动如何帮助您了解体系结构中的位置
• How content maintains continuity between states? (e.g., from a list item to an expanded card)内容如何保持状态之间的连续性？ (例如，从列表项到展开的卡片)

Originally published in thirteen23’s agency publication, The Garage.

最初发表在1323的代理商出版物 《车库》中 。