試論視覺傳達(dá)設(shè)計(jì)的交互動(dòng)畫特效制作手法

崔艷麗

摘 要：在社會信息化時(shí)代背景下，信息技術(shù)不斷進(jìn)步，促使了新媒體的出現(xiàn)與迅速發(fā)展，視覺傳達(dá)設(shè)計(jì)與近年來日益普及的虛擬現(xiàn)實(shí)、特效、交互以及動(dòng)畫等，構(gòu)成了新媒體的傳播形式。在交互動(dòng)畫特效制作過程中，需要應(yīng)用諸多先進(jìn)的科學(xué)技術(shù)，才能提高視覺傳達(dá)設(shè)計(jì)作品的觀賞性，從而達(dá)到良好的信息傳達(dá)效果。本文主要對視覺傳達(dá)設(shè)計(jì)的交互動(dòng)畫特效制作手法進(jìn)行了分析。

關(guān)鍵詞：視覺傳達(dá)設(shè)計(jì);交互動(dòng)畫;特效;制作手法

視覺傳達(dá)設(shè)計(jì)是通過可視形式傳播特定事物的主動(dòng)行為，其主要依賴視覺，并輔以繪畫、插畫、標(biāo)識、色彩、排版、電子設(shè)備、平面設(shè)計(jì)等二維空間的影像表現(xiàn)。交互動(dòng)畫特效的作用是加強(qiáng)觀者對視覺傳達(dá)設(shè)計(jì)作品的印象，從而更好地發(fā)揮視覺傳達(dá)設(shè)計(jì)作品對特定事物的傳達(dá)效果。近年來，社會經(jīng)濟(jì)迅速發(fā)展，人們的生活水平不斷提高，對信息的需求也在不斷增加，這促使了互聯(lián)網(wǎng)終端產(chǎn)品的日益普及。同時(shí)，隨著科學(xué)技術(shù)的進(jìn)步，互聯(lián)網(wǎng)終端產(chǎn)品的更新?lián)Q代速度也在不斷加快，相關(guān)設(shè)計(jì)者必須對視覺傳達(dá)設(shè)計(jì)作品進(jìn)行不斷優(yōu)化、完善，才能更好地滿足互聯(lián)網(wǎng)終端產(chǎn)品不斷提高的要求。

1 視覺傳達(dá)設(shè)計(jì)與交互動(dòng)畫特效

現(xiàn)代數(shù)字技術(shù)與視覺傳達(dá)設(shè)計(jì)、交互設(shè)計(jì)之間的有機(jī)整合，使得視覺傳達(dá)設(shè)計(jì)找到了新的表現(xiàn)途徑，也得到了高科技手段的支持。視覺傳達(dá)設(shè)計(jì)的交互動(dòng)畫特效制作，使得視覺設(shè)計(jì)作品更富有創(chuàng)意性、創(chuàng)新性與借鑒性，同時(shí)也提高了視覺傳達(dá)設(shè)計(jì)作品的視覺導(dǎo)向功能，讓視覺傳達(dá)設(shè)計(jì)作品更加得到受眾的認(rèn)可與喜愛，可以實(shí)現(xiàn)視覺傳達(dá)設(shè)計(jì)作品整體質(zhì)量的提高。

交互設(shè)計(jì)指的是，向用戶提供有效的控制信息及使用信息的手段。交互設(shè)計(jì)可有效提高用戶對視覺傳達(dá)設(shè)計(jì)作品的理解程度與注意力。通常情況下，交互主要指的是數(shù)據(jù)的交互，但在交互形式由數(shù)據(jù)向信息為主體進(jìn)行轉(zhuǎn)變的過程中，這種交互必須以知識作為輔助，同時(shí)交換數(shù)據(jù)開展的結(jié)算。與時(shí)間有關(guān)的錄音信息、視頻影像信息或者是圖形信息等，均可以采取交互處理。應(yīng)用交互處理技術(shù)，能夠使用戶在更高層次上理解視覺傳達(dá)設(shè)計(jì)作品。采取交互處理技術(shù)，還可以對交互結(jié)果進(jìn)行控制，同時(shí)也能有效反饋信息內(nèi)容，這是交互設(shè)計(jì)的主要特點(diǎn)之一。為了提高視覺傳遞效果，視覺傳達(dá)設(shè)計(jì)者必須充分考慮用戶的具體情況及具體要求，對交互設(shè)計(jì)進(jìn)行合理調(diào)整，使用戶參與到交互中去。

