UX語境下傳統(tǒng)動畫在可視化設(shè)計中的應(yīng)用研究

王哲 張璐 董陽

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

關(guān)鍵詞：交互 數(shù)字化 傳統(tǒng)動畫 文化旅游 可視化

中圖分類號：TP391.9 文獻(xiàn)標(biāo)識碼：A文章編號：1003-0069（2023）12-0136-04

引言

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

一、關(guān)于UX與傳統(tǒng)動畫的概念

UX的全稱為User experience，即用戶體驗(yàn)，強(qiáng)調(diào)以用戶感受為中心的設(shè)計。隨著數(shù)字時代中網(wǎng)絡(luò)技術(shù)、數(shù)字媒體技術(shù)、新媒介技術(shù)的發(fā)展，越來越圍繞“人”與“物”之間的關(guān)系展開設(shè)計?！叭恕痹谑褂谩拔铩睍r發(fā)生交互關(guān)系的過程中，產(chǎn)生的一種主觀的、抽象的感受，而隨著感受的深入，用戶體驗(yàn)逐漸從內(nèi)部的抽象感受演變?yōu)樾枨蟮臐M足，目的就是讓用戶說“yes”。

傳統(tǒng)動畫創(chuàng)作形式指利用視覺暫留現(xiàn)象，以中國傳統(tǒng)美術(shù)片或者日本、西方傳統(tǒng)動畫片等的創(chuàng)作方式繪制的動畫形式。既首先根據(jù)繪制的原畫完成中間畫，然后逐張描線、上色、拍攝完成繪制的一張張連續(xù)動態(tài)的靜幀畫面。論文中提到傳統(tǒng)動畫主要按照藝術(shù)形式分為手繪類動畫和材料類動畫，其中手繪類動畫包含水彩動畫、水墨動畫、油畫動畫、工筆畫動畫等不同藝術(shù)形式的動畫，材料動畫包含剪紙動畫、鐵絲動畫、偶動畫等利用現(xiàn)實(shí)材料作為介質(zhì)的動畫形式。

二、《槐園繪》信息交互動畫設(shè)計方案

（一）設(shè)計特色

就傳統(tǒng)動畫的發(fā)展而言，《槐園繪》的設(shè)計是數(shù)字化文旅進(jìn)程中，傳統(tǒng)動畫的藝術(shù)特質(zhì)應(yīng)用在數(shù)字交互設(shè)計中的新嘗試。在整個可視化設(shè)計的過程中，項(xiàng)目將傳統(tǒng)動畫由藝術(shù)敘事語境轉(zhuǎn)移到解決問題的功能演變，同時在數(shù)字交互的過程中增加和突出了傳統(tǒng)動畫所特有的情感共鳴特性。最后，在項(xiàng)目設(shè)計特點(diǎn)中，動畫創(chuàng)作對于傳統(tǒng)藝術(shù)與文化的兼容性能夠在數(shù)字交互時代做出新詮釋與演繹。

就洪洞大槐樹尋根祭祖園旅游景區(qū)的數(shù)字化旅游發(fā)展而言，《槐園繪》的設(shè)計是基于可移動的景區(qū)數(shù)字實(shí)踐與引導(dǎo)的輔助對象，同時也是遺跡景觀化的數(shù)字延伸產(chǎn)物。這其中就包括景區(qū)文本文獻(xiàn)等資料、口口相傳的民間故事、祭祀習(xí)俗活動、景區(qū)旅游訊息和文化遺產(chǎn)等景區(qū)數(shù)字化建設(shè)的重要信息資源。以動畫設(shè)計的方式為旅游提供有趣的線上和線下的交互體驗(yàn)。

（二）設(shè)計對象

