鄭釔弦 黃蘭

（華南農業(yè)大學藝術學院）

一、H5 廣告與動態(tài)插畫概述

（一）H5廣告

H5廣告是依托于HTML5技術而實現(xiàn)的移動端網頁廣告，是視聽與交互體驗相融合的社會式內容傳播載體，因其自身優(yōu)勢迅速占領了互聯(lián)網廣告行業(yè)制高點。傳統(tǒng)廣告往往是以圖片或是視頻的形式傳播內容，H5 廣告則在此基礎之上加以交互的方式與廣告觀看者進行互動，增加了廣告?zhèn)鞑サ慕换ンw驗感，包含視覺、聽覺與觸覺體驗，更能引發(fā)受眾興趣。相比傳統(tǒng)廣告，H5廣告有著創(chuàng)作自由度高、互動方式多樣、傳播高效便捷、投入成本低廉、投放時間自由的壓倒性優(yōu)勢，能夠以多感官的交互體驗傳播廣告內容。[1]

（二）動態(tài)插畫

動態(tài)插畫是從傳統(tǒng)靜態(tài)插畫中衍生出的一種新形式插畫，是將傳統(tǒng)靜態(tài)插畫進行動態(tài)化設計的表現(xiàn)形式，具備傳統(tǒng)靜態(tài)插畫的特征，服從傳統(tǒng)靜態(tài)插畫的設計原則與規(guī)律。[2]動態(tài)插畫的表現(xiàn)形式是將傳統(tǒng)靜態(tài)插畫的圖形元素進行局部動態(tài)化設計，這種動態(tài)化設計具有一定的運動規(guī)律和重復循環(huán)性。動態(tài)插畫的出現(xiàn)拓展了傳統(tǒng)靜態(tài)插畫的創(chuàng)作空間，更具有趣味性，且能夠高效快捷地與數(shù)字媒體平臺進行適配，常被應用于互聯(lián)網數(shù)字媒體平臺廣告設計，其豐富的動態(tài)效果更能滿足當下人們的瀏覽習慣與審美趨勢，具有強大的發(fā)展?jié)摿?。[3]

（三）動態(tài)插畫形式在H5設計中的應用價值

隨著互聯(lián)網時代的來臨，H5廣告憑借自身的傳播優(yōu)勢以及交互特征在商業(yè)及文化傳播領域得到了飛速發(fā)展，動態(tài)插畫形式在H5廣告中的應用價值也逐漸被挖掘。一方面，動態(tài)插畫的視覺效果能夠增強H5廣告的互動反饋，喚起受眾的獵奇心，強化H5廣告給予受眾的情感反饋。[4]另一方面，H5廣告為動態(tài)插畫帶來了信息傳遞方式的轉變。H5廣告的傳遞信息速度快、傳播范圍廣、傳播成本低，便于人們從整體理解動態(tài)插畫的內容信息，H5廣告所支持的交互形式與動態(tài)效果也更加豐富新穎，能夠 在營造良好視覺效果的同時，更為直觀地為受眾做出信息引導。

二、廣州紅色觀光巴士概述及其現(xiàn)狀

（一）廣州紅色觀光巴士概述

廣州紅色觀光巴士是廣州公交巴士集團推出的以“紅色文化”為主題的雙層觀光巴士，包含8條不同主題的紅色文化旅游線路。廣州紅色觀光巴士將廣州多個紅色史跡、歷史景點通過旅游線路串珠成鏈，旨在為游客提供一站式歷史文化沉浸式體驗服務。紅色觀光巴士車內配有志愿者講解、車載語音導覽，通過在移動的車廂內開展廣州紅色文化研學課堂，將以往的靜態(tài)學習過程變?yōu)橛斡[式的動態(tài)游學，以觀光巴士旅游的創(chuàng)新手段傳播廣州紅色文化。

（二）廣州紅色觀光巴士的推廣與體驗現(xiàn)狀

1.缺乏創(chuàng)新性的新媒體推廣傳播渠道

廣州紅色觀光巴士目前的推廣傳播方式仍然以傳統(tǒng)廣告為主，主要通過在線下投放一定的宣發(fā)物料進行推廣傳播。線下投放的紙質宣發(fā)物料傳播途徑單一，難以針對特定人群進行定向投放，因此紅色觀光巴士急需創(chuàng)新性的新媒體推廣傳播渠道來提高其知名度。

2.線路景點宣講方式單一乏味

目前游客在紅色觀光巴士的乘坐過程中，除了志愿者講解、車載語音導覽外（如圖2所示），無其他導入景點信息的途徑。這種景點宣講方式難以讓游客產生新鮮的體驗感，缺乏一定的 生動性與趣味性，無法讓游客產生較為深刻、整體的印象。

3.缺少適宜巴士空間的互動活動

紅色觀光巴士的站點間隔較長，因此在紅色觀光巴士行程過程中，除了景點講解外還需要一定的互動活動為游客行程增加趣味性。目前紅色觀光巴士內部的互動活動比較單調，缺乏與巴士空間相適應的互動方式，例如觀光巴士內擺放的黨史讀物與導覽手冊并不適合在巴士內專注閱讀。

三、H5 廣告設計對于廣州紅色觀光巴士線路推廣的意義

（一）延展旅游線路推廣傳播渠道

在傳播廣度方面，H5廣告在制作階段結束后可以直接生成二維碼分享，從定制到上線的生產投放成本遠低于傳統(tǒng)廣告，用戶通過網絡可接收到內容信息，通過社交平臺分享形成裂變傳播，因此它能夠帶來強大的傳播廣度。在傳播效率方面，H5廣告可以通過互聯(lián)網平臺實現(xiàn)面向目標人群的精準投放，并支持實時觀察受眾的瀏覽數(shù)據(jù)以調整宣傳策略，大幅度地提升了H5廣告?zhèn)鞑ゾ?，從而提升H5廣告的傳播效率。

