动态设计，让交互更顺畅

Sharing

移动互联网的时代，随着越来越多的服务和功能搬进了狭小的屏幕，如何让操作更简单，让体验更符合直觉，是设计师们一直以来努力的方向。
而动态设计作为起源于影视动画行业的概念，如今不只在内容创作行业大放异彩，在人机交互领域也日益发挥出重要的作用。
本文从动态设计的角度，分析了影响动态感受的几个关键因素，希望通过对动画基本原理的描述和拆解，帮助大家理解自然顺畅的动态设计的必要条件，在之后的用户体验设计中助大家一臂之力。
本期提纲：

1. 动态设计在交互中的作用

• 解释页面之间的关系

• 凸显重要的信息• 让互动更加生动有温度

2. 如何做出自然顺畅的动态设计

• 弹性

• 缓动• 预备动作
• 补充细节

3. 总结

大家在使用软件的时候，有没有遇到过诸如找不到某个功能的入口、满屏的按钮不知道该点哪一个、在页面间跳来跳去以至于忘记怎么回去的情况？

从一个按钮进入一个页面，再通过另一个按钮进入另一个页面，由于有限的屏幕面积无法让所有页面平铺在眼前，用户只能通过频繁跳转来切换不同的功能，跳转的越多，就越容易迷失，这时候我们可以使用动态设计，来帮助用户对其进行快速准确的定位。

1动态设计在交互中的作用

1. 通过动态设计来解释页面之间的关系

在 iOS 中，点击 app 图标时，新的页面会从图标的位置打开，回到桌面时，页面也会收起至图标的位置，通过图标和页面之间的动态连接，用户可以更清晰的看到页面从哪里出现和关闭，使视图的切换所带来的理解成本最小。

▲ 视图切换动态

这个从 iOS7 开始出现的特性，如今已成为各家手机系统的标配。
多任务的操作也有类似的功能，手指上推展示出当前页面和其他页面的位置关系，方便用户进行定位。

▲多任务动态

仔细观察的话，会注意到后层的各个页面在滑入视图时存在细微的时间差，这种基于物理的延迟感，带来了更真实的层级关系感受。
当我们需要表现元素间的层级关系以及位置信息时，可以通过动态设计对系统进行解释，让人理解动作的前后发生了什么，以此降低用户的理解成本。

2. 通过动态设计让重要信息凸显出来

文字、图片、视频，屏幕承载的内容丰富多样，当多个信息同时存在，用户的注意力就容易被分散，这个时候除了让元素更大更鲜艳之外，让元素动起来也是个常用的手段。因为人对运动的物体更敏感，让物体动起来可以使信息更明显。

▲ 动态凸显信息

不过，动画的使用要有度，过多的动画会干扰视线，要动静结合，切勿滥用。

3. 让互动更加生动有温度

生命力的塑造除了可以通过某个具体的卡通形象之外，给抽象元素赋予生物体的行为特征也是一个好方法。

相信大家都对苹果设备的密码框抖动印象深刻，当用户输错密码时，密码框会摇摇头，然后清空输入，全程不需要文字提示就达成了目标，既符合直觉，又让设备仿佛有了生命，使操作变得美而简单。

▲ 输入密码错误时的动态

由此，我们可以看到，动态设计可以降低用户的理解成本，提升软件的易用性，以及增加亲和力。
“道理我都懂，但做出来的动画总感觉很生硬”。
很多初上手的设计师都会遇到动画不流畅的问题，这通常是因为元素的运动并没有遵循自然界的运动规律。

2如何做出优秀的动态设计？

“从自然界中学习”。
当软件中的虚拟对象和动作是来自真实世界的映射时，人们会更快地理解。
小球弹起，烟花绽放，秋叶落下……大自然纷繁复杂，但表象之下其实都遵循着最基本的运动本质 —— 力，以及力的转化。

1. 弹性

