UX语境下传统动画在可视化设计中的应用研究

王哲 张璐 董阳

摘要：UX语境下，研究传统动画应用于数字交互可视化的价值和意义。以数字文旅地图《槐园绘》为研究对象，借助传统动画的普世设计范式为数字交互中的可视化提供个性化、民族化、隐喻化、去雷同化并引发情感共鸣的设计思路。传统动画创作范式的介入是解决交互可视化设计中，产业化所带来的雷同性、缺少民族地域特征、缺少情感共鸣等问题的方法之一，同时传统动画与交互设计的跨界结合，也是其在新科技、新技术冲击下的发展和新时代的演绎。

关键词：交互 数字化 传统动画 文化旅游 可视化

中图分类号：TP391.9 文献标识码：A文章编号：1003-0069（2023）12-0136-04

引言

数字技术的革新、交互时代的到来形成了UX语境，现代信息传播的环境和方式正迎来差异化的演变，更多的传播媒介和视觉媒介交替更迭。传统动画在这样的视域下，围绕作品本身的闭环生存空间模式受到冲击，但也促进了其朝着开放媒介形式的转换。因此，论文通过原创案例数字手绘文旅地图《槐园绘》的分析，阐述传统动画在UX语境中应用的意义、价值和方法。该案例借助传统动画的艺术创作手法，不仅为景区提供了手绘质感的数字地图，同时将辅助旅游的其他景区信息和功能引入其中，比如：景点介绍信息、天气信息、人流量信息、交通信息等内容。

一、关于UX与传统动画的概念

UX的全称为User experience，即用户体验，强调以用户感受为中心的设计。随着数字时代中网络技术、数字媒体技术、新媒介技术的发展，越来越围绕“人”与“物”之间的关系展开设计。“人”在使用“物”时发生交互关系的过程中，产生的一种主观的、抽象的感受，而随着感受的深入，用户体验逐渐从内部的抽象感受演变为需求的满足，目的就是让用户说“yes”。

传统动画创作形式指利用视觉暂留现象，以中国传统美术片或者日本、西方传统动画片等的创作方式绘制的动画形式。既首先根据绘制的原画完成中间画，然后逐张描线、上色、拍摄完成绘制的一张张连续动态的静帧画面。论文中提到传统动画主要按照艺术形式分为手绘类动画和材料类动画，其中手绘类动画包含水彩动画、水墨动画、油画动画、工笔画动画等不同艺术形式的动画，材料动画包含剪纸动画、铁丝动画、偶动画等利用现实材料作为介质的动画形式。

二、《槐园绘》信息交互动画设计方案

（一）设计特色

就传统动画的发展而言，《槐园绘》的设计是数字化文旅进程中，传统动画的艺术特质应用在数字交互设计中的新尝试。在整个可视化设计的过程中，项目将传统动画由艺术叙事语境转移到解决问题的功能演变，同时在数字交互的过程中增加和突出了传统动画所特有的情感共鸣特性。最后，在项目设计特点中，动画创作对于传统艺术与文化的兼容性能够在数字交互时代做出新诠释与演绎。

就洪洞大槐树寻根祭祖园旅游景区的数字化旅游发展而言，《槐园绘》的设计是基于可移动的景区数字实践与引导的辅助对象，同时也是遗迹景观化的数字延伸产物。这其中就包括景区文本文献等资料、口口相传的民间故事、祭祀习俗活动、景区旅游讯息和文化遗产等景区数字化建设的重要信息资源。以动画设计的方式为旅游提供有趣的线上和线下的交互体验。

（二）设计对象

洪洞大槐树寻根祭祖园作为山西省重点文物保护单位，坐落于山西省临汾市洪洞县临汾盆地北端，总面积为1494平方公里，年平均降水量493．3 mm，年平均温12．3℃。是国家AAAAA级旅游景区，也是全国唯一的以“祭祖”和“寻根”为主题的祭祀圣地，交通便利，有3条交通干道环绕，日最大游客接待量10万人次，景区年游客接待量是202．7万人次。项目《槐园绘》是针对洪洞大槐树寻根祭祖园旅游景区的数字地图开发设计，依托游戏引擎的技术平台，将传统手绘二维动画的设计范式引入App的设计中。

（三）设计构思