（二）拓展沿線景點的導游宣講方式

H5廣告允許投放者自由定制內容，能夠借助現(xiàn)代數(shù)字媒體技術將廣州紅色文化地標景點信息植入H5廣告中，通過動態(tài)圖形、觸摸點擊等實現(xiàn)紅色觀光巴士旅游線路景點的多維導覽體驗，給受眾帶來視覺、聽覺、觸覺多維度的感官體驗，有效提升游客的主動探索紅色觀光巴士旅游線路景點信息的積極性。在增強導游宣講方式的生動性與趣味性的同時，提升紅色觀光巴士旅游線路景點知名度，更好地推廣廣州紅色文化地標。

（三）適宜在巴士空間進行投放互動

H5廣告的觀看十分便捷，無需占用大量巴士空間或是破壞巴士內飾的美觀性，游客只需坐在座位上使用微信掃碼即可隨時隨地流暢體驗H5廣告。H5廣告能夠有效豐富游客在廣州紅色觀光巴士旅游線路行程中的空余視覺，有效增加游客在巴士行進過程中的趣味感，避免游客因行程過長而產生枯燥乏味感，達到良好的互動體驗效果。

四、基于動態(tài)插畫形式的廣州紅色觀光巴士H5 設計創(chuàng)新思路

（一）設計內容層面的創(chuàng)新性

動態(tài)插畫能夠為H5廣告設計提供設計內容層面的創(chuàng)新性。根據(jù)廣州紅色觀光巴士旅游線路的特點，適宜通過充分挖掘廣州紅色觀光巴士旅游線路沿線景點的藝術特點，來研究其動態(tài)插畫內容創(chuàng)作形式。例如，提取廣州紅色觀光巴士旅游線路沿線景點中的建筑、文物、典型事件、歷史人物等可借鑒的形象。將現(xiàn)有元素進行提取，通過圖形創(chuàng)意設計形成新的動態(tài)插畫。在H5頁面設計中，還可通過圖形與文字內容的編排凸顯巴士線路的特色，利用巴士旅游線路的特點，創(chuàng)作出打破同質化的H5廣告設計作品。

（二）設計形式層面的創(chuàng)新性

交互功能是H5廣告的核心優(yōu)勢之一，恰當?shù)慕换ピO計能夠讓用戶產生更多的參與感，提升用戶在使用中體驗，因此交互設計是H5廣告在設計形式層面的創(chuàng)新重點。要創(chuàng)造用戶體驗良好的交互設計，就需在設計前期對H5廣告的設計內容進行正確、充分的解讀，充分考慮廣州紅色觀光巴士H5廣告受眾的使用場景、信息結構與界面元素的形態(tài)，設計相適配的交互形式，配合動效設計創(chuàng)造出恰到好處的交互體驗。例如讓用戶通過點擊來釋放頁面中插畫的動態(tài)效果，為原本靜態(tài)的頁面增添趣味性，增強用戶的參與感。

（三）設計表現(xiàn)層面的創(chuàng)新性

H5廣告中包含了多維度的感官元素，主要是視覺、聽覺元素，具體又可細分為圖形、色彩、版式、音效等。[5]對于H5廣告設計而言，想要快速調動起用戶的情緒，首要的就是通過H5界面中的插畫圖形、色彩、動態(tài)視覺效果、簡短的文案和恰當?shù)囊粜Х答亖淼谝粫r間吸引用戶的注意，營造良好的視聽感受，從而讓游客能夠停留在頁面中繼續(xù)深入瀏覽。例如使用對比較強的撞色和扁平化等適用于移動終端設備進行顯示的設計風格來繪制插畫圖形，讓用戶更易于理解H5廣告表達的內容，促進用戶對H5內容的關注和傳播。

