视觉传达设计的交互动画特效制作手法探析

邵俊翔 （广西艺术学院 530022）

视觉传达设计的交互动画特效制作手法探析

邵俊翔 （广西艺术学院 530022）

随着信息时代的高速发展和融合，视觉传达设计与日益普及的交互、动画、特效、虚拟现实等构成了新媒体的传播形式。交互设计和视觉设计整合了现代数字技术，让视觉传达设计得到高科技手段的支持，也找到了更为创新的表现途径。视觉传达设计的交互动效制作，让传统视觉设计作品更加创意性与借鉴性。视觉传达设计的交互动效制作给予视觉导向功能以及强化视觉启到更好发挥作用，让视觉传达设计的成果更加经得起受众的欣赏，有利于优化视觉传达设计成果作品。针对目前的流行趋势，探析视觉传达设计的交互动效制作手法和特点，制作与视觉传达设计作品相呼应的动效手法，是对视觉传达技术优化和研究的绝佳手段。

交互设计；视觉传达；动效制作；基本特点

动画特效，以下简称动效，它不但具有交互的功能特性，更具体美观性的艺术特征，应该是视觉传达设计和交互设计相结合的结果。在开展动效设计制作的过程中，交互设计者和视觉传达设计者扮演着导演和摄影师两种不同的角色。而在设计动效制作流程中，交互设计者先考虑好并且理解动效能帮我们解决其中的问题甚至细节，必须把握住动效的运动规律，正如实现运动当中的柔和度。然而对于视觉设计者而言，动效的制作也是需要考虑的范围，在制作过程中应加上很多适合产品风格化的效果。总而言之，交互设计者要学会运用动效解决问题，特别是套更多了解动效是如何实现，结合视觉设计思考动画效果的概念。视觉设计者也要尽量多掌握动效的制作技术，多方面进行思考，从而让自己的效果图动起来。

一、视觉传达设计的交互性

交互性是指向用户提供更加有效的控制和使用信息的手段。交互可以增强对信息和作品的注意力和理解程度，延长信息的保留时间。当交互性被引入时，“活动”本身作为一种媒介信息转变为知识的过程。对数据交换是最底层的交互形式，只是将数据进行转换，如果交互以信息为主，就要对数据进行结算，这就需要知识的辅助。同样，对其他种类的图像和图形，甚至与时间有关的声音、影像视频等，都可以对内容进行处理，以达到更新层次的理解，也就是更高层次的交互。交互性设计的最重要特征就是对结果具有可控制性并能进行信息反馈，也是传递一种交流和经验。能随着用户的使用的变化而进行相应的调整是视觉传达设计的最高层次。这样，用户可以参与到交互创作的设计过程中，界面视觉的剪切、组合与再造，从而呈现出丰富、灵动优美、奇幻的艺术特点。

二、视觉传达设计的交互动效制作手法

（一）GIF小动画动效制作的第一手法，用户的喜好度极高，GIF图片擅长于制作细节的位图小动画，优势在于制作方法简单成本低，容量小，可压缩，以图片的形态适用于各种操作系统。制作GIF动画的方式有很多，例如，我们所熟悉的photoshop时间轴、FLASH、After Effects等软件都可以将动画导出存储为GIF格式。GIF动画最常在交互设计里担当加载进度条、小标签等元素，制作时图片大小和精度之间必须把握平衡，所以它一般用于制作细节的动画。

（二）逐帧动画即是利用一张等间距的动画分解逐帧图片，由JAVASCRIPT脚本模拟编写或是使用CSS3新属性step（）制作而成。这个属性在移动端的兼容性很好的，但使用比较少。逐帧动画和GIF小动画的区别在于脚本可以控制逐帧动画的快慢和动作的暂停，而GIF小动画无法通过制作后期代码的一些属性进行动画速率和透明度的修改。

（三）CSS3这里我们定义它为擅长于平面层的动画，也是动画家族里绝对不会被遗忘的一名成员。CSS3的缺陷应该在于它的部分属性还有被浏览器有好的支持。CSS3的动画三大属性，Transform变形：拥有旋转、扭曲、缩放、移动、矩阵变形五大特效。Transition过渡：拥有修改执行变换的属性，时长，速率和延迟时间的能力，大家都很熟悉的贝塞尔曲线，也是归属于过渡属性的设定之下的。Animation动画：若将Transform解释为动作，Transition解释为过渡，那么Animation则是连续的几个动作，即动画。

