動態(tài)插畫在H5設(shè)計中的應(yīng)用研究

周藝璇

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

關(guān)鍵詞：動態(tài)插畫 H5 三維技術(shù) 視覺元素 情感體驗

中圖分類號：TP391.9

文獻標(biāo)識碼：A

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

引言

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

一、H5概述

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

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

二、動態(tài)插畫概述

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

動態(tài)插畫是在時間軸的基礎(chǔ)之上，所有的元素以適合的動態(tài)和時間點運動，既烘托了插畫的氛圍，也更生動地傳達了設(shè)計師想表達的主題，使信息傳達更加生動有趣。動態(tài)插畫的發(fā)展是建立在數(shù)字技術(shù)的發(fā)展之上，為很多行業(yè)提供了全新的創(chuàng)意展示形式，動態(tài)插畫也開始大量應(yīng)用于不同類型的設(shè)計項目中;豐富有趣的動態(tài)插畫設(shè)計能增加用戶黏度，間接地擴大信息接收的群體。當(dāng)前互聯(lián)網(wǎng)發(fā)展日趨成熟，各類媒體依靠數(shù)據(jù)流量可以產(chǎn)生巨大的傳播效應(yīng)，同時移動設(shè)備的用戶群體在飛速增長，將動態(tài)插畫應(yīng)用于H5頁面設(shè)計可以有效促進文化傳媒并且?guī)硎挚捎^的經(jīng)濟效益。

三、動態(tài)插畫在H5中的應(yīng)用現(xiàn)狀

（一）動態(tài)插畫在不同類型H5中的應(yīng)用

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

1.展示類

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

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

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

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

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

3.注重原創(chuàng)設(shè)計

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

在H5設(shè)計中原創(chuàng)設(shè)計原則要求動態(tài)插畫內(nèi)容與主題的呼應(yīng)，無論是在畫風(fēng)還是在交互方面都不應(yīng)盲目跟風(fēng)，而是選擇與主題相契合的風(fēng)格進行創(chuàng)作。在紀(jì)念哈利波特20周年的H5宣傳廣告中就加入了很多具有哈利波特風(fēng)格的魔法效果，在極具代表性的電影背景音樂中，H5展示了哈利波特系列中經(jīng)典的分院帽、魁地奇以及魔法課堂等場景。其中動態(tài)的“金色飛賊”在屏幕中飛速穿梭，甚至?xí)言菊Ｅ帕械奈淖肿驳钠吡惆寺?，讓人忍俊不禁。作品最后，斯?nèi)普教授的插畫會抬起魔杖，對眼前的觀眾施展“遺忘咒”，整個H5落下帷幕并且無法返回，甚至?xí)層脩魧倓偟哪Хㄊ澜缫酪啦簧?。整個作品在傳統(tǒng)H5的圖文形式上添加了符合“哈利·波特”主題的一系列創(chuàng)意效果，真正讓“魔法”融入了整個觀賞過程，其中穿插的用動態(tài)插畫呈現(xiàn)的經(jīng)典場面也能喚起所有哈利·波特粉絲的回憶，讓用戶得到不一樣的沉浸式體驗。

總結(jié)

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

參考文獻

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

[2]伏曉佳.基于動態(tài)插畫形式的H5廣告交互設(shè)計研究[D]東華大學(xué)，2020

[3]毓鑫，黃弘.基于移動互聯(lián)網(wǎng)環(huán)境下的H5計形式探究[J]設(shè)汁，2016 （23）：134-135

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

[5]田娜.以“空巢青年”為題材的動態(tài)數(shù)字插畫創(chuàng)作[D].深圳大學(xué)，2018

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

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

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