每人每天仅限5票,快给你心仪的作品鼓励的一票。
投票北瓜的第2篇原创文章
多多交流~
Hello,我们又再次相遇了~
我就是那个东瓜南瓜西瓜没有北瓜的设计师北瓜。
北瓜之前叫“钟情努力”,这事咱以后再说。北漂一族,老家是湖南滴。
为了让自己拿到站酷推荐设计师,于是我变成了一台没有感情的撸图输出机器,所幸这一年的努力没有白费。在进入到花椒直播工作后,发现自己干啥啥不行,吃饭第一名,谁叫我司的食堂美食好吃呢哈哈哈~
———————————————————————
我们来看看需求方给到的素材和最后我完成的“怦然心动”效果
这是大家工作中可能会出现的动效小需求,顺带分享一些小要点
1. 梳理需求
需要做一个叫“「怦然心动」的图标动画”,看起来还挺很简单的,如果做的太大众化就显得平庸了,那我们肯定要在图标和动效上做出差异化设计。
小要点1:学会分析需求,找到隐藏设计点
2. 确定设计方向
我翻阅了抖音、快手、陌陌等直播产品的点赞功能,虽没有找到类似“怦然心动”的动画,通过分析我也有所收获,总结出以下设计方向。
1,用爱心做点赞主形象
2,动态视觉呈现多样化
3,多渐变色的过渡使用
小要点2:寻找竞品和参考,或许能得到意想不到的收获
3. 设计图形化
了解娱乐直播产品的设计风格,我将爱心设计的更圆润饱满些,得到点击前的图标和点击后的图标。
发现点击后的图标有点平凡,我们得做出差异化设计,设想一下爱心代表一个人,想产生怦然心动的感觉是不是必须两个人。
那我们就可以再添加一个小爱心作为点缀,这样是不是有内味了!
调整后的图标生动很多也更形象了,怦然心动的重点还是要在动画中去体现,我们往下看。
差异化设计x1
用脑海联想下整个动画的过程:黑色爱心被点击后立马缩小并消失,紧接着出现触发点(让用户理解到自己已经触发了点击效果),火花由中心向四周炸开并消失,最后出现由小放大的怦然心动图标。
小要点3:做出差异化设计,学会用脑袋想象动画草稿
4. 怦然心动的动效设计
回忆下我之前说的那个脑海联想动画效果,我们按这个方向尝试动效设计。
第一步:点击后,黑色爱心缩小并消失掉,用到的基础属性(缩放、透明度、缓入运动)。
第二步:在黑色爱心消失掉的一瞬间,触发点(两个圆形都是描边做的),两个圆路径由小变大,描边由大变小至消失,用到的基础属性(路径大小、描边大小、缓出运动)。
第三步:在触发点缩放的中间时间段,火花小元素开始向四周扩散,首先扩散的是小圆球(填充),再是长长的线条(描边),用到的基础属性(位移、修建路径、不透明度、缓入和缓出)。
为什么会提到火花这个词?
“怦”=“嘭”,嘭的一声忽然炸开了,生活中的放烟花预示着好事发生、快乐、热闹等等。那我们可以在动效中加入火花爆炸的效果,视觉上给用户一种“嘭”的状态,情感上传递美好的事情即将发生~
差异化设计x2
第四步:同样是再触发点出现放大的那一刻,怦然心动开始由小变大,用到的基础属性(缩放、缓处运动)。
最后一步·完善:看到这里差不多制作完成了,有点不足的是整个动画给我然心动的感觉还差一点。
我之前说过:怦然心动指的是两个人的的心灵跳动。主要在这个“动”字,只要爱心动起来整个动画就会被赋予灵性。
差异化设计x3
正常来说人的心跳是一个收缩放大的过程,于是我加入了两颗爱心的缩放效果,还有旋转效果(加入旋转让爱心跳动更生动),注意的是旋转/缩放幅度和弹性效果要符合一定的生活常识。
本文算是北瓜的第一篇小教程动效文章~
其实整个动画只用到六个动画属性(缩放、透明度、位移、修建路径、旋转、路径),而这些在工作中基本够用了,多学有益大家一起加油哈!
点个赞,肝一杯
Powered by Froala Editor
每人每天仅限5票,快给你心仪的作品鼓励的一票。
投票
发表评论