洪洞大槐樹尋根祭祖園作為山西省重點(diǎn)文物保護(hù)單位，坐落于山西省臨汾市洪洞縣臨汾盆地北端，總面積為1494平方公里，年平均降水量493．3 mm，年平均溫12．3℃。是國家AAAAA級旅游景區(qū)，也是全國唯一的以“祭祖”和“尋根”為主題的祭祀圣地，交通便利，有3條交通干道環(huán)繞，日最大游客接待量10萬人次，景區(qū)年游客接待量是202．7萬人次。項(xiàng)目《槐園繪》是針對洪洞大槐樹尋根祭祖園旅游景區(qū)的數(shù)字地圖開發(fā)設(shè)計，依托游戲引擎的技術(shù)平臺，將傳統(tǒng)手繪二維動畫的設(shè)計范式引入App的設(shè)計中。

（三）設(shè)計構(gòu)思

數(shù)字文旅地圖《槐園繪》的設(shè)計構(gòu)思首先基于可移動的、線上和線下結(jié)合的出發(fā)點(diǎn)，從整體數(shù)字框架的搭建出發(fā)，依靠移動網(wǎng)絡(luò)端為基礎(chǔ)在蘋果和安卓系統(tǒng)環(huán)境下進(jìn)行地圖功能模塊的App設(shè)計。采用App這樣的架構(gòu)主要是基于觸覺，始于視覺和聽覺的感知方式，且考慮到案例需要的層級拓展方式，所以能夠?qū)崿F(xiàn)高密度人機(jī)交互過程，用戶群體能從中獲取大量的信息。項(xiàng)目《槐園繪》的功能設(shè)計主要將旅游者作為對象，主要功能體現(xiàn)在交互層階段，圍繞用戶的體驗(yàn)、信息的獲取和景區(qū)特點(diǎn)作為切入點(diǎn)，用戶群體在移動端上可以進(jìn)行的信息獲取包含景區(qū)景點(diǎn)空間信息、景區(qū)內(nèi)景點(diǎn)的線路規(guī)劃信息、景點(diǎn)內(nèi)容介紹信息、近日天氣情況信息、導(dǎo)覽車空間位置與使用情況信息、實(shí)時人流量及活動推薦、提醒等其他信息。數(shù)字資源是后臺處理相關(guān)信息的窗口，主要作為信息維護(hù)的和反饋的主要途徑。（圖1）

其次，《槐園繪》項(xiàng)目中美術(shù)動畫的構(gòu)思，是利用動態(tài)圖形設(shè)計來瓦解交互過程中審美主體和客體的對立關(guān)系，消除審美主客體之間的隔閡，實(shí)現(xiàn)審美主客體的情景統(tǒng)一，借此來引起用戶的情感共鳴。用戶群體在使用《槐園繪》的過程中，情感的共鳴是用戶理解審美客體的重要因素，是用戶群體完成審美感受的媒介。根據(jù)數(shù)字地圖App功能板塊對相關(guān)的信息進(jìn)行動態(tài)化圖形設(shè)計，這是美術(shù)動畫設(shè)計的主要目的。從手繪動畫在交互過程中的功能作用和要解決的問題作為切入點(diǎn)，分為藝術(shù)表現(xiàn)動畫、傳達(dá)信息動畫、傳達(dá)知識動畫、交互轉(zhuǎn)場動畫。藝術(shù)表現(xiàn)動畫（以點(diǎn)擊的形式進(jìn)行交互）主要采用逐幀制作的方式來繪制祥云的飄動、湖水的漣漪、隨風(fēng)搖曳的樹木、天鵝的活動、翱翔的鳥兒等具象的圖形。整體的動作設(shè)計緩慢、悠然、安詳，著重烘托、傳達(dá)景區(qū)的生態(tài)環(huán)境和人文環(huán)境來為用戶群傳達(dá)抽象的情感感受。在傳達(dá)信息的動畫（平移和縮放的動作）同樣是以逐幀繪制的方式完成。在這部分，具象的指數(shù)化信息不再以數(shù)字、圖表信息、文字表示，而是以繪制的動態(tài)化圖形替代，比如下雨、下雪、多云的天氣效果和天氣預(yù)報系統(tǒng)等都以傳統(tǒng)動畫中特效的繪制方法進(jìn)行表現(xiàn)。通過雨雪程度的表現(xiàn)來表達(dá)精準(zhǔn)的天氣情況。傳達(dá)知識的動畫（點(diǎn)擊的交互手勢觸發(fā)）主要以拍攝和配音的設(shè)計完成。這部分對景區(qū)、景點(diǎn)的故事、文化進(jìn)行聲畫演繹，這個動畫演繹是針對已知的答案進(jìn)行說明和講述。交互轉(zhuǎn)場動畫（點(diǎn)擊、平移、縮放的手勢姿勢），這個部分的制作主要是以游戲引擎中的模塊生成為主。這個部分也是用戶群體在交互過程中最為常見的部分，由于移動端本身的物理顯示是有限的，而數(shù)字展示內(nèi)容理論上是無限的，所以項(xiàng)目設(shè)計需要通過用戶群體的交互在有限的物理顯示中觸發(fā)無限的數(shù)字信息。另外，有一部分的交互界面有一些非常規(guī)的設(shè)計，比如閃爍切換界面等，這也需要逐幀繪制的方式完成。傳統(tǒng)動畫的多樣性決定其在表現(xiàn)的過程中有很多夸張、豐富的藝術(shù)形式，這些細(xì)膩、生動的藝術(shù)語言對于交互轉(zhuǎn)場動畫有積極的意義，能夠豐富UX交互中審美客體的表現(xiàn)張力。（圖2）

