H5有了这些新玩法,玩法知多少

2019-11-07 23:23栏目:web网络
TAG:

人脸识别

顾名思义,就是用人脸和H5进行互动,玩法有根据人脸猜测年龄、猜情绪,测试与明星脸的匹配度,将人脸和游戏电影人物相结合,将人脸变成小时候的样子,根据人脸的动作做出反馈(如张嘴时从嘴里飞出企鹅、眨眼睛拍照)等,通常跟AR和图片合成技术搭配使用。这类方式比较适合用于游戏电影宣传、个性化用户样貌、图片类产品推广的场景。合成的图片可以在边角加上活动二维码,使得其他用户看到这张图片时也可以参与活动。

相关技术主要是人脸识别和人脸动作捕捉的技术,腾讯有提供优图识别技术,微软也有提供人脸识别技术。

案例:

腾讯:我的魔兽我主演

这个H5将人脸和魔兽电影相结合。用户上传自己的照片,选择喜欢的模板和添加一些刀疤之类的装饰后,就可以生成一张用自己脸制作出来的的魔兽海报了。

图片 1

图片 2

我的小学生证件照:

用户上传照片生成小学生证件照,并可以通过”换基因“换一下生成的样子。

图片 3

图片 4

QQ钱包三周年活动之扫脸获红包:

用户在活动页张大嘴巴说”FUN开付“后,会有企鹅从嘴里探出来跳舞,然后发红包给用户。

图片 5

图片 6

 

案例:脑洞大过天,月饼究竟能做啥?

基于画面呈现:

这类玩法一般就是展现一段比较酷炫有趣的画面内容,如视频、动画、特效,给用户带来视觉上的感官享受,用户也可以通过与画面内容互动,看自己想看的内容。

 

我们和屏幕交互,除了有点击、滑动外,还有很多手势操作,如拖拽、放大、所辖、旋转、画图。切水果和愤怒的小鸟都是非常不错的手势操作典型案例。

视频/动画展示

这类H5会播放一段时间较长但有趣生动的视频或动画来吸引用户关注其宣传内容。由于视频内容比较生动酷炫有趣味,以及常常有明星参与演出,用户一般不会太抗拒这样的广告,反而会喜欢点赞,甚至主动向朋友分享。有很多刷屏H5都是这个类型的,例如薛之谦XQQ动漫、韩寒X使命召唤等。这个玩法适合用于产品、节日、游戏、电影等宣传场景及叙述内容比较多的场景。

这个玩法的主要制作方式有:

1、视频。这种方式需要前期拍摄、后期使用专门的视频软件(如AE)制作,能制作出很炫的效果,但成本较高,用户通常只能被动地观看完整段视频。

2、使用canvas制作,这种方式可以制作出像以前的flash一样的动画,效果没视频酷炫,但这类动画既可以看,又可以在播放途中自然地添加交互,相关组件有createjs、egret等。

3、使用H5+css3制作,这种方式也能像方式2一样制作出动画,但制作难度和复杂度都比方式2大,而且也有可能带来性能问题。

案例:

薛之谦XQQ动漫:

这支H5找来薛之谦拍视频,讲关于腾讯动漫作品的段子。视频内容十分有趣,成为了当时的现象级刷屏H5。

图片 7

图片 8

生命之下,想象之上——2015年腾讯互动娱乐发布会品牌H5:

这支H5使用createjs制作,以卡通动画的方式展示了男孩探寻想象力的旅程。动画分段播放,用户可以体会完每段动画的思想后,再点击继续播放下一段动画。

图片 9

图片 10

这是成年人不敢打开的童年:

这个H5动画属于一镜到底式的动画,用户一边滑动屏幕,动画一边顺序播放,而往相反方向滑动则会让动画倒序播放,滑动的速度会影响动画播放的速度,感觉就像是一边抽卷筒厕纸一边看到厕纸上画的逐格漫画一样。

图片 11

费玉清唱诛仙主题曲:

这个视频h5最大的特色是观看过程中长按按钮时会换了另一种魔性的画风,让用户不再只是被动地观看视频,而是通过操作发掘到更多有趣的内容,增强了用户的参与感和吸引力。

图片 12

图片 13

 

(1)腾讯:我的魔兽我主演

webRTC

webRTC是H5的一个新特性,它可以在web上访问摄像头和麦克风,进行视频和音频的实时通讯,用途有视频会议、视频聊天、在线教育、在线问诊等,以前只能客户端才能实现的视频类应用也可以应用到web上了。兼容性方面,移动端浏览器的支持程度很差,安卓5.x以上的chrome才支持,而ios直至safari11发布才终于得到了支持,但这个发展表明web端也逐渐具备这个能力了,我们可以预先想想这方面的策划,说不定不久的将来就能用上了。

案例:

Chatroulette:

这是一个随机视频聊天网页,你可以随机和地球上的陌生人视频聊天,一般遇到的都是外国人,我也是从这个网页第一次真实地感受到真的有外国人的存在。可惜现在不能访问了。

图片 14

 

这类玩法一般就是展现一段比较酷炫有趣的画面内容,如视频、动画、特效,给用户带来视觉上的感官享受,用户也可以通过与画面内容互动,看自己想看的内容。

多屏互动

多屏互动指在多个屏幕上体验活动,各自的操作会同时反应到其他屏幕上,一般以双屏互动为主。玩法有多人合作完成任务/互相竞技、你画我猜、一问一答、情侣互动小游戏、线下与现场观众互动、多个屏幕拼起来看视频等,也可以把手机屏幕当成控制器,用大屏幕来显示,例子有手机遥控器、谷歌的多人竞跑游戏。制作此类活动时,要注意兼顾好只有单人玩时的情况,此时可以将体验流程简单化,或者加上电脑一起参与。

相关技术主要是通过websocket或轮询接口进行同步通信和更新画面的内容。

案例:

CF手游&品客组队大战僵尸:

这个游戏是用手榴弹炸僵尸,既可单人玩,也可双人玩,双人玩的时候一人负责装薯片弹药,一人负责扔手榴弹。

图片 15

图片 16

奔驰抢车拔河:

2人拼手速点击屏幕,将奔驰拉到自己那边为赢。

图片 17

图片 18

爱9就在一起:

一个关于爱情的视频,需要使用2台手机才能看到完整的内容,视频会在2台手机上同步播放。和心爱的TA一起把手机拼起来看吧。我觉得这个h5在只有一个手机观看的时候,应该提供一个滑动屏幕或转动手机时可以看到另一半视频的功能。

图片 19

图片 20

微信线下多人飞机游戏:

微信无现金日的活动现场提供了一个可以让多人同时玩的飞机游戏。游客用手机操作飞机射击,当达到了一定分数就可换取礼物。在大屏幕上会显示多人一起玩的游戏画面。这种方式增强了主办方与游客、游客之间的互动,也减少了游客的排队时间。飞机游戏的设计,也让人想起了第一款微信游戏就是飞机游戏,有一种回归初心的感觉。

图片 21

谷歌多人在线运动小游戏:

总共有三个竞赛小游戏,分别是跑步、骑单车和游泳,最多能同时让四个人加入游戏。玩家在手机上按照操作指示去玩,电脑上则同时显示游戏画面。当只有单人玩的时候,会有电脑参与游戏。

图片 22

图片 23

 

人脸识别

如何创意如泉涌?

每个人都想在策划活动时能快速想出合适的方案,但方案不是说憋就能憋出来的。正所谓厚积薄发,要有好的想法,平时就要见多识广,多看看别人的案例,积累一定量的创意。在此推荐一下H5案例分享这个网站,它收录了很多比较优秀的H5,很多新出的较好的H5都会及时收录和点评,有空时可以多逛逛。此外,可以多尝试那些充满创意的游戏,例如任天堂的游戏。他的游戏IP经历了十多年依然经久不衰,就是因为他一直以来都在创造很多充满游戏性和创意的游戏。以最近推出的《1-2-switch》为例,其内置的28个体感游戏都十分有趣,有些游戏创意还是能应用到H5上的。大家可以从下面的视频里了解一下这些游戏的玩法。

至于积累H5特效创意,大家可以访问一下fff这个网站,里面有一些酷炫有趣的特效可以参考,下次如果需要做H5的时候,产品就可以一脸傲娇的指着屏幕跟开发说:你看,就是要这个效果。而开发也可以偷偷在这参考和学习各种特效的制作方法,当你做出超出产品预期的酷炫的H5时,产品肯定会喜出望外,对你好感度大增,甚至暗许芳心。。。访问地址:http://fff.cmiscm.com/

图片 24

 

H5主题是主演你自己的魔兽,在两幅海报中选择自己喜欢的海报风格,上传自己露出五官的照片,在成型的海报上加上伤疤、眼睛等装饰物,点击完成,即完成海报制作,可以生成海报并可以分享朋友圈。

基于触摸屏操作:

除了利用传感器创造特别的玩法外,在触摸屏上的操作也有多种玩法,如单屏滚动、手势操作、全景交互及多屏互动。在触摸屏上的操作要符合用户的正常习惯,例如滑动屏幕可以翻页、移动场景,双指拉开表示放大操作。如果预料到用户可能不清楚如何操作,则需要提供操作示范。此外,可操作区域也要弄大些,方便用户操作,例如当前画面只是操作一只猫爪上下移动,那么除了可以在猫爪上滑动外,在其他空白区域上下滑动也应该可以让猫爪上下移动。

 