動(dòng)畫特效兼具功能特性、藝術(shù)特性，主要的功能特性為交互性，主要的藝術(shù)特性為美觀性，動(dòng)畫特效是視覺傳達(dá)設(shè)計(jì)、交互設(shè)計(jì)有機(jī)結(jié)合的產(chǎn)物。在交互動(dòng)畫特效制作中，視覺傳達(dá)設(shè)計(jì)者、交互設(shè)計(jì)者扮演的角色不同，前者扮演攝影師的角色，而后者扮演導(dǎo)演的角色。在交互動(dòng)畫特效制作流程中，視覺傳達(dá)設(shè)計(jì)者、交互設(shè)計(jì)者考慮的因素也有所不同。交互設(shè)計(jì)者應(yīng)正確認(rèn)識動(dòng)畫特效能夠解決的視覺傳達(dá)設(shè)計(jì)中的問題，并把握動(dòng)畫特效的運(yùn)動(dòng)規(guī)律;而視覺傳達(dá)設(shè)計(jì)者也要充分考慮動(dòng)畫特效制作方面的問題，在動(dòng)畫特效制作過程中，適當(dāng)增加一些能夠提高視覺傳達(dá)設(shè)計(jì)作品整體效果的細(xì)節(jié)。也就是說，交互設(shè)計(jì)者應(yīng)當(dāng)掌握如何應(yīng)用動(dòng)畫特效去解決視覺傳達(dá)設(shè)計(jì)中的問題，并要了解如何實(shí)現(xiàn)動(dòng)畫特效，與視覺傳達(dá)設(shè)計(jì)有機(jī)結(jié)合起來，確保動(dòng)畫特效的成果。視覺傳達(dá)設(shè)計(jì)者應(yīng)對動(dòng)畫特效制作技術(shù)進(jìn)行學(xué)習(xí)，多方面考慮，使效果圖能夠“動(dòng)”起來。

2 視覺傳達(dá)設(shè)計(jì)的交互動(dòng)畫特效制作的優(yōu)勢

2.1 便于記憶、感知

對目前的視覺傳達(dá)設(shè)計(jì)作品的特點(diǎn)進(jìn)行分析發(fā)現(xiàn)，但凡是異形元素作品，均有著明顯的特殊性質(zhì)，能夠使觀者產(chǎn)生深刻的記憶。基于此，在實(shí)際開展視覺傳達(dá)設(shè)計(jì)的過程中，設(shè)計(jì)者應(yīng)當(dāng)針對某一元素，反復(fù)進(jìn)行排列、組合，并對其中的一部分實(shí)施一定的異形處理，從而提升這一異形元素的認(rèn)知度。例如可以使用動(dòng)態(tài)元素，眾所周知，動(dòng)態(tài)的元素往往要比靜態(tài)的元素更加富有趣味性，更吸引人們眼球。設(shè)計(jì)者可以在靜態(tài)展示環(huán)境、信息量較大的圖形環(huán)境、文字內(nèi)容環(huán)境中對動(dòng)態(tài)元素進(jìn)行靈活運(yùn)用，并以此來提高用戶對視覺傳達(dá)設(shè)計(jì)作品的記憶、感知，便于傳達(dá)內(nèi)容信息，充分發(fā)揮視覺傳達(dá)設(shè)計(jì)的作用。

2.2 目的性較強(qiáng)

