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

邵俊翔 （廣西藝術(shù)學(xué)院 530022）

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

邵俊翔 （廣西藝術(shù)學(xué)院 530022）

隨著信息時(shí)代的高速發(fā)展和融合，視覺傳達(dá)設(shè)計(jì)與日益普及的交互、動(dòng)畫、特效、虛擬現(xiàn)實(shí)等構(gòu)成了新媒體的傳播形式。交互設(shè)計(jì)和視覺設(shè)計(jì)整合了現(xiàn)代數(shù)字技術(shù)，讓視覺傳達(dá)設(shè)計(jì)得到高科技手段的支持，也找到了更為創(chuàng)新的表現(xiàn)途徑。視覺傳達(dá)設(shè)計(jì)的交互動(dòng)效制作，讓傳統(tǒng)視覺設(shè)計(jì)作品更加創(chuàng)意性與借鑒性。視覺傳達(dá)設(shè)計(jì)的交互動(dòng)效制作給予視覺導(dǎo)向功能以及強(qiáng)化視覺啟到更好發(fā)揮作用，讓視覺傳達(dá)設(shè)計(jì)的成果更加經(jīng)得起受眾的欣賞，有利于優(yōu)化視覺傳達(dá)設(shè)計(jì)成果作品。針對(duì)目前的流行趨勢(shì)，探析視覺傳達(dá)設(shè)計(jì)的交互動(dòng)效制作手法和特點(diǎn)，制作與視覺傳達(dá)設(shè)計(jì)作品相呼應(yīng)的動(dòng)效手法，是對(duì)視覺傳達(dá)技術(shù)優(yōu)化和研究的絕佳手段。

交互設(shè)計(jì)；視覺傳達(dá)；動(dòng)效制作；基本特點(diǎn)

動(dòng)畫特效，以下簡(jiǎn)稱動(dòng)效，它不但具有交互的功能特性，更具體美觀性的藝術(shù)特征，應(yīng)該是視覺傳達(dá)設(shè)計(jì)和交互設(shè)計(jì)相結(jié)合的結(jié)果。在開展動(dòng)效設(shè)計(jì)制作的過程中，交互設(shè)計(jì)者和視覺傳達(dá)設(shè)計(jì)者扮演著導(dǎo)演和攝影師兩種不同的角色。而在設(shè)計(jì)動(dòng)效制作流程中，交互設(shè)計(jì)者先考慮好并且理解動(dòng)效能幫我們解決其中的問題甚至細(xì)節(jié)，必須把握住動(dòng)效的運(yùn)動(dòng)規(guī)律，正如實(shí)現(xiàn)運(yùn)動(dòng)當(dāng)中的柔和度。然而對(duì)于視覺設(shè)計(jì)者而言，動(dòng)效的制作也是需要考慮的范圍，在制作過程中應(yīng)加上很多適合產(chǎn)品風(fēng)格化的效果。總而言之，交互設(shè)計(jì)者要學(xué)會(huì)運(yùn)用動(dòng)效解決問題，特別是套更多了解動(dòng)效是如何實(shí)現(xiàn)，結(jié)合視覺設(shè)計(jì)思考動(dòng)畫效果的概念。視覺設(shè)計(jì)者也要盡量多掌握動(dòng)效的制作技術(shù)，多方面進(jìn)行思考，從而讓自己的效果圖動(dòng)起來。

一、視覺傳達(dá)設(shè)計(jì)的交互性

交互性是指向用戶提供更加有效的控制和使用信息的手段。交互可以增強(qiáng)對(duì)信息和作品的注意力和理解程度，延長(zhǎng)信息的保留時(shí)間。當(dāng)交互性被引入時(shí)，“活動(dòng)”本身作為一種媒介信息轉(zhuǎn)變?yōu)橹R(shí)的過程。對(duì)數(shù)據(jù)交換是最底層的交互形式，只是將數(shù)據(jù)進(jìn)行轉(zhuǎn)換，如果交互以信息為主，就要對(duì)數(shù)據(jù)進(jìn)行結(jié)算，這就需要知識(shí)的輔助。同樣，對(duì)其他種類的圖像和圖形，甚至與時(shí)間有關(guān)的聲音、影像視頻等，都可以對(duì)內(nèi)容進(jìn)行處理，以達(dá)到更新層次的理解，也就是更高層次的交互。交互性設(shè)計(jì)的最重要特征就是對(duì)結(jié)果具有可控制性并能進(jìn)行信息反饋，也是傳遞一種交流和經(jīng)驗(yàn)。能隨著用戶的使用的變化而進(jìn)行相應(yīng)的調(diào)整是視覺傳達(dá)設(shè)計(jì)的最高層次。這樣，用戶可以參與到交互創(chuàng)作的設(shè)計(jì)過程中，界面視覺的剪切、組合與再造，從而呈現(xiàn)出豐富、靈動(dòng)優(yōu)美、奇幻的藝術(shù)特點(diǎn)。

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

