基于H5技術(shù)的移動(dòng)端廣告設(shè)計(jì)表現(xiàn)形式研究

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

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

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

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

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è)面有輕便化的優(yōu)勢(shì)，能快速對(duì)新內(nèi)容做出反應(yīng)，開(kāi)發(fā)時(shí)間也更短，同時(shí)Html5標(biāo)準(zhǔn)有“重內(nèi)容、富交互、富體驗(yàn)、跨平臺(tái)”的要求，較Html4有大幅改良，支持更多的多媒體元素。同時(shí)Canvas和Web GL的出現(xiàn)使Web應(yīng)用能夠獨(dú)立完成出色的繪圖和渲染，呈現(xiàn)更豐富的頁(yè)面效果，從而具有高安全性、跨平臺(tái)性及良好的操作體驗(yàn)。

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

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

2.1 簡(jiǎn)單圖文

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

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

2.2 虛擬場(chǎng)景

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

央視廣播出品的H5《王小藝的朋友圈》切入的用戶場(chǎng)景就是每個(gè)人每天都在刷新、點(diǎn)贊的朋友圈，是一種有代表性的社交形式，更是一種日常生活狀態(tài)。它是被做成了一個(gè)全屏，全景，浸入式的場(chǎng)景，就是用戶打開(kāi)朋友圈映入眼簾的樣子。因此這部集合廣播的聲效、視頻和圖片的可視特點(diǎn)及虛擬現(xiàn)實(shí)的場(chǎng)景特點(diǎn)的作品立即抓住了用戶的眼球和心理感覺(jué)。虛擬場(chǎng)景的設(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廣告通過(guò)新聞的形式，用戶點(diǎn)擊進(jìn)入廣告會(huì)認(rèn)為是真實(shí)新聞而認(rèn)真閱讀，但瀏覽的過(guò)程中畫(huà)面突然動(dòng)起來(lái)跳出吳亦凡，在一定程度上會(huì)超出用戶的預(yù)期，從而激發(fā)用戶的興趣。與明星面對(duì)面視頻這一創(chuàng)意方式對(duì)于粉絲來(lái)說(shuō)極具吸引力。整支廣告以兩段視頻自動(dòng)播放為主要內(nèi)容，開(kāi)篇以新聞引起用戶注意，成功帶給用戶新奇的體驗(yàn)。

2.4 互動(dòng)小游戲

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

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

2.5 技術(shù)型

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

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

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

3 結(jié)語(yǔ)

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

參考文獻(xiàn)：

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

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

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