数字文旅地图《槐园绘》的设计构思首先基于可移动的、线上和线下结合的出发点，从整体数字框架的搭建出发，依靠移动网络端为基础在苹果和安卓系统环境下进行地图功能模块的App设计。采用App这样的架构主要是基于触觉，始于视觉和听觉的感知方式，且考虑到案例需要的层级拓展方式，所以能够实现高密度人机交互过程，用户群体能从中获取大量的信息。项目《槐园绘》的功能设计主要将旅游者作为对象，主要功能体现在交互层阶段，围绕用户的体验、信息的获取和景区特点作为切入点，用户群体在移动端上可以进行的信息获取包含景区景点空间信息、景区内景点的线路规划信息、景点内容介绍信息、近日天气情况信息、导览车空间位置与使用情况信息、实时人流量及活动推荐、提醒等其他信息。数字资源是后臺处理相关信息的窗口，主要作为信息维护的和反馈的主要途径。（图1）

其次，《槐园绘》项目中美术动画的构思，是利用动态图形设计来瓦解交互过程中审美主体和客体的对立关系，消除审美主客体之间的隔阂，实现审美主客体的情景统一，借此来引起用户的情感共鸣。用户群体在使用《槐园绘》的过程中，情感的共鸣是用户理解审美客体的重要因素，是用户群体完成审美感受的媒介。根据数字地图App功能板块对相关的信息进行动态化图形设计，这是美术动画设计的主要目的。从手绘动画在交互过程中的功能作用和要解决的问题作为切入点，分为艺术表现动画、传达信息动画、传达知识动画、交互转场动画。艺术表现动画（以点击的形式进行交互）主要采用逐帧制作的方式来绘制祥云的飘动、湖水的涟漪、随风摇曳的树木、天鹅的活动、翱翔的鸟儿等具象的图形。整体的动作设计缓慢、悠然、安详，着重烘托、传达景区的生态环境和人文环境来为用户群传达抽象的情感感受。在传达信息的动画（平移和缩放的动作）同样是以逐帧绘制的方式完成。在这部分，具象的指数化信息不再以数字、图表信息、文字表示，而是以绘制的动态化图形替代，比如下雨、下雪、多云的天气效果和天气预报系统等都以传统动画中特效的绘制方法进行表现。通过雨雪程度的表现来表达精准的天气情况。传达知识的动画（点击的交互手势触发）主要以拍摄和配音的设计完成。这部分对景区、景点的故事、文化进行声画演绎，这个动画演绎是针对已知的答案进行说明和讲述。交互转场动画（点击、平移、缩放的手势姿势），这个部分的制作主要是以游戏引擎中的模块生成为主。这个部分也是用户群体在交互过程中最为常见的部分，由于移动端本身的物理显示是有限的，而数字展示内容理论上是无限的，所以项目设计需要通过用户群体的交互在有限的物理显示中触发无限的数字信息。另外，有一部分的交互界面有一些非常规的设计，比如闪烁切换界面等，这也需要逐帧绘制的方式完成。传统动画的多样性决定其在表现的过程中有很多夸张、丰富的艺术形式，这些细腻、生动的艺术语言对于交互转场动画有积极的意义，能够丰富UX交互中审美客体的表现张力。（图2）

（四）设计原理

1.围绕区域特色的元素设计洪洞县或者周边区域的美术、戏曲等的非物质文化遗产则能够集中体现这些社会现象，所以相关的项目美术设计从晋南临汾洪洞县地区的民间美术中提炼设计元素，从具有深厚群众基础的民间艺术中挖掘“形”的资源，通过提取剪纸、窗花、皮影、年画中的典型美术特征，对其做适合现代审美的美术设计，这是潜在于审美客体下的信息表意方法。

项目美术设计从洪洞县的民间文化习俗中取材，在以农耕文化为依托的洪洞县非物质文化遗产中，不管是大槐树祭祖习俗，还是走亲习俗中处处可以看到以“红色”为主的元素围绕在整个活动中，在以家族意识为核心的活动中起到压邪、驱邪的作用，作为安身立命的护身符，是地域文化图腾和精神的寄托，有着丰富的意义和隐喻作用，洪洞县这种“尚红”品质在民间习俗和艺术中体现较为明显，比如洪洞县南边的浮山县剪纸艺术、走亲活动中相互系上的红丝带、祭祖活动中的红木箱柜等。所以“尚红”品质同样体现在数字手绘地图的用色搭配中，但是颜色的使用根据整体的色调不同进行差异性调整。其次，民间剪纸艺术更是项目造型的取材重点，洪洞县剪纸受相邻的浮山剪纸影响，世代相传，有着百余年的发展历程，见证了历史的变迁。民间用剪纸点缀自己的生活，其造型内容丰富、形象纯朴，是当地人民生活的写照，生动地反映了太岳山区人民的生活状态。所以，《槐园绘》的配色主要以红色作为基础色，再根据层级的不同做了红色差异的调整，代表远方的或者背景层的红色的纯度较低。在造型设计方面主要涉及到建筑、标示、动物、植物、物理现象、按钮等元素。而造型的设计离不开洪洞县的民间文化、艺术，最终元素的提炼和简化设计围绕平面构成元素展开，强调外部造型的美感是其内部功能的延续，这就要求设计的形式不能过于的复杂，能够醒目地阐述其主要功能，传达该造型的信息即可。因此很多造型的设计都是一些基本形状，比如祥云，树木等元素的造型。（图3）