（四）設(shè)計原理

1.圍繞區(qū)域特色的元素設(shè)計洪洞縣或者周邊區(qū)域的美術(shù)、戲曲等的非物質(zhì)文化遺產(chǎn)則能夠集中體現(xiàn)這些社會現(xiàn)象，所以相關(guān)的項(xiàng)目美術(shù)設(shè)計從晉南臨汾洪洞縣地區(qū)的民間美術(shù)中提煉設(shè)計元素，從具有深厚群眾基礎(chǔ)的民間藝術(shù)中挖掘“形”的資源，通過提取剪紙、窗花、皮影、年畫中的典型美術(shù)特征，對其做適合現(xiàn)代審美的美術(shù)設(shè)計，這是潛在于審美客體下的信息表意方法。

項(xiàng)目美術(shù)設(shè)計從洪洞縣的民間文化習(xí)俗中取材，在以農(nóng)耕文化為依托的洪洞縣非物質(zhì)文化遺產(chǎn)中，不管是大槐樹祭祖習(xí)俗，還是走親習(xí)俗中處處可以看到以“紅色”為主的元素圍繞在整個活動中，在以家族意識為核心的活動中起到壓邪、驅(qū)邪的作用，作為安身立命的護(hù)身符，是地域文化圖騰和精神的寄托，有著豐富的意義和隱喻作用，洪洞縣這種“尚紅”品質(zhì)在民間習(xí)俗和藝術(shù)中體現(xiàn)較為明顯，比如洪洞縣南邊的浮山縣剪紙藝術(shù)、走親活動中相互系上的紅絲帶、祭祖活動中的紅木箱柜等。所以“尚紅”品質(zhì)同樣體現(xiàn)在數(shù)字手繪地圖的用色搭配中，但是顏色的使用根據(jù)整體的色調(diào)不同進(jìn)行差異性調(diào)整。其次，民間剪紙藝術(shù)更是項(xiàng)目造型的取材重點(diǎn)，洪洞縣剪紙受相鄰的浮山剪紙影響，世代相傳，有著百余年的發(fā)展歷程，見證了歷史的變遷。民間用剪紙點(diǎn)綴自己的生活，其造型內(nèi)容豐富、形象純樸，是當(dāng)?shù)厝嗣裆畹膶懻?，生動地反映了太岳山區(qū)人民的生活狀態(tài)。所以，《槐園繪》的配色主要以紅色作為基礎(chǔ)色，再根據(jù)層級的不同做了紅色差異的調(diào)整，代表遠(yuǎn)方的或者背景層的紅色的純度較低。在造型設(shè)計方面主要涉及到建筑、標(biāo)示、動物、植物、物理現(xiàn)象、按鈕等元素。而造型的設(shè)計離不開洪洞縣的民間文化、藝術(shù)，最終元素的提煉和簡化設(shè)計圍繞平面構(gòu)成元素展開，強(qiáng)調(diào)外部造型的美感是其內(nèi)部功能的延續(xù)，這就要求設(shè)計的形式不能過于的復(fù)雜，能夠醒目地闡述其主要功能，傳達(dá)該造型的信息即可。因此很多造型的設(shè)計都是一些基本形狀，比如祥云，樹木等元素的造型。（圖3）

