作为用户体验领域不可或缺的一部分，动效设计已经随处可见，今天我们就一起系统的了解下相关内容，让它真正变成设计师手中解决问题的好帮手。

前言

1970年左右，用户界面还只是一系列头尾相连的 PDF，没有任何的动效。但是由于电脑画面处理能力的限制，动效使用的十分有限。而那时大部分动效也都是为了解决某个具体的交互问题而存在，具有很强的目标性。到了2007年，改变人类的产品IPhone 问世了，动效真正开始进入了每个人的日常生活。

在体验设计的领域里，动效设计是提升用户体验的有效手段，然而有些动效并没有和界面的实际功能联系起来，因此造成用户的认知障碍。合理高效的使用动效成为了设计师需要思考的问题。

动效并不陌生，对于大部分用户而言，人生中接触的第一例动效来自于Disk Operating System，也就是我们熟知的DOS系统（1981MS-DOS1.0问世）。

在苹果发布的Macintash中出现了动效设计，但由于技能问题，使用的场景十分有限。而在游戏领域中，无论是《坦克大战》菜单页中行走的的坦克光标，或是《热血格斗》菜单页的动态背景，动效无处不在，伴随科技的提升与用户体验学科的不断发展，我们的产品已经离不开这种设计形式了。

下面帮助大家梳理了动效设计的相关知识，具体如下：

1.动效的优势

动效设计并不是可有可无的视觉修饰，也不是设计师炫技的手段，而是解决问题，提升体验的有效工具，其存在明确的目的性，同时，相比静态页面动效设计有一下几点明显的优势：

（1）阐述：更好的告知界面发生的变化

当界面中对象状态需要发生变化时，可以用动效展示变化的过程，让用户更清楚的感知，阐述层级关系和界面变化。

（2）吸引：更有效的吸引用户注意力，营造视觉焦点

当你想让用户关注某一个区域，或执行某一个操作时，可以通过动效吸引他们的注意力，有效传达信息。

（3）及时反馈：让用户更有掌控感

当用户执行了某一操作后，动效是一个非常好用的反馈机制。通过动效的适当运用，用户可以清晰感知到自己操作的反馈，让用户知道自己做了什么。但反馈动画不可滥用，会使用户界面变得凌乱。

（4）提升：趣味性的内容缓解用户焦虑，提升用户体验

例如加载动画，可以有效降低用户对时间的感知，对于用户，他们关注的是感受到的速度，而不是应用实际消耗的速度。

2.如何评价动效设计的好坏？

从感官体验上来讲动效设计非常活泼有趣，但其背后存在明确的原则，这些原则能够帮助设计师对作品进行自我评估,然而动效原则众多且晦涩抽象,所以笔者将其归纳为以下三个设问句,需要大家反复思考权衡这3个问题：

（1）承载功能性了吗？

动效设计一定是某项功能的载体,任何动效都有其意义,它能够补充理解能力的差距。

思考自己动效的功能是什么?最终目标是什么？产品意图是什么？阐述层级关系？吸引用户注意力？对用户操作做出反馈？让页面变得更加美观？或者是在这些表现层面之后的其他意义？

这些内容往往是穿插在一起的，读者可从上文提到的阐述，吸引，反馈，提升四个方向入手。

（2）动效合理吗？

符合客观世界规律：元素运动的方式是否符合物理规则？元素的使用是否符合用户常识以及对产品的认知？

一致性：交互设计原则也存在于动效设计中，运动中元素的X（横向）Y（纵向）Z（垂直屏幕方向）轴方向应该存在规律，元素的运动应该是有序的。同时，动效的视觉语言（基本动画原则：动态曲线，动效风格等）也应该是一致的。

效率：元素是否简洁？是否存在夸张的动态效果？用户讨厌被无关的内容分散注意力

时长动效的时长是否合适？（在手机这样的移动端设备上，按照 Material Design 的建议，动效时长应该控制在200~300毫秒之间；在平板电脑上，这个时长应该延长大概30%，时长应该在400~450毫秒之间；在可穿戴设备的小屏幕上，这个时长应该缩短30%，在150~200毫秒之间。）

（3）动效生动吗？

在不降低用户执行任务效率的前提下，我们应该使动画更加生动，更具趣味性，表达情绪，避免枯燥。关于“生动”，我们可以从以下方面入手：

