动态插画在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
