基于H5技術的移動端廣告設計表現(xiàn)形式研究

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

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

1 H5技術及特點概述

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

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

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

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

2.1 簡單圖文

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

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

2.2 虛擬場景

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

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

2.3 創(chuàng)意視頻

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

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

2.4 互動小游戲

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

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

2.5 技術型

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

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

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

3 結語

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

參考文獻：

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

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

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