《槐园绘》的美术设计离不开深厚的地域民间艺术与文化，审美氛围的营造离不开民族性和信息交互技术的相互渗透。所以提升大众审美意识与水平，拓宽地域性文化输出的广度，满足大众审美的和谐共生才是UX时代信息交互设计的重要原则之一。比如，在各地关于移民后裔的文本记载中，与之相关的大槐树、祭祖活动、寻根民俗活动等构成了文化元素的场域。很多此类的元素属于非物质文化遗产，需要绘制符号作为移民故乡情的文化记忆和文化标志，借此进一步演化为“寻根祭祖”的感情符号。基于这样的特质，设计中速写手绘的质感成为主建筑和许多元素绘制的主要风格，用户只需以拉伸的手势放大地图就可以看到较为清晰的局部景点的速写图。其次，点击这些景点还可以看到景点的介绍，介绍界面的设计采用传统绘画中的留白方式。最后，远景的山峰，云朵的处理中，晕染的方式可以丰富层次。（图4）

2.丰富深层释意的动画设计

在《槐园绘》的一些可视化功能需求方面，极力地将尽可能多的数据转化为图形化的演绎，以此丰富其深层的情感趣味性。设计过程中，借助动画特效的创作方式，完成了数据信息的可视化设计。将传统动画的特效表现性动作作为信息可视化和知识可视化的设计范式，通过原画设计來完成可视化的过程，并且通过单循环原画设计中动作设计的差异化来实现程度信息上的区别，既利用传统动画中特效效果的原画设计，绘制表现出同一类物理现象的不同程度之间的差异，比如小雨、中雨、大雨、雷阵雨的差异；多云和阴天的差异；旗子舞动的程度反映风的大小，最终天气系统以传统动画的特效绘制方法取代数字和文字的信息。由于设计中软件加载速度的限制，基本控制在四到八帧完成一个动作循环。运动帧速率和时间是固定的单位值，每一帧之间原画运动幅度的变化是控制特效强度的主要方式。如果每一帧的绘制较好地表现了特效的强弱，则通过增减中间帧来增加和缩减播放时长，以此体现特效程度的变化。（图5）

项目在信息交互的过程中，传统动画的原画设计帮助完成信息的传达，动作形态的设计通过客体的超现实视觉张力感受，为交互主体构筑主观的情感世界，动物、人物和器物的运动样式反映出情绪的反馈和有意志的目的性，传递信息状态、反映和有目的的心理活动，致力于描绘交互主体的潜意识和并置不同的视觉思想。原画设计过程中，为了将大移民特色的寻根民俗活动从现实民间时域中抽离出来，动作的设计趋于规格化和表演化。这样可以更多口口相传的叙事形式以新的、符号化的姿态出现在用户意识中，同时尽量维持原画表现的张力要与文化倾向的魅力相一致，依据不同景点的文化背景和不同的节日节气做不同类型的夸张设计。正如《槐园绘》中设计不同形态的走路类型、不同类型车辆行驶姿态、不同类型的动物嬉戏状态等，不同动作的设计能够通过用户群体本身的知识、经验、性格等自身因素产生不同方向和内涵的审美活动，带来恬静、安逸、悲伤、勇敢等抽象的情绪语境。景区主要有3个景点，祭祖活动区庄重严肃，这个区域的动作设计大气磅礴，充满仪式感；民俗游览区则从皮影，戏剧等民俗艺术中提炼符号化的动作作为动作设计的元素；汾河生态区属于休闲娱场所，所以增加了动物和人物的动作节奏比较慢，凸显安逸的状态。在信息可视化和知识可视化的过程中根据情景不同、人文环境的变化做相匹配的动作原画设计，以去疆域化的姿态挖掘文本语言下开放的情感共鸣环境和审美交互形式。

