H5案例分析：腾讯、网易、DR、蘑菇街的H5怎么做到这么有趣的？

最近票圈又流行起来一波H5

第一眼看起来真是的

很魔性啊

小编随便搜罗了几支

给你们感受一下

魔（zhēn）性（shì ）之（yǒu）风（qù）

/ 腾讯动漫：薛之谦弃文从医首谈恋爱观！ /

创意分析

这是腾讯动漫打造的一款自我宣传的H5，邀请人气明星薛之谦合力打造，自身就带有流量，能够迅速得到传播。同时，这支H5本身创意很好，薛之谦开了一家诊所，为前来参与的用户诊断四个方面的爱情问题，每个问题都有一个视频，视频中薛之谦为用户提供了解决爱情病症的方法。延续薛之谦搞笑“神经病”的一贯风格。

技术分析

技术上主要是以视频为主，但是设计了很多可以与薛之谦进行互动的情节，增强用户的参与感，交互插件简单但是有趣。

视觉分析

视觉上整体以粉红色为主加以紫色配色，非常符合恋爱主题，浪漫温馨；薛之谦本人带给用户的视觉体验相信已经是很大的享受了。

/ Darry Ring ：真爱使命！ /

创意分析

这是DR钻戒为自我宣传策划的一支H5。讲述了唯一镖局受人所托，护送由一个受伤男人临终前交付的一只宝箱历经坎坷送到DR的故事。H5采用漫画人物和freestyle讲述故事的形式，创意十足。

技术分析

整支H5主要是以视频来实现的，画面内容生动有趣，音频内容是当下流行的freestyle风格！

视觉分析

设计上采用的是漫画的风格，故事性很强，但是情节又设置的比较完整，给人以视觉享受。同时镖局设定为“唯一镖局”，freestyle的音频诠释了“男人一生只为一人戴，男人一生只给一人买”的经典广告语，一定戳中了一大批少女的心吧！

/网易新闻：一看就不是什么正经猫！ /

创意分析

这支H5是网易新闻出品，将几乎人人都熟悉的俄罗斯方块游戏加以创意改变，原本方方正正的方块变成了形状怪异的猫猫，很有趣味性。并且H5中增加了红包插件和网页跳转，起到宣传目的！

技术分析

这个就属于需要技术开发的定制H5了，主要利用到的是 Pixi.js + jQuery技术，编程开发后还可以对“方块”进行换皮肤。人人秀也有专门的定制服务。

视觉分析

“方块猫”的风格属于黑白简笔画的风格，幽默有趣，看着这些歪歪扭扭的猫猫，感觉很魔性啊，根本没有办法认真玩游戏，看来大宝输还是有道理的！

/蘑菇街:后羿射日的真相都在这儿啦！ /

创意分析

这支H5你不看到最后都猜不出这是谁家出品的，没有盲目插广告植入其实还是很好的。其实这是蘑菇街出品的H5。故事人物采用家喻户晓的后羿和嫦娥，故事情节改编自“后羿射日”，虽然搞笑无厘头，但是创意满满啊。

技术分析

序列帧动画搭配视频，整支H5就是前部分的动画，后面是点击视频的按钮，点击过后呈现的就是视频内容。这样的技术直接利用人人秀模板就可以实现。

视觉分析

动画呈现的形式加上略带夸张的漫画人物，生动有趣；视频内容夸张搞笑，故事情节与常情反转，音频描述生动解释画面，连贯完整，最后才出现出品方广告，视觉体验效果增强。

/Burberry 博柏利：精灵信使传递七夕告白 /

创意分析

这支H5，以音频展示为表达方式，首先呈现出一座多彩的气球做成七夕鹊桥，引导语淡入画面，交互点击开始体验，小彩气泡慢慢放大散开，铺满屏幕，并且可以点击，每个气泡对应一个明星的七夕祝福语音，随便选中一个点击就可收听。另外，用户也可以自己选择精灵信使，录制自己的七夕祝福语音，可以转发给要表白的TA。

技术实现

这支H5运用了逐帧动画、音频等技术实现的。关于七夕节日类h5的表现方式在人人秀平台里能找到多种不同版本。

视觉分析

视觉设计上采用白色背景，气泡在这样的背景下显得干净、灵动，丰富。实物拍摄的精灵信使，一个个晃动着身体，赋予了它可爱的性格，像是个会传递爱的呼唤有灵性的小天使。另外玩家可以制作自己的音频和明星们一起，有很强的参与感。