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

摘 要：在社会信息化时代背景下，信息技术不断进步，促使了新媒体的出现与迅速发展，视觉传达设计与近年来日益普及的虚拟现实、特效、交互以及动画等，构成了新媒体的传播形式。在交互动画特效制作过程中，需要应用诸多先进的科学技术，才能提高视觉传达设计作品的观赏性，从而达到良好的信息传达效果。本文主要对视觉传达设计的交互动画特效制作手法进行了分析。

关键词：视觉传达设计;交互动画;特效;制作手法

视觉传达设计是通过可视形式传播特定事物的主动行为，其主要依赖视觉，并辅以绘画、插画、标识、色彩、排版、电子设备、平面设计等二维空间的影像表现。交互动画特效的作用是加强观者对视觉传达设计作品的印象，从而更好地发挥视觉传达设计作品对特定事物的传达效果。近年来，社会经济迅速发展，人们的生活水平不断提高，对信息的需求也在不断增加，这促使了互联网终端产品的日益普及。同时，随着科学技术的进步，互联网终端产品的更新换代速度也在不断加快，相关设计者必须对视觉传达设计作品进行不断优化、完善，才能更好地满足互联网终端产品不断提高的要求。

1 视觉传达设计与交互动画特效

现代数字技术与视觉传达設计、交互设计之间的有机整合，使得视觉传达设计找到了新的表现途径，也得到了高科技手段的支持。视觉传达设计的交互动画特效制作，使得视觉设计作品更富有创意性、创新性与借鉴性，同时也提高了视觉传达设计作品的视觉导向功能，让视觉传达设计作品更加得到受众的认可与喜爱，可以实现视觉传达设计作品整体质量的提高。

交互设计指的是，向用户提供有效的控制信息及使用信息的手段。交互设计可有效提高用户对视觉传达设计作品的理解程度与注意力。通常情况下，交互主要指的是数据的交互，但在交互形式由数据向信息为主体进行转变的过程中，这种交互必须以知识作为辅助，同时交换数据开展的结算。与时间有关的录音信息、视频影像信息或者是图形信息等，均可以采取交互处理。应用交互处理技术，能够使用户在更高层次上理解视觉传达设计作品。采取交互处理技术，还可以对交互结果进行控制，同时也能有效反馈信息内容，这是交互设计的主要特点之一。为了提高视觉传递效果，视觉传达设计者必须充分考虑用户的具体情况及具体要求，对交互设计进行合理调整，使用户参与到交互中去。

动画特效兼具功能特性、艺术特性，主要的功能特性为交互性，主要的艺术特性为美观性，动画特效是视觉传达设计、交互设计有机结合的产物。在交互动画特效制作中，视觉传达设计者、交互设计者扮演的角色不同，前者扮演摄影师的角色，而后者扮演导演的角色。在交互动画特效制作流程中，视觉传达设计者、交互设计者考虑的因素也有所不同。交互设计者应正确认识动画特效能够解决的视觉传达设计中的问题，并把握动画特效的运动规律;而视觉传达设计者也要充分考虑动画特效制作方面的问题，在动画特效制作过程中，适当增加一些能够提高视觉传达设计作品整体效果的细节。也就是说，交互设计者应当掌握如何应用动画特效去解决视觉传达设计中的问题，并要了解如何实现动画特效，与视觉传达设计有机结合起来，确保动画特效的成果。视觉传达设计者应对动画特效制作技术进行学习，多方面考虑，使效果图能够“动”起来。

2 视觉传达设计的交互动画特效制作的优势

2.1 便于记忆、感知

对目前的视觉传达设计作品的特点进行分析发现，但凡是异形元素作品，均有着明显的特殊性质，能够使观者产生深刻的记忆。基于此，在实际开展视觉传达设计的过程中，设计者应当针对某一元素，反复进行排列、组合，并对其中的一部分实施一定的异形处理，从而提升这一异形元素的认知度。例如可以使用动态元素，众所周知，动态的元素往往要比静态的元素更加富有趣味性，更吸引人们眼球。设计者可以在静态展示环境、信息量较大的图形环境、文字内容环境中对动态元素进行灵活运用，并以此来提高用户对视觉传达设计作品的记忆、感知，便于传达内容信息，充分发挥视觉传达设计的作用。

