基于H5的交互漫画探索

摘要：基于HTML5（以下简称“H5”）的交互漫画表达方式仍以故事漫画为主体，但它融合了游戏、交互设计、音效、漫画等诸多元素，加深了用户的沉浸感，创造出了新颖的互动体验。基于H5的交互漫画具有H5交互页面的诸多优势，它是目前移动端最流行的传播形式，具备快速、即时的传播属性，在应用领域，尤其是传播和营销方面具有极大的研究价值。文章阐述了交互漫画的概念、类型、特点及应用领域等，通过对H5交互漫画实例分析，探索其发展现状及存在的问题，并提出相应对策。

关键词：HTML5;交互漫画;交互设计;交互体验

随着互联网技术的发展，手机、平板电脑等移动媒体的普及，漫画逐渐从传统的纸媒转移到了电子媒介上，可以适配不同设备的数字漫画如春后竹笋般迅速发展起来。那么什么是交互漫画呢？交互漫画的类型和特点有哪些？目前H5交互漫画的发展现状如何？存在哪些问题？解决问题的对策有哪些？

一、交互漫画概念界定

交互漫画集“阅读、观看、互动”于一身，可以说是“漫画元素+电影元素+游戏元素”的集合体[1]。它不但保留了传统漫画元素如对白框、旁白文字、画格、空间留白（即画面中可省略的虚景）等，还添加了电影元素如动态特效、音乐音效、镜头效果等，更利用了与时俱进的计算机技术增加了交互性的游戏元素，用户通过点击、长按、移动、拖拽等动作与故事里的角色进行交互，在原有的漫画故事情节上增加游戏独有的支线剧情，大大丰富了故事性，使读者“可赏可玩”，充分调动了阅读的积极性和趣味性。

但是，很多人会把以视频为载体的动态漫画误认为交互漫画。这种动态漫画制作成本低廉，观赏体验差，仅仅只是在原有的静态漫画基础上添加影视特效，利用镜头运动使画面产生位移、缩放、景深等效果，再配上音乐、音效、配音等，很长一段时间深受动漫爱好者的厌弃。而交互漫画以读者为中心，突出的是读者与漫画故事之间的交互行为，由读者掌握阅读故事的节奏等，它提高了用户的阅读体验，给用户带来沉浸感。

二、H5交互漫画类型及特点

随着手机阅读的流行和H5的快速发展，国内H5交互漫画领域呈现出了多种形式，主要可以分为以下三种：

1.触发互动型

这类交互漫画以叙事为目的，根据用户操作触发画面的一些特定动态效果，如点击、拖拽、上下或左右滑屏等，从而实现画格间的巧妙切换，推动故事的发展。常见的触发互动型交互漫画多以动态长图的形式呈现，主要特点是基于H5制作动画、交互效果，辅以音乐、音效或配音，制作景深效果或模拟镜头运动（推、拉、摇、移）吸引读者的注意力，给读者带来沉浸感。其叙事过程的核心是交互，读者在手机上完成每一个交互，便可进入故事的下一个情节或场景。典型案例包括由网易知道和网易沸点工作室联合出品的《失踪青年章莹颖》、东南大学招生办公室出品的《东南大学2019级英雄帖<此间的江湖>》、CGTN出品的《五四精神永存》等。

2.视频互动型

视频互动型交互漫画顾名思义，表现形式主要为漫画风格的视频或动画，区别在于有的是自动播放，有的是点击相应按钮后开始播放视频。这类漫画要求视频或动画基于漫画故事的情节巧妙与合理的交互元素相结合，画风及动态效果表现力强，读者根据故事内容选择不同的选项，从而切换场景或推动故事情节的发展，因此又被称为“视频+选项答题类”H5。典型案例包括由货拉拉出品的《未来人类面对的最大危机竟是……》、百度出品的《你不是一个人在对抗这复杂的世界》等。

3.游戏导向型

游戏导向型交互漫画将游戏的开放性和漫画的叙事性巧妙地结合在一起，既给读者呈现了漫画的故事情节，又给读者提供了互动类游戏操作部分，通过引人入胜的剧情推动玩家继续玩下去。它的游戏特性非常突出，使读者可以在不同身份之间进行切换。当玩家阅读故事背景时，是以读者的身份接受信息;当玩家结合环环相扣的剧情进行探索解谜、角色扮演、测试答题时，是以故事里的角色参与到游戏中，有时甚至可以决定故事的走向。这类交互漫画的典型案例包括由奇迹暖暖出品的《穿越千年的奇迹》、亿众互动出品的《情人节谋杀案》等。

三、交互漫画发展现状、问题及对策

近几年，我国动画电影发展迅猛，动漫市场也越来越广阔，随着互联网技术的发展和阅读媒介的改变，越来越多交互漫画层出不穷，但从技术实现和用户体验角度来说，让人过目不忘的作品却凤毛麟角。但是，基于H5的短篇交互漫画在国内却越来越流行，因为H5页面是目前移动端最流行的传播形式，具备快速、即时的传播属性，这种极强的传播能力使它在移动端的营销特性非常突出，能够带来巨大的社会效益和经济效益。因此H5交互漫画被广泛应用于影视宣传、广告宣传、在线营销、品牌推广等，可以说是“漫画类型宣传H5”。 通过H5交互漫画实例分析，目前存在如下问题：

1.交互设计与故事情节脱节

