交互动效设计的一些项目解析

现在关于讲解动效的文章越来越多,说明动效在日常工作中使用到的占比也在随之增高。今天我就从我的角度按照时间的顺序,与大家分享一下我在动效设计方面的一些小小想法。首先我要强调一点,这不是一篇纯干货的文章,为了避免枯燥,我会以我的工作经历为故事线,中间会穿插一些我曾经参与的案例或者做过的练习,也会放一些我认为比较优秀的动效与大家共同讨论。我在这里把我要讲的大纲提前预告一下,如果不喜欢我的故事,看完这一部分就可以退出了。

大纲

伴随着移动终端设备的快速普及以及工作流程的不断更新迭代,传统的信息呈现方式在移动设备上的短板愈发明显。

动效设计的目的:

1.降低用户焦虑情绪

应用场景:刷新加载动画,启动页

2.吸引用户注意力

相对于静态图形或交互,动画更容易捕捉用户的眼球

3.丰富场景取悦用户

通过动态效果使主题更加富有生命力,达到身临其境的目的

4.向用户传递有效信息

通过动效短时间内视觉上分清主次,让用户第一时间感知重要信息

5.告知当前所处状态/关联上下级信息

关联上下层级的内容,使之看起来具有视觉的连贯性和逻辑性,从而优化体验

好的动画传递情感,好的动效提升用户体验

动画可以更加夸张的表达,动效更加客观规律,符合用户的真实操作反馈

动效设计交付实现的方式:

1.GIF:Demo展示,小动效输出

优点:直观体现

缺点:体积大,存在色彩偏差

2.PNG序列帧:直接引用

优点:可控性更强

缺点:文件过大

3.代码形式(Lottie生成json文件):小动画输出

优点:高还原度,占空间小

缺点:对于制作要求高

4.Demo+文档:页面大型交互(属性动画)

优点:更好的进行交付,适用场景不受限制

缺点:制作周期长

 

 

动画

动效严格意义上来说是动画的一个分支,只是这部分具备了与使用者之间建立数据交互的关系,所以称之为交互动画,这也是在互联网大时代背景下发展开来的产物。既然如此,那我们就先从动画说起。

我在接触动画这块的时候还是在大学时期上的《多媒体设计》课程里了解到动画设计,使用的软件为Ae和flash。

由于课程的缘故,当时的制作方向还比较偏向于影视包装这一块,而我又比较喜欢扁平化一些的设计,所以向老师诉求了我以后要做的内容,也得到了老师的肯定,这才让我真正的能“学以致用”。

 

 

学以致用

第一份工作我是在一家广告公司从事网页设计,但其实工作的内容远不止网页设计的内容,由于公司人员配比的原因,所以我会经常做一些LOGO动画的提案,在这里我就讲一个比较经典的案例。OPGclub的影视短片包装,有幸参与短片的分镜和片尾的动画制作。其实早期我并未参与这个项目,当时的情景比较焦灼,片尾的LOGO演绎动画方案一直未通过,时间一直在消耗,离截稿的时间也越来越近。最后我临时受命,制作了这个方案,比较意外的是竟然一稿过!虽然制作周期比较短,但依然是考虑了它自身的品牌元素(六边形),以及品牌特质(多元化,灵动感),上海的朋友应该是会在地铁或者公交上看过这个短片的。

不难看出,为了适应影片的场景,我还是做了一些空间纵深感以及在影视包装中经常用到的流线高光,使得其切合品牌的调性,增强其品牌的特有属性。其中用了3Dstroke插件实现手写字母的流畅效果。现在看起来,可能背景略显陈旧了点。

在我的作品《2017动效设计—LOGO篇 》有我当时做的其他LOGO动效设计方案,后期还做了也写MG动画,在今天很多的品牌升级发布基本都会如此制作一段宣传视频。

其实在网页时代已然存在交互动效,只是不像今天这般,得到大量的应用与宣传。在一次网页案例中我也局部的应用了交互动效,当鼠标悬停选项按钮,即触发PNG到GIF形式的转变,这也增加了一定的趣味性,更好的捕捉用户的注意力,同时也将其与未选中状态大大的拉开差距。

这是在17年做的吉凯基因检验所官网上的几个动态icon,当然PC端的交互还有很多可以讲的地方,但它不是今天的主角。

 

 

在大屏终端上的应用

时间来到2018年,这一年我从“乙方公司”正式来到“甲方公司”,这是一家互联网健身公司(likingfit)有幸接触更多的不同终端设备。以跑步机为例,作为大屏终端(iMac同等尺寸),和PC端以及移动端都有所不同,宽大的屏幕上需要用户触发操作得到很好的反馈就需要动效的加入。当时跑步机的项目大部分UI部分为另一个设计师完成,我主要负责动效部分以及补充剩余页面。后来我又做了一个改版,发布的作品《COMMAFIT 智能跑步机1.1.0》中有详细说明。

以这个作品中的动效为例,如果制作较大的页面跳转动效,就需要给到前端动效参考,如何给?我当时的方法是直接给的principle源文件,不懂的地方再沟通,在今天看来有点太考验开发的功底了。

这是当时上线版我所做的principle源文件。

严格来说应该是要给出principle源文件/Demo样式+动效文档,这种比较适合制作大型页面交互的属性动画,只是这样对于设计师整理文档的能力很考验,同时也会在一定程度上加大制作周期,不过实现效果会更佳。