（一）GIF小動(dòng)畫動(dòng)效制作的第一手法，用戶的喜好度極高，GIF圖片擅長(zhǎng)于制作細(xì)節(jié)的位圖小動(dòng)畫，優(yōu)勢(shì)在于制作方法簡(jiǎn)單成本低，容量小，可壓縮，以圖片的形態(tài)適用于各種操作系統(tǒng)。制作GIF動(dòng)畫的方式有很多，例如，我們所熟悉的photoshop時(shí)間軸、FLASH、After Effects等軟件都可以將動(dòng)畫導(dǎo)出存儲(chǔ)為GIF格式。GIF動(dòng)畫最常在交互設(shè)計(jì)里擔(dān)當(dāng)加載進(jìn)度條、小標(biāo)簽等元素，制作時(shí)圖片大小和精度之間必須把握平衡，所以它一般用于制作細(xì)節(jié)的動(dòng)畫。

（二）逐幀動(dòng)畫即是利用一張等間距的動(dòng)畫分解逐幀圖片，由JAVASCRIPT腳本模擬編寫或是使用CSS3新屬性step（）制作而成。這個(gè)屬性在移動(dòng)端的兼容性很好的，但使用比較少。逐幀動(dòng)畫和GIF小動(dòng)畫的區(qū)別在于腳本可以控制逐幀動(dòng)畫的快慢和動(dòng)作的暫停，而GIF小動(dòng)畫無法通過制作后期代碼的一些屬性進(jìn)行動(dòng)畫速率和透明度的修改。

（三）CSS3這里我們定義它為擅長(zhǎng)于平面層的動(dòng)畫，也是動(dòng)畫家族里絕對(duì)不會(huì)被遺忘的一名成員。CSS3的缺陷應(yīng)該在于它的部分屬性還有被瀏覽器有好的支持。CSS3的動(dòng)畫三大屬性，Transform變形：擁有旋轉(zhuǎn)、扭曲、縮放、移動(dòng)、矩陣變形五大特效。Transition過渡：擁有修改執(zhí)行變換的屬性，時(shí)長(zhǎng)，速率和延遲時(shí)間的能力，大家都很熟悉的貝塞爾曲線，也是歸屬于過渡屬性的設(shè)定之下的。Animation動(dòng)畫：若將Transform解釋為動(dòng)作，Transition解釋為過渡，那么Animation則是連續(xù)的幾個(gè)動(dòng)作，即動(dòng)畫。

（四）SVG，又稱為可縮放矢量圖，也是動(dòng)效制作中不可忽略的一大熱門方法，擅長(zhǎng)于線條的動(dòng)畫，主要的弊端是IE8，ANDROID4.2及以下兼容性不好。涉及到這個(gè)沿著元素描邊的動(dòng)畫，一般都是使用SVG來完成的，當(dāng)然，它還可以實(shí)現(xiàn)一些復(fù)雜的動(dòng)畫，比如一些表情圖片的動(dòng)效制作，實(shí)現(xiàn)的成本是比較高難度大。SVG動(dòng)畫圖，其實(shí)是由一堆的定位錨點(diǎn)鏈接生成的。所以它可以很方便的存為文檔格式。如果你想制作一個(gè)SVG動(dòng)畫，請(qǐng)一定要使用illustrator工具繪制出矢量圖給到工程師。

（五）HTML5的新元素，類似于畫板，擁有多種繪制路徑、不同形狀圖形、字符以及添加圖形圖像的方式。本身是沒有繪制能力的，所有繪制都必須依賴JAVASCRIPT完成，定義它為擅長(zhǎng)于繪畫的動(dòng)畫。

（六）FLASH轉(zhuǎn)CANVAS的方法也是現(xiàn)在特別火爆的一種形式。FLASH是曾經(jīng)的輝煌，作品可以做出很炫酷的感覺，通過FLASH制作復(fù)雜又精細(xì)的動(dòng)畫，導(dǎo)成CANVAS類型文件，動(dòng)畫中的交互操作，依賴CREATE.JS的腳本庫完成。

（七）而視頻是可以輸出很特別的動(dòng)效，需結(jié)合專業(yè)的特效制作軟件來完成，如After Effects、Ulead COOL 3D等。

（八）只要涉及到交互反饋的動(dòng)畫，小至滾屏翻頁，大到重力感應(yīng)等都需要JS進(jìn)行處理腳本的編寫。也就是說，所有的動(dòng)畫特效都離不開JAVASCRIPT的支持。JAVASCRIPT腳本庫可以做出非同凡響的動(dòng)畫效果。

三、視覺傳達(dá)設(shè)計(jì)的交互動(dòng)效制作的基本特點(diǎn)