《槐園繪》的美術(shù)設(shè)計離不開深厚的地域民間藝術(shù)與文化，審美氛圍的營造離不開民族性和信息交互技術(shù)的相互滲透。所以提升大眾審美意識與水平，拓寬地域性文化輸出的廣度，滿足大眾審美的和諧共生才是UX時代信息交互設(shè)計的重要原則之一。比如，在各地關(guān)于移民后裔的文本記載中，與之相關(guān)的大槐樹、祭祖活動、尋根民俗活動等構(gòu)成了文化元素的場域。很多此類的元素屬于非物質(zhì)文化遺產(chǎn)，需要繪制符號作為移民故鄉(xiāng)情的文化記憶和文化標(biāo)志，借此進(jìn)一步演化為“尋根祭祖”的感情符號?；谶@樣的特質(zhì)，設(shè)計中速寫手繪的質(zhì)感成為主建筑和許多元素繪制的主要風(fēng)格，用戶只需以拉伸的手勢放大地圖就可以看到較為清晰的局部景點(diǎn)的速寫圖。其次，點(diǎn)擊這些景點(diǎn)還可以看到景點(diǎn)的介紹，介紹界面的設(shè)計采用傳統(tǒng)繪畫中的留白方式。最后，遠(yuǎn)景的山峰，云朵的處理中，暈染的方式可以豐富層次。（圖4）

2.豐富深層釋意的動畫設(shè)計

在《槐園繪》的一些可視化功能需求方面，極力地將盡可能多的數(shù)據(jù)轉(zhuǎn)化為圖形化的演繹，以此豐富其深層的情感趣味性。設(shè)計過程中，借助動畫特效的創(chuàng)作方式，完成了數(shù)據(jù)信息的可視化設(shè)計。將傳統(tǒng)動畫的特效表現(xiàn)性動作作為信息可視化和知識可視化的設(shè)計范式，通過原畫設(shè)計來完成可視化的過程，并且通過單循環(huán)原畫設(shè)計中動作設(shè)計的差異化來實(shí)現(xiàn)程度信息上的區(qū)別，既利用傳統(tǒng)動畫中特效效果的原畫設(shè)計，繪制表現(xiàn)出同一類物理現(xiàn)象的不同程度之間的差異，比如小雨、中雨、大雨、雷陣雨的差異；多云和陰天的差異；旗子舞動的程度反映風(fēng)的大小，最終天氣系統(tǒng)以傳統(tǒng)動畫的特效繪制方法取代數(shù)字和文字的信息。由于設(shè)計中軟件加載速度的限制，基本控制在四到八幀完成一個動作循環(huán)。運(yùn)動幀速率和時間是固定的單位值，每一幀之間原畫運(yùn)動幅度的變化是控制特效強(qiáng)度的主要方式。如果每一幀的繪制較好地表現(xiàn)了特效的強(qiáng)弱，則通過增減中間幀來增加和縮減播放時長，以此體現(xiàn)特效程度的變化。（圖5）

