基于動態插畫形式的廣州紅色觀光巴士H5 廣告設計

鄭釔弦 黃蘭

（華南農業大學藝術學院）

一、H5 廣告與動態插畫概述

（一）H5廣告

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

（二）動態插畫

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

（三）動態插畫形式在H5設計中的應用價值

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

二、廣州紅色觀光巴士概述及其現狀

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

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

（二）廣州紅色觀光巴士的推廣與體驗現狀

1.缺乏創新性的新媒體推廣傳播渠道

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

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

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

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

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

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

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

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

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

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

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

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

四、基于動態插畫形式的廣州紅色觀光巴士H5 設計創新思路

（一）設計內容層面的創新性

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

（二）設計形式層面的創新性

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

（三）設計表現層面的創新性

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

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

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

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

（二）動態插畫設計

1.動態插畫的圖形設計

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

圖1 景點詳情頁

2.動態插畫的動效設計

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

（三）H5交互設計

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

圖2 H5首頁與站點頁設計

六、結語

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