设计师怎么做动效界面（体验设计师如何用动效解决问题）

编辑导语：一个优秀的动效设计，可以吸引到用户的注意力，带给用户更高质量的体验，然而也不是所有的产品都要做动效。那什么时候才该做动效呢？做到什么程度才比较好？一起来看一下吧。

在产品设计中构成界面的三大元素：「形状、颜色和动效」，其中动效最能够第一时间吸引用户的注意力，传统的用户静态界面设计，受限于时间的关系，很难阐述表达用户想要的某个点，但动效设计不仅可以表达页面的时间关系，还可以叙述因果关系。

目前动效设计已成各类产品的设计趋势，一个优秀的动效设计能赋能产品价值，能带给用户更高质量的体验；但是当大家人云亦云都知道动效好，为了动效本身去做动效，那么带来的结果往往适得其反。

产品设计中为什么要做动效？什么时候该做动效？到底动到怎样的程度才够好？在接触了长达一年多的产品动效设计后，总结了这篇文章来告诉你如何利用产品思维，去使用动效解决设计遇到的问题。

全篇内容脱离技术层面的讨论，实现手段有不同的方法，达到最终的目标即可。

一、动效设计的意义

为什么要做动效设计？当然是能够为产品带来价值才会去投入资源去做。那么带来的价值是什么？在大多数的认知里，动效能吸引用户的注意，那么自然能为产品带来点击或跳转等价值，但这仅仅是动效赋能产品价值中的其中一种，动效的意义针对产品和用整体可以分为两块：

其中很多因素是互动或者呈因果关系的，比如引导用户操作可以减少用户对产品的认知成本，提升产品易用性也变相提升了用户和产品的互动性，为产品注入活力也会让用户减少部分不可避免的不适感等等，两者是相辅相成的。

举个简单的例子，POP 弹窗的设计大家都不会陌生，POP 弹窗的出现往往目的是为了引导用户点击跳转至新的模块，最终目标都是引导用户去点击弹窗上的行动点。

上图示意的静态弹窗往往是市面上大部分弹窗的出现方式，很明显的对比下动态弹窗和行动点让人的点击欲望更强烈，固然结果自然是动态的点击率比静态的要好。

到这有人就会说了，你废话半天都是我们知道的东西啊，会动的当然比不会动的点击感要强啊！别着急，我这里只是简单的说明了动效的价值和意义，具体怎么去做动效设计首先还需要了解动效的种类~

二、动效的种类

动效的种类大致可以分为四种：转场类、展示类、引导类和反馈类。很多产品设计中我们最常见的往往是以这四类动效或衍伸的动效为主，下面给大家介绍不同种类动效的样式和意义。

1. 转场类

转场类动效用于页面层级的跳转或场景切换，帮助用户理解界面间的变化和层级关系，也让界面更加真实生动，避免页面场景的瞬间切换导致用户产生变化盲视（视觉刺激的突兀变化会阻止用户注意到新的信息）。

简单来说就是在产品页面切换中让用户有一个心理预期，看到哪些东西变了，新增了哪些东西要注意的，而且整体切换看上去非常的丝滑舒适。

经常用到的手法以缩放、透明度、旋转等平滑的效果为主，来搭建层级与层级间的关系和切换。

Driiible作者：tubik

2. 展示类

展示类动效更多的如字面意思——常规场景用作展示，其目的是能够在第一时间吸引到用户的视觉，突出产品核心功能和特点，引导用户的视觉流向，去帮助用户更好的理解产品。主要在产品的KV版头、网页以及品牌传播等场景中出现。

Driiible作者：Robert Berki

3. 引导类

引导类动效底层逻辑为通过界面中某些元素的变化，拉开与不动的元素的视差，引导用户进行下一步操作，能够自然而然地聚焦用户视线，降低其他视觉元素的干扰，目的是帮助业务达成某个模块的KPI，或者引导用户相关的操作，产品中常见的就是新手引导、Toast提示等。

4. 反馈类

反馈类动效是在用户进行行为后及时给出相应的反馈，更多偏向于用户体验侧；底层逻辑是以视觉表现的形式传达给用户当前时下的操作反馈，给予用户一定的心理预期。

Driiible作者：tubik

三、动效设计思维的建设