我國的動(dòng)畫特效起步較晚、發(fā)展時(shí)間較短，早期動(dòng)畫產(chǎn)品中很少使用動(dòng)畫特效，動(dòng)畫特效的應(yīng)用具有非常強(qiáng)的目的性，是為了解決交互過程中存在的問題。例如，翻頁效果是電子書比較常見的一種動(dòng)畫特效，但是由于用戶缺乏對翻頁按鈕手勢的正確認(rèn)識與應(yīng)用，不能很快適應(yīng)這種特效。

2.3 視覺沖擊效果較強(qiáng)

視覺傳達(dá)設(shè)計(jì)與動(dòng)態(tài)元素（如二維運(yùn)動(dòng)元素、三維運(yùn)動(dòng)元素）有機(jī)結(jié)合起來，可以使視覺傳達(dá)設(shè)計(jì)交互元素的表現(xiàn)形式更加生動(dòng)，更加具有活力，不僅目的性很強(qiáng)，而且給觀者帶來的視覺沖擊效果也比較強(qiáng)。

2.4 便于觀者過濾信息

對交互動(dòng)畫特效的制作，可以突出視覺傳達(dá)設(shè)計(jì)的重點(diǎn)，達(dá)到提高信息傳達(dá)效果的作用。動(dòng)態(tài)文字信息的應(yīng)用，可以更好地吸引人們的眼球，同時(shí)，動(dòng)態(tài)圖畫信息的使用，也可以吸引人們的注意力。所以說，在視覺傳達(dá)設(shè)計(jì)中融入交互動(dòng)畫特效，可以將需要傳達(dá)的信息快速傳遞出去。此外，交互動(dòng)畫特效的融合，可以改變信息、畫面的狀態(tài)，以有效傳達(dá)重要的信息，提高圖形圖像、文字信息的交互動(dòng)態(tài)效果;并將其融入視覺傳達(dá)設(shè)計(jì)作品中，然后采取整合的方式，快速發(fā)現(xiàn)重點(diǎn)的傳遞信息。

2.5 界面視覺效果較好

隨著市場經(jīng)濟(jì)的迅速發(fā)展，人們的生活水平不斷提高，促使各種科技產(chǎn)品進(jìn)入千家萬戶，智能移動(dòng)終端逐漸得到普及。為滿足智能移動(dòng)終端不斷提高的對視覺傳達(dá)設(shè)計(jì)的要求，視覺傳達(dá)設(shè)計(jì)者應(yīng)以實(shí)際情況為依據(jù)，盡量應(yīng)用簡單的元素突出內(nèi)容，在視覺傳達(dá)設(shè)計(jì)過程中盡可能地去除那些冗余、厚重、繁雜的裝飾效果，實(shí)現(xiàn)扁平化設(shè)計(jì)，這也是目前視覺傳達(dá)設(shè)計(jì)的流行趨勢。但就現(xiàn)階段來說，扁平化設(shè)計(jì)還存在著一定的缺陷，最大的缺陷在于界面比較呆板，缺乏設(shè)計(jì)感，給人粗糙、劣質(zhì)之感。面對這樣的情況，在視覺傳達(dá)設(shè)計(jì)中應(yīng)用交互動(dòng)畫特效，可以使扁平的界面變得活潑，解決了扁平化設(shè)計(jì)的問題，界面視覺效果較好。

3 視覺傳達(dá)設(shè)計(jì)的交互動(dòng)畫特效制作手法

3.1 CSS3

