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

崔艷麗

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

關鍵詞：視覺傳達設計;交互動畫;特效;制作手法

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

1 視覺傳達設計與交互動畫特效

現代數字技術與視覺傳達設計、交互設計之間的有機整合，使得視覺傳達設計找到了新的表現途徑，也得到了高科技手段的支持。視覺傳達設計的交互動畫特效制作，使得視覺設計作品更富有創意性、創新性與借鑒性，同時也提高了視覺傳達設計作品的視覺導向功能，讓視覺傳達設計作品更加得到受眾的認可與喜愛，可以實現視覺傳達設計作品整體質量的提高。

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

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

2 視覺傳達設計的交互動畫特效制作的優勢

2.1 便于記憶、感知

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

2.2 目的性較強

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

2.3 視覺沖擊效果較強

視覺傳達設計與動態元素（如二維運動元素、三維運動元素）有機結合起來，可以使視覺傳達設計交互元素的表現形式更加生動，更加具有活力，不僅目的性很強，而且給觀者帶來的視覺沖擊效果也比較強。

2.4 便于觀者過濾信息

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

2.5 界面視覺效果較好

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

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

3.1 CSS3

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

3.2 逐幀動畫

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

3.3 GIF

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

3.4 將Flash轉換為Canvas

在視覺傳達設計中，將Flash轉換為Canvas是一種比較常用的交互動畫特效制作手法。應用Flash，可實現動畫視覺效果的提高。在動畫特效制作中，針對復雜的、精細的動畫，可以將其轉換為Canvas格式，以實現交互操作。

3.5 HTML5

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

3.6 JavaScript

對交互反饋動畫進行設計的時候，需要使用大到重量感，小至滾屏翻頁，編輯這些功能的時候，可以應用JS（JavaScript）腳本。可以說，所有動畫特效的制作，均需要使用JS，通過JS腳本庫，能夠制作各種各樣的動畫特效效果。

3.7 SVG

SVG（Scalable Vector Graphics）即可縮放矢量圖。SVG技術也是交互動畫特效的一種重要的制作方法，適用于線條動畫設計。在實際使用SVG技術的過程中發現，其存在一定的缺陷，即在IE8版本以下的軟件中，兼容性能較差。在對涉及元素描邊的動畫進行設計的時候，可采取SVG技術進行處理。同時，SVG技術還可以應用在復雜程度較高的動畫特效制作中，如需要設計時效表情的動畫等。在應用SVG技術進行動畫特效制作的時候，原理在于通過一堆定位錨點連接生成，所以可采取SVG技術進行動畫制作，還可以將其轉變為文檔格式。需要注意的是，在應用SVG技術進行制作動畫特效的過程中，需應用Illustrator軟件。

4 結語

視覺傳達設計的交互動畫特效主要有CSS3、逐幀動畫、GIF、將Flash轉換為Canvas、HTML5、JavaScript、SVG等制作手法。在視覺傳達設計中，應對這些制作方法進行合理應用，以提高視覺傳達設計的交互動畫特效制作效果。

參考文獻：

[1] 王雯.視覺傳達設計的交互動畫特效制作手法[J].美術教育研究，2019（12）：60-61.

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

[3] 劉淼.視覺傳達設計的發展——新視覺現象[J].美術教育研究，2017（13）：82+84.

[4] 孫鑫巖.新媒體時代視覺傳達設計發展思考[J].科技傳播，2018，10（17）：72-73.

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

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

[7] 鄧美辰，尚亞慶.試析基于數字媒體語境下的視覺傳達設計[J].農家參謀，2017（19）：232.