其中的开机LOGO动画由于开发环境的缘故,我则是利用的PNG序列图片,在制作完成LOGO动画后,利用AE导出PNG序列图片,打包给到开发即可实现效果。这种方式可控性比较强,不够由于每张图片的尺寸比较大,所以整体文件也比较大。

当时在制作的过程中也用到了json文件制作,在这里我简要说一下,后面会有对这种制作方式的说明。

 

 

平面/PC端到移动端的转变

由于前面主要接触的多以影视类动画,PC端和大屏终端为主,所以当时制作移动端动效的机会并不多,于是我开始利用工作之余做了大量的练习,为了以后能够用上,也让自己不至于被行业淘汰。其中我以两个练习稿《上海机场APP重设》《小当家APP设计-在线找厨师的美食社交软件》的制作为例。

小当家APP起初是公司有一款类似的产品,由于战略转型已被边缘化,所以我个人也就当作了一次练习机会。

在这里我首次制作了标签栏的弹性动画,有很多人问我标签栏的动画如何制作,其实标签栏icon的动效注重连贯性和格调的一致性,在一组icon中找到一个自己最有想法去实现的icon(实在没想法就多看,找参考)作为突破口,实现了一个,其他自然而然就实现了。当然并不是刻板的复制,而是根据不同的icon的状态名称进行合理的变换,不然赋予它的动效也将失去意义。一般的手法无非体积变换,纵向横向的体积伸缩,针对特殊形态加以具备特殊属性的变换,最后加一点点修建路径即可很好的实现。

局部的交互动效也是当下很多应用注重的细节点,拿这个点赞的动效为例,和前面讲到的,当鼠标悬停选项按钮,即触发PNG到GIF形式的转变形式类似,只是这里的鼠标变成了手指,悬停变成了点击。

左右滑动banner的同时连带着地步轮播点的变化也不失是一件微妙的动效语言。

对于这一类的交互动效,方式有两种,一种是在AE中制作好动效利用Lottie插件导出json文件直接给到开发即可,体积一般都不大,还原度还是比较高的。但是这对制作的源文件也有移动的要求,例如说遮罩样式,透明度,表达式等都对导出json文件有影响,所以一般的弹性动画不是很难,我都会用K帧实现。另一种就是导出GIF,不过这种应该是无奈之下才会用,毕竟本身体积大,还有一定的色彩偏差。

人脸识别的动效也是多个当时也是灵光一现,为啥这么说,其实刚好当时我们线下在做一款自动售卖的产品,需要采集用户头像,不过当时那是线下终端,在这里我将它融入到移动端,后来在阿里系的产品中经常看到人脸识别的功能了。

在制作一款产品的动效部分是要契合产品调性,考虑使用场景的。

做上海机场APP这款产品重设练习的背后故事就不在这说了,说多了都是泪。

首先从最初的静态设计就要为后面的动效实现考虑充分,不然前面的图形完全不适应动效的实现,那就要哭了。如果有好的参考当然是要利用起来的,参考是参考它的想法实现,并不是直接照抄,那样意义不大。

为了使用户更好的等待页面加载过程,或是说属性页面时得到较好的反馈,可以加入比较有趣味性的加载动画和下拉刷新动画,结合产品的属性进行发挥,总有一些内容可做。在loding动画和刷新动画中加入品牌特属元素,使其具备一定的独特性,同时也具备一定的品牌宣传效益。

 

 

从飞机稿到实际落地的考虑

前面做了一些练习后,发现了一些问题,比如说移动端页面的大幅度交互动效,这种就比较飞机稿,难以落地,由于移动端的特殊属性使其不太适用大幅度的交互动效,微动效或者趣味动效都有所克制的去用。所以经历了一些移动端的实战后就会发现哪些动效能够加入到应用中,哪些是难以实现或者根本不需要的。

这个案例是我一份短暂的工作经历中参与的项目,当时的动效需求比较急,而且产品的需求也不是特别明确,所以我是口头描述+动效样式去和前端沟通的。这种情况比较常见,大多时候的非正规流程都是压缩时间所导致,但是我们要清楚,动效的加入是要怎样呈现的,这样才能更好的与前端沟通。(由于动图的问题可能有些卡顿)

后来在参加UI中国APP设计大赛中就克制的去做动效了,因为不落地的动效无非就是炫技,不是否定这种行为,而是既然选择靠近真实,就要有所取舍。

 

 

结语

无论是视频还是交互动效,其实都有很多的共同点,比如说都需要一个试用环境,视频需要写脚本画分镜,动效需要逻辑框架。为了达到一个终极诉求,需要完整输出解决方案。我在这里不是和大家分享什么技能,而是一种想法,驱动来源不是为了完成任务。慢慢的会发现,做设计,软件只是实现想法的工具,并不是你会了软件就能有好的想法,所以在以前的作品中经常会有人问“用了什么软件”,“动效用什么做的”诸如此类的问题,大多数的时候也是一个人在探索,硬着头皮做。设计之路任重而道远,希望能与各位同成长,共突破!

 

 

 

作者:古月设计

原文链接:https://www.zcool.com.cn/article/ZOTkyNTUy.html

每天更新,
全站高品质素材免费下载!