視覺傳達設(shè)計的交互動畫特效制作手法探析

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

視覺傳達設(shè)計的交互動畫特效制作手法探析

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

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

交互設(shè)計；視覺傳達；動效制作；基本特點

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

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

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

二、視覺傳達設(shè)計的交互動效制作手法

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

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

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

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

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

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

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

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

三、視覺傳達設(shè)計的交互動效制作的基本特點

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

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

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

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

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

四、結(jié)語

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

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

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

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

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

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