余悠:当创意和技术深度结合

8月8日,由HTML5梦工场主办的第四届HTML5峰会暨攻城师嘉年华(iWeb峰会)北京站,会上跳跳糖CEO 余悠表了《当创意和技术深度结合》主题演讲。

以下是演讲实录:

3001

大家下午好!各位现场的甲方、乙方和程序员大家下午好!很高兴和大家分享关于HTML5的话题。

3002

一开始主办方让我在互动营销上分享这个话题,我是有点犹豫的,因为毕竟跳跳糖并不是在互动营销特别专业,但是我们在长期做技术服务的过程中,也在思考怎么样能把技术价值发挥到最大化。所以我们的结论是技术必须与创意结合,并且是深度的结合。

3003

3004

首先我们来谈一点为HTML5说一句话,现在会动的页面都被称为HTML5,可能90%的页面都没有用到HTML5的技术,所以我们应该从技术层面为HTML5说一句话,什么是HTML5?至少得有HTML技术的页面,要有一些动态的技术。

3005

接下来我会给大家说一些案例,这样会有比较直观的说明。请看这个案例,这是一个双平互动的案例,我先来播放一段视频。大家请看这个视频,首先是第一台手机需要做一些操作说明的演示,很常规,这个时候输一个二维码,做一个匹配,两台手机进行了关联,大家请注意看,手机1的红酒将要倒到手机2里面,是不是觉得很神奇?OK,我们回过头来看一下,这个案例是我们非常满意的案例,把技术充分表达出来了,而且是一个很好的HTML5的技术,手机会播放倒着的动画,然后就实现了交互。大家可以扫描二维码去做一下,这个游戏需要两台手机进行。

3006

当时客户给我们的命题非常简单,信息量有限,我们要做一个跟红酒有关的项目,我们当时也觉得没什么好做的,当时就觉得做一个翻译就算了。我们想为什么不可以把这台的红酒倒到另一台里面,后来这个事情就开始策划出来,几分钟的时间我们就做出一个创意,甲方非常肯定我们的创意,最后就做出来了。

3007

下面是一个大家非常熟悉的案例,这是杜蕾斯美术馆,我们就是背后默默做技术的团队,这个案例不需要多说了,里面有一些比较细节的交互,这些并不是特别复杂的技术,但是我们跟杜蕾斯的公关公司合作的过程,把这些技术特性非常好地融合,所以做出了非常好的产品,这里也有二维码,也可以去体现一下。

3008

这是我们跟搜狗搜索合作的一个案例,并没有很复杂的技术,只是一个横向的滚轴的操作,这个项目目前还在线上,但是因为时间比较久远,有一些微信的新特性,我们并没有做更新。

3009

这个项目的交互特点是用触屏方式把屏幕不断地往横拖,大象会走动,小象长牙了,为什么大象不高兴的故事,很煽情,有背景音乐。

3010

接下来介绍一个比较有趣的项目,也是很好地体现了创意和技术深度结合的案例,这个叫《啪啪啪打怪》,也许大家在外面看到了我们做的互动营销的项目。右边是一个图片演示,屏幕上会出现一些怪物,比如说第一个怪物是抛手机,第二个是摇一摇,还有旋转360度。我们也是放一个视频来比较好地说明。

3011

这个可以是一个大屏幕和很多台手机进行交互。有两台手机以上的时候这个游戏就开始,这是我们今年5月份的HTML5开发者大赛的获得了第一名的产品,同时也获得了最佳创意奖,这个作品是非常有趣的作品,当时的反响很强烈的,尤其是抛手机的动作,利用动力感应加算加速度来算出是否抛手机的动作,这里面有一些技术的东西,这是检测实时检测三个陀螺仪的数据检测是否抛手机,是否在旋转,这里是互动营销专场,这里我就不深入,喜欢技术的同学我们可以私下里交流。

3012