2.2 目的性较强

我国的动画特效起步较晚、发展时间较短，早期动画产品中很少使用动画特效，动画特效的应用具有非常强的目的性，是为了解决交互过程中存在的问题。例如，翻页效果是电子书比较常见的一种动画特效，但是由于用户缺乏对翻页按钮手势的正确认识与应用，不能很快适应这种特效。

2.3 视觉冲击效果较强

视觉传达设计与动态元素（如二维运动元素、三维运动元素）有机结合起来，可以使视觉传达设计交互元素的表现形式更加生动，更加具有活力，不仅目的性很强，而且给观者带来的视觉冲击效果也比较强。

2.4 便于观者过滤信息

对交互动画特效的制作，可以突出视觉传达设计的重点，达到提高信息传达效果的作用。动态文字信息的应用，可以更好地吸引人们的眼球，同时，动态图画信息的使用，也可以吸引人们的注意力。所以说，在视觉传达设计中融入交互动画特效，可以将需要传达的信息快速传递出去。此外，交互动画特效的融合，可以改变信息、画面的状态，以有效传达重要的信息，提高图形图像、文字信息的交互动态效果;并将其融入视觉传达设计作品中，然后采取整合的方式，快速发现重点的传递信息。

2.5 界面视觉效果较好

随着市场经济的迅速发展，人们的生活水平不断提高，促使各种科技产品进入千家万户，智能移动终端逐渐得到普及。为满足智能移动终端不断提高的对视觉传达设计的要求，视觉传达设计者应以实际情况为依据，尽量应用简单的元素突出内容，在视觉传达设计过程中尽可能地去除那些冗余、厚重、繁杂的装饰效果，实现扁平化设计，这也是目前视觉传达设计的流行趋势。但就现阶段来说，扁平化设计还存在着一定的缺陷，最大的缺陷在于界面比较呆板，缺乏设计感，给人粗糙、劣质之感。面对这样的情况，在视觉传达设计中应用交互动画特效，可以使扁平的界面变得活泼，解决了扁平化设计的问题，界面视觉效果较好。

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

3.1 CSS3

CSS3（Cascading Style Sheets Level 3）是CSS（层叠样式表）技术的升级版本，它是动画家族中的一个重要成员，擅长平面层的动画。CSS3的动画，具有三个特性：一是变形Transform，其具有五大特效，分别为旋转特效、扭曲特效、缩放特效、移动特效以及矩阵变形特效。二是过渡Transition，其具有修改执行变换属性的能力以及延迟时间与修改速率、时长的能力。目前业内对贝塞尔曲线的认识较多，而贝塞尔曲线也是CSS3的过渡属性。三是Animation动画，若Transform为动作，Transition为过渡，Animation则是动画，也就是连续几个动作。与此同时，CSS3也有一定的缺点，主要在于其部分属性有浏览器的支持，在实际应用CSS3的时候，应注意采取有效的措施，解决其缺陷问题。

3.2 逐帧动画

在视觉传达设计中，逐帧动画也是比较常见的一种交互动画特效制作手法。其主要采取两种制作方法，一是用一张动画，该动画为等间距的，对图片进行逐帧分解，并應用Steps这一CSS3的新属性来完成制作;二是用一张动画，该动画为等间距的，对图片进行逐帧分解，并应用JavaScript脚本进行模拟编写。在使用Steps这一CSS3的新属性来进行动画制作的时候，可以提高其成果的兼容性，在诸多类型的移动终端上均可以应用，但就现阶段来说，这一方法很少被使用。在使用JavaScript脚本进行模拟编写来进行动画制作的时候，可以对逐帧动画的快慢进行有效控制，还可以采取控制手段，来暂停动作，这是目前比较常用的一种动画特效制作方法。

