在h5非常火爆的今天，各个大牌企业也开始涉足这款领域为自己的新品做宣传，今天蓝橙互动小编就给大家介绍两款腾讯的h5案例，让我们一起从大公司的h5中吸引经验吧！

案例：你，找到方向了么？

出品：腾讯游戏

技术实现：EaselJS+PreloadJS+TweenJS+VelocityJS+Zepto+Video

亮点：

1.创意定位，腾讯游戏为旗下“首款战争策略手游——乱世王者”做的线上传播，以“你，找到方向了么？”为主题，让用户参与测试问答，根据对有关“方向”的几道问题，得出用户未来方向的关键词，生成海报，进行传播。

2.策划上，采用“活字迷宫”特效引导用户参与答题测试，生成结果。主要分四部分：① 引导文案：活字迷宫中每一个字都是你的一段故事；② 选择入口，分两个：整齐的九宫格、散乱的七个格；③ 答题部分，3-5道题，每做完选项，都为出现一个关键词，用特效翻转雕刻字的形式，每到题目间，有第一视角人物移动和寻找的过程作为过场动画；④ 结果页，答完题后有炫酷过场动画生成结果页。结果页分成两部分，上半部分是：可以长按保存的一张海报，包含用户答题所得关键词、未来方向的关键词，以及文案、二维码及品牌Logo。下半部分是：杨幂代言海报和官方游戏宣传海报的轮播，以及最重要的“游戏下载”的按钮，可以直接跳转到游戏下载页面。

3.设计上，主背为黑色，主色为金色，视觉对比突出。人物在活字迷宫中奔跑以及答题完成后的文字翻转特效，均运用视频特效，炫酷而不夸张。

4.体验上，每一道题的每一个选项对应的关键词，对于用户来说，好像都是正能量的词，最后的海报，给人以力量。不禁遐想，这个游戏有这么大的能量么，下载一个试试去。

案例二：你的2018下半年安排

出品：腾讯微视

技术实现： jQuery+Swiper

亮点：

1.创意定位，通过火人节活动，让用户参与抽卡生成“2018下半年安排”关键词海报，形成品牌传播和产品引流。

2.策划上，大致分三步：① 开场文字引导+用户输入姓名；② 卡牌选择页面，点击按钮“开始预知”，特效后，进入结果海报页；③ 结果海报页，包含火人节插画、用户抽中的2018下半年的关键词及一段解释话术。页面底部有“重新测试”和“点击保存”两个按钮，两个按钮中间，有跳转到“腾讯微视”火人节活动主页。

3.交互上，用户需要调起键盘输入姓名，点击按钮抽卡，一般会多次抽取。随机结果大概20种左右。

4.体验上，标题乍一看吓一跳，是不是老板发来下半年工作计划了；进入后发现，原来是抽签测试的，当抽中“老鹿乱撞”时，感觉就是胡扯~ 看微视的不应该都是95后，小鲜肉么？策划大妈估计那天忘吃药了。

今天的h5案例分享就到这里，想要了解更多爆款h5欢迎访问我们的网站——蓝橙互动。