H5解析｜“薛之谦的恋爱诊所”这样爆款级的案例是如何炼成的？

现在的H5，真是一点也不矜持，现象级说来就来！今天就给来大家介绍近期这个几个爆款级案例。一起来深入研究一下它们有哪些技术点的应用。

案例简介：

1、俄罗斯方块大家一定玩过，但你可能没玩过这么不正经的。

2、薛之谦这次不耍贱，开了个诊所来一本正经的帮你解决你的恋爱问题。

3、七夕就剩几天了，你的表白准备了好吗？这个H5有你的爱豆给你的表白信，还有精灵信使帮你传递七夕告白。

案例目录：

▶俄罗斯方块游戏H5：恕我直言，一看就不是什么正经猫

▶交互式H5：污力薛之谦的二次元恋爱诊所

▶录制音频类H5：精灵信使帮你传递七夕告白

1

案例：恕我直言，一看就不是什么正经猫

品牌方：网易新闻

这款h5以俄罗斯方块游戏展开，用不同体态的猫来代替俄罗斯方块。添加了一些搞笑有趣的猫元素在其中，使整个H5画风变的诙谐起来。点击这里立即体验案

案例以黑白简笔画风呈现，背景音乐也是十分魔性洗脑。首页页面由div+css3构成；动态效果为css3代码实现；猫咪扭动则是由4个帧图切换实现；下方的START按钮是PNG图片。

开始游戏后，俄罗斯方块以猫的体态出现。游戏界面为代码canvas实现；先画出背景图片，然后把游戏格子按钮画好。再由代码生成的方块对象（不同体态的猫咪）展现出，每个对象（不同体态的猫咪）由四小方块组成，再由代码判断填满一行则消掉一行。游戏逻辑和按钮事件都由代码实现。

游戏结束后，结果页会显示成功或失败，界面还弹出旋转嘲讽字眼，和鄙视眼神的不正经猫。文字旋转为css3实现动态效果，界面背景和鄙视眼神猫则均为PNG图片，最后用户可以点击“再玩一次”继续受虐，或者点击跳转查看“猫病毒报告”，按钮的位移效果则为代码实现出。然后在按钮上加上a标签，即可点击跳转到指定网页。

这个俄罗斯方块H5是不是很有趣，小编在玩了好几次都失败，记得以前玩俄罗斯方块不是这样的，所以愈发怒玩到成功为止。小编在体验玩后还一直被babababa背景音乐洗脑了。接下来在来看看这个更加魔性的案例，你有什么感情纠结问题玩这个H5就能解决。

☟☟☟

2

案例：薛之谦的恋爱诊所

品牌方：腾讯动漫

交互式视频类H5案例，充满爱的粉嫩日系风格的薛之谦恋爱诊所，用户可以通过选项与薛之谦互动，并向薛之谦按选项提问所要问的问题，而薛之谦会帮你解决一切恋爱问题。点击这里立即体验案

视频中，首先二次元画风镜头切入，开始后以，“叫醒薛之谦”，3种方式都有薛神医的不同反应。秉持了薛之谦一惯无厘头风格；而正确打开后，会出现四个恋爱问题，每一个恋爱问题，薛之谦都有对应的处方。

整个案例都由MP4视频播放；视频中的二次元动画图都为视频后期特效制作，再将按钮添加到视频上，而视频播放片段会根据用户选择的选项答案再跳转到指定场景在继续播放。

案例主要以粉色色调为主。加上薛之谦贱贱的表演，和带有声音的对话，使整个H5场景感十足。真人拍摄视频加交互动作；MP4 视频播放。

用户通过点击按钮，跳转到对应视频的关键帧。（注：Android只有在QQ域名上才能加上按钮、元素及其他事件。具体如何实现请在再下方找我们资深客服妹纸解答吧）最后薛之谦会根据用户的回答递出相应爱情症状的诊断书。频播放十分流畅，娱乐性也很强。尾页诊断书背景由css3+帧图实现，按钮为PNG图片。

现在恋爱问题解决了，那就趁七夕赶紧去表白，这里有个神奇帮助你。

☟☟☟

3

案例：精灵信使传递七夕告白

品牌方：博柏利

录制音频类案例，由Burberry精灵化身为爱的信使，用户可以随便倾听架起一座七夕鹊桥，这独特的鹊桥由用户和明星的告白气球组成，以“录制七夕告白”为主要方式让用户去自主选择是否录制。然后选择是否公开与鹊桥中。点击这里立即体验案

进入后，用户点击按钮“开始体验”，这时小彩球逐渐放大，充满整个屏幕。所有的彩色气球都是可点击，而播放的语音是对应人给到的七夕祝福录音，点击气球就能收听到爱豆语音内容。背景是白色PNG图片，用彩色的气球和精灵信使突出H5的整个色彩。

气球语音播放则是由SDK接口实现的录音与播放功能。H5录音的按钮由PNG图片组成，播放的录音跳动为GIF图。

用户也可以选择一个精灵信使，然后录制自己的声音，可自己私密或者公开上。精灵信使为GIF动画，点击跳转的按钮为PNG图片。

在H5广告大行其道的今天，各种H5案例更加层出不穷，每个都各具特色，希望今天小编解析案例上的技术实现和策划上的亮点，都能够帮助各位大大在做H5策划的时候有明确思路。