從H5廣告設計看數字媒體時代虛擬美學

鄭舒逸*

（浙江理工大學，藝術設計學院，浙江杭州，310018）

從H5廣告設計看數字媒體時代虛擬美學

鄭舒逸*

（浙江理工大學，藝術設計學院，浙江杭州，310018）

隨著互聯網產業的不斷升級，HTML及其相關標準不斷完善，消費者的時代已然來臨，廣告注重體驗更成為了新的價值趨向之一。在國內一系列快速爆發的創意網頁為現下的移動交互創意增添了新的血液，進而為網頁藝術的展現力與設計創意開辟新的沃土，快速形成了對傳統超文本網頁的迭代并進一步優化交互體驗。本文以H5廣告創意應用為切入點，對當前H5廣告市場所呈現的技術美進行分析，探討數字時代下網頁虛擬美學的挑戰。

虛擬美學；H5廣告；數字媒體藝術

引言

在移動互聯網普及與創意經濟的迅猛發展下，H5廣告爆發的條件成熟，通過對搜索引擎、網站、微媒體、互動平臺給予消費者導向的信息供給與行為的轉變，H5廣告揭示了現代數字媒體廣告個性化、互動性、細分化與受眾溝通的品牌傳播行為新特征。H5廣告作為新興的創意廣告空間聚集和發展的載體、發布的平臺，它的形成、發展演化為未來移動互聯網廣告的發展方向展現了新圖景。

1 虛擬美學

虛擬美學(Aesthetics of Virtuality)也叫數字化美學，根據1998年召開的第14屆國際美學大會專題討論的提法，把對諸如電子人、電子人空間以及數字化的二維、三維模擬等虛擬現實和現象的美學研究稱之為虛擬美學。[1]不同于傳統審美時代文學、傳媒基礎的認知，它即非書本、文學間的詩詞、文章的意蘊美學，也非精神上的內在美學，而是一種虛擬技術基礎上的由網絡技術和現在社會環境發展延伸出的的審美。它從網頁設計、網絡文學、游戲應用中能夠達成的精神滿足的體驗美與傳統美學相較完全不同，兩者并不沖突，一個是存在于現實生活中，一個在虛擬空間中兩者相互融合，構成了現在乃至將來的多向美學的方向。

“虛擬”作為數字時代的特征，虛擬設計開始進入我們視野。在虛擬環境中由高科技技術實現的仿實物、偽實物技術或者虛擬現實技術，通過計算機技術營造沉浸性、互動性和想象力形成互動的多維信息環境，使人們能夠通過視覺、聽覺、觸覺等多種傳感器沉浸其中，體驗交互實現“虛擬”或者 “虛擬化”。在信息傳播的現代社會中，網頁作為信息的載體大量承載了社交傳播的內容，通過網頁技術加載的圖片、文字、聲音、媒體更訴諸于信息交互體驗。大眾對信息傳播的體驗與審美訴求也與日俱增，對科技下的科技美與虛擬美學的表達和應用提出新要求。

2 虛擬美學在H5廣告中的應用

2.1 H5廣告

HTML5為萬維網第五代的核心“超文本標記語言”應用，2014年10月HTML5確立，解決了網頁編程行業內諸如移動終端版本不兼容的開發問題，加速了世界網絡移動應用的開發。當所有設備都遵循 HTML語言法則下，理論上在任意設備上展現網頁都將一致。而正式這樣一個關于網頁語言代碼的廣告被國內廣告界稱為H5廣告，2014年在微信社交平臺上開始傳播，隨即引起指數級的傳播效應，掀起行業對H5廣告的革命。

CreateJs、ThresJs、video內聯播放等為H5廣告技術制作主流的代碼工具，程序員通過ThresJs技術制作網頁所需插件，并對瀏覽器中增加內聯屬性，例如使視頻在頁面內聯播放完成指定區塊視頻播放設計而不全屏顯示。通過createJs則可以開發輕量級網頁游戲的互動效果，配合Adoube animate 可直接可視化編輯動畫，由設計師完成動畫，然后程序員加入代碼開發。設計與制作集動畫、視頻、傳感器等交互的H5廣告要結合程序編寫創新與設計的創意，而于設計師或者制作團隊來說每一支H5廣告則都是一次藝術審美與技術創意的試驗。

2.2 虛擬美學在H5廣告中的應用

2.2.1 空間美

隨著應用全景VR、3D、重力感應、雙屏互動等技術效果的虛擬空間或者模擬物理空間環境的H5廣告不斷創新，人們追求技術實現更豐富的虛擬空間的表達。如果說2014年以前傳統網頁廣告風行扁平化化，2015年便是H5廣告網頁空間化的伊始。

例如2016淘寶雙十一全球狂歡節推出的“天貓：穿越宇宙的邀請”整體在制作技術上完全顛覆了傳統觀念，通過手機重力感應應用實現“一鏡到底”的長鏡頭，產生空間推一效果，使用戶一不小心就躍進了萬花筒般的空間漩渦，產生了親臨其境的場景感。通過對空間景深拉長改變視覺對空間的感知，增強了縱深空間上的體驗。（圖1）隨后以2017淘寶造物節為代表的H5廣告開始對3D全景空間的展現開辟新玩法，實現3D場景與全景視頻的交互效果，通過對一個條主街和4個360概念空間的搭建將主題“奇市江湖”演繹的淋漓盡致。（圖2）H5由“風箏”通過重力感應引導整體瀏覽，“風箏”所處的環境是一個利用threejs搭建的3D場景，城市空間構成上以鏡像的方式存在，而在風箏被動前進的路徑上，主街空間內設置了4個類似于“蟲洞”的穿越門；操控風箏進入穿越門，頁面將跳轉到一段全景視頻內。而全景視頻與普通視頻最大的區別是可以進行重力操控，其中4段全景互動視頻對應造物節的4個街市，內容以不同的風格來展現意象化的空間場景，使消費者感受到“穿越”空間體驗主題場景內容。（圖2）不僅如此，通過代碼、3D場景等技術H5廣告可以實現虛擬空間更多創意的火花。

