从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广告不时在社交网络平台引发群体性的分享行为而吸引了公众视线，成为了行业焦点。现代网页设计受西方科学技术冲击和设计思想的影响,网页同质化严重,网页风格千篇一律。如何在数字媒体时代把握虚拟设计真正的目的，学习和发展当代网页设计的文化精神之美，创作出具有民族特性与符合当代风潮的网页设计。在虚拟美学的摸索中既把握好审美风格，同时又要保证文化内在创意，这是网页设计工作者面临的严峻挑战。就吸取传统美学的有益方面，丰富虚拟美学的表达方法，仍需要当代网页设计工作者的不断探索和努力。

[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