崔艷麗
摘 要:在社會信息化時(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.