随着互联网技术的发展，5G时代来临，移动端网页加载速度大大提升，根据《中国移动互联网发展报告（2019）》显示，2018年移动电话用户总数达到15.7亿户，中国移动互联网月活跃用户规模在2018年期末净增长4600万，手机上网流量在总流量中占98.7%，这为活跃于移动设备的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外，动态插画一般是以主体的地位存在，用以吸引观者关注其品牌或品牌所举办的活动，通常分两种表现形式：一种直接将动态插画以视频的方式展现无需任何操作，另一种则需要简单的手势操作如点击或者往下拖拽等继续完成展示。

视频方式展示的动态插画通常是在静态插画的基础上进行分层，对插画素材的不同部分添加动画来达到整体的动态效果。例如对角色插画的四肢和五官分别分层添加动作来制作角色动画，相较于静态插画更加具有故事性和趣味性。如腾讯与故宫联手推出的创新大赛NEXTIDEA的宣传H5就应用了大量的动态插画来辅助叙事，在这款H5的开篇，明朝的朱棣皇帝从静态的画像上一跃而起，开始唱起了Rap，跳起了骑马舞甚至把自己的自拍发到了朋友圈，后期还出现了雍正十二美人图，原本古朴的美人戴上了现代的VR眼镜开始研究宇宙飞船。这种跨界和穿越的形式可以在短时间内迅速抓住观众的眼球，新颖的形式和略显滑稽的动态也更好地迎合了年轻人的口味。在H5的最后，朱棣皇帝推出了比赛报名的宣传展板，让人在意犹未尽的同时，了解到了此次比赛为传统文化作品创新设计的主题。

需要手势控制的H5通常以长页面为基础，将动态插画穿插放置在长页面的不同位置，让用户在拖拽或点击过程中可以自由查看不同位置的动态信息，可读性更强，也增加了探索的乐趣。天猫在今年中秋节推出的一款H5——《天猫团圆街》整个H5先用一段动画为背景，引出“天猫团圆街”这个活动，用动态插画的形式设计了整个街道，温暖+扁平式的插画风格搭配插画中各种人物的动态效果，生动地表现了“团圆街”的热闹场景，烘托了整个中秋节喜庆祥和的气氛，映衬了主题。这款H5在互动过程中需要用户往下拖拽才能看到不同“商铺”的内容，模拟一种“在逛街”的卡通效果，其中用白色的小爪子配以简单的循环动效提示用户在哪里的点击会有内容呈现，动态插画巧妙地应用在这部H5中，整体十分和谐，可交互的地方也十分明确，很好传达了节日的氛围，起到了品牌的宣传效果。

2. 测试类

测试类型的H5往往字体和问题框在界面中占比较大的比例，动态插画一般起到装饰或者背景充当的作用。适当的动态设计会添加用户在选择答案过程中的趣味性。谷登推出的H5《走进我的独处世界》，通过测试主人与宠物的玩耍时间、宠物的日常行为和反应几个问题来唤醒被测试者对宠物的关心和陪伴。虽然是测试类H5，但这里的选项上并不是单纯用枯燥的文字作为选项，而是使用可以左右滑动读条的形式配以简单的线条风格的插画设计，用户拉到不同的选项点时相应的配图也会产生变化。如在第二个“每天平均陪伴狗狗在家玩耍时间”这个问题中，用户拉到0H,1H,2H，狗狗都会有不同的变化，陪伴的时间越长，狗狗的配图就会越开心。这样的配图设计能让用户产生联想触发用户的情感，引起反思，更能贴近这部H5想要带给观者思考的主题，呼吁主人能给自己的宠物狗狗多一些关心和陪伴。

3. 游戏类

游戏类的H5一般以小游戏为主，需要由观者进行不同的操作才能将游戏继续往下推动，在这之中用户会有比较强烈的参与感和沉浸感，动态插画和交互设计相结合为整个H5广告的主体，可应用的交互类型也较为综合，手势类交互，重力感应，复杂类交互（键盘、摄像头调用等）设计等都会为H5作品增添娱乐性，将动态插画以游戏化的方式包装以吸引用户点击传播。以斐尔耳机推出的《重奏大师》为例，游戏类似于早期火爆一时的手游《节奏大师》，设计者采用风格清新的插画作为游戏元素，在游戏的节奏轨道上会有水果，耳机，音符等掉落，需要在他们与底部的黑胶片重合时点击才能得分，不仅在游戏中宣传了品牌的产品，而且还通过这种快要被人们淡忘的简易小游戏激发了受众的好奇心，气氛渲染得十分到位，实现了这类可互动插画的娱乐性。

