来源：站酷
本文作者：Seedheart
“假如你除了能听听音乐——”
“还能和它玩玩？”
戛纳国际创意节，可谓是广告界的奥斯卡，每年评奖就相当于把全球最具创造力的市场营销方法广而告之——借不借鉴就是我们自己的事了。
今年它照样没让世人失望，当大家还在静静地听MP3、看MV的时候，一个在线交互体验网站《Because Recollection》一举击败获得金奖的谷歌实验室等项目，夺下史上首个数字工艺类全场大奖（因为这个奖就是2016年才设立的）。
《Because Recollection》的交互界面
制作团队的脑洞不要开得太大，你看看上面傲娇开唱的机械玩偶、非常有节操的裸体雕像，都是在一块块专辑封面的基础上设计出的创意。这是一个基于HTML5建立的数字网站，创意、交互一流，用户体验更是没得说，可谓用网络互动体验打开市场的代表作。
网站体验：http://www.because-recollection.com
1、神一样的交互体验！
网站为纪念Because Music建立十周年
这是我一首首歌体验后，剪辑出来的精华版视频，你可以看到它的视觉效果实在太惊艳了！
《Because Recollection》是业界响当当的法国广告公司84.Paris为音乐厂牌Because Music（以下称BM）制作的互动网站，作为后者成立十周年的优秀作品回顾。究竟是什么样的作品，广受业界好评，还能让谷歌的Chrome Music Lab屈居戛纳数字工艺类金奖？
网站发布后一周内，Because Music涨了30%的粉！来自129个国家的用户，平均每人玩了5分钟——我则在网站上泡了大概有10小时。试想人家开了十年的网站，突然一夜间名声大噪的狂喜。
然后它就开挂了，不仅获得各大媒体的报道，更斩获各种国际大奖，金铅笔、FWA、戛纳，也算实至名归。
2、如何做出这么惊艳的创意视觉？
其实每首歌互动体验的步骤都差不多：
（1）长按空格键缓冲-->
（2）按照提示进行互动-->
（3）播放音乐场景-->
（4）进入专辑介绍。
互动场景与原专辑封面的对比
它特意为每首歌设计出与专辑封面极其吻合的场景，这种超前的视觉创意让人好奇，所以很快就有人在知乎询问它的技术实现，问题如下：
知乎上有人询问如何实现
有一个回答，指出它应用的都是视频——还好回答的人匿名，否则我要直接找他理论！以第一首歌《By Your Side》为例，为了实现点击后进行动态换装的效果，加载出来的素材是这样的：
换装场景的部分原始素材
这能是视频？
当然，有的网站页面的确用到了视频，但这只是这些交互场景的一小部分。当场景的变换越讲究精细化，就越需要素材能分离出来变化、能独立进行交互。视频和HTML5中画布（Canvas）的概念很像，相当于按帧加载，没办法和单个对象进行交互，而且会损耗较多空间。
那么应该怎么制作这样的H5？在H5页面的开发上，84.Paris采用WebGL进行渲染，一种3D绘图标准，不好掌握。这么复杂的代码我也不懂，所以具体实现上，我用的方法和他们不一样，但视觉效果差不了多少。
3、怎么让这些场景动起来？
图文并茂的操作提示
首先，触发交互的方法很简单，这个项目大概主要用6种：点击、按下、离开、键盘按键、滑动、拖拽。
这些触发在iH5里实现大部分非常简单：新建一个透明按钮，在它下面加一个事件就会看到很多种触发条件，点击、鼠标移上或移出、手指按下或离开等等。键盘按键的设计、鼠标滚动等的控制，就需要在舞台下添加事件，填上按什么键等参数。那拖拽呢？其实就是把图片的一个属性设为允许拖动。
透明按钮对象下触发条件的示例
你可能纳闷，为什么这些动作都这么容易？点一点、按一按、滑一滑？因为用户玩的是音乐，而不是游戏啊。你也可以设计一个围住神经猫，规定挑战×步成功才能听到这些歌，但过于复杂化也会弱化欣赏歌曲的过程，也丧失了网站存在的意义——让用户享受和音乐融为一体的感觉。
4、教你如法炮制一样的视觉场景！
歌曲《Complètement fou》的场景运动
这次揭秘的是《Complètement fou》中，鼠标滚动向上时那张俏美的人脸会从蓝色花瓣中浮上来、一松开鼠标就下降的场景，准备素材是下面三张图片。只需三步：
三张需要准备好的素材
（1）在iH5新建一个时间轴1，按顶后层顺序把三张图片放里面，为它们分别添加轨迹和关键帧——为了让人脸一边逼近一边浮上来，轨迹既要控制运动层往上移动，还要保证三层图片都在放大。
iH5的操作界面
（2）在舞台下添加一个事件，设置滚动向上时，时间轴1播放指定时长，如1S——这个时间长度的设置是体验的关键，越短意味着你需要越多的时间才能让人脸向上浮出。
（3）添加一个1S的时间轴2，设置结束时，时间轴1播放指定时长，比如-0.5S（负值代表反向播放）——这个时间长度不得高于正向播放的时长，否则这张人脸一辈子都别想浮上来——因为让它下滑的速率更高啊！
最后做出的滚动特效
设计的效果效果如上——前景层我对得不是很准，看着有点抽离望见谅。另外，实际播放上还得考虑音频的控制等问题。
用图片序列控制拉链变换
基础的制作万变不离其宗，很多都可以用时间轴实现，但在特效设计上，可能会涉及画布的遮罩、幻灯片/图片序列等功能。比如有一个是滑动拉开拉链的情景，实际上就是拉链逐渐拉开的图片的轮播罢了——多学点套路！
5、怎么感觉起来这么真实？
上一部分可以看到，在H5页面制作工具的帮助下，这些交互场景的创建并没有那么高深。但人家把东西做得这么好看、吸引这么多用户、如此迅速地打开市场，其实在设计上下了太多功夫，主要是视觉和听觉上的：
（1）让界面元素贴合物体规律
失重的汽车
其中一张专辑封面是翻转的车辆在行驶，当你用外力改变它运行轨迹时，它会模拟出垂直向上的重力让它回到轨道。漂亮！
道理很浅显，如果你想让场景看起来更逼真，必须多制造类似视差滚动、模拟重力、模拟惯性、碎片化运动、重力感应这种符合物体规律的反馈。
（2）善于利用贴合主题的音效
每个情景都需要很多音频的配合
这个网站，其实每个独立的场景背后都有很多音频在支持，上面这张图右侧密密麻麻media格式的文件都是音频！H5广告的初级或中级学者，一般就是一首BGM走天下，但那些具有国际设计视野、对作品要求比较高的设计师，一个页面都能设计出很多音效。
比如我认识的一个设计师，他把很多好莱坞大片的电影海报下载下来，居然就能在H5中设计出一张张动态海报，效果如下——
H5《Hey，我们在未来等你》
每张海报都会专门设计很多符合场景动效的音效，比如枪声、爆炸声等等，通过控制不同音效出现的时间、整体长度，产生错落有致的效果。
6、这种用户体验，完美！
实际上，戛纳的数字工艺类是今年刚刚设立的，它的评判标准并非纯粹的创意，而会更重视作品整体的设计感和用户体验——这也是设计师必须一直谨记于心的问题，怎么才能在不牺牲美感的前提下提升体验？
屈居金奖的谷歌音乐实验室
比如获得数字类金奖的有5个，其中谷歌的Chrome Music Lab（Chrome音乐实验室），能通过视觉和听觉结合来学习音律——也很好玩，建议爱好音乐的去体验一下。
的确，除了惊艳的视觉效果外，《Because Recollection》的交互细节非常考究，一仔细分析会发现有太多东西可以学了。
启动页面前必须等待10秒左右
首先，内容能不能顺利播放可决定着用户在互动过程中的心情，要不然看一会儿咯噔一下谁都会“躁”起来吧？为了保证内容的混然天成不卡顿，在设计上主要有以下五大原则：
（1）预加载：比如这个项目里长按空格键进入页面，一方面是利用等待来加强期待值，另一方面就是趁机加载资源来提高后面的流畅度；
（2）图片：能复用的就复用，比如不动的背景层可以独立出来，会变换的前景使用PNG类型的图片；
（3）视频：能短即短、能分段就分段；
（4）音乐：经常重复播放、增色类型的辅助音效，可以独立成片段而不是都加在一首歌里；
（5）压缩：所有素材准备得当后，一定得压缩它们的大小。
除此之外，网站在自适应上也做得极为出色，主要体现在以下两点：
PC版用长按空格键控制跳转
移动版靠按住“next”来跳转
（1）设备自适应：PC设备、移动端设备的界面有所区别，比如电脑上是按空格键缓冲、手机上就是手指长按；电脑上是鼠标悬停就能打开“帮助”界面，手机上需要点击。
（2）行为的感应：会监测用户的行为，比如当用户跳转到其他窗口时，音乐会自动停止播放。
戛纳国际创意节，每年都会带给人们异常无与伦比的创意冲击和视觉盛宴。为什么它会新增数字工艺类奖？
本来它已经有计算机网络类（Cyber Lions）和移动类（Mobile Lions）两座大奖，但能横跨多种终端的HTML5却很难定义为其中任意一类。
比如国内时兴的H5，算是移动互联网的产物吧？推动了各种微信病毒营销的产生。但这次获奖的其实也是H5，PC端能看、移动端能玩、智能电视也耍得起来，又应该怎么定义？
今年新设数字工艺类大奖，有很多获奖的都是基于HTML5的网站，这也可以看出H5在全球范围内的发展已经越来越受到重视了，因此无论是市场营销人员还是设计师，都不可轻视这一大力量。
拥抱H5，你准备好了吗？
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
全部评论（7条）