来源：iH5（ih5_cn）
作者：种子
前两天微信被天猫年货节H5刷屏了，和稍远的网易娱乐画报H5一样，也是因为交互形式出彩。
镂空书的设计、滑动控制翻页的巧思都可圈可点。一查，制作方居然是以交互创意闻名的VML上海？
是去年做出淘宝造物节全景H5的VML！
是为天猫策划出一镜到底H5的VML！
是一出手就引发行业潮流的VML！
然而，有人开始指责他们抄袭——
起因是天猫H5和16年初TGideas做的火影H5，视觉上很像：
（1）纸雕设计（传闻源自日本）；
（2）走马灯式的3D轮播。
对比如下：
“大赞的火影光影！”
点击查看案例详情：http://www.digitaling.com/projects/16853.html
扫描二维码，立即体验！
（数英网 App 用户需点击放大二维码后，长按识别）
“VML又搞天猫！”
点击查看案例详情：http://www.digitaling.com/projects/20299.html
扫描二维码，立即体验！
（数英网 App 用户需点击放大二维码后，长按识别）
所以，这次干脆为大家请来天猫年货节H5的创意总监鸟崔，聊聊台前幕后的故事，以及这次争议的始末！
当然，鉴于前两天我们快速学习了VML这次的神创意，做出一版走马灯式的年终报告H5，后面还有非常详细的制作教程！
一、天猫年货节H5专访
受访者：鸟崔（天猫年货节H5创意总监）
访谈时间：17年1月12日
Q：天猫年货节这个H5，反响怎么样？
鸟崔：年货节这个呈现形式镂空书有很强的识别性，做出来后周围反响还不错。PV的话，活动还没有结束，我已经进入下一个项目了，这几天还真没有关注。我们的客户团队更清楚。
Q：H5花了多长时间完成？
鸟崔：这个项目brief进的时候时间很紧，不到一个月就需要上线。
在之前应该没有人用纯H5的适量图形可交互的方式去做过，所以提的时候客户满担忧的，中间我们也消耗掉不少时间做出一部分demo放进程序内演示给客户看，这导致了我们最后的动画时间不足，也是我们故事讲得不顺的一个大问题。
但是我已经不能要求制作部门做到更多，那时候程序员连续通宵只睡了2个小时，所以非常无奈。作品出去了，大家看的时候是不会考虑实际的制作时间和难度，这也提醒我，时间估量的时候还是要留够足够的余量。
Q：前面消耗时间的主要原因是？
鸟崔：素材。
最开始我们的场景更多，画了非常多的插图，也安排了很多的动画在里面。最后提交的时候限制K数和故事长度，拿掉了很多，动画内容来不及做，年货节就要开始了，这个时间是死的谁也不能更改，于是……就上线了，哈哈。
Q：你们这次工作是多少人，怎么分工的？
鸟崔：制作团队这里程序比较新，需要研发，所以虽然投入两个人，但是事实上大量的开发只有核心的一位可以搞定。这个最开始考虑过3D建模做视频，后来Shrek说他可以尝试程序实现，结果真就弄出来了。
创意组这里2-4位art和1位copy在进行，最赶的时候有多投人力。但是和程序一样的问题，art投入太多的时候画面风格开始出现比较大的偏差，所以也是围绕核心其他尽量接近的方式进行。
Q：网上有人说天猫年货节抄袭腾讯火影H5，你怎么看？
鸟崔：一些广告门户上发布以后好多人说抄袭，我去看了下（那个作品），形式确实都是一样，而且那个项目是用实物拍摄的方式制作的，也相当好。
但是很多留言都在说抄袭的时候，我觉得有必要澄清一下。毕竟一个形式就是形式，这个做法先有国外一个化妆品类的video做过，也有日本设计师做过实物。我们把这项目实现成一个H5虚拟3D的，却被认为是抄袭同行的作品，这个结论非常的武断。
虽然非常遗憾，但是我觉得有质疑是好事，提醒我们下次走得更远做得更好，也同时去关注同行里更多的好作品，才不会出现这样的事情。
Q：其实在H5广告的创作上，交互、内容上形式的相似是很常见的，你们行内有没有默认的真正谈得上抄袭的界限？
鸟崔：应该没有一个默认的，就像你看到的样子，大家会就一个相似的形式说抄袭。即使故事内容和idea本身，也有容易撞车的时候。但是真撞了就一定是抄袭吗，这个只能说创意走得不够远，需要继续努力，比如我。哈哈。
大家很容易就一个形式而去质疑一件作品抄袭，这很吊诡。
比如网易那个无限放大也被认为抄袭，但是那个形式其实很早前有一个鸡头无限放大到宇宙的图也是一样的形式，Nike和本田当年也有网站做成这样的形式。被说成抄袭我估计创作者是有点委屈的，但是这也提醒我们，不要太倚重形式，或者说形式大过内容。
Q：和很多讲究内容创新的互动团队不一样，VML在交互上做了很多创新，为行业立起很多标杆。你们是以交互创新为创作方向？
鸟崔：制作团队确实实力非常棒。
我们在想案子的时候，也是尽量让技术的探索也往前走。有时候发散idea的时候，我们会和技术团队时不时一起碰撞一下，看有没有更好的方式之类。现在信息这么庞杂的状况下，总是需要抓住一切机会让案子能够让人眼前一亮。
Q：能透露你们下一步的创作目标和计划吗？
鸟崔：短期我们有一个不错的案子在进行，也是属于那种让大家一腔热血投入的案子。就稍长远点，以后可能会结合更多的视频内容和技术手段。
这个应该很容易想到，网站走过这样的一个周期，移动端也一样，技术平台和流量在加大，大家的碎片化时间需要更高效的沟通，形式就会被藏在下一层，故事或者说内容会更高效的到达用户。这个应该不会很久吧，大家现在移动端随便订个1、2G的流量都很常见。
其他的，我觉得平台和讲故事的地方可能会有变化，但是用户用时间消费好内容的需求不会变。
二、好形式，参考参考？
腾讯火影那个H5，是TGideas历时三天实拍完成，光影实效非常精致，但因为是视频，没有什么交互上的设计（这也是TGideas出品的纯动画H5曾被诟病的原因）。
VML上海这个H5，自主设计了很多交互细节，包括左右滑动对轮播往前往后的控制、滑动幅度对轮播速度的影响等，这些也是H5刷屏的重要原因。
两个团队实际上创意的着重点不同。不过对于我们来说，VML又开创了一种新的互动形式啊！
刚好这阵子iH5要筹备年终报告，小伙伴排出60多页AI静态源素材，得做成一版H5。如果为素材一页页分组、导出成分层图、导入iH5、加动效，做起来得哭死……
还好天猫这个刷屏H5出现了！好看、热门、而且实用（自动翻书的设计，能承载很多信息容量），所以几乎在天猫刷屏的第二天我们就趁热打铁做出以下致敬版。
“晒晒iH5年终报告”
扫描二维码，立即体验！
（数英网 App 用户需点击放大二维码后，长按识别）
接下来进入剧透时间！
三、《原来H5这行水这么深！》制作攻略
（一）、弄几张图，透明的！
1、用于展示的镂空图（PNG）
图片要镂空！其实就是去背景，比如上面是我们报告的原图，背景的留白都是透明的，因此才能在H5中看到前后播放的其他图片，制造出立体空间。
2、用于衔接的镂空图（PNG）
衔接的图片，需要在中心处完全镂空，才不会遮挡住前后的展示图层，比如从上面天猫的案例后台可以看到，采取的是中心全透明的形式。
注意：导出为Web所用格式时，需要设为640×1040像素（刚好是手机上微信显示页面的标准尺寸），并建议采用PNG-8格式（更节省体积）、杂边“无”。
（二）来个走马灯特效！
走马灯背后涉及两种旋转，一种是需要控制图片平面上沿页面边缘进行y轴旋转，一种是立体上给人带来沿页面边缘进行y轴旋转的感觉，涉及视距变换。
需注意在苹果设备上，图片如果有重叠会导致闪屏，所以需要对图层进行旋转角度的区分。
1、新建时间轴
注：为了方便编辑，报告H5每个轨迹的间隔设为1秒，但播放起来有点快，最后播放速度设为0.7倍。
2、新建容器——新建容器——新建透明按钮——新建轨迹
简单地说，连续两次点击“容器”组件那个按钮，建立2层容器，用于旋转角度的区分。
然后新建一个透明按钮1，用于确保图片沿y轴旋转时，y轴以透明按钮1的中点为准。因此要控制透明按钮1的“x坐标”（比如630）、“宽”（比如20），刚好能让它的中点处于H5的右边缘。
透明按钮1视距设为300，并为它新建轨迹，用于确保图片具备3D变换效果。
注意：视距指以父对象的中心为旋转中心时，子对象3D翻转时的变形距离，必须在3D旋转的父对象上设置。视距设置越大，3D透视效果越小。
3、新建透明按钮——新建轨迹——拖入图片
再新建一个透明按钮2，也是用于确保图片沿y轴旋转、立体变换时，y轴以透明按钮2的中点为准。由于透明按钮1是透明按钮2的父对象，因此要控制透明按钮2的“x坐标”为前者的负值（比如-630）、“宽”与前者一致（比如20），让它的中点与透明按钮1重合。
为透明按钮2新建轨迹，拖一张图片到透明按钮下面。这样一来，让透明按钮2沿y轴旋转，其实就是让图片沿右侧边缘旋转了。
注意：沿y轴旋转，指以对象的垂直中心轴为旋转轴，进行3D透视旋转。上面的轨迹建议采用“贝塞尔曲线”选项，变换时会遵循快-慢-快的原则。
4、为轨迹设置关键帧
分别选中透明按钮1、透明按钮2轨迹，为它们各添加以上3个参数的关键帧，并保持两个按钮3个关键帧的位置一致。
如果同组内关键帧的间隔设为1秒，后面添加新的关键帧比较节省时间（只需选中关键帧，在帧位置的输入框内填写1、2、3类似的值就行）。
组与组之间间隔可设为0.5秒（即展示组和衔接组的时间间隔）。
5、多组图片的变化
以此类推，比如要做6个展示页面，就需要11个组（包括5个衔接的图片组）。
这时需要回到开头，复制第2个容器，粘贴在第1个容器上，就会有11个包含各种内容的二层容器。然后逐一为各层容器设置关键帧，替换图片就行。
6、避免各组之间的层叠
最后，把所有展示组的顶层容器（相当于二层容器），“y轴旋转”这个参数设为1。
注意：这样一来，所有衔接组的“y轴旋转”仍为0，就不会导致间隔的两组同时旋转时，两组之间重叠后产生闪屏。
（三）滑动要智能！
左右滑动的速度需要实时记录，并反映为播放速度，交互上的体验才会更真实。
此外，为避免一次性进行播放的图片太多，导致卡顿，最好进行分页播放，而不是一个页面播到底。
1、新建变量
需要2个变量，一个输出向左滑动的速度（v1），一个输出向右滑动的速度（v2）。
2、新建透明按钮——添加事件
透明按钮的x、y坐标为0，宽、高和设备一致，确保盖住整个屏幕，然后需要的事件如下：
上面的播放速度，$v1*0.0001+0.5，0.5表示的是最低的播放速度，可以根据实际滑动情况灵活设置。
“*0.0001”，是因为比较快的速度可以高达4位数，这样赋值可以确保它不会一下子超过原定的播放速度（0.7）。
最后，请大家自动忽略本文的标题党。其实昨天我还在TGideas粉丝群做了个小调查，发现大家和我一样也认为“抄袭”二字有点过了，而且VML主创事先并没有注意到那个作品。
另外，给认真看完教程的人一个重磅消息——
这份H5报告已开放使用，有需要的人可以到iH5官网的模板中心下载，直接替换掉图片素材就能用了！
-END-
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
全部评论（16条）