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

邵俊翔 （廣西藝術學院 530022）

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

邵俊翔 （廣西藝術學院 530022）

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

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

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

一、視覺傳達設計的交互性

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

四、結語

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

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

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

[3]詹偉鋒.視覺傳達設計中的多媒體藝術表現形式研究[J].設計藝術研究，2012（3）.

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

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