这个网站凭什么击败谷歌,夺得戛纳数字类设计大奖?

举报 2016-08-04

Because Recollection

来源:站酷
本文作者:Seedheart

“假如你除了能听听音乐——”
“还能和它玩玩?”

戛纳国际创意节,可谓是广告界的奥斯卡,每年评奖就相当于把全球最具创造力的市场营销方法广而告之——借不借鉴就是我们自己的事了。

今年它照样没让世人失望,当大家还在静静地听MP3、看MV的时候,一个在线交互体验网站《Because Recollection》一举击败获得金奖的谷歌实验室等项目,夺下史上首个数字工艺类全场大奖(因为这个奖就是2016年才设立的)。

Because Recollection
《Because Recollection》的交互界面

制作团队的脑洞不要开得太大,你看看上面傲娇开唱的机械玩偶、非常有节操的裸体雕像,都是在一块块专辑封面的基础上设计出的创意。这是一个基于HTML5建立的数字网站,创意、交互一流,用户体验更是没得说,可谓用网络互动体验打开市场的代表作。

网站体验:http://www.because-recollection.com

1、神一样的交互体验!

Because Music
网站为纪念Because Music建立十周年

这是我一首首歌体验后,剪辑出来的精华版视频,你可以看到它的视觉效果实在太惊艳了!

《Because Recollection》是业界响当当的法国广告公司84.Paris为音乐厂牌Because Music(以下称BM)制作的互动网站,作为后者成立十周年的优秀作品回顾。究竟是什么样的作品,广受业界好评,还能让谷歌的Chrome Music Lab屈居戛纳数字工艺类金奖?

网站发布后一周内,Because Music涨了30%的粉!来自129个国家的用户,平均每人玩了5分钟——我则在网站上泡了大概有10小时。试想人家开了十年的网站,突然一夜间名声大噪的狂喜。

然后它就开挂了,不仅获得各大媒体的报道,更斩获各种国际大奖,金铅笔、FWA、戛纳,也算实至名归。

2、如何做出这么惊艳的创意视觉?

Because Recollection

其实每首歌互动体验的步骤都差不多:

(1)长按空格键缓冲-->
(2)按照提示进行互动-->
(3)播放音乐场景-->
(4)进入专辑介绍。

Because Recollection
互动场景与原专辑封面的对比

它特意为每首歌设计出与专辑封面极其吻合的场景,这种超前的视觉创意让人好奇,所以很快就有人在知乎询问它的技术实现,问题如下:

知乎
知乎上有人询问如何实现

有一个回答,指出它应用的都是视频——还好回答的人匿名,否则我要直接找他理论!以第一首歌《By Your Side》为例,为了实现点击后进行动态换装的效果,加载出来的素材是这样的:

Because Recollection
换装场景的部分原始素材

这能是视频?

当然,有的网站页面的确用到了视频,但这只是这些交互场景的一小部分。当场景的变换越讲究精细化,就越需要素材能分离出来变化、能独立进行交互。视频和HTML5中画布(Canvas)的概念很像,相当于按帧加载,没办法和单个对象进行交互,而且会损耗较多空间。

那么应该怎么制作这样的H5?在H5页面的开发上,84.Paris采用WebGL进行渲染,一种3D绘图标准,不好掌握。这么复杂的代码我也不懂,所以具体实现上,我用的方法和他们不一样,但视觉效果差不了多少。

3、怎么让这些场景动起来?

Because Recollection
图文并茂的操作提示

首先,触发交互的方法很简单,这个项目大概主要用6种:点击、按下、离开、键盘按键、滑动、拖拽。

这些触发在iH5里实现大部分非常简单:新建一个透明按钮,在它下面加一个事件就会看到很多种触发条件,点击、鼠标移上或移出、手指按下或离开等等。键盘按键的设计、鼠标滚动等的控制,就需要在舞台下添加事件,填上按什么键等参数。那拖拽呢?其实就是把图片的一个属性设为允许拖动。

Because Recollection
透明按钮对象下触发条件的示例

你可能纳闷,为什么这些动作都这么容易?点一点、按一按、滑一滑?因为用户玩的是音乐,而不是游戏啊。你也可以设计一个围住神经猫,规定挑战×步成功才能听到这些歌,但过于复杂化也会弱化欣赏歌曲的过程,也丧失了网站存在的意义——让用户享受和音乐融为一体的感觉。

4、教你如法炮制一样的视觉场景!

Complètement fou
歌曲《Complètement fou》的场景运动

这次揭秘的是《Complètement fou》中,鼠标滚动向上时那张俏美的人脸会从蓝色花瓣中浮上来、一松开鼠标就下降的场景,准备素材是下面三张图片。只需三步:

Complètement fou
三张需要准备好的素材

(1)在iH5新建一个时间轴1,按顶后层顺序把三张图片放里面,为它们分别添加轨迹和关键帧——为了让人脸一边逼近一边浮上来,轨迹既要控制运动层往上移动,还要保证三层图片都在放大。

Complètement fou
iH5的操作界面

(2)在舞台下添加一个事件,设置滚动向上时,时间轴1播放指定时长,如1S——这个时间长度的设置是体验的关键,越短意味着你需要越多的时间才能让人脸向上浮出。

(3)添加一个1S的时间轴2,设置结束时,时间轴1播放指定时长,比如-0.5S(负值代表反向播放)——这个时间长度不得高于正向播放的时长,否则这张人脸一辈子都别想浮上来——因为让它下滑的速率更高啊!