结合位置提供LBS服务,百度地图之前做过一个在地图上找附近的麦当劳的活动;也可以与运动结合,如记录用户的跑步轨迹,但是H5不是APP,如果关闭了就不能检测了,如果真的检测运动轨迹的话,建议还是到点打卡的方式会更合适。游戏可参考pokemon go的玩法,在用户的位置附近散落奖品,让用户走到目的地收集奖励。

陀螺仪、重力感应

这类交互在体感游戏中比较常见,如控制射箭的方向、挥剑、打乒乓球等,而在H5中则可用于摇一摇、控制赛车左右前进、检查手机是否平躺/竖直、全景图/AR转换角度等,也可以用于制造视差效果(如王者荣耀的登录界面),使画面富有层次感。

案例:

降温摇可乐:

该H5在模拟摇可乐的情景,玩家需要不停地摇动手机,尽快使可乐喷出来。个人认为可以换另一种玩法,让朋友互相传递手机摇,谁摇爆了可乐就算输。

图片 25图片 26

来玩点耐心吧:

这是腾讯互动娱乐2017年度发布会的预热H5,提倡用户做事要多点耐心,因而玩法是耐心地竖立手机,看着一幅漂亮繁复的画慢慢地画完。

图片 27图片 28

图片 29图片 30

图片 31

图片 32

一“陆”狂飙,极速挑战:

该H5与速度与激情8联动,先播放一段在朋友圈上飚车的视频,然后开始赛车游戏,通过左右倾侧手机来控制赛车左右前进、躲避障碍,最后根据行使的距离进行排名和抽奖。

图片 33

图片 34

天猫:地球上的另一个你

该H5同时播放代表理想与现实的两个视频,利用重力感应来切换看到的画面,向上转动手机模拟抬头看到理想的画面,向下转动手机模拟低头看到现实的画面,也可以转到一半的位置同时看两个视频同时播放,比较有新意,也较好表达出理想和现实之间的对比。

图片 35

图片 36

 

用人脸和H5进行互动,玩法有根据人脸猜测年龄、猜情绪,测试与明星脸的匹配度,将人脸和游戏电影人物相结合(电影宣传用),将人脸变成小时候的样子(生成高考证),将人脸变成年老的样子(这个创意适合做美容美妆行业),根据人脸的动作做出反馈(比如嘴巴喷火、眼睛放闪电)等,通常跟AR和图片合成技术搭配使用。相关技术主要是人脸识别和人脸动作捕捉的技术,腾讯有提供优图识别技术,微软也有提供人脸识别技术。

H5 玩法知多少

2017/09/01 · HTML5 · 1 评论 · H5

原文出处: 大熊   

html5的发布让移动端web增添了很多新的能力,这些能力给我们带来了很多新的玩法,不知你知道了多少呢?下面我将结合案例罗列一些自H5发布以来出现的新玩法,给大家温故而知新。本文也适合大家在策划H5活动的时候作为参考,说不定在这儿就找到灵感了。

构思H5的玩法该从何入手呢?网上的H5五花八门,其玩法大多都可以归纳到基于传感器、基于触摸屏操作、基于画面呈现、基于内容这四类来考虑。它们既有基于其中一类来构思玩法,又有将多个类别组合起来创造更复杂丰富的玩法。与H5新能力相关的是前三种类型,本文也会从这三种类型进行展开,分别介绍一下各类型下有什么玩法,而基于内容的玩法主要是图文混排展示内容,答题类游戏等与内容强相关的玩法,实际上他们也会多多少少与另外三类搭上点关系的。

接下来你将会看到这些玩法:

基于传感器:

类别 玩法或适用场景
陀螺仪、重力感应 体感游戏、摇一摇、全景图/AR转换角度、转动手机制造视差效果
地理位置 提供周边生活服务、与运动结合、上班打卡功能、外勤人员的工作监控、类似QQ的AR红包和pokemon go玩法、展示附近的优惠和广告
人脸识别 体感游戏、将用户样貌与节日/游戏/电影等主题元素相结合进行宣传的场景、用户样貌与明星脸相似度测试、猜用户年龄、猜情绪、模拟化妆
webRTC 视频会议、视频聊天、在线教育、在线问诊等视频/音频通讯的场景

基于触摸屏操作:

类别 玩法或适用场景
全景交互 虚拟全景展示、身临其境的实景展示或活动现场展示、商品360度展示
多屏互动 朋友间合作/竞技游戏、你画我猜、一问一答、情侣互动、多个屏幕拼起来看视频、投屏应用、线下现场观众互动
单屏滚动 公司主页、产品介绍、报告总结、邀请函等展示类场景
手势操作 商品图片放大查看场景、图片拖拽/旋转等编辑场景、手势解锁、拼图游戏

基于画面呈现:

类别 玩法或适用场景
视频/动画展示 产品、节日、游戏、电影等宣传场景;内容比较丰富的场景
图片裁剪和形变 类似变形金刚、七巧板形式的图片转换效果展示场景

 

