“假如你除了能听听音乐——”“还能和它玩玩？”
今年它照样没让世人失望，当大家还在静静地听MP3、看MV的时候，一个在线交互体验网站《BecauseRecollection》一举击败获得金奖的谷歌实验室等项目，夺下史上首个数字工艺类全场大奖（因为这个奖就是2016年才设立的）。
制作团队的脑洞不要开得太大，你看看上面傲娇开唱的机械玩偶、非常有节操的裸体雕像，都是在一块块专辑封面的基础上设计出的创意。这是一个基于HTML5建立的数字网站，创意、交互一流，用户体验更是没得说，可谓用网络互动体验打开市场的代表作。
这是我一首首歌体验后，剪辑出来的精华版视频，你可以看到它的视觉效果实在太惊艳了！
网站发布后一周内，BecauseMusic涨了30%的粉！来自129个国家的用户，平均每人玩了5分钟——我则在网站上泡了大概有10小时。试想人家开了十年的网站，突然一夜间名声大噪的狂喜。
然后它就开挂了，不仅获得各大媒体的报道，更斩获各种国际大奖，金铅笔、FWA、戛纳，也算实至名归。
其实每首歌互动体验的步骤都差不多：
（1）长按空格键缓冲-->（2）按照提示进行互动-->（3）播放音乐场景-->（4）进入专辑介绍。
它特意为每首歌设计出与专辑封面极其吻合的场景，这种超前的视觉创意让人好奇，所以很快就有人在知乎询问它的技术实现，问题如下：
有一个回答，指出它应用的都是视频——还好回答的人匿名，否则我要直接找他理论！以第一首歌《ByYourSide》为例，为了实现点击后进行动态换装的效果，加载出来的素材是这样的：
这能是视频？
当然，有的网站页面的确用到了视频，但这只是这些交互场景的一小部分。当场景的变换越讲究精细化，就越需要素材能分离出来变化、能独立进行交互。视频和HTML5中画布（Canvas）的概念很像，相当于按帧加载，没办法和单个对象进行交互，而且会损耗较多空间。
那么应该怎么制作这样的H5？在H5页面的开发上，84.Paris采用WebGL进行渲染，一种3D绘图标准，不好掌握。这么复杂的代码我也不懂，所以具体实现上，我用的方法和他们不一样，但视觉效果差不了多少。
首先，触发交互的方法很简单，这个项目大概主要用6种：点击、按下、离开、键盘按键、滑动、拖拽。
这些触发在iH5里实现大部分非常简单：新建一个透明按钮，在它下面加一个事件就会看到很多种触发条件，点击、鼠标移上或移出、手指按下或离开等等。键盘按键的设计、鼠标滚动等的控制，就需要在舞台下添加事件，填上按什么键等参数。那拖拽呢？其实就是把图片的一个属性设为允许拖动。
你可能纳闷，为什么这些动作都这么容易？点一点、按一按、滑一滑？因为用户玩的是音乐，而不是游戏啊。你也可以设计一个围住神经猫，规定挑战×步成功才能听到这些歌，但过于复杂化也会弱化欣赏歌曲的过程，也丧失了网站存在的意义——让用户享受和音乐融为一体的感觉。
这次揭秘的是《Complètementfou》中，鼠标滚动向上时那张俏美的人脸会从蓝色花瓣中浮上来、一松开鼠标就下降的场景，准备素材是下面三张图片。只需三步：
设计的效果效果如上——前景层我对得不是很准，看着有点抽离望见谅。另外，实际播放上还得考虑音频的控制等问题。
上一部分可以看到，在H5页面制作工具的帮助下，这些交互场景的创建并没有那么高深。但人家把东西做得这么好看、吸引这么多用户、如此迅速地打开市场，其实在设计上下了太多功夫，主要是视觉和听觉上的：
（1）让界面元素贴合物体规律
其中一张专辑封面是翻转的车辆在行驶，当你用外力改变它运行轨迹时，它会模拟出垂直向上的重力让它回到轨道。漂亮！
道理很浅显，如果你想让场景看起来更逼真，必须多制造类似视差滚动、模拟重力、模拟惯性、碎片化运动、重力感应这种符合物体规律的反馈。
（2）善于利用贴合主题的音效
比如我认识的一个设计师，他把很多好莱坞大片的电影海报下载下来，居然就能在H5中设计出一张张动态海报，效果如下——
实际上，戛纳的数字工艺类是今年刚刚设立的，它的评判标准并非纯粹的创意，而会更重视作品整体的设计感和用户体验——这也是设计师必须一直谨记于心的问题，怎么才能在不牺牲美感的前提下提升体验？
比如获得数字类金奖的有5个，其中谷歌的ChromeMusicLab（Chrome音乐实验室），能通过视觉和听觉结合来学习音律——也很好玩，建议爱好音乐的去体验一下。
的确，除了惊艳的视觉效果外，《BecauseRecollection》的交互细节非常考究，一仔细分析会发现有太多东西可以学了。
首先，内容能不能顺利播放可决定着用户在互动过程中的心情，要不然看一会儿咯噔一下谁都会“躁”起来吧？为了保证内容的混然天成不卡顿，在设计上主要有以下五大原则：
（1）预加载：比如这个项目里长按空格键进入页面，一方面是利用等待来加强期待值，另一方面就是趁机加载资源来提高后面的流畅度；（2）图片：能复用的就复用，比如不动的背景层可以独立出来，会变换的前景使用PNG类型的图片；（3）视频：能短即短、能分段就分段；（4）音乐：经常重复播放、增色类型的辅助音效，可以独立成片段而不是都加在一首歌里；（5）压缩：所有素材准备得当后，一定得压缩它们的大小。
除此之外，网站在自适应上也做得极为出色，主要体现在以下两点：
（1）设备自适应：PC设备、移动端设备的界面有所区别，比如电脑上是按空格键缓冲、手机上就是手指长按；电脑上是鼠标悬停就能打开“帮助”界面，手机上需要点击。（2）行为的感应：会监测用户的行为，比如当用户跳转到其他窗口时，音乐会自动停止播放。
戛纳国际创意节，每年都会带给人们异常无与伦比的创意冲击和视觉盛宴。为什么它会新增数字工艺类奖？
本来它已经有计算机网络类（CyberLions）和移动类（MobileLions）两座大奖，但能横跨多种终端的HTML5却很难定义为其中任意一类。
今年新设数字工艺类大奖，有很多获奖的都是基于HTML5的网站，这也可以看出H5在全球范围内的发展已经越来越受到重视了，因此无论是市场营销人员还是设计师，都不可轻视这一大力量。