五、基于動態(tài)插畫形式的廣州紅色觀光巴士H5 設計實踐

（一）設計定位與內容提取

首先，應當明確廣州紅色觀光巴士H5廣告的設計定位。廣州紅色觀光巴士H5是圍繞“紅色文化”旅游專線，以宣傳“紅色文化”旅游專線、豐富游客游覽體驗為目標進行設計的。因此，應當圍繞“紅色文化”文化旅游專線的線路站點搜集線路資料，根據(jù)每個線路站點的歷史脈絡研究各紅色站點的地標性建筑特征，作為H5廣告中動態(tài)插畫與交互設計的參考，為游客留下鮮明的景點印象。根據(jù)紅色觀光巴士旅游線路的特點，其適合以動態(tài)插畫為主，聽覺體驗、觸覺交互體驗為輔的方式設計H5廣告。在此基礎上，分別選取線路站點紅色文化地標展開相關設計與應用。

（二）動態(tài)插畫設計

1.動態(tài)插畫的圖形設計

廣州紅色觀光巴士H5廣告中動態(tài)插畫的圖形設計整體使用以扁平化插畫的形式表現(xiàn)廣州紅色觀光巴士沿線景點中的博物館、紀念館、紀念碑等元素（如圖1所示）。插畫的主體顏色使用紅、橙、藍色為主，這樣的對比色搭配不僅更加具備視覺沖擊力，還能讓建筑造型從背景中凸顯出來，同時也符合廣州紅色觀光巴士以傳播紅色文化為主題的整體調性。插畫的裝飾元素以嶺南傳統(tǒng)花卉紋樣元素與云朵、水波為主，意在凸顯嶺南紅色文化的獨特性，為插畫的整體畫面增添意境感。 最后加上景點的文字信息并采用簡潔的排版風格，減少用戶的認知與決策成本，讓用戶的視覺焦點集中在插畫圖形上。

圖1 景點詳情頁

2.動態(tài)插畫的動效設計

動態(tài)插畫表現(xiàn)中最重要的設計因素就是動態(tài)效果設計，通過圖形的動態(tài)造型變化調動視知覺，讓用戶產生視覺趣味，從而給用戶帶來全新的感受。[6]廣州紅色觀光巴士H5廣告設計中展示的動態(tài)插畫是在圖形設計的基礎上進行分層，通過對插畫圖形素材的不同部分添加動畫效果來達到整體的動態(tài)效果，例如通過對背景中的云朵添加移動效果來營造一定的氛圍感、通過對水波紋添加淡入淡出的效果來營造出水面的動態(tài)質感，為整體畫面增加趣味性。在完善圖形設計的基礎上，對頁面中的文字、圖形元素添加進場以及出場動效，以達到頁面之間過渡的動態(tài)效果，例如為文字添加抖動的進場效果，相比原本的靜態(tài)文字，更加能夠為游客打造新鮮的視覺效果，從而引起游客繼續(xù)在頁面中探索的欲望。

（三）H5交互設計

廣州紅色觀光巴士H5廣告設計中的交互設計以引導式交互、語音類交互、行為式交互的設計為主。引導式交互主要體現(xiàn)在H5廣告的首頁與站點頁設計中（如圖2所示），通過模擬巴士啟程與行經站點的形式設計界面框架，引導用戶進入景點詳情頁面的探索；語音類交互包含導覽講解語音與按鈕交互反饋語音，用戶進入站點詳情頁后，H5頁面自動播放內置的講解語音，實現(xiàn)語音導覽體驗，同時用戶每次點擊按鈕都會有聲效反饋用戶的交互狀態(tài)；行為式互動利用一定肢體交互動作的變化實現(xiàn)與用戶交互，用戶可通過滑屏、點擊等行為式互動方式切換頁面、觸發(fā)插畫的動態(tài)效果，趣味性地展現(xiàn)廣州紅色觀光巴士線路景點的地標場景。

圖2 H5首頁與站點頁設計

六、結語

動態(tài)插畫與 H5 廣告的結合為廣州紅色觀光巴士帶來了更多樣化的傳播形式與導覽體驗，從設計內容、設計形式、設計表現(xiàn)三個層面增強了游客在廣州紅色文化巴士搭乘期間的互動與交流，以更新穎的形式為廣州紅色觀光巴士拓寬了推廣傳播渠道。動態(tài)插畫形式在廣州紅色文化巴士 H5設計中的實踐證明了動態(tài)插畫形式在H5設計中的創(chuàng)新路徑可行性，為探索更多樣化的H5廣告設計形式提供了一定的理論與實踐參考。