如果以场景为维度来展开推荐玩法,则可参考下图所示:

图片 37图片 38

接着我会逐一介绍一下这些玩法,读者也可以直接跳到感兴趣的部分去阅读。除上表外还有一些目前还不太能用的H5能力,如手机震动、光线传感器、距离传感器等,由于边幅原因,暂不作展开介绍,读者可以自行查找相关资料。部分案例如没有贴上二维码,是因为该案例已下线了。

操千曲而后晓声,观千剑而后识器。

总结

H5的出现让移动web具备了更多的能力,使我们有更多的空间去创作和策划。本文列举了一些H5带来的新能力及其带来的玩法,指出H5的玩法构思可以基于传感器、基于触摸屏操作、基于画面呈现、基于内容来考虑,接着对这些类别下列举的玩法从应用场景、案例方面进行介绍,意在给读者多一些玩法上的灵感。大家在构思策划活动时也可以翻看一下这篇文章,说不定在里面就找到合适的参考方案了。

最后,谢谢认真阅读到这里的各位。小伙伴们如果也有一些有趣的H5玩法,欢迎留言介绍一下。若有什么意见和想法也欢迎不吝赐教,谢谢,friend哩噶嘛~

2 赞 10 收藏 1 评论

图片 39

如果以场景为维度来展开推荐玩法,则可参考下图所示:

全景交互

全景交互指将用户置于一个360度环绕的图片/视频环境下进行沉浸式的体验,用户可以通过转动手机或滑动屏幕来看这个环境里不同角度的内容并进行交互。如果将内容分成左右两个屏,带上VR眼镜,则可以进行VR体验。此玩法比较适合的场景有虚拟全景展示、身临其境的实景展示或活动现场展示。与此类似的还有商品的360度展示,用户拖动商品即可看到不同角度下商品的样子。

相关技术主要是3d旋转操作、陀螺仪方面的技术,全景图插件有造物节使用的css3d-engine ,全景视频组件有 Valiant360,还有一些收费组件如krpano。

案例:

小爷吴亦凡,凡心所向:

之前很火的吴亦凡打篮球全景视频H5,通过旋转手机看他风骚地带球,镜头对着他代表正在防守他,结束后游戏会算出玩家的防守有效率。

图片 40

图片 41

vivo-我们i音乐:

类似造物节的案例,用户在一个360度的虚拟空间里拖动画面和旋转手机看各角度下的样子,并可点击里面的物品进行互动。

图片 42

深圳欢乐谷实景地图:

在这个地图里,游客可以从高处欣赏欢乐谷的风景,切换各区域寻找游玩设施的位置,还可以发表评论留下足迹。该地图除了可以滑动、转动手机来浏览地图,还支持VR模式,将区域切换按钮移动到屏幕中间的锚点上一会儿便可切换游玩区域。

图片 43

图片 44

 

Html5从2014年底的初露锋芒到2015年的全面火爆,再到2016的沉淀,2017年,H5依然是品牌Social传播的首选。因为是一种新技术,很多策划的朋友往往不知道怎么策划,或者或不知道天马行空的想法能不能实现,所以在策划的时候,每有一个想法都在咨询下技术人员,没有技术人员的,就需要供应商提供技术咨询服务了,但是这样的策划周期就有点痛苦了。还是那句话,“夫源远自流长,根深者叶茂”。一个好的策划人员(运营人员、设计师,这个视不同公司,岗位不同),若要做一个优秀的创意方案,必须得了解自html5发布以来的新玩法。本文也适合做大家在策划H5活动的必备参考文档,想灵感的时候翻来看看。

地理位置

这类H5结合用户所处的位置,可以提供比较方便的周边生活服务,如查找附近的摩拜单车、获取附近的餐饮信息和前往路线;也可以与运动结合,如记录用户的跑步轨迹。如果用于办公,则可以做上班打卡功能、外勤人员的工作监控等。如果用于游戏,则可以创造出类似pokemon go的玩法,在用户的位置附近散落奖品,让用户走到目的地收集奖励。

案例:

杜蕾斯全民抓喜鹊:

该游戏H5类似pokemon go,在地图上散落各种喜鹊,用户需走到散落点附近,将喜鹊划入篮圈内,然后点击捕获,捕获够一定数量就可以兑换奖品。

图片 45

 

亮点:3d全景的画面效果颜色鲜艳丰富,4个场景都有小互动,细节之处做得很精致。人物也画得相当细致,加上点击播放的音乐,整体风格很活泼生动。

单屏滚动

这是一种很常见的交互形式。如幻灯片一样,网页上的每一页内容都是占满全屏的。当用户滑动屏幕翻下一页后,当前整个屏幕的内容都会翻走,然后再展示下一页全屏的内容。翻屏时可以加上一些转换的动画,如渐入渐出,使得翻页效果生动不单调,也可以加上重力感应,让手机在转动时产生视差效果。单屏滚动的应用场景比较广泛,很多主页、产品介绍、报告总结、邀请函都应用了这种形式。