Complètement fou
最后做出的滚动特效

设计的效果效果如上——前景层我对得不是很准,看着有点抽离望见谅。另外,实际播放上还得考虑音频的控制等问题。

Complètement fou
用图片序列控制拉链变换

基础的制作万变不离其宗,很多都可以用时间轴实现,但在特效设计上,可能会涉及画布的遮罩、幻灯片/图片序列等功能。比如有一个是滑动拉开拉链的情景,实际上就是拉链逐渐拉开的图片的轮播罢了——多学点套路!

5、怎么感觉起来这么真实?

上一部分可以看到,在H5页面制作工具的帮助下,这些交互场景的创建并没有那么高深。但人家把东西做得这么好看、吸引这么多用户、如此迅速地打开市场,其实在设计上下了太多功夫,主要是视觉和听觉上的:

(1)让界面元素贴合物体规律

失重的汽车
失重的汽车

其中一张专辑封面是翻转的车辆在行驶,当你用外力改变它运行轨迹时,它会模拟出垂直向上的重力让它回到轨道。漂亮!

道理很浅显,如果你想让场景看起来更逼真,必须多制造类似视差滚动、模拟重力、模拟惯性、碎片化运动、重力感应这种符合物体规律的反馈。

(2)善于利用贴合主题的音效

16.jpg
每个情景都需要很多音频的配合

这个网站,其实每个独立的场景背后都有很多音频在支持,上面这张图右侧密密麻麻media格式的文件都是音频!H5广告的初级或中级学者,一般就是一首BGM走天下,但那些具有国际设计视野、对作品要求比较高的设计师,一个页面都能设计出很多音效。

比如我认识的一个设计师,他把很多好莱坞大片的电影海报下载下来,居然就能在H5中设计出一张张动态海报,效果如下——

Hey,我们在未来等你
H5《Hey,我们在未来等你》

每张海报都会专门设计很多符合场景动效的音效,比如枪声、爆炸声等等,通过控制不同音效出现的时间、整体长度,产生错落有致的效果。

6、这种用户体验,完美!

实际上,戛纳的数字工艺类是今年刚刚设立的,它的评判标准并非纯粹的创意,而会更重视作品整体的设计感和用户体验——这也是设计师必须一直谨记于心的问题,怎么才能在不牺牲美感的前提下提升体验?

Chrome Music Lab
屈居金奖的谷歌音乐实验室

比如获得数字类金奖的有5个,其中谷歌的Chrome Music Lab(Chrome音乐实验室),能通过视觉和听觉结合来学习音律——也很好玩,建议爱好音乐的去体验一下。

的确,除了惊艳的视觉效果外,《Because Recollection》的交互细节非常考究,一仔细分析会发现有太多东西可以学了。

Because Recollection
启动页面前必须等待10秒左右

首先,内容能不能顺利播放可决定着用户在互动过程中的心情,要不然看一会儿咯噔一下谁都会“躁”起来吧?为了保证内容的混然天成不卡顿,在设计上主要有以下五大原则:

(1)预加载:比如这个项目里长按空格键进入页面,一方面是利用等待来加强期待值,另一方面就是趁机加载资源来提高后面的流畅度;
(2)图片:能复用的就复用,比如不动的背景层可以独立出来,会变换的前景使用PNG类型的图片;
(3)视频:能短即短、能分段就分段;
(4)音乐:经常重复播放、增色类型的辅助音效,可以独立成片段而不是都加在一首歌里;
(5)压缩:所有素材准备得当后,一定得压缩它们的大小。

除此之外,网站在自适应上也做得极为出色,主要体现在以下两点:

Because Recollection
PC版用长按空格键控制跳转

Because Recollection
移动版靠按住“next”来跳转

(1)设备自适应:PC设备、移动端设备的界面有所区别,比如电脑上是按空格键缓冲、手机上就是手指长按;电脑上是鼠标悬停就能打开“帮助”界面,手机上需要点击。
(2)行为的感应:会监测用户的行为,比如当用户跳转到其他窗口时,音乐会自动停止播放。

戛纳国际创意节,每年都会带给人们异常无与伦比的创意冲击和视觉盛宴。为什么它会新增数字工艺类奖?

戛纳国际创意节

本来它已经有计算机网络类(Cyber Lions)和移动类(Mobile Lions)两座大奖,但能横跨多种终端的HTML5却很难定义为其中任意一类。

比如国内时兴的H5,算是移动互联网的产物吧?推动了各种微信病毒营销的产生。但这次获奖的其实也是H5,PC端能看、移动端能玩、智能电视也耍得起来,又应该怎么定义?

今年新设数字工艺类大奖,有很多获奖的都是基于HTML5的网站,这也可以看出H5在全球范围内的发展已经越来越受到重视了,因此无论是市场营销人员还是设计师,都不可轻视这一大力量。

拥抱H5,你准备好了吗?

本文系作者授权数英发表,内容为作者独立观点,不代表数英立场。
转载请在文章开头和结尾显眼处标注:作者、出处和链接。不按规范转载侵权必究。
本文系作者授权数英发表,内容为作者独立观点,不代表数英立场。
未经授权严禁转载,授权事宜请联系作者本人,侵权必究。
本内容为作者独立观点,不代表数英立场。
本文禁止转载,侵权必究。
本文系数英原创,未经允许不得转载。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权,侵权必究。

    参与评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    DIGITALING
    登录后参与评论

    参与评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    800

    推荐评论

    全部评论(7条)