基于H5技術的移動端廣告設計表現形式研究

摘 要：H5移動端廣告是一種基于Html5技術實現的移動端網頁廣告形式，打破了傳統廣告設計界限，融合了視覺、聽覺和觸覺，具備更豐富的交互方式，給用戶帶來更優質的感官體驗。本文聚焦基于H5技術的移動端廣告設計的主流表現形式，有利于深入研究這種以技術為支撐，設計為主導的新型廣告設計形式，探索不斷更新的技術為新媒體設計帶來的更多可能性。

關鍵詞：H5技術;移動端;廣告設計

1 H5技術及特點概述

H5是Html5的簡稱，Html全稱為Hyper Text Mark-up Language，中文譯為“超文本標記語言”。Html是一種創建網頁的方式，是網頁的開發端和接收端約定如何標記標題、正文、圖片、文字樣式等頁面內容的一整套規范。數字5則是指Html的第5次重大技術修改，其標準規范于2014年10月最終制定并在全球推行。H5頁面是利用Html5編碼技術實現的一種數字應用，其表現形式為游戲、廣告、邀請函、測試頁等。

H5不僅指代利用Html5技術實現的web廣告，還涵蓋了CSS3，Java Script等基于Html5相關技術的社交媒體互動廣告應用集合。Html5 標準的發展與變革，顛覆了PC互聯網端的格局，優化了移動互聯網的用戶體驗。以 Html5為核心的Web頁面有輕便化的優勢，能快速對新內容做出反應，開發時間也更短，同時Html5標準有“重內容、富交互、富體驗、跨平臺”的要求，較Html4有大幅改良，支持更多的多媒體元素。同時Canvas和Web GL的出現使Web應用能夠獨立完成出色的繪圖和渲染，呈現更豐富的頁面效果，從而具有高安全性、跨平臺性及良好的操作體驗。

2 H5移動端廣告的表現形式

H5移動端廣告（以下簡稱H5廣告）是一種基于Html5技術實現的移動端網頁廣告形式，融合了視覺、交互、動畫、聲效、視頻等多維度的設計表現形式，通過微信、微博等社交公眾平臺發布信息與產品宣傳活動，結合有趣的交互方式，帶動用戶感知和參與品牌宣傳的活動中。其表現形式有如下方面。

2.1 簡單圖文

簡單圖文是 H5 廣告最早出現的表現形式，通過圖片、插畫、GIF 動畫等簡單方式，配合情感化或趣味化文案表達廣告的主題內涵。交互方式非常簡單，與幻燈片翻頁效果類似。簡單圖文類的 H5 廣告雖沒有高端的技術與豐富的交互作支撐，但畫面元素的精心布置與文案情感化的敘述方式同樣能打動用戶，帶給用戶更好的體驗。

滴滴打車就是典型的簡單圖文型H5廣告，用幾張照片故事串起整套頁面。視覺簡潔有力，采用整屏黑白照片，點綴以滴滴的品牌色橙色。每切換一張圖片，文字就漸隱浮現，沒有其他互動形式，讓觀眾聚焦于內容，通過陌生人之間的真情聯系來塑造品牌的正能量形象。

2.2 虛擬場景

虛擬場景就是通常所說的場景設計，場景設計一般以用戶生活中熟悉的家、公司、娛樂、公共場所等作為設計的出發點，以帶給用戶更熟悉和真實的體驗?；趫鼍暗腍5廣告設計是將產品置身于現實場景中或設計與用戶生活場景相類似的場景，通過場景將用戶與廣告相連接，用戶通過與基于場景的廣告設計互動，帶給用戶沉浸式的體驗。

央視廣播出品的H5《王小藝的朋友圈》切入的用戶場景就是每個人每天都在刷新、點贊的朋友圈，是一種有代表性的社交形式，更是一種日常生活狀態。它是被做成了一個全屏，全景，浸入式的場景，就是用戶打開朋友圈映入眼簾的樣子。因此這部集合廣播的聲效、視頻和圖片的可視特點及虛擬現實的場景特點的作品立即抓住了用戶的眼球和心理感覺。虛擬場景的設計與現實空間接軌也成了 H5 廣告設計發展新的轉折點。