（四）SVG，又称为可缩放矢量图，也是动效制作中不可忽略的一大热门方法，擅长于线条的动画，主要的弊端是IE8，ANDROID4.2及以下兼容性不好。涉及到这个沿着元素描边的动画，一般都是使用SVG来完成的，当然，它还可以实现一些复杂的动画，比如一些表情图片的动效制作，实现的成本是比较高难度大。SVG动画图，其实是由一堆的定位锚点链接生成的。所以它可以很方便的存为文档格式。如果你想制作一个SVG动画，请一定要使用illustrator工具绘制出矢量图给到工程师。

（五）HTML5的新元素，类似于画板，拥有多种绘制路径、不同形状图形、字符以及添加图形图像的方式。本身是没有绘制能力的，所有绘制都必须依赖JAVASCRIPT完成，定义它为擅长于绘画的动画。

（六）FLASH转CANVAS的方法也是现在特别火爆的一种形式。FLASH是曾经的辉煌，作品可以做出很炫酷的感觉，通过FLASH制作复杂又精细的动画，导成CANVAS类型文件，动画中的交互操作，依赖CREATE.JS的脚本库完成。

（七）而视频是可以输出很特别的动效，需结合专业的特效制作软件来完成，如After Effects、Ulead COOL 3D等。

（八）只要涉及到交互反馈的动画，小至滚屏翻页，大到重力感应等都需要JS进行处理脚本的编写。也就是说，所有的动画特效都离不开JAVASCRIPT的支持。JAVASCRIPT脚本库可以做出非同凡响的动画效果。

三、视觉传达设计的交互动效制作的基本特点

（一）视觉传达设计的交互动效制作有利于促进观者的感知、记忆、学习。在视觉传达设计作品中，异形元素的作品都是具体一定的特殊性质，特别能促使观者对其记忆深刻。在实践过程中，如果设计者对某一个元素进行反复排列，对其中一部分进行异形处理，则会让这个元素认知度提升，特别是在文字内容环境、信息量较大的图形环境以及静态的展示环境中，融入极其微妙的动态元素可以增强记忆和感知，有利于内容信息的传达。

（二）有利于视觉冲击效果，视觉传达设计融入了二维运动或者三维运动的动态元素，促使视觉传达设计中的交互元素更具有活力和生动的表现形式，增强了观者的视觉冲击，也有很强的目的性。

（三）早期互联网产品应用动画特效较少时，动效给应用或画面达到很强的目标性，主要是为了解决具体的交互问题而存在的。例如网络上常见电子书的翻页效果，因为用户对翻页按钮的手势没有很好的认知也不会很快去适应。

（四）有利于观者的过滤信息。视觉传达设计的交互动效可以有效的突出视觉传达设计中的重点，通过画面和信息状态的改变，促使重要的信息有效的传达，文字信息和图形图像交互动态效果有利于吸引观者的注意力，逐渐融入到视觉传达设计作品中，再通过整合的方式快速发现重点的传递信息。

（五）目前智能移动终端迅速发展，目前设计者都开始用更简单的元素尽量去突出内容，去除繁杂、厚重和冗余的装饰效果，越来越流行扁平化。这样的界面的设计往往给人一种界面很呆滞、设计感偏弱，更是让人觉得很粗糙。所以为了弥补这个问题，交互动效可以让扁平的界面更活泼起来，达到更优秀的界面视觉效果。

四、结语

众所周知，一个设计元素，往往动态比静态更加吸引眼球，动效让视觉传达设计在更大的程度上受到技术的影响，不同的创作思维及艺术观点，带来非比寻常的艺术效果，产生独特的优秀设计作品。一套操作界面，合适的动态交互反馈能给用户带来更好的操作体验；炫酷的动画特效定能助力传播和品牌打造；将动效制作融入到视觉传达设计中，给视觉传达设计的交互作品提升更为理想的效果，有利于视觉传达设计为更多的观者所钦赞，达到新媒体环境下品牌传播以及理念传递的目标。

[1]聂森.视觉传达设计在数码时代的蜕变与革新[J].文教资料，2010（6）.

[2]范媛媛.当代视觉传达设计——交互性的价值与意义[J].包装世界，2010（05）.

[3]詹伟锋.视觉传达设计中的多媒体艺术表现形式研究[J].设计艺术研究，2012（3）.

[4]柯赤枫.基于多媒体艺术表现形式的视觉传达设计研究[J].艺术科技，2013（12）.

邵俊翔（1983-），男，壮族，广西南宁市人，教师，艺术硕士，单位：广西艺术学院设计学院动画专业，研究方向：数字媒体艺术与技术。