自然界中没有绝对硬的物体，物体在受力的时候通常会有不同程度的挤压和拉伸。
拿小球动画举例：▲ 小球弹性动态小球在碰到地面的时候会压扁，落下前和弹起后会拉伸。

▲ 动作拆解

通过不同程度的挤压和拉伸，我们可以模拟出物体的软硬质感，为不同的元素赋予符合其特质的真实感受。

2. 缓动

由于重力和摩擦力的存在，生活中几乎没有绝对的匀速运动，物体的移动通常是先加速再减速的过程。

▲ 小球缓动动态

在上面的例子中，小球左右移动的速度变化是一个 S 型曲线，先平缓，再陡峭，再平缓。

▲ 缓动曲线

需要注意的是衔接在一起的动画应该作为一个整体来看，加强力的连贯性：▲ 缓动衔接上面的演示中，绿色小球的放大和白色方块的出现是衔接在一起的，我们可以将其作为一个整体来处理，小球加速运动，方块减速运动。

▲ 缓动衔接曲线

如果分开独立调整，中间将会出现没有必要的停顿，让整体的节奏显得拖沓：

▲ 衔接不连贯的效果

在微信的直播礼物中，火箭动画就使用了缓动衔接的技巧：

▲ 微信直播礼物中的火箭动画

火箭升空时是加速运动，烟花炸开后是减速运动，这样整体处理能够减弱动态与动态之间的割裂感，让节奏更顺畅。

3. 预备动作

能量是守恒的，“发力” 之前要先 “蓄力”。
棒球投手在投球之前，胳膊会先往后扬，人在跳起前需要先往下蹲，这种发力之前先往反方向运动的行为，在动画中被称为 “预备动作”。
比如下面的小球，在撞击白色方块之前先往左回撤了一下：

▲ 预备动作

如果把回撤取消：

▲ 取消预备动作的效果

小球的发力则显得很虚，打击感变弱了。
预备动作不只可以让发力更真实，同时还能让人提前注意到主体的变化，起到引导视线的作用。
需要注意的是，只有当物体主动发力的时候才会使用预备动作，被动受力时则不需要。
依旧是小球跳动的例子，和之前不同的是，我们在它跳起前加上一个 “往下压”  的预备动作，就会有种它自己在奋力跳起的感觉：

▲ 小球预备动作

▲ 预备动作拆解

在微信 8.0 版本的更新中，黄脸表情全都动了起来，其中也不乏预备动作的应用：

▲ 微信 8.0 版本黄脸动态

“加油” 的表情在向下用力之前先向上仰起，“点赞” 的手在竖起大拇指之前先向下蓄力，“敲打” 的平底锅也是先向上再下落，这些预备动作都让力度更真实，情绪更饱满。

4. 补充细节

细节是影响真实感的重要因素，用眼睛来举例，如果做一个眼睛左右看的动态，很多人凭直觉可能会这么处理：

▲ 左右看

乍一看好像没什么不对，但能感觉到有一丝机械，不够生动。
这是因为我们的眼睛在转移视线的时候，通常会在中间进行一次无意识的眨眼，来帮助我们的视线重新定位。
加上眨眼之后：

▲ 左右看加眨眼

是不是自然多了？
容当我们觉得动态不自然，很有可能是忽略了重要的细节，日常保持多观察的习惯，必要的时候亲自实践。
如果我们以自然界中的运动作为参照，强调弹性、缓动、预备动作，以及落实必要的细节，便能帮我们做出视觉感受顺畅的动态设计。

3总结

随着科技的发展，人们与设备和软件的互动正变得频繁和深入，希望这篇关于动态设计的文章，能够帮助大家做出更好的产品和内容，让信息的传递更有效率，也让沟通和互动更有温度，给用户带来出色的综合体验。

—  The end  —

参考文献：
➊《迪士尼动画原则》Ollie Johnston / Frank Thomas

➋  Material Design - Google

➌ 人机界面准则 - Apple Developer

作者：Barry

尽精微，致广大