动效在日常产品设计中的实际应用

在写此篇文章之前，我极力想安利一篇文章，是站酷 @三鱼先生 写的一篇对于B端动效设计的运用理念和实例的经验观点。https://www.zcool.com.cn/article/ZNzk2OTY0.html

这是一篇我个人目前看过的关于B端动效「实用性」方面讲的最好的一篇文章。而此处我想讲的，则是关于C端动效的价值及运用。

几年前随着国内移动互联网的疯狂式发展，催生了不胜其数的移动互联网平台，平台类别涵盖了生活的各方各面，有社交的、电商的、金融的、资讯的等等。在每个垂直领域下，都有N多个平台之间相互竞争，这使得每个平台都面临着巨大的生存压力，时刻逼迫着平台经营者们在其平台的功能上进行求同存异的挣扎。

在这种大环境下，设计师所要解决的需求越来越复杂，传统的静态页面设计已无法引导越来越“不听话”的用户，我们需要在这种形势中求变，才能时刻保持住设计师本该有的价值。而动效设计的运用，可以较好的解决部分问题。那么，动效设计在实际工作中，究竟有哪些作用？我在自己的实际动效设计工作中，总结出了使用动效的6个实用之处：

以下再结合案例进行较为详细的说明

作用1

案例1：UC浏览器2018世界杯活动页面

下图为UC浏览器2018世界杯活动页面，一般活动页面会为了营造氛围而把大感觉做的热烈一点，在这种情况下就免不了会使用较多的暖色（暖色比冷色突出，一般会用暖色来突出重点），在一屏页面暖色使用较多的情况下，如果想要突出【开宝箱区域】，且保证在「极短时间内」能够有效吸引到用户注意显得并不容易。因为一个用户留给一个页面的时间往往只有苛刻的几秒时间，如果不能在短短的两三秒时间内快速抓住用户的眼球，让用户关注到我们为了留住他们而设计的功能点，那很可能就会流失掉这个用户。

使用动效，可以有效的突出【开宝箱区域】，让用户能够聚焦到我们想要让他注意到的地方，让用户产生注意是第一步，只有用户先注意到了，才能产生下一步的查看操作，诱其深入。

作用2

案例2：一般APP弹窗关闭

关于APP的弹窗，你可能会遇到这样一个场景：在开启APP之后的第一时间突然有一个弹窗出现在你的眼前，这种突如其来的“烦人”提示，会打断你的思绪或操作，这会导致你的反感，你可能会无意识的「立刻」点击关闭按钮，但有时在关闭的瞬间又注意到了弹窗的内容对你来说是有吸引的，如果这个时候因为误点关闭弹窗而不知道去哪里找弹窗内容的链接入口，你是否会感到非常懊恼？

下图为我在做平台设计改版提案的时候提出的解决方案，当弹窗关闭时，缩放成一个小点之后有一个路径动画，可以告知用户弹窗关闭之后去了哪里，暗示用户如果想找回弹窗内的活动可以点击哪里能找到。因此使用动效可以将两个元素之间的关系进行直观的关联演示，用最简单的视觉表现方式说明其中的关系，增加产品易用性。（动效为我本人所做，但弹窗图片“生活缴费...”为网络搜的替代图，侵删）

作用3：

案例3：淘宝首页金刚区图标

对于寸土寸金的手机屏幕来说，思考着如何能在局限的区域范围内去展示更多的信息，一直是平台运营者们想要攻克的难题，也是设计师们需要帮助解决的难题。拿淘宝APP的首页来说，其首页金刚区的每一个入口，里面所承载的功能，单拎出来都可以作为一个功能完整的APP来使用。由此可见其中所投入的人力物力，如果入口无法得到点击，那将会是多么巨大的资源浪费，因此引流这件事就显得尤为重要。但是单单一个入口图标+入口名称，如何才能明白地将入口的诱人亮点告知用户来吸引点击？

使用动效可以在有限的区域面积内，展示尽可能多的信息内容，节约空间。如飞猪旅行的活动“送500券”，在这么狭小的空间无法将信息展示完全，使用动效可以解决信息展示问题，动效在吸引用户注意力的同时，也将亮点信息进行了展示。

作用4

案例4：天猫超市首页

“生活家”整个模块里的6个小模块的信息是属于同一层级的。因此在设计的时候，会选择将信息进行平铺，因为没有哪一个小模块是重点，所以在视觉上就没有重点，这会导致很难引起用户的注意，可能整个模块都会被用户直接忽视，或者视线只飘过其中某一个小块，然后眼球又快速的移动离开去了其他的大模块，不会完整的浏览完这个大模块里的信息，这是我们运营者所不希望发生的。那么我们是否能通过设计的手法去引导用户看完整个模块的信息？

使用动效在吸引用户注意的同时，设定动效的播放顺序，可以引导用户逐个浏览完整个模块，增加用户在此处的停留时长。

作用5

案例5：加油宝APP

关于情感化设计，我一直在不断的思考一个问题，情感化设计究竟能给产品带来什么「实际」且「有效」的价值，能否真正的对数据转化产生影响？在平时的工作中，我也在不断的尝试将情感化设计融入产品设计中，探索情感化设计对产品的真实价值。

下图是我在之前求职一个金融平台时所做的面试题，对“我的”页面进行改版设计。对于一般的金融平台，用户一般进入“我的”页面都是想要查看收益，针对这一个用户需求点，我尝试着将动效和情感化结合起来，让数字快速翻滚，给用户营造一种“丰收感”，加以情感化的设计，用动态的笑脸表情给予用户一个正向积极的反馈，引导用户的情绪让其能更为强烈的感受到获得收益的喜悦，让用户在投资收益的过程中感受到“愉悦”以鼓励他们能够持续甚至加大投入来享受更多的这种愉悦感。

作用6

案例6：花椒直播间

对于一些有用户VIP体系的平台来说，一般的VIP用户都是平台的高价值用户人群，可以直接对平台的营收产生转化。在一些直播平台里，VIP是一个非常重要的功能体系，因为VIP较高的付费率直接影响到整个平台的营收，说是关乎直播平台的生死存亡是一点都不为过，那么对于这部分高价值人群，我们又该如何鼓励他们继续保持这份「价值」？

一般来说，我们会给予高级用户「特殊性」。什么是特殊性？即高级用户的行为和一般用户的行为区分开来，做特殊的处理。就好比坐飞机的头等舱和经济舱，待遇是有差别的。下面举的例子是花椒APP的直播间，高级用户“小苔菜”进场时，其名字入场提示以动效的方式进入（普通用户入场提示则是在弹幕里和普通发言一样，很快被刷掉），这种特殊的对待方式可以让高级用户感受到其行为与普通用户的差别，让高级用户感受到自己的独特性，从而激励他们持续在平台进行消费以保持其高级的属性。

结语

正如前面所说的，对于一些平台来说，现在越来越繁杂的界面信息及功能架构给设计师带来了越来越多的设计难题，通过设计师的手段如何更好的解决这些问题，将复杂的问题简单化的呈现在用户面前，给用户带来更好的体验，为平台转化出更多的价值，是现在的设计师需要深入思考的问题。虽然动效设计可以一定程度上的解决某些问题，但请不要滥用，记住动效的使用原则应当是克制的，满屏的动效乱飞，只会带来适得其反的效果。