接下来做一个通常总结,我们说做创意不是一个命题作文,有时候需要很有灵感的灵光乍现就可以做一个很好的创意,我们跳跳糖就致力于做技术和创意的综合性的团队,所以我们前面展示的一些作品都是我们的精神理念的体现。就像我们跳跳糖的Slogen说的,爆炸吧,科技。接下来从传播怎么做方面来说一下,首先来看一下这个APP,这个APP前两个月被刷屏了,叫做CoroBall,非常简单的一个游戏,有的人不断地玩,就不断地分享,这个一个月的PB就达到了10个万。VIP是900多万,接近1000万,这个游戏其实没有什么太难的地方,最早是被遗忘在开源社区,我们在这里把这个游戏简单粗暴,30秒之内分享出去,利用分享传播心理做出来的。我们当时是有一个微博的大V转了,转了之后,迅速就上去了。所以有时候我们不能保证每个项目都会火,但是如果你不做这些特性的话,他就不可能火,总要等待一个时机,那个时机我们还是等到了,是从微信截图发到微博上面,粉丝再回过头来传播,就彻底引爆了,在一个月之内达到这个数量,并且在第二个星期的时候传到台湾了,台湾的数据比大陆更可怕,他们最多的是一天到了60万,大家知道台湾只有2000w人口。

3013

这个也是被刷屏了,但是后面有很多模仿者,最早微软出来了一个网页版的,很多人去微软的网页上上传了自己的照片,又辛苦地做了一个截图,又发了一个朋友圈。我们的功能是用了不到一天时间把这个功能做出来,最后的效果总的PV达到了2000万,生成的照片是300万,这里用到的技术是人脸识别的技术,因为有一些背后的技术支持,我们的工程师调用第三方的技术接口,把所有的技术都排除掉。每个人都看到这个将要成为一个热点,但是你没有技术的武器怎么做?只有创意是做不来的,所以我们一定要把技术和创意深度的结合。

3014

3015

但是大家可能问这里没有什么品牌传播,实际上我们后来给泸州老窖做了一个品牌传播的“世界微笑日”,当时也是60亿的PV,也是效果很不错的。

3016

刚才都是在讲HTML5,现在我们来单纯地讲一讲传播如何跟热点,这个也许在座做互动营销的比我更加熟悉一点。说到做热点,还是举杜蕾斯的例子,像当时很火的蓝黑和白金,找到两款颜色跟这个案例一样的颜色,迅速获得了几千万的传播。旁边是由我们跳跳糖的做一个微信传播,大概比杜蕾斯慢了两个小时,但是仍然获得了600万的传播。我们注意一下我们的微博号的粉丝只有4万多,只有杜蕾斯的不到十分之一。所以我们抓到一些热点的时候一定要速度非常快,你要在做调研,做立项,做技术实施,可能一个礼拜就没有什么价值的了,就传播不起来。所以我们为什么一定要技术和创意的深度结合,当你发现一个东西很有趣的时候,你一定要把迅速地把它实现。

3017

下面我们来放松一下,讲一个很有趣的APP,为什么要讲这个APP呢?这是我们之前招了一个实习生他做的,现在是做了一个微信版,我们觉得它可能会火,大家可以拭目以待。还是放一个视频,这个游戏几个月前我们的工程师他自己说是为了赚学费、赚外快,在IOS页面发布了一个游戏,因为是一个独立的程序员,自己手写的,完全都是手写的,数字都是手写的,这是一个非常新的游戏,当时在IOS的商店里面被推荐,最多达到了每天1.4万的下载量,这个下载量如果是做APP推广的话,都知道是非常可怕的一个数字。它为什么火呢?首先是简单粗暴符合了,画风也符合了,他的女朋友大力支持他做这个工作,讲述这个APP怎么做的,不知道怎么这个帖子就传出去了,这个契机这个游戏就火了,一天1.4万的下载量。大家可以试玩一下,今天刚刚上线,我说帮他展示一下,他说好了,就改了今天上线,用HTML5来做的,这个在微信里面,现在就可以玩。如果网速不好,有可能玩得不好。这是第一天发布,所以它能不能火,我们可以拭目以待,因为我们做了很多火的案例,可能需要一些契机和大V去关注,当然今天也会火也不一定。我们不能保证每个都火,但是每个必须得做的事情都得做,所以才能保证会火。

3018

每个人都希望找到一些传播的百分之百定律,其实这个定律每个人都在找,但是是并不存在的,我刚才说了,天时、地利、人和还需要一点运气,手上还要有武器,这是必备的条件。

3019

下一张比较有趣,大家可以多关注一下,我们讲技术方面,有一些现在还没有火或者没有用到的技术,但是将来一定会用到高能的技术,比如说黑科技,相信技术圈的朋友会非常感兴趣。

3021

3022