CSS3（Cascading Style Sheets Level 3）是CSS（層疊樣式表）技術(shù)的升級版本，它是動(dòng)畫家族中的一個(gè)重要成員，擅長平面層的動(dòng)畫。CSS3的動(dòng)畫，具有三個(gè)特性：一是變形Transform，其具有五大特效，分別為旋轉(zhuǎn)特效、扭曲特效、縮放特效、移動(dòng)特效以及矩陣變形特效。二是過渡Transition，其具有修改執(zhí)行變換屬性的能力以及延遲時(shí)間與修改速率、時(shí)長的能力。目前業(yè)內(nèi)對貝塞爾曲線的認(rèn)識較多，而貝塞爾曲線也是CSS3的過渡屬性。三是Animation動(dòng)畫，若Transform為動(dòng)作，Transition為過渡，Animation則是動(dòng)畫，也就是連續(xù)幾個(gè)動(dòng)作。與此同時(shí)，CSS3也有一定的缺點(diǎn)，主要在于其部分屬性有瀏覽器的支持，在實(shí)際應(yīng)用CSS3的時(shí)候，應(yīng)注意采取有效的措施，解決其缺陷問題。

3.2 逐幀動(dòng)畫

在視覺傳達(dá)設(shè)計(jì)中，逐幀動(dòng)畫也是比較常見的一種交互動(dòng)畫特效制作手法。其主要采取兩種制作方法，一是用一張動(dòng)畫，該動(dòng)畫為等間距的，對圖片進(jìn)行逐幀分解，并應(yīng)用Steps這一CSS3的新屬性來完成制作;二是用一張動(dòng)畫，該動(dòng)畫為等間距的，對圖片進(jìn)行逐幀分解，并應(yīng)用JavaScript腳本進(jìn)行模擬編寫。在使用Steps這一CSS3的新屬性來進(jìn)行動(dòng)畫制作的時(shí)候，可以提高其成果的兼容性，在諸多類型的移動(dòng)終端上均可以應(yīng)用，但就現(xiàn)階段來說，這一方法很少被使用。在使用JavaScript腳本進(jìn)行模擬編寫來進(jìn)行動(dòng)畫制作的時(shí)候，可以對逐幀動(dòng)畫的快慢進(jìn)行有效控制，還可以采取控制手段，來暫停動(dòng)作，這是目前比較常用的一種動(dòng)畫特效制作方法。

3.3 GIF

在視覺傳達(dá)設(shè)計(jì)中，GIF小動(dòng)畫特效是比較常用的一種交互動(dòng)畫特效制作手法。采取GIF小動(dòng)畫特效方法進(jìn)行制作的小動(dòng)畫，由于具有良好的趣味性，受到了用戶的認(rèn)可與歡迎。GIF小動(dòng)畫特效的優(yōu)勢主要在于制作技術(shù)相對簡單、使用容量相對較小、成本相對較低、可以進(jìn)行壓縮、任何操作系統(tǒng)均可以使用等。GIF小動(dòng)畫特效的制作方法有多種，如可以應(yīng)用Photoshop時(shí)間軸。在交互設(shè)計(jì)中運(yùn)用GIF動(dòng)畫，比較常見的是在加載進(jìn)度條元素、小標(biāo)題元素中進(jìn)行應(yīng)用。在實(shí)際設(shè)計(jì)過程中，選擇圖片的時(shí)候，一是要注意圖片尺寸大小的仔細(xì)把握，二是注意圖片精度。在細(xì)節(jié)制作時(shí)，必須確保圖片尺寸大小、圖片精度之間的平衡。

3.4 將Flash轉(zhuǎn)換為Canvas

在視覺傳達(dá)設(shè)計(jì)中，將Flash轉(zhuǎn)換為Canvas是一種比較常用的交互動(dòng)畫特效制作手法。應(yīng)用Flash，可實(shí)現(xiàn)動(dòng)畫視覺效果的提高。在動(dòng)畫特效制作中，針對復(fù)雜的、精細(xì)的動(dòng)畫，可以將其轉(zhuǎn)換為Canvas格式，以實(shí)現(xiàn)交互操作。

3.5 HTML5