3.提升交互效率的反馈设计

考虑到移动端可将无限的信息内容集中于有限的方寸屏中，所以信息的传达和显示需具有明显的层级关系，手绘地图界面在交互的过程中会涉及到用户群体对于信息的主观筛选，用户通过按、滑、拖、拽等手部行为主动对想知道的信息和知识进行选择操作，随着手势动作的累加完成不同信息层次的切换，所以信息层级筛选的交互方式需要符合用户的交互行为习惯。由于用户群体与信息进行交互的时候易于将彼此靠近或接近的物体分在同一组，具有将事物组织、归整、放置在一起的行为习惯，所以《槐园绘》将相互关联的内容和控件以减少彼此之间空间距离的方式关联在一起。其次，交互过程中可选择的选项数量也会影响用户群体做出信息筛选和层级选择的时间和效率，如果可选择信息数量增加，做出筛选的时间将以对数形式增加，从而影响用户体验感受。所以《槐园绘》在信息的筛选方面做引导式的处理，部分主要功能的关键信息借助传统动画动态元素的演绎来引导用户群体的选择，比如水滴落在相关信息或者按键处造成涟漪等传统动画的特效处理方式，以此吸引用户群体的注意力，引导用户进行高效的信息交互，完成可视化的过程。

另外，传统动画应用于信息交互过程中，动画的功能种类、界面介入的动画运动方式和信息介入的时长会影响用户主观地与部分信息进行交互的频次和感受。传统动画在《槐园绘》项目中应用，根据手势交互动作的需要，按照使用功能的分类包括引导动画、信息交互动画、控件动画和艺术动画。对于不同功能类别的动画有严格的时间控制，时间过久容易给用户群体带来疲惫感，时间过快容易带来信息传达的不完整，不管是过快还是过慢都会影响用户群体的交互体验，信息量也决定了交互的时长，信息量大用户群体停留时间延长，信息量少则停留时间缩段。（表1）

结语

传统动画在UX时代，被新技术发展的多样性瓦解了传统美学的灵光，让传统艺术的导向变成了解决问题的功能性，并逐渐将其演绎为可被大众使用和掌握的事物。同样在UX时代的新技术也在不断吸收着本民族艺术的灵光，驱使这种形式自身的发展。所以，传统动画与信息交互之间有着千丝万缕的关联，传统艺术和交互新技术绝不是独立的对立关系，彼此之间的相互渗透，是对传统的继承和发扬。而传统动画的普世设计手法恰恰能为信息交互设计提供更为深刻和全方位的设计范式，《槐园绘》项目的设计原理只能作为信息交互设计中的一种类型展开设计，借此摆脱信息交互设计的产业化、雷同化的现象。

基金项目：1.该论文系2020省教育厅高等学校哲学社会科学研究项目《UX视域下传统动画在信息交互中的可视化研究》 编号：2020W229；2 .该论文系2 0 2 2项目《孟县景区规划动画宣传片制作委托书》 编号：16/820478。

参考文献

[1]刘麟霄，孙强，杨铮.UE时代下交互式动画研究[J].出版广角2018，（07）：69-71.

[2]林琳.UI/UX设计师必须了解用户的这些心理[J].计算机与网络2018，44（20）：45.

[3]王娜娜，陈小林.信息可视化还是知识可视化？——ISOTYPE中的视觉教育研究[J].装饰2019，（07）：92-95.

[4]何洁，王玥然.形意媒传·艺科融合——视觉传达设计研究的新视域[J].装饰2019，（10）：20-23.

[5]杨丽雯，王勇智 ，高月.洪洞大槐树寻根祭祖园生态服务流模拟[J].山西大学学报（自然科学版）2019，42（2）：473-481.

[6]宿子顺.信息产品中功能性动画的交互设计原理研究[J].包装工程2014，35（18）：30-33，38.

[7]张承志.中国动画"美术片"的特点及其价值分析[J].现代传播2009，（3）：61-64.

[8]韋艳丽.新媒体交互艺术[M].北京：化学工业出版社2018：27，106-107.

[9]王妍，朱俐徽，巩新龙.基于具身认知的博物馆虚拟展陈交互设计研究[J].设计，2023，36（4）：138-141.

[10]李婷，张春红.基于信息可视化的动态图形设计应用研究——以科普动画设计为例[J].设计，2022，35（8）：140-142.