鄭舒逸*

（浙江理工大學(xué)，藝術(shù)設(shè)計學(xué)院，浙江杭州，310018）

從H5廣告設(shè)計看數(shù)字媒體時代虛擬美學(xué)

鄭舒逸*

（浙江理工大學(xué)，藝術(shù)設(shè)計學(xué)院，浙江杭州，310018）

隨著互聯(lián)網(wǎng)產(chǎn)業(yè)的不斷升級，HTML及其相關(guān)標(biāo)準(zhǔn)不斷完善，消費者的時代已然來臨，廣告注重體驗更成為了新的價值趨向之一。在國內(nèi)一系列快速爆發(fā)的創(chuàng)意網(wǎng)頁為現(xiàn)下的移動交互創(chuàng)意增添了新的血液，進(jìn)而為網(wǎng)頁藝術(shù)的展現(xiàn)力與設(shè)計創(chuàng)意開辟新的沃土，快速形成了對傳統(tǒng)超文本網(wǎng)頁的迭代并進(jìn)一步優(yōu)化交互體驗。本文以H5廣告創(chuàng)意應(yīng)用為切入點，對當(dāng)前H5廣告市場所呈現(xiàn)的技術(shù)美進(jìn)行分析，探討數(shù)字時代下網(wǎng)頁虛擬美學(xué)的挑戰(zhàn)。

虛擬美學(xué)；H5廣告；數(shù)字媒體藝術(shù)

引言

在移動互聯(lián)網(wǎng)普及與創(chuàng)意經(jīng)濟(jì)的迅猛發(fā)展下，H5廣告爆發(fā)的條件成熟，通過對搜索引擎、網(wǎng)站、微媒體、互動平臺給予消費者導(dǎo)向的信息供給與行為的轉(zhuǎn)變，H5廣告揭示了現(xiàn)代數(shù)字媒體廣告?zhèn)€性化、互動性、細(xì)分化與受眾溝通的品牌傳播行為新特征。H5廣告作為新興的創(chuàng)意廣告空間聚集和發(fā)展的載體、發(fā)布的平臺，它的形成、發(fā)展演化為未來移動互聯(lián)網(wǎng)廣告的發(fā)展方向展現(xiàn)了新圖景。

1 虛擬美學(xué)

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

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

2 虛擬美學(xué)在H5廣告中的應(yīng)用

2.1 H5廣告

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

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

2.2 虛擬美學(xué)在H5廣告中的應(yīng)用

2.2.1 空間美

隨著應(yīng)用全景VR、3D、重力感應(yīng)、雙屏互動等技術(shù)效果的虛擬空間或者模擬物理空間環(huán)境的H5廣告不斷創(chuàng)新，人們追求技術(shù)實現(xiàn)更豐富的虛擬空間的表達(dá)。如果說2014年以前傳統(tǒng)網(wǎng)頁廣告風(fēng)行扁平化化，2015年便是H5廣告網(wǎng)頁空間化的伊始。

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

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

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

2.2.2 交互美

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

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

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

圖4 比亞迪互動現(xiàn)場（來源www.meihua.info）

3 結(jié)束語

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

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

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

[3]趙勇. 從審美文化到消費文化——大眾媒介在文化轉(zhuǎn)型中的作用[J].新聞研究導(dǎo)刊中國中外文藝?yán)碚搶W(xué)會年刊,2008.

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

[5]郭優(yōu). 新媒體藝術(shù)審美研究[D]. 吉首大學(xué),2012.

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

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

[8]雷切爾.格林/(英). 互聯(lián)網(wǎng)藝術(shù)[M]. 上海： 上海人民美術(shù)出版社,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廣告設(shè)計看數(shù)字媒體時代虛擬美學(xué)[J]. 數(shù)碼設(shè)計,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—），女，漢族，浙江溫州人，在讀研究生，浙江理工大學(xué)，研究方向：數(shù)字媒體藝術(shù)。

E-mail：zhengshuyi945@126.com