速度：线性的速度会使得物体的运动看起来机械呆板，调整运动曲线可以很好地解决这个问题。

缓入（ease in）：当物体以慢速开始并积累速度时，这一过程被称为缓入，使用的时机以目的为准侧进行判断，例如物体移出画面时，该元素重要性降低，所以可以让其进行加速运动。

缓出（ease out）：与缓入恰恰相反，当物体快速开始运动并降低速度时，这一过程被称为缓出。例如物体移入画面时，该元素重要性较强，所以可以让其进行减速运动，同时可避免对于用户的惊吓

缓入缓出（ease in-out）：适合用来表达元素形态状态的改变，加速时间要小于减速时间，动画能够引导用户更加关注元素的结束部分。从物理性角度讲，缓动动画遵循的是 惯性定律——物体运动不会突然停止和瞬间加速（都有加速和减速过程）。

然而单一改变速度并不足以将画面变得生动，我们需要了解一下三个关键要素：

惯性、重力与材质

我们可以尝试赋予元素各种属性来加强其生动性

惯性：物体因为惯性原因，可能会发生形态或者速度的改变

重力：物体因为重力原因，可能会发生形态或者速度的改变，重心的存在也使得一些对象在移动之前需要做出准备动作。

材质：赋予物体不同的材质属性，该物体可能会发生形态或者速度的改变，例如果冻状的弹性效果，不同材质的在惯性和重力会呈现不同的状态。

网络上关于运动曲线的资料很多，笔者在这里只例举最常用的几种，在了解基本的运动曲线属性后，希望大家能够结合惯性重力材质三要素进行尝试，相信会有所收获，同时观察生活细节，模拟动植物的动势能够让你直观的体会上文中的内容。

3.动效的主要类型

分类针对上文四种的目标，结合uec的实际案例介绍并分析几种常见的动效类型：

（1）衔接动效

在我们平常看到影视节目中，大部分镜头采用跳切的形式（画面直接切换没有任何衔接形式），这是因为影视作品的内容直观，主线明确，且观众与用户的之间存在巨大差别，前者大部分处于被动，而用户则会带着目标和任务进行操作，此时应用只要跟用户有互动，就会有状态的变化，而绝大多数的变化都是由界面视觉展示的。这时，界面上的状态变化，是否有过渡，过渡的是否流畅，动效本身承载的信息是否清晰，就直接的影响着用户的感受。在内容优先的设计趋势下，用户界面变的更加简洁。这将给用户带来操作上的认知障碍，动效则可以在不打破界面美感的前提下，弥补认知的损失。

衔接动画主要分为页面间的衔接以及同一页面下不同元素/状态的衔接。

页面间的衔接-传递层级信息

转场动效的应用最多，用来向用户传达层级信息，告知用户界面前后变化，帮助用户理解产品结构（当呈现模型与用户心理模型重合度越高，产品功能就越容易被用户理解）。

案例

错误：页面出现的形式与当前页面关联性不强，也无法正确引导用户的手势操作

正确：明确传达产品的结构，深化层级关系

页面内的动效-传达界面内元素的变化

页面内的动效主要用来阐述内容的展示以及状态的变化，给予用户反馈:

1.强调空间感（x·y·z轴的空间扩展，阐述功能）

2.引导视觉焦点（吸引功能）

案例

错误：元素的改变过于生硬，从属关系不明确

（2）响应动效

无论是点击、长按、拖拽、滑动等交互行为，都应该得到系统的即时反馈，将其以视觉或动效的方式展现，帮助用户了解当前系统对交互过程的响应情况，为用户带来安全感。

案例

错误：操作无反馈，可能造成用户任务的多次提交

正确：第一时间反馈用户的操作，告知用户操作是否有效

(3) 演示动效

多用于动态引导页，旨在吸引用户注意力，帮助用户理解产品功能或展示作者想法

案例来自WPSMail4.0的启动动画，将产品功能以抽象的动画形式表现，在思路上有以下几个重点：

三要素的体现

请注意左图中物体通过使用不同运动曲线和形状变化手段所呈现的重力感，惯性，以及弹性，这使得动画更加生动

通过观察生活得到的灵感

