我这样手把手教你,这个小动效肯定能学会了!Recommanded by editor
1年前Publish
11136
|
25
|
514
北瓜的第2篇原创文章

多多交流~
Hello,我们又再次相遇了~


我就是那个东瓜南瓜西瓜没有北瓜的设计师北瓜。


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





 1. 梳理需求 



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


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



2. 确定设计方向 



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


1,用爱心做点赞主形象

2,动态视觉呈现多样化

3,多渐变色的过渡使用



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



 3. 设计图形化 


了解娱乐直播产品的设计风格,我将爱心设计的更圆润饱满些,得到点击前的图标和点击后的图标。




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


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




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

差异化设计x1


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




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



 4. 怦然心动的动效设计 



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


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




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





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


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


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

差异化设计x2



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



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


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

差异化设计x3


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





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


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


点个赞,肝一杯

原文链接:https://mp.weixin.qq.com/s/agzQhQG8fekFJiIg0b7uEA
514
Statement: all the content and comments made by netizens in ZCOOL only represent themselves, and do not reflect any opinions and opinions of ZCOOL.
Report
Share
Collect
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
All Comments0
深圳 | UX设计师
Article information
文章标签
收录收藏夹
更多收录此文章的收藏夹