案例:

腾讯互娱发布会邀请函:

邀请函采取单屏滚动的形式展示,同时利用重力感应,转动手机时会看到页面上的装饰图片也会跟着移动,制造视差,增添了乐趣。

图片 46

图片 47

图片 48

王者荣耀S7赛季总结:

该游戏总结报告也使用了单屏滚动的方式,展示了用户在该赛季各方面的成绩,如获得星数、本命英雄、给力搭档等。翻页时酷炫的动画效果使得这份报告更加生动有趣。该报告亦使用了重力感应,摆动手机时页内元素也会跟着摆动。

图片 49

图片 50

图片 51

 

微信无现金日的活动现场提供了一个可以让多人同时玩的飞机游戏。游客用手机操作飞机射击,当达到了一定分数就可换取礼物。在大屏幕上会显示多人一起玩的游戏画面。这种方式增强了主办方与游客、游客之间的互动,也减少了游客的排队时间。飞机游戏的设计,也让人想起了第一款微信游戏就是飞机游戏,有一种回归初心的感觉。

手势操作

我们和屏幕交互,除了有点击、滑动外,还有很多手势操作,如拖拽、双指拉开放大、双指画圈旋转物体,画图形表示某个动作等。手势操作可用于放大查看图片、对图片进行拖拽/放大/旋转等编辑、手势解锁、也可以用于游戏上,如拼图游戏时拖拽、旋转拼图碎片。

在实现上,H5有一个手势操作库hammer.js,可以实现常用的手势操作。

图片 52

 

内容分两个部分展现,前半部分借助视频的形式展开,点击首页的“ENGINE START“进入视频部分,将速度与激情电影情节和陆金所引入朋友圈、今日头条等场景中,视频部分的结尾给出了游戏挑战和游戏规则,紧接着进入游戏环节,通过左右遥控手机躲避行驶过程中的障碍物,最后进行排名和抽奖。

基于传感器

这类玩法依靠手机上的传感器实现,这些传感器有陀螺仪、gps、摄像头、麦克风、震动传感器、光线传感器、距离传感器等。大家在设计玩法的时候,要结合业务本身选用相关的合适的传感器,不要随意搭配或随意叠加多个传感器,避免画蛇添足。例如做周边生活类的需求,就应该选用gps传感器获取地理位置,做全景图的需求就选用陀螺仪来提供便捷的交互。

 

体验地址:七夕节“梅赛德斯-奔驰”

图片裁剪和形变

css的clip-path和svg的clipPath方法可以使图形或图片裁剪成三角形、五边形等自定义的形状。利用这个能力,我们可以使图片如碎片似的组合起来或散开,或者将多边形像拼七巧板一样动态地组合成各种形状,或者将一个图标以动画的形式自然地转换到另一个图标。这个玩法适合用于图片的酷炫展示、切换及如变形金刚一样有变形需求的项目中。目前性能一般的手机运行这效果时并不太流畅。

案例:

pieces:

这个网站用多边形动态地拼出各种很生动的动物,切换动物时多边形的变换过程也十分自然。访问地址:http://species-in-pieces.com

图片 53

图片 54

pasition:

这是腾讯AlloyTeam发布的给图标制作酷炫过渡动画的插件,可以让图标以动画的形式自然地转换成另一个图标。访问地址:https://alloyteam.github.io/pasition/

图片 55

图片 56

SVG Morpheus:

这个插件也是实现了如pasition的效果,但风格不相似的图标在转换时不够自然,会出现扭麻花似的强硬转换效果。访问地址:http://alexk111.github.io/SVG-Morpheus/

图片 57

图片 58

 

基于触摸屏操作

用户通过使劲摇动手机唤醒呆坐的TA,随即惊爆出的带感动态画面,使原本呆坐的TA,神采飞扬,奔跑又冲浪,随后跳入别克威朗车内

(2)我们i音乐

(1)薛之谦史上最疯狂的广告

(2)七夕节“梅赛德斯-奔驰”

体验地址:别克:动我试试

多屏互动指在多个屏幕上体验活动,各自的操作会同时反应到其他屏幕上,一般以双屏互动为主。玩法有多人合作或竞技、你画我猜、一问一答、情侣互动、线下与现场观众互动、多个屏幕拼起来看视频等,也可以把手机作为遥控手柄,用大屏幕来显示。制作此类活动时,切记注意场景,上百人的大场和十几个人的中场和几个人的小场是不同的,策划上完全不同,大屏只有一个,人一多就要考虑到展示的问题,要么只实时展示战绩,要么只展示一瞬间的头像(主区域,视动作而定,比如一次击杀、一次抢赢,夜店霸屏也是不错的参考)。十几人和几人的场基本展示上不用担心,可以全部展示。接下来就是形式,其实很多都可以借鉴其他实体游戏或现有的游戏,比如贪吃蛇大战。信步互动是国内最早尝试多屏互动的公司之一,很多案例做的也不错。

