動態插畫在H5設計中的應用研究

周藝璇

摘要：將動態插畫融入H5設計，總結歸納設計原則及規律，豐富和提升其視聽體驗。探索動態插畫在H5設計中的應用原則。首先通過查閱文獻界定H5和插畫的基本概念及其應用現狀。其次通過案例分析、總結現存問題，提出相應的設計策略。得出了動態插畫在H5設計中運用的基本原則。通過情感化、人性化和原創性的基本原則進行動態插畫設計可以使H5的表現力更強，提高視覺吸引力。

關鍵詞：動態插畫 H5 三維技術 視覺元素 情感體驗

中圖分類號：TP391.9

文獻標識碼：A

文章編號：1003-0069（ 2021） 03-0143-03

引言

隨著互聯網技術的發展，5G時代來臨，移動端網頁加載速度大大提升，根據《中國移動互聯網發展報告（2019）》顯示，2018年移動電話用戶總數達到15.了億戶，中國移動互聯網月活躍用戶規模在2018年期末凈增長4600萬，手機上網流量在總流量中占98.了%，這為活躍于移動設備的H5廣告的發展提供了契機，H5的內容與表現形式也更加豐富，而動態插畫作為H5動態設計的一種表現手法，其多樣的風格和廣闊的創作空間可以實現不同的情感表達和敘事模式，對增強H5信息內容的感染力以及傳播效果具有十分重要的作用。因此，研究動態插畫在H5設計中的應用，可以為今后的H5設計提供更加多元的設計策略，為動態插畫在H5中的應用提供一定的理論支撐。

一、H5概述

H5全稱為HTML5，是一種融合了圖片、文字以及視頻等多種媒介的傳播形式，具有豐富多彩的視聽效果。目前，HTML5廣告以智能手機為代表的移動終端為傳播平臺，所以稱之為移動端HTML5廣告。

H5以移動設備為載體，具有高效性、全面性、傳播速度快等優勢，一般應用于推廣品牌的形象或是企業的節日活動等，主要分為可交互H5與無交互海報型H5。可交互型的H5以劇情互動式、游戲式、問卷式類型為主，綜合了聽覺、視覺、觸覺這三感的體驗效果，人們可以參與到其中，目標用戶群的參與感較強，生動且富有趣味性，但對于交互設計的要求較高，操作繁瑣、不夠流暢的交互設計不僅會降低觀者的體驗，也會大大影響H5被傳播的概率。無交互的海報型H5以展示功能為主，配以適當的動態效果和音樂，集中于視覺展現設計上，目標用戶群的參與感較弱，而無論是可交互型還是海報型的H5頁面，都對畫面設計有著很高的要求，風格強烈、畫面精美、動態流暢的H5頁面才能被用戶記住，引發一定的共鳴繼而擴大分享的可能性。

二、動態插畫概述

插畫是對枯燥文字的一種藝術形式的解釋說明，插畫設計不僅是一種視覺藝術，還可以作為符號傳遞信息。隨著移動設備性能的提升，新技術催生了更加多樣化的表現手法，硬件對思維創意的限制不斷減弱，傳統的插畫形式已經被打破，動態插畫成為一種重要的視覺傳達手段，具有直觀、生動以及感染力強的優勢，在現代設計中占有一席之位。

動態插畫是在時間軸的基礎之上，所有的元素以適合的動態和時間點運動，既烘托了插畫的氛圍，也更生動地傳達了設計師想表達的主題，使信息傳達更加生動有趣。動態插畫的發展是建立在數字技術的發展之上，為很多行業提供了全新的創意展示形式，動態插畫也開始大量應用于不同類型的設計項目中;豐富有趣的動態插畫設計能增加用戶黏度，間接地擴大信息接收的群體。當前互聯網發展日趨成熟，各類媒體依靠數據流量可以產生巨大的傳播效應，同時移動設備的用戶群體在飛速增長，將動態插畫應用于H5頁面設計可以有效促進文化傳媒并且帶來十分可觀的經濟效益。

三、動態插畫在H5中的應用現狀

（一）動態插畫在不同類型H5中的應用

插畫這一設計形式本身應用廣泛，將動態插畫運用在H5頁面設計中，既能滿足受眾視覺上對美的需求，又能通過互動功能增強用戶在感官上的體驗，深受大眾喜愛，它既是手機端H5廣告中不可或缺的設計風格，也是數字廣告業不斷向前發展所不會淹沒的形式。動態插畫無論在互動型H5還是展示類H5中應用都十分廣泛，通過分析市面上比較受歡迎的H5作品，筆者將動態插畫在其中的應用形式簡單分為展示類、測試類、游戲類等三種類型。