（二）动态插画在H5中的应用中出现的问题

虽然动态插画在不同类型的H5中应用地越来越广泛，但在这其中也不免会出现一些问题，首先，零代码设计工具的出现使得H5的制作门槛降低，可视化制作为设计师带来制作便利的同时，会使部分设计缺乏思考和深度，往往简单的插画素材加设计工具的默认动效就能完成一个H5作品，大部分的品牌为了降低成本或是制作的便利，选择了相对设计周期较短的方式，不重视其中的图片、文字编排，效果往往大打折扣。常此以往使得大量低质量的H5设计模板泛滥，画面质量降低，动态效果十分简单机械，大量低质量H5作品的泛滥会使得用户对其好感度的降低，影响行业的发展。

其次，目前国内H5的形式比较单一，缺乏创新，设计师往往忽略了从品牌的产品特性出发，也没有根据目标传播人群进行差异化设计，模仿化、跟风化十分严重，容易导致这类型的H5作品审美疲劳。这样的作品只注意模仿形式而忽略内容设计，往往质量不高，无法刺激用户的点击欲望，大大降低传播的转化率。

另一个问题在于，在H5中应用动态插画时，设计师往往忽视交互设计的重要性，平面设计化严重，相比于H5而言传统广告设计多数只用到五感中的视觉设计，却没有重视交互及声音的设计。H5是能调用听觉、视觉、触觉这三感的数字广告，需要综合运用。

四、动态插画在H5中的应用原则

动态插画作为H5中广泛运用到的设计形式，如果能够合理的使用设计原则进行设计，效果将会事半功倍。动态插画在H5中应用的元素主要包括图形、文字、动态、交互设计等等，以下将动态插画中的元素拆解，继而分析动态插画在H5中的应用原则。

1. 图形与文字设计情感化

唐纳德·诺曼教授曾提出，情感系统是我们生活中必不可少的组成部分，它会影响人们的感觉、行为和想法，从而帮助人们快速地从好与坏之间做出选择。因此他认为设计的情感要素比实用要素更为重要，是一件产品成功与否的关键。而情感化设计包括三个层次：本能层次的设计：关注外观；行为层次的设计：关注使用的愉悦感和效用；反思层次的设计；关注自我形象、个人的满足、记忆等。所以H5设计不仅要在视觉上美观，让观者能感受到愉悦，还要能引发他们内心的情感。

图形与文字是动态插画的基础元素，其基础构成与拼贴过程中的情感化设计遵循如下的设计原则。首先，插画与文字的风格需要在视觉上尽可能简约，在视觉上让用户感到简洁和清爽。现代社会信息泛滥严重，对于H5而言想要快速调动起用户的情绪首要的就是通过插画的色彩和简短的文案来第一时间吸引用户的注意，例如使用对比较强的撞色和扁平化的绘画风格来绘制插画，可以让用户更易于理解其表达的故事，赢得用户的好感。其次，需要在插画设计过程中建立用户的认同感，唤起用户的共鸣。插画相较于其他艺术形式更容易通过其夸张和鲜明的艺术感染力来触及用户的内心，当图形与文字让用户产生共鸣时就更能促进用户对H5内容的关注和传播。

例如网易推出的《睡姿大比拼》，这款H5需要用户操作卡通扁平的人物形象来摆出自己的个性睡姿，人物可爱的画风和动作迎合了年轻一代的审美，引起了用户强烈的共鸣，有趣搞怪的形象让用户在分享时也更容易与他人产生话题，让这一作品产生了爆炸式的转发传播。最后，图形设计的情感化需要引起用户的思考、联想或回忆，这有助于增强品牌或产品在用户心中的印象，带给用户更深层次的情感体验。以《网易云音乐年度歌单总结》这个H5作品为例，这个作品没有很复杂的动效，交互也设计得十分简单，整个H5的图形设计采用温馨简约的风格，将冰冷的数据转化为简单的动态插画配合着文字描述，记录着过去一年与使用者的点点滴滴，给观者十分温暖舒服的感受，刺激了用户想要继续点击的欲望，满足了观者对于本能和行为层次的需求，而各种听歌数据统计的展示让用户回忆当时听歌的场景，也同时满足了反思层次的需求，激发用户产生回忆和联想，唤醒他们内心深处的感触，是一个非常优秀地将图形与文字设计融入情感化的H5作品。

2. 动态与交互设计注重人性化体验

动态插画在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(05):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].设计,2015(07):140-141.

[8]邓暮媛.手机端H5广告中互动化插画设计的研究[D].湖北美术学院,2017.

周艺璇.动态插画在H5设计中的应用研究[J].设计,2021,34(05):143-145.