3.3 GIF

在视觉传达设计中，GIF小动画特效是比较常用的一种交互动画特效制作手法。采取GIF小动画特效方法进行制作的小动画，由于具有良好的趣味性，受到了用户的认可与欢迎。GIF小动画特效的优势主要在于制作技术相对简单、使用容量相对较小、成本相对较低、可以进行压缩、任何操作系统均可以使用等。GIF小动画特效的制作方法有多种，如可以应用Photoshop时间轴。在交互设计中运用GIF动画，比较常见的是在加载进度条元素、小标题元素中进行应用。在实际设计过程中，选择图片的时候，一是要注意图片尺寸大小的仔细把握，二是注意图片精度。在细节制作时，必须确保图片尺寸大小、图片精度之间的平衡。

3.4 将Flash转换为Canvas

在视觉传达设计中，将Flash转换为Canvas是一种比较常用的交互动画特效制作手法。应用Flash，可实现动画视觉效果的提高。在动画特效制作中，针对复杂的、精细的动画，可以将其转换为Canvas格式，以实现交互操作。

3.5 HTML5

在交互动画特效制作中，HTML5元素与使用画板相似。HTML5本身无绘制功能，为得到绘制图形的效果，必须使用辅助绘画软件——JavaScript，从而将HTML5定格为擅长绘画的动画制作。应用HTML5元素，便能在绘制中采取多种方式，也可以实现多种功能，如使用不同形状的图形，添加图形图像方式或字符等。

3.6 JavaScript

对交互反馈动画进行设计的时候，需要使用大到重量感，小至滚屏翻页，编辑这些功能的时候，可以应用JS（JavaScript）脚本。可以说，所有动画特效的制作，均需要使用JS，通过JS脚本库，能够制作各种各样的动画特效效果。

3.7 SVG

SVG（Scalable Vector Graphics）即可缩放矢量图。SVG技术也是交互动画特效的一种重要的制作方法，适用于线条动画设计。在实际使用SVG技术的过程中发现，其存在一定的缺陷，即在IE8版本以下的软件中，兼容性能较差。在对涉及元素描边的动画进行设计的时候，可采取SVG技术进行处理。同时，SVG技术还可以应用在复杂程度较高的动画特效制作中，如需要设计时效表情的动画等。在应用SVG技术进行动画特效制作的时候，原理在于通过一堆定位锚点连接生成，所以可采取SVG技术进行动画制作，还可以将其转变为文档格式。需要注意的是，在应用SVG技术进行制作动画特效的过程中，需应用Illustrator软件。

4 结语

视觉传达设计的交互动画特效主要有CSS3、逐帧动画、GIF、将Flash转换为Canvas、HTML5、JavaScript、SVG等制作手法。在视觉传达设计中，应对这些制作方法进行合理应用，以提高视觉传达设计的交互动画特效制作效果。

参考文献：

[1] 王雯.视觉传达设计的交互动画特效制作手法[J].美术教育研究，2019（12）：60-61.

[2] 王毅萍，曾雪瑶.以用户体验为主的移动端3D交互动画创作管窥[J].大众文艺，2019（01）：127.

[3] 刘淼.视觉传达设计的发展——新视觉现象[J].美术教育研究，2017（13）：82+84.

[4] 孙鑫岩.新媒体时代视觉传达设计发展思考[J].科技传播，2018，10（17）：72-73.

[5] 何蓉. H5交互动画在新闻报道中的应用和趋势——以党的十九大会议和2018年全国两会报道为例[J].新闻研究导刊，2018，9（17）：53-54+76.

[6] 夏丽雯.基于移动终端的交互式动画设计探讨[J].新媒体研究，2018，4（13）：126-127.

[7] 邓美辰，尚亚庆.试析基于数字媒体语境下的视觉传达设计[J].农家参谋，2017（19）：232.

推荐访问： 交互 传达 试论 手法 特效制作