1.展示類

動態插畫在展示類的H5中，除了需要以展現特定圖片為主體的H5外，動態插畫一般是以主體的地位存在，用以吸引觀者關注其品牌或品牌所舉辦的活動，通常分兩種表現形式：一種直接將動態插畫以視頻的方式展現無需任何操作，另一種則需要簡單的手勢操作如點擊或者往下拖拽等繼續完成展示。

視頻方式展示的動態插畫通常是在靜態插畫的基礎上進行分層，對插畫素材的不同部分添加動畫來達到整體的動態效果。例如對角色插畫的四肢和五官分別分層添加動作來制作角色動畫，相較于靜態插畫更加具有故事性和趣味性。如騰訊與故宮聯手推出的創新大賽NEXT IDEA的宣傳H5就應用了大量的動態插畫來輔助敘事，在這款H5的開篇，明朝的朱棣皇帝從靜態的畫像上一躍而起，開始唱起了Rap，跳起了騎馬舞甚至把自己的自拍發到了朋友圈，后期還出現了雍正十二美人圖，原本古樸的美人戴上了現代的VR眼鏡開始研究宇宙飛船。這種跨界和穿越的形式可以在短時間內迅速抓住觀眾的眼球，新穎的形式和略顯滑稽的動態也更好地迎合了年輕人的口味。在H5的最后，朱棣皇帝推出了比賽報名的宣傳展板，讓人在意猶未盡的同時，了解到了此次比賽為傳統文化作品創新設計的主題。

需要手勢控制的H5通常以長頁面為基礎，將動態插畫穿插放置在長頁面的不同位置，讓用戶在拖拽或點擊過程中可以自由查看不同位置的動態信息，可讀性更強，也增加了探索的樂趣。天貓在今年中秋節推出的一款H5-《天貓團圓街》整個H5先用一段動畫為背景，引出“天貓團圓街”這個活動，用動態插畫的形式設計了整個街道，溫暖+扁平式的插畫風格搭配插畫中各種人物的動態效果，生動地表現了“團圓街”的熱鬧場景，烘托了整個中秋節喜慶祥和的氣氛，映襯了主題。這款H5在互動過程中需要用戶往下拖拽才能看到不同“商鋪”的內容，模擬一種“在逛街”的卡通效果，其中用白色的小爪子配以簡單的循環動效提示用戶在哪里的點擊會有內容呈現，動態插畫巧妙地應用在這部H5中，整體十分和諧，可交互的地方也十分明確，很好傳達了節日的氛圍，起到了品牌的宣傳效果。

在H5作品中對話交流式的互動效果通過動態插畫的形式來表現，不僅減少了傳播中的冗雜信息，更高效地完成了信息交換，也增加了受眾的期待感和沉浸性，其遵循以下兩點設計原則。第一，從動態本身來看，首先要求在視覺上符合自然的動畫規律，尤其是角色類型的動態插畫。自然的動態可以使插畫角色具備人的情緒，通過節奏的變化和形態的拉伸擠壓傳達不同的情感或故事，在用戶體驗上更容易產生信賴感和親切感。同時動態插畫可以從動畫或電影中學習和借鑒動態規律，讓原本靜止的插畫更加富有情緒的感染力。例如網易推出的環保主題H5《自白》中就運用了大量的動態插畫，其中小女孩眼里動態的淚花和在逃跑過程中父母為了保護小女孩做出的一系列犧牲自己的動作都非常符合真實的動態效果，讓人十分動容，在最后鯨魚緩緩下墜并配合浮現的告別詩句更是直擊觀眾心靈深處。僅僅24小時內這款H5就已經被查看轉發近千萬次，觀看數量堪比一部成功的商業電影。

