欢迎转载 


Hello,我们又再次相遇了~
我就是那个东瓜南瓜西瓜没有北瓜的设计师北瓜。
在进入干货之前,先做个简单的自我介绍!


北瓜之前叫“钟情努力”,这事咱以后再说。北漂一族,老家是湖南滴。

为了让自己拿到站酷推荐设计师,于是我变成了一台没有感情的撸图输出机器,所幸这一年的努力没有白费。在进入到花椒直播工作后,发现自己干啥啥不行,吃饭第一名,谁叫我司的食堂美食好吃呢哈哈哈~


———————————————————————


我们来看看需求方给到的素材和最后我完成的“怦然心动”效果



这是大家工作中可能会出现的动效小需求,顺带分享一些小要点。




 1. 梳理需求 

                                                                                     

需要做一个叫“「怦然心动」的图标动画”,看起来还挺很简单的,如果做的太大众化就显得平庸了,那我们肯定要在图标和动效上做出差异化设计。

小要点1:学会分析需求,找到隐藏设计点


2. 确定设计方向 


我翻阅了抖音、快手、陌陌等直播产品的点赞功能,虽没有找到类似“怦然心动”的动画,通过分析我也有所收获,总结出以下设计方向。

1,用爱心做点赞主形象

2,动态视觉呈现多样化

3,多渐变色的过渡使用



小要点2:寻找竞品和参考,或许能得到意想不到的收获

 

 3. 设计图形化 


综合娱乐直播产品的特性,我将爱心设计的更圆润饱满些,得到点击前的图标和点击后的图标。



发现点击后的图标有点平凡,我们得做出差异化设计,设想一下爱心代表一个人,想产生怦然心动的感觉是不是必须两个人。


那我们就可以再添加一个小爱心作为点缀,这样是不是有内味了?




调整后的图标生动很多也更形象了,怦然心动的重点还是要在动画中去体现,我们往下看。

差异化设计x1


用脑海联想下整个动画的过程:黑色爱心被点击后立马缩小并消失,紧接着出现触发点(让用户理解到自己已经触发了点击效果),火花由中心向四周炸开并消失,最后出现由小放大的怦然心动图标。




小要点3:做出差异化设计,学会用脑袋想象动画草稿


 4. 怦然心动的动效设计 


回忆下我之前说的那个脑海联想动画效果,我们按这个方向尝试动效设计。


第一步:点击后,黑色爱心缩小并消失掉,用到的基础属性(缩放、透明度、缓入运动)。


第二步:在黑色爱心消失掉的一瞬间,触发点(两个圆形都是描边做的),两个圆路径由小变大,描边由大变小至消失,用到的基础属性(路径大小、描边大小、缓出运动)。




第三步:在触发点缩放的中间时间段,火花小元素开始向四周扩散,首先扩散的是小圆球(填充),再是长长的线条(描边),用到的基础属性(位移、修建路径、不透明度、缓入和缓出)。


为什么会提到火花这个词?


“怦”=“嘭”,嘭的一声忽然炸开了,生活中的放烟花预示着好事发生、快乐、热闹等等。那我们可以在动效中加入火花爆炸的效果,视觉上给用户一种“嘭”的状态,情感上传递美好的事情即将发生~

差异化设计x2




第四步:同样是再触发点出现放大的那一刻,怦然心动开始由小变大,用到的基础属性(缩放、缓处运动)。




最后一步·完善:看到这里差不多制作完成了,有点不足的是整个动画给我然心动的感觉还差一点。


我之前说过:怦然心动指的是两个人的的心灵跳动。主要在这个“动”字,只要爱心动起来整个动画就会被赋予灵性。

差异化设计x3


正常来说人的心跳是一个收缩放大的过程,于是我加入了两颗爱心的缩放效果,还有旋转效果(加入旋转让爱心跳动更生动),注意的是旋转/缩放幅度和弹性效果要符合一定的生活常识。




本文算是北瓜的第一篇小教程动效文章~


其实整个动画只用到六个动画属性(缩放、透明度、位移、修建路径、旋转、路径),而这些在工作中基本够用了,多学有益大家一起加油哈!


写到最后

想学习和学临摹“怦然心动”动画的同学们,点个在看,公众号后台回复“怦然心动”获取AE源文件。


欢迎大家加我微信交流学习(如果提示加好友频繁,可以过一会再加哦)


扫码加微





精彩回顾:

《原来这些差异化设计是这样做的!!》


本篇文章来源于微信公众号: 菜心设计铺