H5小游戏如何应用到广告中？什么场景使用效果最好？ - 知乎63被浏览<strong class="NumberBoard-itemValue" title="分享邀请回答71 条评论分享收藏感谢收起2添加评论分享收藏感谢收起写回答微信游戏开发-新年H5营销案例 | 元旦、新春贺岁营销，H5才是品牌创意的最佳CP - 型科科技
新年H5营销案例 | 元旦、新春贺岁营销，H5才是品牌创意的最佳CP
来源：原创&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
年终岁末,各位是不是都使出浑身解数来搞创意,拼业绩。对于马上就要到来的&元旦、新春，肯定是要大放异彩。在这两个营销大战的重要节日之时，该如何借势？又用哪些H5互动小游戏做营销呢？这不，小科就给大家来送大招了！帮助大家在跨年H5营销中打响新年第一战。
元旦意味着新的开始，H5融入一些新年元素与元旦的主题更加协调，既注重传统元素的加入，又能借势产品推广企业，层次分明，既富有活力。
这条新闻炸了
品牌主：穿越火线
长按扫描立即体验
亮点：视频形式，借助圣诞节和元旦为主题。模拟公众号信息，互动场景进入案例，配以炫酷游戏视频，送了温馨祝福给用户的同时，又极好的宣传了CF手游。
品牌主：有道词典
长按扫描立即体验
亮点：案例界面风格是以旧时候挂历为主。通过答题的形式积累足够的赐福才能穿越回2016。点击开始答题，从一月至十二月，每当你答对一题下面都会有关于这个问题的解释。根据答题的对错来判断用户重回2015的样子。
新春H5营销无疑是重头戏，除了烂大街的抢红包之外，H5的诸多玩法形式也都具有很强的通用性，既能让品牌显得更加高大上，同时运用新春元素设计和脑洞大开的新奇点子，也能获得消费者的满堂彩。下面为大家献上&12个&新春案例，帮助大家获取更多灵感点子。
案例1：激爽过大年
品牌主：穿越火线
长按扫描立即体验
亮点：让鸡爽了拿红包，测测你最快几秒！手绘漫画鸡的形象贱萌贱萌的，红色背景符合春节活动的界定。选择页面给出的工具用最短的时间让鸡感到爽，最后一页面给出了这只H5的活动主题&&壹其拉力，鸡爽2017,点击相应按钮就可以领红包约红包，还可以再次打鸡再次让鸡爽。
案例2：一起猜鸡吧
品牌主：京东
长按扫描立即体验
亮点：类似于你画我猜的测试H5，手绘风格，画风魔性。用简笔画的方式画出一道一道鸡贼的题目！用户根据鸡的形象或动作等特征猜猜是什么鸡，并给出规定字数与相应提示。结束后选择&再搞一次&或&邀TA来搞&，还能选择&抢购新机&进入品牌植入页。
案例3：春碗食验室
品牌主：淘宝网
长按扫描立即体验
亮点：红色主色调加以黄蓝相辅，脑洞食材。进入案例，首页会出现春碗实验室火锅，打开春碗实验室的大门进入，然后中间是一个冒着热气，等待下料的火锅，边上的台子上摆放着各种脑洞大开的配料，点击任意一种下锅，然后按下左侧的烹饪即可烹饪出相应的美食，点击右侧的重新选料，烹饪好的美食可以点击分享，也可以再次尝试做其他美食，脑洞已炸裂。
案例4：春节&清明上河图&
长按扫描立即体验
亮点：以清明上河图的形式展现整个主题，画面展示从除夕到初五以及正月十五在清明上河图上的热闹景象，同时也融入现代车辆，完美融合在一起，让品牌更接地气。每一屏还有一条祝福以及一个种福。最后可以通过分享传递这份祝福。
案例5：新年制造
图文互动类
品牌主：苹果
长按扫描立即体验
亮点：图文形式加手动体验，中国年画元素、插画完美融合，使得整个画面充满节日的气氛。首页是中国元素构成的年画，点击开始制作专属年画，增强了用户的参与度。进入第二屏教你解锁拜年新姿势... 团圆 平安 好运 丰收 富裕，任意选择制作年画，每个主题会有三种年画可以选择，并制作专有的祝福语，一起来解锁给亲友们加点儿年味吧。
案例6：拯救春节大作战
视频说唱类
品牌主：快报
长按扫描立即体验
亮点：漫画风格，手绘动漫生动搞笑。红色背景符合春节的气氛。新年rap，说唱形式魔性洗脑。过年回到家，结果因太久没回家，与爸妈没话说尴尬，爱宠也不认识了，七大姑八大姨还来催婚，被虐的体无完肤，这时救场神器&&快报来了，最后文字加图片表明了过年聊天尴不尴尬要有救场的料，就用有料的天天快报，点击解救自己进行下载。
案例7：新年不玩老一套，够胆进来浪一浪
品牌主：QQ游戏
长按扫描立即体验
亮点：敏捷小游戏，配以欢快活泼的背景音乐。横屏形式，载入完毕进入首页，点击&GO&即可开始游戏。冲浪企鹅不断向前冲浪，前进时点击通过点击跳跃按钮避开三姑六婆和熊孩子，路上还有红包，每个红包增加50m前进分数，最终以前进总数计算成绩。游戏结束可以选择&再玩一次&或&喊人去浪&。 游戏玩起来比较容易，能够吸引更多用户。
案例8：勇闯春运
品牌主：滴滴租车
长按扫描立即体验
亮点：案例主题为勇闯春运，画面风趣幽默。案例类似flappy bird游戏，通过不停的点击屏幕让车子不掉落到屏幕底端，同时还要躲避上下由各种乘客组成路障，最后会有300元的滴滴出行礼券赠送。
案例9：聚划算年货节
动画全景类
品牌主：聚划算
长按扫描立即体验
亮点：首屏点击敲门后，聚划算年货大街立刻出现在你的眼前，采用720度旋转手机或滑屏进行全景浏览。鲜亮色彩，卡通背景很有吸引力。用VR观看春晚，七大姑八大姨拿着买来的坚果在街边唠着闲嗑儿，呈现出浓厚出浓厚的年味。点击&点点我&看看有没有合心意的年货，有的话点击弹出框上的&GO&跳转到聚划算的网页上去剁手屯年货！
案例10：门神用RAP唱出年味新花样
品牌主：梦幻诛仙
长按扫描立即体验
亮点：说唱类,先以贴门神的方式进入，然后开始视频说唱，整个案例都十分的幽默有趣，在说唱的过程中将梦幻诛仙的游戏人物及玩法唱出来，魔性而又洗脑。结尾可以直接进入游戏体验。
案例11：放下手机，抓住幸福年味
图文展示类
品牌主：魅族
长按扫描立即体验
亮点：漫画风格，纯色背景，简洁大方。通过五个局部镜头画面来体现低头族视野的局限性，配有相应的文字。局部镜头和拖动镜头的设计展示全局画面的方式，在H5中是一种新型的展现方式，给人以新奇感，更吸引人，镜头拖动的设计也增强了用户体验。
案例12：年货街
图文展示类
品牌主：淘宝
长按扫描（复制链接需打开淘宝查看）
亮点：清明上河图风格，画面整体有种魔性美，内容丰富。进入页面后，画面会自动慢慢向下移动展示内容，背景是街上店家吆喝声，带入感十足。用户也可以上下滑动屏幕来查看。滑动完毕停留在某处时，会出现一个个小的闪动弹出层，简单介绍当前画面中的各店铺，用户点击店铺会有大的弹出层跳出，来详细介绍，最后可&关注&，也可以&进店逛逛&。
收获更多微信营销点子
请登录PC看每日更新最新H5案例
电脑端地址：
更多创意H5微信游戏制作案例
就去撩客服妹子吧
扫描或长按识别二维码添加客服微信
转载请注明 &型科科技
型科科技专业H5游戏开发公司
型科科技联系电话：400-840-6885
量身定制 ● 广州H5开发公司 ● 快速上线
微信营销热门文章
经典H5案例
标签：微信公众平台
为您推荐其他案例
H5创意推荐
进入H5页面后，首先选择角色性别，随后即可开始DIY睡姿，可选择：睡姿朝向、睡衣、表情、发型、卧室场景、以及其他的装饰。在“设计”完睡姿后，点击“保存”即可生成海报图片。
一款精致的装扮累小游戏。充分满足了用户的体验感。多样性选择，丰富了作品的内容，使用户能找到符合心中期望的睡姿，在此前装扮搭配类作品的基础上，增加了人物姿势的调整，更具趣味性。采用插画的形式展现，使得整体看起来简单，但体验起来却轻松愉悦。
扫一扫，试玩一下
扫一扫，立即咨询
400-840-6885获取-麦迪逊邦周报，知晓七日最热资讯
Powered by
Madisonboom.comH5两大门派七种玩法，高逼格这样玩！【H5案例精选合集】
扫描,分享朋友圈
作为去年独领风骚的当红炸子鸡，H5经过一年的摸（ge）爬（zhong）滚（de）打（se），不仅没有过气，反而新招百出，玩出逆天新高度。TOP君一路追踪，拎出最酷炫的两大派别七种玩法，给您嘚啵嘚啵。
来源：（微信号：TMarketing）
&作者：TOP君
已对原文进行编辑
一、手机场景模拟派
&首先登场的是手机场景模拟派。因为H5主要在移动端打开，所以涌现出了一大波“虚拟”手机功能的案例，企图以假乱真。具体玩法如下：
高逼格之手机场景模拟一：未接来电
早在两个月前，一个挑衅味十足的“这个陌生来电你敢接吗？”H5就曾让无数小伙伴大跌眼镜。江湖味十足的“伙计们，他在这儿”“见鬼”“恶战一触即发”和酷炫的全黑背景让人以为错进了复仇者联盟游戏界面，逼真的砸屏效果出来后，相信无数误打误撞进来的小伙伴都慌张的不知道点哪个按钮。可到了最后，尼玛，最后居然定格在“大众点评19.9元《复仇者联盟2》看电影，底下还有个风火轮一样旋转的“立即抢票”。
扫一扫，体验逼真砸屏
这种用未知来电开启画面将用户引入到与自己有关联的故事里，最后引出品牌广告的巧妙构思，从策划到画面设计到互动整个流程天衣无缝，TOP君只想大喊：谁做的，我给你跪了。
同一路数的，还有《爸爸去哪儿3》播出前夕推出的“一个神秘视频邀请，你敢接吗？”，这哥们玩儿得更狠，不只出特效，连视频都链接过来了。
高逼格之手机场景模拟二：朋友圈
说起微信朋友圈，相信各路看官都熟悉到骨子里，那可是每天刷个上百次，打发一切有聊无聊时间的地方。而戛纳电影节期间，脑洞大开的欧莱雅自己做了一个可以互动的朋友圈：进入需要进行微信登录，登录后，不仅可以透过欧莱雅的明星朋友圈看戛纳期间各路明星的动态，还可以点赞评论，十分逼真。纵然是见多识广的TOP君，当时都忍不住前去点了个赞。
高逼格之手机场景模拟三：微信整蛊红包
当你打开微信，看到这样一幅”香艳“的画面，第一反应是什么？拆开！
binggo，可是，啊哦，拆开后，钱没领到，手机裂屏了，估计你要大呼“尼玛”了。
然而，这还没完，居然可以分享给好友，呵呵，我看到了你脸上的坏笑。就这样，今年愚人节前未来应用推出的”微信整蛊红包“火出新节奏。
据“始作俑者”未来应用提供的数据显示，这个案例在上线的一段时间后获得了800万UV/日的效果而且裂变效果惊人，直逼得微信把它”和谐’掉了。
二、技术派
除了很心机婊地制造手机使用场景来抓住低头党们的眼球，之所以说今年H5玩得高逼格，还因为它的技术水准不知道提升了几个level。
技术逼格升级一：全景三维空间
杜蕾斯开美术馆了，你造吗？不是买了多大的地皮，而是用全景三维空间技术打造了一个网上美术馆。设计点线面及飘渺的音乐渲染出绝对的艺术感，随着手机滑动，一间间三维立体、构思精巧的房间进入视野，走在里面，感觉天花板缓缓移动，时光静静流走。
这个H5应用重力感应技术、动画技术和全景技术，不论是技术执行，还是手机适配，难度都不是一般的大。
扫一扫，逛不一样的美术馆
技术逼格升级二：GIF和cinemagragh &
”爱就一个字，我只说一次。“额，跑偏了，TOP君其实想说的是W公司今年用GIF为大众点评推出的“我们之间就一个字”。
&&&项目：&
是“金”字就要发光（还真得从黑色变成了金色）；不管走多远，都不能忘了本心（看到本字中间正在跳跃的心脏，TOP君忍不住摸了下右心房），欠嘛，就要挨揍（看到欠字两角不停的炮弹攻击，TOP君觉得还是要管住这张嘴）； 梦想就是希望之光在的地方（看到梦字中间不断闪烁的微光，有点小激动呢）；过子，就要经风雨（看到不断被风雨洗礼的日”字“，TOP君风中凌乱）......最后多个笔画小蝌蚪找妈妈般化成的”聚“字差点成功逼出TOP君的眼泪。不用看下面的长文案，就能从gif动图中了解每个字的真谛，这种玩法，当真玩出了新境界。
扫一扫，图解文字真谛
除了GIF，今年由 团队出品的cinemagragh&也应用进了H5。代表作是支付宝的”太误事报”。
这份报纸不仅内容不（ge）拘（zhong）一（qi）格（pa），更是使用cinemagraph将一维、静止的报纸变成了三维”鲜活“的动画，那大笑的情侣，不断穿梭的飞机，忽然出现的手指，让TOP君不觉想起哈利波特中会动的报纸。
扫一扫，阅读奇葩报纸
技术逼格升级三：双屏互动&
哐当当，把手机里的冰块倒到电脑上的杯子里，这个近乎玄幻的场景，就是今年动壹科技进行技术升级后运用双屏互动推出的新玩法。
扫一扫，体验玄幻的双屏互动
看到这个电脑和手机间的双屏互动，有些小伙伴开始吐槽了：自娱自乐，幼稚。别急，马上上两个人互动才能玩起来的——动壹科技为贵人鸟做的“发光吧兄弟”。看完打上感叹号的游戏规则后，就要邀请小伙伴通过扫码加入，一起奔跑，最后，两人合力，根据奔跑速度和里程赢得优惠券。这节奏，让TOP君瞬间有种组团打dota的感觉。
扫一扫，一起发光吧！
技术逼格升级四：重力感应&&&&
“你敢在办公室瘦吗？”这个挑衅夹杂诱惑的问题不知让多少小伙伴拿起手机，在办公室里跟着屏幕中的小人互动，从滑屏体验到整体运动体验；末了还邀请朋友加入，将自己手机里的“橙汁”倒给朋友，完成“瘦身接力”。
你敢瘦吗？扫一扫
这互动味十足的小游戏就是运用重力感应做出来的。这种技术去年还只是局部的滑屏体验，今年已经进步到整体运动体验，看似微小的变化，却给H5带来更多可能。
听TOP君嘚啵到这儿，相信深（lao）谋（jian）远（ju）虑（hua）的看官们都开始琢磨H5的新趋向了。为了填补看官们的脑洞，贴心的TOP君特别请教了多家神级H5公司。从“微信整蛊红包“中尝到甜头的未来应用主推流量放大和转化，而双屏互动玩儿得不错的动壹科技认为3D视频会成为H5展示手段，原生功能单一的APP将被H5；跳跳糖则用公式说话，H5+动画技术＋全景技术＋三维技术＋智能硬件＋移动支付＋大数据平台，打造H5体系；KAMA 大胆预言，H5会延伸到广告营销和用户生活的各种应用场景。
H5未来还会玩出什么新花样，TOP君和你一起，骑驴看账本，走着瞧。
扫描,分享朋友圈
|后参与评论
该用户邮箱不存在,请重试！
请输入密码！
资料更新成功！
还可以输入300字
您为什么要举报此信息？
请输入举报内容
关注微信，一起数字进行时
手机扫一扫，下载数英APP
手机扫一扫，下载数英APPH5速成5丨天猫一镜到底H5的制作攻略
&&好学，好用。
随着VR和H5两个概念在国内兴起，模拟VR效果的H5广告诞生了。这种H5以立体视觉的冲击力为特色，在手机端的体验近似于VR。实现上，主要利用移动端的陀螺仪制造重力感应的效果，但并不一定真的采用WebGL进行3D绘图。在移动H5广告领域，目前有三种设计方法：（1）一镜到底（2）720&全景聚焦（3）全景射击游戏接着以为创作工具，分析三种H5的交互实现，分三期。本期先介绍10月比较火的&一镜到底&&&1、解说华丽的天猫双十一一镜到底（one continuous shot）是现在影视界很爱用的玩法，镜头不cut、画面不切，一气呵成播到底。它常用于电影（如神作《鸟人》）、各种MV（如让人叹为观止的《I Won&t
Let You Down》），画面的连贯性非常有利于故事的讲述。最近引发业内热议的天猫《尽情尽兴，尽在双11》，就通过拉近镜头/拉远镜头来制造在立体空间中穿梭的视觉氛围。创作团队是VML，今年6月用720&全景重力感应的造物节H5引起一阵刷屏热潮。这个H5的交互实现关键是控制3D空间的观察点，但很多人不了解背后原理。如果是你要做一镜到底，应该怎么办？2、素材的准备VML历时1个月，通过策划、筹备、拍摄、图像设计、网页设计、页面开发等环节，最后做出的H5包含224张分层图片（创作细节可参考文章，By LaurentJiang；技术揭秘可参考文章）。这里为了让视觉上更具冲击力，我找了些GIF和线性图标进行演示。素材与来源标识如下：3、素材的导入点击左侧&全景容器&组件，在工作区域拖拽一片区域，就能创建容器。全景容器只支持全景背景组、全景图片和全景按钮。这里为初学者提个醒，iH5的工具栏组件比较多，可能需要用鼠标滚动条下滑才能找到第6栏的全景组件。然后把X、Y坐标都设为0，宽高和舞台保持一致。接着选中容器，把所有的素材拖到工作区，就能批量上传。4、原理的把握上传到全景容器的图片，都会变成全景图片，这时它的属性是下面这样的：中心点是一个虚拟的原点，只有位置，没有形态。中心距离表示距离中心点的距离，分正负值。如果给原点赋予一个形态，图片的中心距离为正时表示在原点前方；反过来，距离为负时它就在原点的后方。当你要在图片堆中穿梭，透过图层看到远近处的素材，需要注意什么？（1）&从远到近&的深刻含义上面这张图模拟出3D视觉空间，观察点是全景容器的属性，表示你所在位置。首先你会发现为了看到一定中心距离的图片，观察点需要进行调整&&A、当观察点为0时，我们在正中间，正面只看得到中心距离为正的图；B、当观察点越小时，我们和中心距离越大的图靠得越近。所以，从远到近在图片堆中穿梭的过程，其实只意味着观察点的减小。那么对于越远的素材，你就得把中心距离设置得越大。（2）&视野&的深刻含义我们眼睛所能看到的视野是一定的。从上面这张图你可以看到同样的金钱图片，在同样的视野范围内，要是离我们太近我们就看不到全貌了，而且不同图层之间也会互相遮挡。所以你需要注意两点：（1）控制中心距离大小，为不同的图层之间留出合适的间隙；（2）控制水平偏移、垂直偏移，让有的图靠左、有的靠右，避免遮挡到视线中部。5、参数的设置理解原理后，改参数这步就简单了。上面是全景容器的属性界面（中间参数太多被省略了一些），关键在于把&滑动焦距控制&设为YES；其中的最小焦距、最大焦距用于控制镜头最短、最长可以拉到什么程度，这里的焦距其实就是观察点。为了方便调整，堆砌素材最好是从最远的位置开始。你可以一开始就把全景容器的观察点设为0，然后把最远的那张图中心距离设为正值，调整到适合查看的距离x。这个x表示看到某一层素材的合适距离，可以作为后面层与层之间距离的重要依据。比如后续图片的中心距离分别设为0、-x、-2x&&以此类推即可。所以做每一层的时候，你需要先调整容器的观察点大小，然后分别调试每一组素材的中心距离、水平/垂直偏移（负值表示靠左/上，正值表示靠右/下）。效果如下&&最后的温馨提示：（1）全景图片有一个放缩比例的参数，支持多位小数，你可以用它来控制图片尺寸。（2）当你设置好两层素材的参数后，最好先预览一次，看看镜头拉伸的效果是否理想；如果不合适，就需要调整全景容器的焦距控制灵敏度，或者重新选择合适的观察点变化数值。全景的实现，是HTML5网页本来比较少用到的功能，但随着国内VR类广告的兴起，想必发挥空间还很多。P.S.：后两期再介绍全景聚焦、全景射击的交互实现。
打开微信“扫一扫”，将本文章分享到朋友圈
快给朋友分享吧！
52人已收藏
Ctrl+Enter
你的打赏就是我的动力！
悄悄说，听说打赏的人收入都比我高，不信你试试。
注: 打赏金额随意，完成后，请手动关闭本窗口。
Ctrl+Enter
您将要删除您的大作
H5速成5丨天猫一镜到底H5的制作攻略
在她入驻到UI中国的日子里
总共吸引了7060位设计师的驻足流连
总共收获了57位设计师的由衷赞赏
总共获得了52位设计师的悉心珍藏
总共引起了0位设计师的深入讨论
依然要删除吗？}