UX語境下傳統動畫在可視化設計中的應用研究

王哲 張璐 董陽

摘要：UX語境下，研究傳統動畫應用于數字交互可視化的價值和意義。以數字文旅地圖《槐園繪》為研究對象，借助傳統動畫的普世設計范式為數字交互中的可視化提供個性化、民族化、隱喻化、去雷同化并引發情感共鳴的設計思路。傳統動畫創作范式的介入是解決交互可視化設計中，產業化所帶來的雷同性、缺少民族地域特征、缺少情感共鳴等問題的方法之一，同時傳統動畫與交互設計的跨界結合，也是其在新科技、新技術沖擊下的發展和新時代的演繹。

關鍵詞：交互 數字化 傳統動畫 文化旅游 可視化

中圖分類號：TP391.9 文獻標識碼：A文章編號：1003-0069（2023）12-0136-04

引言

數字技術的革新、交互時代的到來形成了UX語境，現代信息傳播的環境和方式正迎來差異化的演變，更多的傳播媒介和視覺媒介交替更迭。傳統動畫在這樣的視域下，圍繞作品本身的閉環生存空間模式受到沖擊，但也促進了其朝著開放媒介形式的轉換。因此，論文通過原創案例數字手繪文旅地圖《槐園繪》的分析，闡述傳統動畫在UX語境中應用的意義、價值和方法。該案例借助傳統動畫的藝術創作手法，不僅為景區提供了手繪質感的數字地圖，同時將輔助旅游的其他景區信息和功能引入其中，比如：景點介紹信息、天氣信息、人流量信息、交通信息等內容。

一、關于UX與傳統動畫的概念

UX的全稱為User experience，即用戶體驗，強調以用戶感受為中心的設計。隨著數字時代中網絡技術、數字媒體技術、新媒介技術的發展，越來越圍繞“人”與“物”之間的關系展開設計?！叭恕痹谑褂谩拔铩睍r發生交互關系的過程中，產生的一種主觀的、抽象的感受，而隨著感受的深入，用戶體驗逐漸從內部的抽象感受演變為需求的滿足，目的就是讓用戶說“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.