在交互動(dòng)畫特效制作中，HTML5元素與使用畫板相似。HTML5本身無繪制功能，為得到繪制圖形的效果，必須使用輔助繪畫軟件——JavaScript，從而將HTML5定格為擅長繪畫的動(dòng)畫制作。應(yīng)用HTML5元素，便能在繪制中采取多種方式，也可以實(shí)現(xiàn)多種功能，如使用不同形狀的圖形，添加圖形圖像方式或字符等。

3.6 JavaScript

對交互反饋動(dòng)畫進(jìn)行設(shè)計(jì)的時(shí)候，需要使用大到重量感，小至滾屏翻頁，編輯這些功能的時(shí)候，可以應(yīng)用JS（JavaScript）腳本?？梢哉f，所有動(dòng)畫特效的制作，均需要使用JS，通過JS腳本庫，能夠制作各種各樣的動(dòng)畫特效效果。

3.7 SVG

SVG（Scalable Vector Graphics）即可縮放矢量圖。SVG技術(shù)也是交互動(dòng)畫特效的一種重要的制作方法，適用于線條動(dòng)畫設(shè)計(jì)。在實(shí)際使用SVG技術(shù)的過程中發(fā)現(xiàn)，其存在一定的缺陷，即在IE8版本以下的軟件中，兼容性能較差。在對涉及元素描邊的動(dòng)畫進(jìn)行設(shè)計(jì)的時(shí)候，可采取SVG技術(shù)進(jìn)行處理。同時(shí)，SVG技術(shù)還可以應(yīng)用在復(fù)雜程度較高的動(dòng)畫特效制作中，如需要設(shè)計(jì)時(shí)效表情的動(dòng)畫等。在應(yīng)用SVG技術(shù)進(jìn)行動(dòng)畫特效制作的時(shí)候，原理在于通過一堆定位錨點(diǎn)連接生成，所以可采取SVG技術(shù)進(jìn)行動(dòng)畫制作，還可以將其轉(zhuǎn)變?yōu)槲臋n格式。需要注意的是，在應(yīng)用SVG技術(shù)進(jìn)行制作動(dòng)畫特效的過程中，需應(yīng)用Illustrator軟件。

4 結(jié)語

視覺傳達(dá)設(shè)計(jì)的交互動(dòng)畫特效主要有CSS3、逐幀動(dòng)畫、GIF、將Flash轉(zhuǎn)換為Canvas、HTML5、JavaScript、SVG等制作手法。在視覺傳達(dá)設(shè)計(jì)中，應(yīng)對這些制作方法進(jìn)行合理應(yīng)用，以提高視覺傳達(dá)設(shè)計(jì)的交互動(dòng)畫特效制作效果。

參考文獻(xiàn)：

[1] 王雯.視覺傳達(dá)設(shè)計(jì)的交互動(dòng)畫特效制作手法[J].美術(shù)教育研究，2019（12）：60-61.

[2] 王毅萍，曾雪瑤.以用戶體驗(yàn)為主的移動(dòng)端3D交互動(dòng)畫創(chuàng)作管窺[J].大眾文藝，2019（01）：127.

[3] 劉淼.視覺傳達(dá)設(shè)計(jì)的發(fā)展——新視覺現(xiàn)象[J].美術(shù)教育研究，2017（13）：82+84.

[4] 孫鑫巖.新媒體時(shí)代視覺傳達(dá)設(shè)計(jì)發(fā)展思考[J].科技傳播，2018，10（17）：72-73.

[5] 何蓉. H5交互動(dòng)畫在新聞報(bào)道中的應(yīng)用和趨勢——以黨的十九大會議和2018年全國兩會報(bào)道為例[J].新聞研究導(dǎo)刊，2018，9（17）：53-54+76.

[6] 夏麗雯.基于移動(dòng)終端的交互式動(dòng)畫設(shè)計(jì)探討[J].新媒體研究，2018，4（13）：126-127.

[7] 鄧美辰，尚亞慶.試析基于數(shù)字媒體語境下的視覺傳達(dá)設(shè)計(jì)[J].農(nóng)家參謀，2017（19）：232.