交互动画特效设计的主要目的是增强观者对设计作品的印象,更好地实现传达效果。随着现代互联网终端产品不断更新,设计视觉产品要不断满足这些产品终端的需求,以此完善作品。
canvas动画一、交互设计概述
1.交互设计概念
交互设计可以提高使用者对作品的注意力,加深使用者的理解。一般而言,使用交互这种形式主要是对数据之间的交互,但是在交互的形式由数据向信息为主体转变时,这种交互就需要使用知识辅助,并且需要交换数据开展相应的结算。图形信息或者与时间有关的影像视频信息、录音信息等,这些方面的信息内容都可以使用交互处理,使用交互处理技术可以让使用者在对内容理解上达到一个更高的层次。交互技术可以控制交互结果,同时还可以实现对信息内容的反馈,这是使用交互性设计的一个重要特点。要想获得视觉传递的更好效果,设计者需要根据用户的实际情况调整,满足用户的需求,促使用户参与交互实际过程中。用户参与交互设计,才能够促使设计良性循环,持续发展。
2.动画特效
动画特效不仅具有交互功能特性,而且具有美观性的艺术特征。动画特效的形成可以说是交互设计和视
觉传达相结合的结果,在设计动画特效时,交互设计者扮演的是导演角,而视觉传达设计者扮演的是摄影师角。在动画特效设计的流程中,交互设计者要掌握一定的动画特效运动规律,如对动画特效运动中柔和度的控制。对于视觉设计者而言,动画特效也是设计需要考虑的主要内容之一。因此,设计者在制作动画特效时要把很多相关产品风格内容融合在设计中,以此提升设计作品效果。总体而言,交互设计者要想使用动画特效解决设计问题,需要其更加了解动画效果是如何实现的,并结合视觉设计思考
效果。视觉效果设计者需要充分掌握动画特效制作技术,而且要开展多方面的思考,这样才能够促使自己设计的效果图有效“动”起来。
二、视觉传达设计的交互动画特效制作手法
1.G I F小动画特效制作
G I F小动画的动画特效制作,是视觉传达设计的重要手法之一,使用这种方法制作的小动画更易受到使用者的欢迎。这种技术主要的优点是制作技术简单,制作过程中成本相对较低,使用的容量小,具有可以压缩的特点。这种图片可以使用在任何操作系统。制作G I F动画的方式有很多,如使用P h o t o s h o p时间轴。将G I F动画应用在交互设计中,较为常用的是在小标题元素中或在加载进度条元素中。对设计时使用的图片需要有两方面的注意事项:其一是需要有效把握图片的尺寸大小;其二是需
要有效把握图片的精度。在动画细节制作过程中,设计者需要使图片精度和大小之间形成平衡。
2.逐帧动画制作
逐帧动画制作主要采用两种方式:其一是使用一张等间距的动画,分解逐帧图片,然后使用C S S3新属性s t e p s完成制作;其二是使用一张等间距的动画,分解逐帧图片,然后使用J a v a S c r i p t脚本模拟编写完成制作。使用C S S3新属性s t e p s制作的动画,在移动终端上具有较好的兼容性,但在一般的情况下很少使用;使用脚本制作的动画,可以有效控制逐帧动画的快慢,以及可以通过控制手段实现动作的暂停。
3.C S S3使用
C S S3主要应用于一些平面层的动画。使用C S S3制作动画主要具有以下三方面的特性。其一,过渡。这个属性可以有效执行变换的属性能力,也可以将其理解为延迟时间能力,同时也是速率的能力。在动画设计中,很多人都了解贝塞尔曲线,这方
视觉传达设计的交互动画特效制作手法
□王雯
摘要:在信息化时代,新媒体迅速发展,其传播涉及视觉传达设计的交互动画特效。这种动画特效制作会使用很多先进技术,能够使设计作品更具有欣赏性,更好地实现信息传达效果。该文阐述交互设计概念,介绍视觉传达设计的交互动画特效制作手法,探究视觉传达设计交互效果制作的基本特点。
关键词:视觉传达交互动画制作手法
60
视觉设计A R TE D U C A T I O NR E S E A R C H
面内容也可以归属在过渡属性的设定之下。其二,动画。可以把它看作很多个连续的动作,这将会形成动画效果。其三,变形。这个属性具有五个方面的特效,分别是矩阵变形特效、移动特效、缩放特效、扭曲特效、旋转特效。
4.可缩放矢量图
在动画特效设计中,可缩放矢量图形英语的简写表述为S V G。使用可缩放矢量图制作技术在动画特效制作中也是一种重要的方法,这种技术主要应用于线条动画设计。使用可缩放矢量图制作技术的局限性主要体现在I E8版本以下的软件中兼容性能不佳。在设计的动画涉及元素描边动画时,设计者一般会采用可缩放矢量图动画制作技术处理。当然,可缩放矢量图技术还可以应用于比较复杂的动画制作,
如设计时效表情的动画。使用可缩放矢量图制作动画效果的原理主要是通过一堆定位锚点连接生成,因此,使用可缩放矢量图技术制作动画,便于成为文档格式。在制作可缩放矢量图中,需要使用I l l u s t r a t o r工具,这样,设计制作人员才能够有效使用这种工具编辑的图片制作可缩放矢量图动画。
5.H T M L5新元素
这个技术使用在动画制作中相当于使用画板,用H T M L5新元素可以在绘制途径中采用多种方式。同时,其还可以实现多种功能,如,可以添加图形图像方式、字符,使用不同形状的图形等。H T M L5新元素本身没有绘制的功能,因此,要实现绘制图形的效果,设计者必须使用J a v a S c r i p t完成,通过这一辅助绘画软件,可以把H T M L5新元素定格为擅长绘画的动画制作。
6.F l a s h转换为C a n v a s
将F l a s h转换为C a n v a s也是在动画特效设计中比较流行的方法。使用F l a s h技术可以有效增强动画的视觉效果。如果在设计这种动画特效的过程中,需要制作精细、复杂的动画,就可以把它转换为C a n v a s文件格式,实现在动画中的交互操作。
7.J S动画制作使用
在设计的交互反馈动画中,需要小至滚屏翻页、大到重量感的使用,这些功能的编辑都可以使用J S脚
本。因此,所有的动画制作都离不开对于J S的使用,使用J S脚本库可以制造出不同凡响的动画效果。
三、视觉传达设计交互效果制作的基本特点
1.有利于促进观者的学习、记忆和感知
在进行视觉传达设计时,异型元素作品的设计具有特殊性质,其特别的效果能够使观者在使用以后留下深刻的印象。在实际设计作品时,设计者对于设计时的某一元素要经过反复排列组合,同时,要对其中的一些元素开展异型处理。这种方法可以提高元素的认知度,特别是在以下三个环境中使用动态元素,能够促进观者的感知和记忆:一是在静态的展示环境使用动态元素;二是在信息量较大的图像环境中使用动态元素;三是在文字内容环境中使用动态元素。在这三个环境中使用动态元素,能够有效提高内容信息的传达程度。
2.有利于视觉冲击效果
设计传达设计主要融合了两个方面的动态元素:其一是二维运动动态元素;其二是三维运动动态元素。对这两个动态元素的有效使用,能够把视觉传达设计中的交互元素以更生动、更具活力的形式表现出来。这两个动态元素对观者形成了较强的视觉冲击效果,同时还可以表现较强的目的性。
3.增加动画特效
早期的互联网动画产品中使用动画特效较少,但是使用动画特效使画面能够达到很强的目的性,因此使用动画特效主要是为了解决交互中存在的问题。如,在网络上较为常见的一种翻开书页效果,由于用户对翻页按钮手势缺乏较好的认知,所以不会很快地适应。
4.有利于观看者过滤信息
在视觉传达设计中有效使用交互动画特效,能够突出视觉传达设计重点,促使信息的传达。使用动态的文字信息能够吸引人们的注意力,同样,使用动态的图画信息也能够有效吸引人们的注意力。因此,使用动画特效的方法融入视觉传达设计,能够快速传递需要传达的信息。
5.智能终端使用
随着社会的不断发展,智能终端设备的使用越来越广泛。为了满足现代社会对视觉设计的需求,设计者需要根据移动终端的要求,尽可能使用简单的元素突出需要表达的内容。设计者在设计过程中需要去除繁杂、厚重的装饰,使用现在流行的扁平化设计。然而,目前一些扁平化设计作品在一些方面存在设计缺陷,如设计界面较为呆板、设计感较弱等。因此,在设计中为了解决扁平化设计的缺陷,设计者使用交互设计中的动画特效能够使扁平设计界面变得活泼,实现表达信息的效果。
结语
视觉传达设计的交互动画特效制作手法中主要包括七个方面,分别是G I F小动画特效制作、逐帧动画制作、C S S3使用、可缩放矢量图、H T M L5新元素、F l a s h转换为C a n v a s、J S动画制作使用。设计者应使用好这些制作技法,完成视觉传达设计的交互动画特效制作。同时,视觉传达设计的交互动画特效包括五个方面的基本特点,分别是有利于促进观者的学习、记忆和感知、有利于视觉冲击效果、增加动画特效、有利于观者过滤信息、智能终端使用。对这五个方面的认知,也可以增强视觉传达作品的设计效果。
参考文献:
[1]周璨.视觉传达设计在移动U I界面设计中的应用.教育教学论坛,2019(12).
[2]周景山,王朝.探讨图形和文字在视觉传达艺术设计中的应用.戏剧之家,2019(7).
[3]张弘韬,贾雪.视觉传达设计专业“工作室制”教学模式创新研究.设计,2019(5).
[4]邵俊翔.视觉传达设计的交互动画特效制作手法探析.大众文艺,2016(12).
(作者单位:无锡职业技术学院艺术与设计学院)
编辑缪健
61
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论