体验地址:CF手游&品客组队大战僵尸

跟随视线的深入,在色彩斑斓的画面中回顾那些很火很热的剧集和综艺,轻松愉快的BGM,个性分明的大咖,光彩夺目的荧屏巨星逐一呈现在画面中。在屏幕下方戳一戳优酷图标,画面就会变换为万花筒。在H5的最后呈现YOUKU会员推广的界面。

(3)肯德基VR虚拟公益艺术体验馆

案例:杜蕾斯全民抓喜鹊

�$��M*2

总结

案例:

手机上的传感器有陀螺仪、GPS、摄像头、麦克风、震动传感器、光线传感器、距离传感器等。现在智能手机普及率很高,可以放心设计玩法,但要注意结合业务本身选用相关的合适的传感器,不要随意搭配或随意叠加多个传感器,避免画蛇添足。例如做位置相关的,就选用GPS,做VR的需求就选用陀螺仪。

(2)一镜到底,一刀未剪的大剧发布

1、视频。主要用AE实现,能制作出很炫的效果,但成本较高,业内都是按秒计算。

这是一只图文展示类型的H5,页面加载完成以后不断的向上滑动屏幕,就可以查看Initial的王者S7赛季的赛季称号、获得的星数、战场荣耀、本命英雄、给力搭档、赛季神坑、开黑CP,以及自己的作战小伙伴,和具体的数据分析,在案例的尾部点击“查看我的王者之路”按钮,可以查看自己的王者之路。同时,这个H5案例使用了重力感应,体验的同时摇晃手机,画面也会跟着有所晃动。

体验地址:我们i音乐

①剧情介绍,手游打僵尸,用高能量“薯片”做弹药,急需支援弹药;②选择模式-单人模式,左手“瞄准”怪兽,右手“扔”手雷,限时杀怪得分,根据游戏成绩决定是否获礼包;③选择模式-双人模式,角色A选择“双人模式”生成二维码,角色B扫码进入,角色A点击开始,A打怪,同单人模式,B“装弹”,即不停向上滑动“薯片”,装到包装里,为A提供弹药;④根据游戏成绩(单人/双人),获得积分礼包/下载CF手游。

体验地址:in一周年庆邀请函

案例:

(1)in一周年庆邀请函

体验地址:爱9就在一起

基于触摸屏操作:

案例:

全景交互

体验地址:优酷:一镜到底,一刀未剪的大剧发布

(4)微信线下多人飞机游戏

(1)吴亦凡陷黑客门,化妆间私密外泄

基于画面呈现:

案例:

体验地址:哈根达斯:脑洞大过天,月饼究竟能做啥?

扫码关注获得更多资讯、创意、资料

首页是模拟的薛之谦微博界面,开始滑动不几下至后画面一黑,薛之谦出现在画面里开始讲导演让他代言腾讯动漫的原因和过程,内容结合了二次元世界人民喜欢的腐(两个男的在一起)、骚(因为一个巧克力少年被全校女生喜欢)、逗(被面瘫少女报复),最后煽情得抱着一个动画女主走向千山万水,原来这时候才是正式开拍宣传海报,一声action薛之谦被定格在海报上。

案例以中秋的正确打开方式为主题,通过“聚”“独”两种状态,体现中秋的不同状态,也是生活中的不同状态,达到共鸣。对比的时候,翻转手机180度,切换状态,非常有特色。

3、使用H5+css3制作,这种方式也能像方式2一样制作出动画,但制作难度和复杂度都比方式2大,而且但是受限于手机硬件问题,暂不推荐这种方式。

(2)来玩点耐心吧

以吴亦凡陷入黑客门为引子,通过用户的好奇心,引导用户观看,顺便进行品牌宣传。

这是一个目前来看非主流的快闪类型,提供给大家以启发思路。本H5案例采用快闪加图文切换的形式来展现,黑色的主色调以大气和高贵唯美的存在整个案例中,配合诸多经典黑色美学电影的精彩片段,即体现了对黑色美学的致敬又突出了新车型BlackBadge也融入了黑色美学的特质。

2、使用canvas制作,这种方式可以制作出像以前的flash一样的动画,效果没视频酷炫,但这类动画既可以看,又可以在播放途中自然地添加交互,用原生代码来写,难度非常大,推荐使用createjs、egret、layabox和cocos引擎工具等。

(4)中秋的正确打开方式

体验地址:来玩点耐心吧