一个是3D和VR相关的技术,用到HTML5,其实甲方和乙方都很期待,我一会儿可以介绍一下。第二个是软件和硬件的跨界结合,我们现在做HTML5都在做一个界面,永远脱离不了手机,有没有可能脱离手机呢?当然是可以的。第三个是在算法层面去深入,有一些是算法层面的,不是所有的创意能够做到的,这时候需要做计算机的人去实现。第四个是云计算和大数据的支持,这个一会儿我再简单来讲两句。

3023

首先看一下空中全景航拍,这是我们最近在调研的一个项目,已经做出了一个东西,这个二维码可以扫。这是全景的技术,其实全景技术并不是很陌生,用摄影和航拍,我就展示一下。

3024

这是前几天我在上海用无人机拍摄的,可能大家觉得你一个做HTML5的为什么要搞航拍?其实我们就是想把技术让它更加的没有限制,不受限制去发挥想象自由的空间,所有人去做创意的同时也发展很多技术,尤其是那些门槛比较高的技术,由此来制造一些技术壁垒,让我们做的产品跟大家不一样。这个可以做什么呢?除了做一个浏览里面,里面可以做很多交互,比如说一个全景游戏,甚至做全景视频,其他时间也有一个全景视频,那个视频大家也知道,视频的角度在往前走,但是你可以自由地选择你的角度,谷歌做了一个叫做“全景MV”,你可以选择你的角度,声音可以随着角度变化,这个也没有那么难实现,这个已经做出来了,空中全景的二维码已经做出了,这是非常酷的一个上海陆家嘴的全景的图像,大家可以扫二维码自己去体验。

3025

再说软硬件跨界,这个项目还没做出来,但是算法已经做出来了,这是一个写字机器人,这个写字机器人可能大家见过单纯的硬件版的,这是一个会写毛笔字的机器人,这个算法我们已经完完全全搞清楚了,接下来我们会在10月份创客嘉年华的时候推出一个用HTML5写字的机器人,你在线上写一个二维码,你在HTML5上面去写字画画,这个机器人就可以同步把你画的东西在纸上画出来,非常炫酷,10月1日我们会在北京展示这个产品。刚才说了多屏互动的案例,那是一个大屏,非常广义的,可以定义一个输入端口,可以输出到飞机,输出到各种能想象的东西场合里面去,这就是HTML5突破了手机,然后延伸到很宽广的领域里面去。

3026

这是HTML5在算法方面实现的,这是在LowPoly风格的场景切换,这个风格只是一个纯技术性的产品,但是这个技术是多面型的转换,相信前端圈的同学会非常感兴趣,因为我之前有看到前端圈的同学去拿这个做非常深入的技术级别的讨论,这里面大家可以稍微看一下,技术里面非常的复杂,我们在技术层面走得比较深。

3027

第四个是讲大数据,我这里要举这个例子了,我们一般不说大数据,这是图像识别的一个创意,之前说测你的年龄和测你的颜值,能不能放一张照片上去,How Rich Are U?这是利用图片识别以图搜图的技术,你怎样把创意和技术结合起来,这才是一个良好创意的基础,当然这个产品我们现在还在寻找一个技术解决的方案,还没有找到很好用的以图搜图的方案,大家也可以把这个创意拿去,我很期待看到简单粗暴又好玩有创意的很好的产品。

3028

高科技的部分介绍到这里。接下来是一个非常简单的总结,以及跟我们做一些互动,以及和大家做一些提问。

3029

我们跳跳糖的里面就是打造互联网互动营销新时代的工匠精神,我们想做非常高端的一些定制,不去做一些平台级的东西。刚才Maka的CEO说到如果用户有做很多平台的产品,用那个产品,谷歌也找我们去开发一个定制化很强的东西,叫做一键呼叫运钞车的传播案例,不管是做平台,做高端定制,这两个是并行的,一个公司既需要做一些低成本、快速的营销,也需要做一些高端的定制,所以我们走的路线,商业模式是不太一样的,这是要走一些高端定制的,把创意和技术深度整合的一条路线。这是技术整合的一张海报。

3030

这是我们的微信,大家可以关注一下。

最后讲一点,要做好营销其实是挺困难的,又懂技术,又懂创意,当然还有一个很便捷的方式,来找跳跳糖,我们可以给你提供很好的服务。谢谢大家!