項(xiàng)目在信息交互的過程中，傳統(tǒng)動畫的原畫設(shè)計幫助完成信息的傳達(dá)，動作形態(tài)的設(shè)計通過客體的超現(xiàn)實(shí)視覺張力感受，為交互主體構(gòu)筑主觀的情感世界，動物、人物和器物的運(yùn)動樣式反映出情緒的反饋和有意志的目的性，傳遞信息狀態(tài)、反映和有目的的心理活動，致力于描繪交互主體的潛意識和并置不同的視覺思想。原畫設(shè)計過程中，為了將大移民特色的尋根民俗活動從現(xiàn)實(shí)民間時域中抽離出來，動作的設(shè)計趨于規(guī)格化和表演化。這樣可以更多口口相傳的敘事形式以新的、符號化的姿態(tài)出現(xiàn)在用戶意識中，同時盡量維持原畫表現(xiàn)的張力要與文化傾向的魅力相一致，依據(jù)不同景點(diǎn)的文化背景和不同的節(jié)日節(jié)氣做不同類型的夸張設(shè)計。正如《槐園繪》中設(shè)計不同形態(tài)的走路類型、不同類型車輛行駛姿態(tài)、不同類型的動物嬉戲狀態(tài)等，不同動作的設(shè)計能夠通過用戶群體本身的知識、經(jīng)驗(yàn)、性格等自身因素產(chǎn)生不同方向和內(nèi)涵的審美活動，帶來恬靜、安逸、悲傷、勇敢等抽象的情緒語境。景區(qū)主要有3個景點(diǎn)，祭祖活動區(qū)莊重嚴(yán)肅，這個區(qū)域的動作設(shè)計大氣磅礴，充滿儀式感；民俗游覽區(qū)則從皮影，戲劇等民俗藝術(shù)中提煉符號化的動作作為動作設(shè)計的元素；汾河生態(tài)區(qū)屬于休閑娛場所，所以增加了動物和人物的動作節(jié)奏比較慢，凸顯安逸的狀態(tài)。在信息可視化和知識可視化的過程中根據(jù)情景不同、人文環(huán)境的變化做相匹配的動作原畫設(shè)計，以去疆域化的姿態(tài)挖掘文本語言下開放的情感共鳴環(huán)境和審美交互形式。

3.提升交互效率的反饋設(shè)計

考慮到移動端可將無限的信息內(nèi)容集中于有限的方寸屏中，所以信息的傳達(dá)和顯示需具有明顯的層級關(guān)系，手繪地圖界面在交互的過程中會涉及到用戶群體對于信息的主觀篩選，用戶通過按、滑、拖、拽等手部行為主動對想知道的信息和知識進(jìn)行選擇操作，隨著手勢動作的累加完成不同信息層次的切換，所以信息層級篩選的交互方式需要符合用戶的交互行為習(xí)慣。由于用戶群體與信息進(jìn)行交互的時候易于將彼此靠近或接近的物體分在同一組，具有將事物組織、歸整、放置在一起的行為習(xí)慣，所以《槐園繪》將相互關(guān)聯(lián)的內(nèi)容和控件以減少彼此之間空間距離的方式關(guān)聯(lián)在一起。其次，交互過程中可選擇的選項(xiàng)數(shù)量也會影響用戶群體做出信息篩選和層級選擇的時間和效率，如果可選擇信息數(shù)量增加，做出篩選的時間將以對數(shù)形式增加，從而影響用戶體驗(yàn)感受。所以《槐園繪》在信息的篩選方面做引導(dǎo)式的處理，部分主要功能的關(guān)鍵信息借助傳統(tǒng)動畫動態(tài)元素的演繹來引導(dǎo)用戶群體的選擇，比如水滴落在相關(guān)信息或者按鍵處造成漣漪等傳統(tǒng)動畫的特效處理方式，以此吸引用戶群體的注意力，引導(dǎo)用戶進(jìn)行高效的信息交互，完成可視化的過程。