2.3 創意視頻

創意視頻往往運用視頻與圖文結合的方式，加上極具創意的腳本設計帶給用戶新奇感。隨著技術的進步，H5 廣告視頻的播放的流暢度也逐漸提升。

《吳亦凡入伍》H5 廣告極具創意地將明星效應與軍事題材游戲相結合。明星參軍是頗受關注的話題，所以吳亦凡參軍入伍這一創意構想帶給了用戶意料之外的驚喜。H5廣告通過新聞的形式，用戶點擊進入廣告會認為是真實新聞而認真閱讀，但瀏覽的過程中畫面突然動起來跳出吳亦凡，在一定程度上會超出用戶的預期，從而激發用戶的興趣。與明星面對面視頻這一創意方式對于粉絲來說極具吸引力。整支廣告以兩段視頻自動播放為主要內容，開篇以新聞引起用戶注意，成功帶給用戶新奇的體驗。

2.4 互動小游戲

互聯網時代任何形式的媒體發展都離不開娛樂要素，用戶已不再滿足H5 廣告功能上的需求，更需要通過故事化、游戲化的方式得到情感上的滿足。而將產品與輕量化的小游戲相結合，通過更加有趣的形式潛移默化的突出廣告主題，可使用戶對產品產生更深刻的認知。目前由于技術的限制及對體量的要求，H5廣告游戲的形式相對較簡單，用戶通過與畫面元素的簡單互動完成游戲任務，獲得相應的獎勵，從而達到廣告宣傳的目的。

上海的這只貓信息科技有限公司在圣誕節推出了一款名為《圣誕老人拯救計劃》的H5小游戲，操作非常簡單，只需用手指交替上滑，把角色的脖子向上拉到無限長，游戲就會記錄你拉的最高距離，跟朋友比一比誰比較長。界面清新可愛，與公司的招牌畫風一致，游戲角色也是公司的品牌角色，通過幽默惡搞的游戲向用戶傳達獨到有趣的產品文化。

2.5 技術型

H5技術的運用使廣告的表現形式更加豐富。技術型H5廣告主要分為虛擬現實VR類效果、重力感應、雙屏互動三大類。VR類場景是利用計算機軟件制作出模擬現實的場景，如雙十一天貓H5廣告《穿越宇宙的邀請函》，畫面立體感強，滑動拖拽可控制環視方向，可左可右可近可遠，是典型的VR類H5廣告。

重力感應是指通過對力敏感的傳感器，感受手機在變換姿勢時重心的變化，使手機光標變化位置從而實現選擇的功能。應用重力感應的手機游戲很多，常見的賽車類游戲可通過左右傾斜手機實現方向改變?，F在也有不少H5廣告結合這一技術功能，在廣告中加入重力感應互動，使其可玩性和趣味性大大提高。Juice Up的“你敢在辦公室瘦嗎？”是拿著手機跟著H5畫面做相應運動即能點亮圖標，實現了用手機倒一杯果汁分享給好友的有趣情境。

雙屏互動H5廣告，即兩部手機通過掃碼等方式實現一起互動。典型案例有啤酒類H5 廣告，打開頁面后是兩瓶啤酒，同時互動可模擬出將一個手機內的啤酒倒入另一個手機杯中的效果。

3 結語

H5廣告是一種以Html5技術為支撐，設計為主導的新型廣告設計形式，融合了視覺、交互、技術、文案、動畫、聲效、視頻等多維度的設計表現形式，通過微信，微博等大眾社交公眾平臺發布品牌相關活動，是新媒體的重要發展方向。在確定功能目標，考慮到具體應用場景和傳播對象后，通過研究常見的H5移動端廣告表現形式，結合創新的交互方式，方能以用戶角度思考什么樣的頁面是用戶最想看到的和最樂于去分享的，給予用戶更優質的體驗。

參考文獻：

[1] 張余.移動互聯網時代HTML5頁面的設計與營銷[J].東南傳播，2015（9）.

[2] 楊光.中國社交媒體廣告發展研究[D].河南大學，2014.

作者簡介：陳夢冉（1987—），女，江蘇南京人，藝術設計學碩士，江蘇海事職業技術學院教師，主要研究方向：數字媒體藝術。