打开案例就是一个爱不停炖的爱就在一起的画面,点击画面就会进入到下一个页面,点击图标可从两种性别中选择其中一种,然而点击不同的性别视频里的内容也不相同。点击后进入到下一个页面,这个页面可选择单屏也可选择双屏,单击双屏即可扫码邀请你的另外一个他与你一起观看观看电影,点击单屏就会进入到一个可观看的视屏。

(3)一“陆”狂飙,极速挑战

基于传感器:

以鹊桥会为主题,扫码进入页面,摇动手机,画面开始展现,一台奔驰汽车试过桥面,到达红色的爱心交汇的地方,画面最后是一台红色奔驰车朝着画面外,打开了明亮的车灯。

读者也可以直接跳到感兴趣的部分去阅读。此外如手机震动、光线传感器(探测环境光照强度,决定是否开启键盘灯及屏幕背光)、距离传感器(拥有距离感应器的手机在小九们拨打电话以后将听筒放在脸上的时候屏幕就黑了)等,这些功能不常用,暂不作展开介绍,读者可以自行查找相关资料。

小九对2000个H5案例深入剖析之后,归纳总结,其玩法无外乎4类:基于传感器、基于触摸屏操作、基于画面呈现、基于内容。4类之中可再分小类,实际使用中可以只用一种,也可以多个类别穿插起来使用,这个看天赋了,招式有了,实战中又可以有诸多变化的。前三种类型是基础,本文也会从这三种类型进行展开,分别介绍一下各类型下有什么玩法,而基于内容的玩法主要是图文混排展示内容,答题类游戏等与内容强相关的玩法,实际上他们也会多多少少与另外三类搭上点关系的。

体验地址:我的S7王者之路

如何创意如泉涌?

视频/动画展示

多屏互动

体验地址:中秋的正确打开方式

陀螺仪和重力感应在体感H5中用的比较多,比如打篮球、打网球,举哑铃、控制风车转动、检查手机是否平躺/竖直、全景图/AR转换角度,举哑铃就是一个简单直接有效的健康类H5活动创意。很多人分不清陀螺仪和重力感应区别是什么,小九简单的说明下,陀螺仪是可以追踪手机在XYZ三维空间的运动,而重力感应呢,你本来把手机拿在手里是竖着的,你将它转90度,横过来,它的页面就跟随你的重心自动反应过来。假如你想用手机控制星战中的激光剑的挥动,那就一定要用到陀螺仪。

要有好的想法,平时就要见多识广,多看看别人的案例,积累一定量的创意。

先给大家看看整体的纲要:

体验地址:一“陆”狂飙,极速挑战

体验地址:腾讯:我的魔兽我主演

这类H5会播放一段时间较长但有趣生动的视频或动画来吸引用户关注其宣传内容。视频/动画生动酷炫有趣味,以及常常有明星参与演出,用户一般不会太抗拒这样的广告,反而会喜欢点赞,甚至主动向朋友分享。这个玩法适合用于产品、节日、游戏、电影等宣传场景及叙述内容比较多的场景。

体验地址:肯德基VR虚拟公益艺术体验馆

案例:

199case网站收录了很多优秀的H5案例,可以看到完整的鲜活的设计,从加载动效、到交互到分享指引的每个细节都值得借鉴。至于积累H5特效,fff这个网站,里面有一些酷炫有趣的特效可以参考。

体验地址:薛之谦史上最疯狂的广告

这个玩法的主要制作方式有:

体验:“双人双手操作”,虽然有时候左手“瞄准”会有一些卡顿,但“雷爆”的那一刻体验还是蛮爽的!H5小游戏虽然与原生H5手游体验上有一定差距,但在H5营销案例上,已属很赞了

(1)CF手游&品客组队大战僵尸

(3)爱9就在一起

作者微信号:houtiemin

相关技术主要是通过websocket或轮询接口进行同步通信和更新画面的内容,对实时在线要求不高的,可以不用websocket技术。我们在实际制作中后端一般采用node.js。

地理位置

手势操作

(3)Snapchat佳得乐饮料迎头浇灌AR滤镜

基于传感器

这是一种很常见的交互形式。翻屏时可以加上一些转换的动画,如渐入渐出,使得翻页效果生动不单调,也可以加上重力感应,让手机在转动时产生视差效果。单屏滚动的应用场景比较广泛,很多主页、产品介绍、报告总结、邀请函都应用了这种形式。

进入页面是宣传海报,提示框内滚动显示品牌相关消息,点击进入3D场景,360度旋转手机可以全景观看,按照场景提示操作,4个不同场景会播放不同的音乐,在场景中的很多元素上设置了品牌LOGO,实现宣传推广,点击“查看详情”跳转到官方微博。

(3)劳斯莱斯BlackBadge化身黑暗骑士

用色彩讲述故事,一次滑动之后全屏自动切换,美轮美奂,并有真声留言,最后送出邀请函,邀你参加一周年庆典。