另外，傳統(tǒng)動畫應(yīng)用于信息交互過程中，動畫的功能種類、界面介入的動畫運(yùn)動方式和信息介入的時長會影響用戶主觀地與部分信息進(jìn)行交互的頻次和感受。傳統(tǒng)動畫在《槐園繪》項(xiàng)目中應(yīng)用，根據(jù)手勢交互動作的需要，按照使用功能的分類包括引導(dǎo)動畫、信息交互動畫、控件動畫和藝術(shù)動畫。對于不同功能類別的動畫有嚴(yán)格的時間控制，時間過久容易給用戶群體帶來疲憊感，時間過快容易帶來信息傳達(dá)的不完整，不管是過快還是過慢都會影響用戶群體的交互體驗(yàn)，信息量也決定了交互的時長，信息量大用戶群體停留時間延長，信息量少則停留時間縮段。（表1）

結(jié)語

傳統(tǒng)動畫在UX時代，被新技術(shù)發(fā)展的多樣性瓦解了傳統(tǒng)美學(xué)的靈光，讓傳統(tǒng)藝術(shù)的導(dǎo)向變成了解決問題的功能性，并逐漸將其演繹為可被大眾使用和掌握的事物。同樣在UX時代的新技術(shù)也在不斷吸收著本民族藝術(shù)的靈光，驅(qū)使這種形式自身的發(fā)展。所以，傳統(tǒng)動畫與信息交互之間有著千絲萬縷的關(guān)聯(lián)，傳統(tǒng)藝術(shù)和交互新技術(shù)絕不是獨(dú)立的對立關(guān)系，彼此之間的相互滲透，是對傳統(tǒng)的繼承和發(fā)揚(yáng)。而傳統(tǒng)動畫的普世設(shè)計手法恰恰能為信息交互設(shè)計提供更為深刻和全方位的設(shè)計范式，《槐園繪》項(xiàng)目的設(shè)計原理只能作為信息交互設(shè)計中的一種類型展開設(shè)計，借此擺脫信息交互設(shè)計的產(chǎn)業(yè)化、雷同化的現(xiàn)象。

基金項(xiàng)目：1.該論文系2020省教育廳高等學(xué)校哲學(xué)社會科學(xué)研究項(xiàng)目《UX視域下傳統(tǒng)動畫在信息交互中的可視化研究》 編號：2020W229；2 .該論文系2 0 2 2項(xiàng)目《孟縣景區(qū)規(guī)劃動畫宣傳片制作委托書》 編號：16/820478。

參考文獻(xiàn)

[1]劉麟霄，孫強(qiáng)，楊錚.UE時代下交互式動畫研究[J].出版廣角2018，（07）：69-71.

[2]林琳.UI/UX設(shè)計師必須了解用戶的這些心理[J].計算機(jī)與網(wǎng)絡(luò)2018，44（20）：45.

[3]王娜娜，陳小林.信息可視化還是知識可視化？——ISOTYPE中的視覺教育研究[J].裝飾2019，（07）：92-95.

[4]何潔，王玥然.形意媒傳·藝科融合——視覺傳達(dá)設(shè)計研究的新視域[J].裝飾2019，（10）：20-23.

[5]楊麗雯，王勇智 ，高月.洪洞大槐樹尋根祭祖園生態(tài)服務(wù)流模擬[J].山西大學(xué)學(xué)報（自然科學(xué)版）2019，42（2）：473-481.

[6]宿子順.信息產(chǎn)品中功能性動畫的交互設(shè)計原理研究[J].包裝工程2014，35（18）：30-33，38.

[7]張承志.中國動畫"美術(shù)片"的特點(diǎn)及其價值分析[J].現(xiàn)代傳播2009，（3）：61-64.

[8]韋艷麗.新媒體交互藝術(shù)[M].北京：化學(xué)工業(yè)出版社2018：27，106-107.

[9]王妍，朱俐徽，鞏新龍.基于具身認(rèn)知的博物館虛擬展陳交互設(shè)計研究[J].設(shè)計，2023，36（4）：138-141.

[10]李婷，張春紅.基于信息可視化的動態(tài)圖形設(shè)計應(yīng)用研究——以科普動畫設(shè)計為例[J].設(shè)計，2022，35（8）：140-142.