通过观察生活，我们能够得到一些启示，并从中找到联系和设计依据

(4) 加载动效

众所周知，app服务器在加载数据的时候需要用户等待一段时间，为了缓解用户等待过程中的焦虑情绪，设计者可以采用加载动画的方式来缓解用户的等待时间，使整个等待过程变得更加友好、流畅。

一个好的加载动画分为两个层次，第一个层次是满足用户的基本心理预期，缓解等待的焦虑；第二个层次是要给出用户一定的惊喜，加载动画的常见使用场景一共分为以下几种：

下拉刷新加载

下拉刷新可以让用户在看到本地数据的同时去重新加载数据，以确保用户可以看到最新的内容。

下拉加载一般分为两种形式：

图文结合

动画加文字的形式相对简单，因为有辅助文字，所以对于“达意”这一项原则的把握不难。

示例是WPSCalendar的列表加载动画，在这个动画有一个细节：上拉加载未来事项的时候出现的时钟为顺时针旋转；下拉加载过往事项的时候则是逆时针旋转，在实际案例中我们往往需要结合现实生活中的规律进行设计，使得作品的体验更优。

单一的动画形式

动画形式相对复杂，对设计师的图形表现能力要求更高，示例是WPSMail的列表加载动画，在产品中，下拉刷新=收取新邮件，邮件则在原有的版本中以纸飞机表示，相应的，收取新邮件可以认为是飞机飞入，于是延续飞机的设计，围绕着邮件与飞机的思路，以飞入邮箱的形式来展现“收取新邮件”的主题。

自此确定了动画的方向：纸飞机与邮箱。

页面数据加载

当切换到新页面时，常常会有加载数据的时候，这也是加载动画使用最多的场景，市面上的加载样式也是多种多样，如：toast加载、进度条加载等。

预加载

为了缓解用户启动app时的等待时间，有些app会将启动页设计成一个加载动画，如京东、百度贴吧等，不仅使等待时间变得有趣，并且增加了品牌记忆，达到了一箭双雕的效果。

（5） logo动效

一个设计足够优秀突出的LOGO，能够和用户建立联系，能够帮助企业建立起品牌形象。而动态LOGO 是一种更为现代、更为动态的品牌呈现方式。能够更好的吸引用户注意力，提升品牌认知，让logo利用方式更加多元化。

更高的品牌识别度

动态图形比静态的图像更容易为用户所理解，也更容易被记住。

更好地呈现故事

和静态的LOGO不同，动态LOGO可以呈现的不仅仅是视觉效果，甚至一个简短的故事。它可以成为产品或者公司的独有故事的载体，也能同用户更好地建立情感联系。

4.软件选择以及动效输出

（1）软件选择

在软件方面笔者主要推荐以下3款：

AE：强大的后期制作软件，动效设计只是ae功能的分支之一，合理利用插件可以事半功倍，缺点是专业度偏高，不易上手。

principle：能够快速的实现逻辑简单的高保真原型，有预置好的运动曲线属性，上手简单，但不支持3d旋转，陀螺仪等功能。

proto pie：功能强大，支持语音、陀螺仪感应功能，但操作不如principle方便。

（2） 关于动效输出

动效输出主要有这几种格式:

GIF

不建议使用

一种非常古老的格式，体积大，取色范围小，支持背景透明。

视频

可以考虑使用

在某些特殊的位置可以考虑使用压缩过的，时长短体积小的视频，可以获得不错的效果，但是常用的MP4格式不支持背景透明

帧序列

可以考虑使用

代码控制播放，对于图片数量和动画帧数有要求，笔者线上经验是22帧/秒左右（基本保证动画较为流畅）

Bodymovin插件

建议使用

这款插件可以支持 Android、iOS平台；导出的json文件体积小，方便开发使用，实现效果也不错。需要注意这是针对矢量动画开发的，不太适合图片过多的情况，也不能支持外置插件的效果，比如粒子、光效等。同时使用前需要与开发沟通。

写在最后

动效早已成为设计师解决设计问题必备的利器，它的本质始终在围绕如何给用户带来更优的体验，上文中提到的内容能够让我们更快的输出动效方案，用实践来检验学习成果，然后再不断进行优化。所以，请先大胆的设计吧：）