前面介绍完动效的种类和意义，接下来整点干货。我们在产品设计中接手动效之前，除去明确的业务目标（譬如业务明确某个模块进行动效制作：“我就要这个按钮动一动来提升CTR！”等此类情况），作为一名体验设计师应该建立一套完整的动效设计思维。

以整个产品设计的周期细分下来，建立具体的动效设计思维是以「分析」>「执行」>「跟踪」为主要流程。

前期通过分析业务逻辑和场景，通过了解动效设计背后的目的和商业策略；然后制定视觉稿和动效方案定稿，执行并且交付给程序猿小哥哥开发走查；最后通过数据验证沉淀并且制定一系列的规范。

1. 分析

设计师是用来解决问题的，通过动效去解决问题，要具体分析解决怎样的问题。前期设计分析可以通过拆解成三个纬度去分析：业务属性、业务目标和场景划分。

首先是业务属性，一个产品的动效必然是贴合产品本身的属性，在心智层面便于用户的认知。

举个例子：金融类产品的给用户的心智是安全可靠的，如果在动效的表现上使用抖动等效果，给用户的认知是不安全的，那么必然会造成认知偏差；或者电商类产品，你是卖奢侈品的，业务属性应该是高端大气上档次，但是如果你的动效是Q弹可爱的，那一样的不符合情理。

所以分析首要的点，是要提炼当前业务归属的属性，这一步是确定动效设计策略的方向。

接着是业务的目标，前面提到过，除去本身业务有特别明确的动效需求可以直接执行，但是往往设计师在负责某款产品的时候，业务很难提出相关明确的动效需求。除非之前有类似的案例并且验证可行，否则业务方也是一脸懵逼：“为啥会出现这种问题啊？”、“怎么解决啊？”等等。

作为体验设计师，在分析业务问题之后，明确目标是什么，是否需要用到动效的手段去解决是在这一步判断的。

举个例子：在某个母婴电商产品会场模块上线后，转化不是很好，唯一的入口就是首页的弹窗，在具体的业务分析后，发现问题出现在点击转化上，得出的设计策略是强化行动点以便提升点击率，于是提升入口的点击率就是当前业务的目标。

提炼了业务属性、有了明确的业务目标后，最后是场景的划分了，还是接上面的例子：知道了母婴类产品是可爱Q弹有活力的属性，业务目标是提升唯一入口的点击率，那么接下来得出具体的动效设计策略就要考虑到场景的划分。

首先是出现的场景是在首页，作为电商的首页都是视觉冲击很强烈的，即便在弹窗上加了一层黑色透明的蒙层，也难以掩盖首页的动效（如Banner的滚动、核心模块入口的动效等）。

众所周知设计是需要克制的，动效又是最能吸引用户视觉焦点的，为了避免用户在视觉上被干扰，所以在「弹窗出现」这样的意义不是很大的动效上应该被弱化，主力的动效应该交给行动点的强化，所以弹窗出现只是弹一下，而行动点的强化是弹两下——这就是对动效「度」的把控。

最后贴合场景将直角改为圆角，植入品牌色做整体视觉上的优化得出最终的方案。

2. 执行

在设计方案完成后，就是交付给程序猿小哥哥开发上线了～有些同学一直在同个公司的话，对接的开发比较稳定，不容易出现变化，所以对接方式磨合固定了之后一般很难改变。但是有些在规模稍微大一点公司里的同学，尤其是以 UED 的形式存在的团队，对接的开发就可能不是很稳定，所以大概要了解几种常见的动效对接格式：

• GIF：目前最常见也是最主流的动效格式，很多网页移动端的动效实现的格式，容易和开发沟通对接
• APNG：需要借助 isparta 软件，目前来说本人体验最好的格式，输出效果最佳，占用资源也最小
• SVGA：目前市场上大多酷炫的直播礼物就是这个格式开发的

• Lottie：有一些公司在使用，因为最终输出的是 .json 文件，开发更容易编入代码内部
• WEBP：少部分的团队在使用，优点比较多，但是相较于其他内存资源占用很高于是不能被接受
• MP4：部分场景仍然会需要用到视频的情况

3. 跟踪

前面更多的是关于动效的执行和上线，那怎么才能验证是因为这个动效才解决了问题呢？就需要持续的跟踪和数据验证。

在产品设计当中数据验证往往很常见，同样在动效设计中数据验证使用最多的也是分类测试法，控制条件不同，分批次进行测试对比来验证动效设计。