交互漫画里的交互设计本质是为了加强故事效果，当动画特效生硬，交互形式及特效加成与故事情节无关时，读者就会感受不到漫画故事的内涵，这种与故事情节脱节的交互设计也就难以完整、清晰地表达故事主题。那么怎样的交互设计才算是融入故事情节呢？举例来说，根据剧情的需要，当故事里的主角需要借助“外力”进行下一步行動时，或者需要一些语言刺激改变思想或行动时，读者通过扮演这个“外力”，帮助或鼓励主角做一些小小的行动，既推动了故事情节的发展，又体验了主角的情感，还加深了读者的沉浸感。

此外，根据漫画故事主题的不同，融入故事情节的交互设计方法也会不同。以侦探悬疑类漫画为例，依托漫画场景的全景模式设计，让读者化身为故事里的侦探，基于故事剧情的发展自主寻找线索、搜集资料、询问证人、讯问嫌疑人等，从而查出真相，指认犯人。这与传统漫画最大的区别是改变了其叙事结构及手法。一般来说，传统的静态漫画主要采用线性叙事手法，一般有头有尾有序，也许会采用倒叙和插叙等来服务故事主线。而这种侦探悬疑类交互漫画采用的是非线性叙事，充满了随机的趣味性和神秘感，它由用户来决定寻找线索搜集资料、询问证人等的先后顺序。这要求故事的叙事结构本身是多线的，即使时间的连续性被模糊了，也不会影响故事的主线，读者仍然能够理解和接受。

2.交互设计大同小异，缺乏原创性

基于不同的漫画故事情节，每一种交互设计应该都是独一无二的。但是，有不少H5交互漫画随意套用模板，给读者带来乏味、老套的交互体验。随着H5交互应用的普及，毫无创意的交互设计越来越难以满足用户的需求，更加新颖、复杂的玩法和更有深度的交互体验是未来H5交互漫画面临的挑战。

目前，H5常见的交互方式包括点击交互、连击交互、长按交互、长图视差交互、拖拽交互、双屏交互、悬浮、摇一摇等。以触发互动型漫画为例，可以根据漫画故事剧情合理设计交互方式的组合形式，比如在长图视差交互中，读者通过滑动屏幕触发剧情里的某个人、某个动物，甚至某个物品，配合恰当的音效，实现独一无二的转场效果，渲染与之匹配的情感氛围。如果主角需要聚集某种情感或某种能量等，可以通过长按交互实现这一剧情，从而增加用户的参与感。

如果想要更进一步加强交互设计的创新感，给读者创造新颖的互动体验，就需要尝试和探索如何将快闪、一镜到底、VR 全景、模拟界面、重力感应等高级动效融入漫画故事的剧情中，这类交互设计技术实现难度大，仍在不断发展中。此外，H5案例目前主要集中在触控交互，也许未来随着技术的发展，手势交互和语音交互也会被广泛应用其中。

3.交互设计不合理，降低用户体验

当读者阅读漫画时，不论是纸媒漫画还是交互漫画，读者更倾向于自己掌控阅读的速度和思考的节奏，或停留思考、或翻页前进、或后退品味，这是漫画作品赋予读者掌控故事发展节奏的特权，是读者的一种阅读习惯及享受。当交互设计忽略这一优势时，就是在降低用户体验。

4.加载时间长，交互过程卡顿

目前，市面上关于H5的制作软件层出不穷，选择合适的制作工具是H5交互漫画制作的保障。越来越多的H5交互漫画都是基于零代码、可视化界面操作的H5制作软件进行制作，但是，如果素材处理不到位，选用的H5制作软件不恰当，完成的H5交互漫画效果就会不好，比如加载时间过长，交互卡顿，交互体验单一无趣等。国内现有的H5制作软件主要分为两大类，一类是傻瓜型H5制作软件，主要包括人人秀、易企秀、MAKA、兔展、iebook、Mugeda、微页等，操作简单，只需简单地拖拽素材进行组合，即可完成H5制作，但其功能不完善，制作效果不好，无法实现复杂的交互设计制作。另一类是专业级H5制作软件，虽然操作难度较大，但功能全面，用户可以编写代码，能满足个性化交互设计需求，主要包括意派Epub360、iH5、iVX。

结语

基于H5的交互漫画通过交互的新颖性和刺激感吸引了读者，虽然其表达方式仍以故事漫画为主体，但它融合了游戏、交互设计、漫画等诸多元素，加深了用户的沉浸感，提高了用户的阅读体验。同时，它的传播范围广、传播速度极快，在没有任何商业推广的情况下，仅靠自传播，日点击量轻松破万。因此，艺术多样性的H5交互漫画具有持续性消费价值，在应用场景、营销推广、商业模式的拓展上，尤其是在传播和营销方面具有极大的研究价值。但是，探其形式本身，交互设计是其核心。因此，如何创作出与故事情节、主题和表现形式相符的新颖的交互设计，突出漫画人物风格，快速有效地吸引读者，为用户带来美好的视觉效果和极佳的交互体验，是未来交互漫画面临的挑战。

参考文献：

[1]徐智，李四达.交互漫画的发展及趋势研究[J].艺术与设计（理论），2018（3）：72-73.

[2]莫葵鳳，郑小军，杨上影.游戏型微课设计：现状、问题及对策——以H5平台交互设计为例[J].中国教育信息化，2019（7）：11-15.

[3]国天依，孙立军.交互漫画，突破传统表现维度[N].中国美术报，2020（5）.

[4]陈雷.从动态漫画的兴起看信息时代下动漫形式的发展趋势[J].装饰，2014（12）：19-21.

作者简介：

周萍（1989年-），女，汉，湖南邵东人，工程师，硕士，研究方向：多媒体交互设计。