第二，從交互角度來看，人性化的交互體驗要求以人的行為習慣和思維方式來設計，尊重不同群體和不同的心理需求并加以滿足。因此對于動態插畫來說，在交互過程中需要設計者考慮操作的方便和可控性，消除用戶在H5體驗過程中的負面情緒，建立用戶的信任，同時以富有趣味的方式給予用戶反饋。在H5作品《一眼千年，探源中華文明之精髓》中整個H5就像一幅巨大的動態插畫長卷，如同一場一鏡到底的動畫電影，而觀眾就是這場電影的放映員，通過交互的手段來控制時光的穿梭。作品開篇就是中國傳統的龍鳳插畫形象，用戶根據下方的提示向右滑動界面，畫卷隨之打開，在一連串讓人眼花繚亂的轉場中，從上古堯舜禹到當今21世紀中國發展的歷程徐徐展開，而在整個過程中觀眾可以完全自主控制動態插畫的播放進度。在整個觀看過程中，觀者可以自由地穿越歷史時空，欣賞各個時代的代表人物或是那些讓人無比熟悉的經典歷史畫面，感受中華文化“從和而來，向和而去”的大國風范。這種可以交互的展示方式很容易喚起人們內心的共鳴，整個交互流程非常流暢，轉場動畫設計也非常自然，這樣在交互過程中也不會讓用戶產生卡頓感或是操作上的疑惑，簡單而直觀。另一方面可交互的動態插畫可以調動起用戶的好奇心，用戶要通過點擊或是其他的手勢交互來獲取新的信息，享受探索的樂趣。

3.注重原創設計

原創設計是指對現有事物的刷新和顛覆，而不是對既定狀態的完善與提升。當前H5作品由于其優秀的可傳播性和巨大的商業價值受到了廣告商和品牌的青睞，這也導致了同類作品泛濫，同質化嚴重的問題。這就需要設計師發揮更多的想象力進行創新，在設計過程中，不管是從視聽層面還是互動方式來說，巧妙地融入一些創新的概念、有趣的聲音和獨特的動態等，都可以讓受眾擺脫對傳統H5廣告固有的刻板印象。通過有趣的互動化插畫的設計，讓觀者感受到H5廣告帶來的特殊樂趣，以幫助人們更自主地接受廣告，自覺成為廣告傳播的載體。

在H5設計中原創設計原則要求動態插畫內容與主題的呼應，無論是在畫風還是在交互方面都不應盲目跟風，而是選擇與主題相契合的風格進行創作。在紀念哈利波特20周年的H5宣傳廣告中就加入了很多具有哈利波特風格的魔法效果，在極具代表性的電影背景音樂中，H5展示了哈利波特系列中經典的分院帽、魁地奇以及魔法課堂等場景。其中動態的“金色飛賊”在屏幕中飛速穿梭，甚至會把原本正常排列的文字撞的七零八落，讓人忍俊不禁。作品最后，斯內普教授的插畫會抬起魔杖，對眼前的觀眾施展“遺忘咒”，整個H5落下帷幕并且無法返回，甚至會讓用戶對剛剛的魔法世界依依不舍。整個作品在傳統H5的圖文形式上添加了符合“哈利·波特”主題的一系列創意效果，真正讓“魔法”融入了整個觀賞過程，其中穿插的用動態插畫呈現的經典場面也能喚起所有哈利·波特粉絲的回憶，讓用戶得到不一樣的沉浸式體驗。

總結

在現代社會飛速發展的過程中，H5的設計也不斷地隨著技術的進步不斷革新，動態插畫在H5中的運用也呈現出了飛速增長的趨勢。設計師應該在尊重動態插畫在H5中應用原則的基礎上，更加注重內容設計，適當地進行各種形式的創新，而不是一味跟風模仿。只有這樣才能在目前“流量為王”的時代下，設計出真正值得群眾廣為傳播的H5作品。

參考文獻

[1]孫穎，李禹臻，朱琳.HTML5的創新應用——以新媒體平臺的視覺設計為例[J]設計，2017 （051：30-31

[2]伏曉佳.基于動態插畫形式的H5廣告交互設計研究[D]東華大學，2020

[3]毓鑫，黃弘.基于移動互聯網環境下的H5計形式探究[J]設汁，2016 （23）：134-135

[4]張耿，項洋.移動端游戲互動式H5廣告設計研究[J]設計，2020，33 （03） 131-133

[5]田娜.以“空巢青年”為題材的動態數字插畫創作[D].深圳大學，2018

[6]鄭閔謙.移動端HTML5場景型廣告設計研究[D].江南大學，2018

[7]于瑩，武藝.插畫在平面設計中應用[J]設t上，2015 （07）：140-141

[8]鄧暮媛.手機端H5廣告中互動化插畫設計的研究[D]湖北美術學院，2017