在上线后切A/B test，控制文案-样式-时间等不变量，分别投放静态和动态样式，监控两者的数据以此来辨别优劣，并加以沉淀为今后的方案。

当然这个例子只是很简单的案例，往往实际项目中有很多复杂的因素，有时候可能会分ABCD甚至EFG类别的测试来验证每个动效的可行性，最后取均值最高的一项作全面投放。

四、以产品思维看动效设计

以上建立了自己完善的动效设计思维，但仅仅是基于执行层面上的，只满足于产出很好的动效方案，但是作为一名体验设计师是远远不够的，我们应该带着产品思维去看待动效设计。

什么？产品思维还能和动效设计沾边儿？开玩笑吧！但实际上U1S1，产品思维涵盖面很广，涵盖了全局的思考性以及方方面面，所以动效设计要真正意义上的对产品产生价值，还是需要依附产品思维去做设计。

1. 动效的一致性

产品设计当中除了颜色、品牌等视觉层面的表达需要统一性外，动效也是需要有一致性的，只不过用户很难直观地从视觉上感知到，但是作为一款成熟的产品，强化用户对品牌产品的印象，动效的一致性是不可缺少的。

纵观整个产品侧，可能部分模块无法清晰感知，但是只有确定了动效的一致性，才能使产品整体看起来更加统一和完整。

比如TIM，在整个产品中统一了动效的形式和速率，以及贴合了产品品牌的表达，在整体的操作体验上有了关联和一致性，体现了动效设计对于产品来说真正的价值。

2. 规范&组件化

产品设计当中为了解决迭代、开发或者合作效率等问题，常常会制定一系列相对应的规范和建立组件库，动效也有相对应的规范和组件库，而在关系上规范和动效组件是制约产品动效一致性的。制定动效规范和组件的纬度分为：速率和时间。

首先是速率，一般情况是使用软件和开发语言里自带默认的速率，比如常见的缓动、缓入缓出等，但有一些产品为了拉开差异化会自行定义速率的参数来表达，然后整个产品都遵循这个参数来制定动效。

比如全局的参数定义，甚至能细化到 POP 动效的参数定义、点击态动效的参数定义等。

其次就是时间，控制每一个模块的时间，包含内容的出现消失、什么时候该强化、什么时候循环或者静止，针对不同的场景划分进行统一规范，甚至可以制定相对应的模版，之后进行动效产出的时候，既保持了产品的一致性，也能提高工作上的效率。

3. 全局思考

设计服务行业，那么针对不同的行业需要考虑的点不仅仅是当下的场景，保持对产品全局的思考才能对动效设计有全新的认知。

了解当下动效设计的「前置链路」、「当前行为」和「后置链路」，用户在唤醒动效前的动机是什么，为什么会触发动效的行为，触发动效之后用户想达到怎样的目的等要做全局的考量。

正因为有了对产品的全局思考，才让当下产品越来越「人性化」，往往你只是做了第一步操作，就衍生出了后续的选项，让用户感到「省心省力」。动效只是这其中的一个环节，作用都是锦上添花的，所以更加说明全局思考的重要性。

需要考虑到周期、成本、实现、用户行为、用户心理、是否真真确切要用到动效设计等等因素，最后才能敲定动效的设计策略。

在2019的Google I/O大会上，Google Lens展示的AR点菜功能可以智能识别用户扫描的菜单并将美食网站上的相关推荐直接呈现在屏幕上。

——《2020-2021设计趋势ISUX报告·用户体验篇》

五、再说两句

动效设计不是万能的，除去特殊情况，往往很多场景下动效在产品设计中只起到锦上添花的辅助效果，对产品的好坏没有决定性的作用。

就好比一个人连小兵都不会补，就和他谈团战思路，谈滚雪球运营等等，那显然是天方夜谭。作为产品体验设计师最重要的能力是洞察本质和全局思考的能力，通过阐述如何用动效去解决问题，最终想要表达作为一名设计师，应该时刻保持对事物的思考和观察，培养自己的硬性思维，才能在自身成长的道路上不断超越自己。

原创不易，谢谢阅读～

本文由 @雨灰 原创发布于人人都是产品经理。未经许可，禁止转载。

题图来自 Unsplash，基于CC0协议。

,