基于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年-），女，漢，湖南邵東人，工程師，碩士，研究方向：多媒體交互設計。