《别人家的H5,得了戛纳数字广告全场大奖.docx》由会员分享，可在线阅读，更多相关《别人家的H5,得了戛纳数字广告全场大奖.docx（7页珍藏版）》请在三一办公上搜索。
1、别人家的H5,得了戛纳数字广告全场大奖别人家的H5，得了戛纳数字广告全场大奖 “如果，不只是听音乐” “你还能和它玩？” 戛纳国际创意节，被誉为广告界的奥斯卡，每年都会冒出很多各种各样能让人拍大腿叫好的营销奇招！ 今年它照样没让世界人民失望，当我们还在安安静静地听MP3、看MV的时候，一个与音乐互动的网络体验项目Because Recollection，一举夺下史上首个数字工艺类全场大奖。 获奖页面的部分交互界面 制作团队的脑洞不要开得太大，把20首歌玩出了20种花样，不带重样的。这是一个基于HTML5的数字项目，创意一流、交互设计一流，用户体验更是一流，可谓互联网体验经济的里程碑。 1、神一
2、样的交互体验！ 网站为纪念BM建立十周年 Because Recollection是业界响当当的法国广告公司84.Paris为音乐厂牌Because Music设计的音乐互动网站，作为后者成立十周年的优秀作品回顾。 究竟是什么样的作品，广受业界好评，还能让谷歌的Chrome Music Lab屈居戛纳数字工艺类金奖？下面这个视频是我一首首歌体验后，剪辑出来的精华版，你可以看到它的视觉效果非常惊艳。 视频谁击败谷歌，获得首个戛纳数字广告全场大奖？ 那么效果怎么样？网站发布后一周内，BM涨了30%的粉，来自129个国家的用户平均每人玩了5分钟试想人家开了十年的网站，突然一夜间名声大噪的狂喜。 然后
3、它就开挂了，不仅获得各大媒体的报道，更斩获各种国际大奖，金铅笔、FWA、戛纳，也算实至名归。 2、如何做出这么惊艳的创意视觉？ 其实每首歌互动体验的步骤都差不多： 长按空格键缓冲-做出指定动作-动态还原专辑封面&播放音乐片段-进入专辑介绍。 虽然内地暂时登不上这个网站，但它特意为每首歌设计出与专辑封面极其吻合的场景，这种超前的视觉创意设计还是让人好奇。于是很快就有人在知乎询问它的技术实现，问题如下： 知乎上有人询问如何实现 有一个回答，指出它应用的都是视频素材还好回答的人匿名，否则我可能要直接找他理论了。以第一首歌By Your Side为例，为了实现点击后进行多次换装的效果，用到的素材是这样
4、的： 换装场景的部分原始素材 这能是视频？ 当然，有的页面的确用到了视频，但这只是这些交互场景的一小部分。当场景设计的变换越讲究精细化，就越需要素材能分离出来变化、能独立进行交互，所以并不能完全依赖视频。 在H5页面的开发上，84.Paris采用WebGL进行渲染，一种比较复杂的3D绘图标准。具体实现上可能和下面介绍的方法不大一样，但视觉效果差不了多少，所以应该怎么利用iH5进行制作？ 3、怎么触发这些场景的运行？ 不同类型的触发提示 首先，触发交互的方法很简单，这个项目大概主要用6种：点击、按下、离开、键盘按键、滑动、拖拽。 这些触发在iH5里实现大部分非常简单：新建一个透明按钮，在它下面加
5、一个事件就能看到很多种触发条件，点击、手指按下或离开等等；键盘按键设置则需要在舞台下添加触发条件，填上是什么按键；而拖拽其实就是把图片的一个属性设为允许拖动。 透明按钮对象下触发事件的示例 还有一些鼠标悬停、上下滚动等触发，和上面也差不了多少。 滑动控制如果涉及动画的播放和倒退，就稍微复杂点，得用滑动时间轴、幻灯片等功能进行调节。 你可能纳闷，为什么这些动作都这么容易？点一点、按一按、滑一滑。因为用户玩的是音乐，而不是音乐游戏。你也可以设计一个围住神经猫，挑战步成功才能听到这些歌，但过于复杂化就弱化了欣赏音乐的感官，也丧失了项目存在的意义让用户享受和音乐融为一体的感觉。 4、如何如法炮制一样的
6、视觉场景？ 歌曲Compltement fou的场景运动 具体到某个场景，原理上并没有那么复杂，只是在设计上有时为了完善某种视觉效果，需要多费点脑细胞、多尝试几次。 页面的分层示意图 这次揭秘的是歌曲Compltement fou中，鼠标滚动向上时那张俏美的人脸会从蓝色花瓣中浮上来、一松开鼠标就下降的场景，准备素材为以上三张图片。实现只需三步： 在iH5新建一个时间轴1，按顶后层顺序把三张图片放里面，为它们分别添加轨迹和关键帧为了让人脸一边逼近一边浮上来，轨迹既要控制运动层往上移动，还要保证三层图片都在放大。 iH5的操作界面 在舞台下添加一个事件，设置滚动向上时，时间轴1播放指定时长，如1S
7、这个时间长度的设置是体验的关键。 添加一个1S的时间轴2，设置结束时，时间轴1播放指定时长，比如-0.5S这个时间长度不得高于正向播放的时长，否则这张人脸一辈子都别想浮上来。 最终做出的滚动特效 最终效果如上，前景层我对得不是很准望见谅。另外，实际播放上还得考虑音频的控制等问题。 还有很多其他场景，比如点击人偶脑袋，对应的部位会崩裂；长按屏幕的时候，音乐会慢慢地响起来；一松开鼠标，花儿不开了、歌声也消失了；一按住J键，就开始播放一段小视频；在拉链上滑动，能看到衣服里的皮肤；拖拽小树，它会往上生长 用图片序列控制拉链变换的部分素材 基础的设计万变不离其宗，很多都可以用时间轴实现，但在特效的制作上
8、，可能会涉及画布的遮罩、幻灯片/图片序列等功能。 5、怎么感觉起来这么真实？ 上一部分可以看到，在H5页面制作工具的帮助下，这些交互场景的创建并没有那么高深。但人家把东西做得这么好看，其实在设计上下了很多功夫，主要是视觉和听觉上的： 让界面元素贴合物体规律 失重的汽车 其中一张专辑封面是翻转的车辆在行驶，当你用外力改变它运行轨迹时，它会模拟出垂直向上的重力让它回到轨道。 道理很浅显，如果你想让场景看起来更逼真，必须多制造类似视差滚动、模拟重力、模拟惯性、碎片化运动、重力感应这种符合物体规律的反馈。 善于利用贴合主题的音效 Because Recollection加载的部分音频 H5广告的初级或
9、中级学者，一般就是一首BGM走天下，但那些具有国际设计视野、对作品要求比较高的设计师，一个页面都能设计出很多音效。 比如我认识的一个设计师，他把很多好莱坞大片的电影海报下载下来，居然就能在H5中设计出一张张动态海报，效果如下 H5Hey，我们在未来等你 每张海报都会专门设计很多符合场景动效的音效，比如枪声、爆炸声等等，通过控制不同音效出现的时间、整体长度，产生错落有致的效果。 6、这种用户体验，完美！ 实际上，戛纳的数字工艺类是今年刚刚设立的，它的评判标准并非纯粹的创意，而会更重视作品整体的设计感和用户体验。 屈居金奖的谷歌音乐实验室 比如获得数字类金奖的有5个，其中谷歌的Chrome Mus
10、ic Lab，通过视觉和听觉结合学习音律讲究的也是一种体验。 的确，除了惊艳的视觉效果外，Because Recollection的交互细节非常考究，一仔细分析会发现有太多东西可以学了，比如流畅度的保证、运行环境的自适应等。 启动页面之前的缓冲等待 首先，内容能不能顺利播放可决定着用户在互动过程中的心情，要不然看一会儿咯噔一下谁都会“躁”起来吧？为了保证内容的混然天成不卡顿，主要有以下五大原则： 预加载：比如这个项目里长按空格键进入页面，一方面是利用等待来加强期待值，另一方面就是趁机加载资源； 图片：能复用的就复用，比如不动的背景层可以独立出来； 视频：能短即短、能分段就分段； 音乐：经常重复
11、播放的增色音效，可以独立成片段； 压缩：所有素材准备得当后，一定得在大小上做优化。 除此之外，网站在自适应上也做得极为出色，主要体现在以下两点： PC版用长按空格键控制跳转移动版靠按住“next”来跳转 设备自适应：PC设备、移动端设备的界面有所区别，比如电脑上是按空格键缓冲、手机上就是手指长按；电脑上是鼠标悬停就能打开“帮助”界面，手机上需要点击。 行为的感应：会监测用户的行为，比如当用户跳转到其他窗口时，音乐会自动停止播放。 戛纳国际创意节，每年都会带给人们异常无与伦比的创意冲击和视觉盛宴。为什么它会新增数字工艺类奖？ 本来它已经有计算机网络类和移动类，但现在横跨多种终端的HTML5应用越来越广泛，但它所属的界限又很模糊。今年新设的数字类别，其实有很多获奖的都是基于HTML5的网站，这也可以看出H5在全球范围内的发展已经越来越难以被忽视了。 链接传送门 Because Recollection http:/www.because- Hey，我们在未来等你 Chrome Music Lab