圖1 “天貓：穿越宇宙的邀請”H5框架（來源www.digitaling.com）

圖2 淘寶造物節“奇市江湖”H5（來源www.lbzuo.com）

2.2.2 交互美

相對傳統廣告，H5廣告新穎的形式內容和快速傳播的渠道引爆了大眾的感官。更為新鮮、富有視覺沖擊力的互動形式給用戶帶來了全新的交互體驗。從人際互動到人機互動，從內容到技術都對網頁交互提出全新的審美需求。通過移動終端的不同人際關系中的分享與互動，如一對一的互動和群組互動。而人機互動下基于 Html5 websocket 機制的交互形式，例如雙屏互動（指兩個或多個屏幕間的實時通訊產生互動效果。）則實現了手機、電腦、平板等不同屏幕之間真正的實時互動，由此衍生的 H5廣告交互也更加富有交互美。

例如2016年，賓利：巔峰之作，賓利添越SUV主題的 H5廣告便采用了雙屏互動。（圖3）其雙屏互動的手機賽車游戲，啟動頁面后，就會彈出互動二維碼，另一臺手機掃描后，就能開始雙車互飆，通過重力感應不停點擊屏幕能加快行駛速度體驗模擬真實的駕駛感，通過網絡與場景的協作也為互動增添了創意。例如 2015年比亞迪在上海車展使用“H5+”多屏技術相結合的游戲打造了一場互動體驗（圖4）。觀眾可以一起進行 PK，并將整個PK過程在大屏幕上直播，增加整個過程互動性與社交性，為用戶帶來全新的觀賞與互動體驗。在互動內容創意上具有代表性的H5廣告。而2015年“吳亦凡即將入伍”的H5廣告中利用全屏播放，模擬接聽吳亦凡電話頁面和吳亦凡跳出新聞的頁面，是由兩段MP4視頻切換完成，H5將視頻插入與圖文配合的頁面到達以假亂真的視覺效果。

圖3 宱利“巔峰之作，宱利添越SUV”H5（來源www.digitaling.com）

圖4 比亞迪互動現場（來源www.meihua.info）

3 結束語

隨著視覺需求的日益提高，廣告注重受眾體驗與審美需求更成為了新的價值趨向之一。微信、新浪等移動社交應用的快速發展，各種創意新穎、制作精良的移動端H5廣告不時在社交網絡平臺引發群體性的分享行為而吸引了公眾視線，成為了行業焦點?，F代網頁設計受西方科學技術沖擊和設計思想的影響,網頁同質化嚴重,網頁風格千篇一律。如何在數字媒體時代把握虛擬設計真正的目的，學習和發展當代網頁設計的文化精神之美，創作出具有民族特性與符合當代風潮的網頁設計。在虛擬美學的摸索中既把握好審美風格，同時又要保證文化內在創意，這是網頁設計工作者面臨的嚴峻挑戰。就吸取傳統美學的有益方面，豐富虛擬美學的表達方法，仍需要當代網頁設計工作者的不斷探索和努力。

[1]王小明. 第十四屆國際美學大會綜述[J]. 文史哲,1999(2)： 122.

[2]李青. 互動廣告新形式——H5廣告研究[J]. 新聞研究導刊,2016,286.

[3]趙勇. 從審美文化到消費文化——大眾媒介在文化轉型中的作用[J].新聞研究導刊中國中外文藝理論學會年刊,2008.

[4]趙懷棟. 數字技術推動下的后媒體時代探析[J]. 新聞知識,2014,(03)： 28-29+21.

[5]郭優. 新媒體藝術審美研究[D]. 吉首大學,2012.

[6]孫為. 交互式媒體敘事研究[D]. 南京藝術學院,2011.

[7]張劍. 數字媒體創意的審美特征[J]. 西北師大學報(社會科學版),2014,51(02)： 52-56.

[8]雷切爾.格林/(英). 互聯網藝術[M]. 上海： 上海人民美術出版社,2016.

Virtual Art in Digital Media Era from Web Design

ZHENG Shuyi*
(Institute of Art & Design,Zhejiang Sci-Tech University,Hangzhou,310018,China)

with the continuous upgrading of the Internet industry,HTML and related standards continue to improve,the audience demand era the era of consumers has come,advertising has become a new focus on the experience of the audience more value one. In China,a series of rapid outbreak of creative web pages for mobile interactive creative new blood,and then for the display power of webpage art and design creativity to open up new fertile soil,quickly formed the traditional hypertext webpage iteration and further optimize the interactive experience This article from the H5 advertising as the starting point,H5 advertising creative application as the breakthrough point,the current H5 advertising market presents the technical beauty of the analysis,to explore the digital era of web virtual aesthetics challenges.

virtual aesthetics; H5 advertisement；Digital Media Arts

TP393

A

1672-9129(2017)06-0161-03

10.19551/j.cnki.issn1672-9129.2017.06.057

鄭舒逸. 從H5廣告設計看數字媒體時代虛擬美學[J]. 數碼設計,2017,6(6)： 161-162.

Cite：ZHENG Shuyi. Virtual Art in Digital Media Era from Web Design[J]. Peak Data Science,2017,6(6)： 161-162.

2017-02-10；

2017-03-09。

鄭舒逸（1991—），女，漢族，浙江溫州人，在讀研究生，浙江理工大學，研究方向：數字媒體藝術。

E-mail：zhengshuyi945@126.com