除了利用传感器创造特别的玩法外,在触摸屏上的操作也有多种玩法,如单屏滚动、手势操作、全景交互及多屏互动。在触摸屏上的操作要符合用户的正常习惯,例如滑动屏幕可以翻页、移动场景,双指拉开表示放大操作。默认提供操作示范,切记!切记!此外,可操作区域也要弄大些,方便用户操作,不要想象玩家是专业级玩家,这在策划和测试的时候要注意。

用手机控制篮球的方向和速度,瞄准篮框投球,最后15秒,篮框会移动,增加了游戏难度,游戏还可以与公众号进行关联,典型的线下吸粉神器。

H5在未来十年都会是web的主流形式,现在很多APP、VR、AR与H5都有结合点,对于营销而言,移动端的富媒体广告形式,H5更是不二人选。了解H5带来的新能力及其带来的玩法,多看案例,在构思策划活动时也可以翻看一下这篇文章,你就找到灵感了,然后就是升职加薪,走向人生巅峰…

单屏滚动

体验地址:我的小学生证件照

体验地址:劳斯莱斯BlackBadge化身黑暗骑士

webRTC

详细AR的参考文章请见【盘点】洞悉爆款AR的秘密(内附2017年上半年精品AR营销案例合集)

点击GO!!!!!进入游戏,游戏与地图结合在地图可以随时看见自己的位置,如果发现了小喜鹊,只要走向它,用篮圈将其圈住,点击捕捉即可。可以再随时看到附近的游戏在线人数和可爱的小喜鹊,集齐一定数量的喜鹊还可以兑换奖品哦!!

(2)我的S7王者之路

体验地址:吴亦凡陷黑客门,化妆间私密外泄

月饼究竟能做啥,打开看到白熊和冰皮月饼,通过点选和拖拽的方式将冰皮月饼放到白熊头上做耳朵(你的第一反应真的是耳朵吗?嘻嘻)进入下一环节,将月饼放入礼盒即可送心意,并有脑洞指数,最后附有相应的月饼购买链接。

佳得乐在Snapchat上推出了一款基于AR技术的滤镜,能让球迷感受在赢球时刻被佳得乐饮料迎头浇灌的兴奋感。与广告商进行合作方面,在《史努比花生大电影》的广告投放中,史努比本身就很受喜爱,用户很乐意与之“合照”,嘴中也可以吐出类似彩虹特效的糖果,UGC的传播效果非常好。

点击上传自己的自拍照片就可以生成属于自己的小学证件照,而且可以点击屏幕右侧的“换基因”生成不同造型的证件照。亮点:黄色背景和蓝色底片虽然产生了及其强烈的撞色,但是并没有给人突兀的感觉,人脸识别合成的照片还原非常真实。

(2)我的小学生证件照

亮点:两种可选择的体验方式都是很有身临其境感的,体验馆让人感觉就在眼前,很真实,还有李宇春做导游。

进入页面选择体验KFC公益艺术虚拟体验馆的方式:360度全景模式orVR眼睛模式,进入体验馆之后点击地面上的展厅地图可以知道体验馆主要分为四个区:体验馆大厅,公益艺术画作展,我的微信好友厅,公益艺术画作展。点击画作展上的画作即可更好的欣赏画作,点击画作右下角按钮,可了解画作详细信息,进入微信好友厅,即可看到自己分享出去的好友头像。

基于画面呈现

(5)信步互动投篮球小游戏

WebRTC,是一个支持网页浏览器进行实时语音对话或视频对话的技术,是谷歌2010年以6820万美元收购Global IP Solutions公司而获得的一项技术,可见Google布局之深远。WebRTC提供视频处理和音频处理技术,Web开发者也无需关注多媒体的数字信号处理过程,只需编写简单的Javascript程序即可实现。由于受到硬件条件的限制,目前的任何想法都实现不了,更传播不了,但大家可以持续关注,不久的将来就能用上了。

(1)动我试试?

案例:

一个考验用户耐心的小游戏。用户保持握住手机不变的姿势并且计时。一旦姿势变动,则游戏结束

体验地址:杜蕾斯全民抓喜鹊

全景交互指将用户置于一个360度环绕的图片/视频环境下进行沉浸式的体验,用户可以通过转动手机或滑动屏幕来看这个环境里不同角度的内容并进行交互。如果将内容分成左右两个屏,带上VR眼镜,则可以进行VR体验。此玩法比较适合的场景有虚拟全景展示、身临其境的实景展示或活动现场展示。与此类似的还有商品的360度展示,用户拖动商品即可看到不同角度下商品的样子。

相关技术主要是3d旋转操作、陀螺仪方面的技术,全景图插件有造物节使用的css3d-engine,全景视频组件有Valiant360,还有一些收费组件如krpano。

版权声明:本文由澳门新葡亰平台游戏发布于web网络,转载请注明出处:H5有了这些新玩法,玩法知多少