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

關(guān)鍵詞：H5技術(shù);移動(dòng)端;廣告設(shè)計(jì)

1 H5技術(shù)及特點(diǎn)概述

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

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

2 H5移動(dòng)端廣告的表現(xiàn)形式

H5移動(dòng)端廣告（以下簡稱H5廣告）是一種基于Html5技術(shù)實(shí)現(xiàn)的移動(dòng)端網(wǎng)頁廣告形式，融合了視覺、交互、動(dòng)畫、聲效、視頻等多維度的設(shè)計(jì)表現(xiàn)形式，通過微信、微博等社交公眾平臺發(fā)布信息與產(chǎn)品宣傳活動(dòng)，結(jié)合有趣的交互方式，帶動(dòng)用戶感知和參與品牌宣傳的活動(dòng)中。其表現(xiàn)形式有如下方面。

2.1 簡單圖文

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

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

2.2 虛擬場景

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

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

2.3 創(chuàng)意視頻

創(chuàng)意視頻往往運(yùn)用視頻與圖文結(jié)合的方式，加上極具創(chuàng)意的腳本設(shè)計(jì)帶給用戶新奇感。隨著技術(shù)的進(jìn)步，H5 廣告視頻的播放的流暢度也逐漸提升。

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

2.4 互動(dòng)小游戲

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

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

2.5 技術(shù)型

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

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

雙屏互動(dòng)H5廣告，即兩部手機(jī)通過掃碼等方式實(shí)現(xiàn)一起互動(dòng)。典型案例有啤酒類H5 廣告，打開頁面后是兩瓶啤酒，同時(shí)互動(dòng)可模擬出將一個(gè)手機(jī)內(nèi)的啤酒倒入另一個(gè)手機(jī)杯中的效果。

3 結(jié)語

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

參考文獻(xiàn)：

[1] 張余.移動(dòng)互聯(lián)網(wǎng)時(shí)代HTML5頁面的設(shè)計(jì)與營銷[J].東南傳播，2015（9）.

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

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