（一）視覺傳達(dá)設(shè)計(jì)的交互動(dòng)效制作有利于促進(jìn)觀者的感知、記憶、學(xué)習(xí)。在視覺傳達(dá)設(shè)計(jì)作品中，異形元素的作品都是具體一定的特殊性質(zhì)，特別能促使觀者對(duì)其記憶深刻。在實(shí)踐過程中，如果設(shè)計(jì)者對(duì)某一個(gè)元素進(jìn)行反復(fù)排列，對(duì)其中一部分進(jìn)行異形處理，則會(huì)讓這個(gè)元素認(rèn)知度提升，特別是在文字內(nèi)容環(huán)境、信息量較大的圖形環(huán)境以及靜態(tài)的展示環(huán)境中，融入極其微妙的動(dòng)態(tài)元素可以增強(qiáng)記憶和感知，有利于內(nèi)容信息的傳達(dá)。

（二）有利于視覺沖擊效果，視覺傳達(dá)設(shè)計(jì)融入了二維運(yùn)動(dòng)或者三維運(yùn)動(dòng)的動(dòng)態(tài)元素，促使視覺傳達(dá)設(shè)計(jì)中的交互元素更具有活力和生動(dòng)的表現(xiàn)形式，增強(qiáng)了觀者的視覺沖擊，也有很強(qiáng)的目的性。

（三）早期互聯(lián)網(wǎng)產(chǎn)品應(yīng)用動(dòng)畫特效較少時(shí)，動(dòng)效給應(yīng)用或畫面達(dá)到很強(qiáng)的目標(biāo)性，主要是為了解決具體的交互問題而存在的。例如網(wǎng)絡(luò)上常見電子書的翻頁效果，因?yàn)橛脩魧?duì)翻頁按鈕的手勢(shì)沒有很好的認(rèn)知也不會(huì)很快去適應(yīng)。

（四）有利于觀者的過濾信息。視覺傳達(dá)設(shè)計(jì)的交互動(dòng)效可以有效的突出視覺傳達(dá)設(shè)計(jì)中的重點(diǎn)，通過畫面和信息狀態(tài)的改變，促使重要的信息有效的傳達(dá)，文字信息和圖形圖像交互動(dòng)態(tài)效果有利于吸引觀者的注意力，逐漸融入到視覺傳達(dá)設(shè)計(jì)作品中，再通過整合的方式快速發(fā)現(xiàn)重點(diǎn)的傳遞信息。

（五）目前智能移動(dòng)終端迅速發(fā)展，目前設(shè)計(jì)者都開始用更簡(jiǎn)單的元素盡量去突出內(nèi)容，去除繁雜、厚重和冗余的裝飾效果，越來越流行扁平化。這樣的界面的設(shè)計(jì)往往給人一種界面很呆滯、設(shè)計(jì)感偏弱，更是讓人覺得很粗糙。所以為了彌補(bǔ)這個(gè)問題，交互動(dòng)效可以讓扁平的界面更活潑起來，達(dá)到更優(yōu)秀的界面視覺效果。

四、結(jié)語

眾所周知，一個(gè)設(shè)計(jì)元素，往往動(dòng)態(tài)比靜態(tài)更加吸引眼球，動(dòng)效讓視覺傳達(dá)設(shè)計(jì)在更大的程度上受到技術(shù)的影響，不同的創(chuàng)作思維及藝術(shù)觀點(diǎn)，帶來非比尋常的藝術(shù)效果，產(chǎn)生獨(dú)特的優(yōu)秀設(shè)計(jì)作品。一套操作界面，合適的動(dòng)態(tài)交互反饋能給用戶帶來更好的操作體驗(yàn)；炫酷的動(dòng)畫特效定能助力傳播和品牌打造；將動(dòng)效制作融入到視覺傳達(dá)設(shè)計(jì)中，給視覺傳達(dá)設(shè)計(jì)的交互作品提升更為理想的效果，有利于視覺傳達(dá)設(shè)計(jì)為更多的觀者所欽贊，達(dá)到新媒體環(huán)境下品牌傳播以及理念傳遞的目標(biāo)。

[1]聶森.視覺傳達(dá)設(shè)計(jì)在數(shù)碼時(shí)代的蛻變與革新[J].文教資料，2010（6）.

[2]范媛媛.當(dāng)代視覺傳達(dá)設(shè)計(jì)——交互性的價(jià)值與意義[J].包裝世界，2010（05）.

[3]詹偉鋒.視覺傳達(dá)設(shè)計(jì)中的多媒體藝術(shù)表現(xiàn)形式研究[J].設(shè)計(jì)藝術(shù)研究，2012（3）.

[4]柯赤楓.基于多媒體藝術(shù)表現(xiàn)形式的視覺傳達(dá)設(shè)計(jì)研究[J].藝術(shù)科技，2013（12）.

邵俊翔（1983-），男，壯族，廣西南寧市人，教師，藝術(shù)碩士，單位：廣西藝術(shù)學(xué)院設(shè)計(jì)學(xué)院動(dòng)畫專業(yè)，研究方向：數(shù)字媒體藝術(shù)與技術(shù)。