福利 | 天气转凉，送你一个暖男型男朋友...

2018-11-03 H5案例

今日霜降，即将进入寒冬模式

双十一购物车里有没有暖宝宝这一项

冬天这么冷总得备着呀

毕竟你还是只单身汪~

哈哈哈~

实在不行也可以找身边的暖男暖女

找他们温暖一下，熬过这个冬天

当然了暖不暖还得先测试一下

今天以测试你是哪种暖男

开始今天的H5案例分析

还有测试你适合哪种暖男哦~

京东x奥克斯空调：天气渐凉，街上擦肩而过的，都是哪种暖男？

创意分析：

创意定位，天气渐凉，这支H5将“暖男”与物理上的“暖”相结合，推广品牌商品。男女生分角度分析，男生的角度是你是什么类型的暖男，女生是你适合什么类型的暖男。通过代入感的答题方式，结果生成适合你的品牌产品，还是很贴心的。

技术分析：

策划上，通过答题+长图的方式，测试“你是什么类型的暖男”或者“你适合什么类型的暖男”。①进入H5之后，先选择男女，男性选择“测测你是哪款暖男”，女性可以选择“测测你适合哪款暖男”。②选择之后，进入答题测试页面。整个答题页面是一张长图，长图的主要内容是街道及两边景色。③根据用户选择的性别，会有一个相应的人物形象走在街道上，没走到一个场景，会有与该场景相关的问题弹出。④用户答完所有问题后，出现测试结果。根据测试结果，H5会为用户推荐相关的奥克斯空调机型。用户长按可以保存测试结果页面，也可以分享给朋友或者直接进入购买页面。

视觉分析：

色调上以暖色调为主，对应主题。设计上，长图采用卡通手绘风格，十分有质感。人物沿着街道出现问题，对应问题的卡通人物图片也与问题相呼应。答题测试型H5，问题都是比较新颖。

网易考拉X我就是演员：

5道题揭秘你的真实职场人格

创意分析：

由热播综艺引出测试主题——职场人格测试，通过面试中可能遇到问题测试用户的职场人格，并且用出品公司作为测试题的面试情景，以此达到宣传目的。角色分为男生和女生，相同的场景测试，每一个问题都细节化，最后生成的性格分析描述的还是很详细的。

技术分析：

与实景视频结合的情景答题形式，整个答题过程中题目是连贯的，按照一个面试的过程来植入测试题，这道题选择完毕后便会继续播放视频内容，直至下一题。视频答题交互的方式，很有代入感，最后生成的性格海报加上品牌活动的优惠券，还是很吸引人的。

视觉分析：

简约的性冷淡风格，灰色为主色调，整个页面非常高级且正式。整体的形式很棒，测试题是一个连贯的情景，代入感很强，页面的设计和视频部分的画质都很好，使整个作品显得很高级。

自如：自如生活节，约你花式发光

创意分析：

策划上，以“反转人生”为出发点，如果，你可以拥有你想拥有的东西，或者生活方式，当你真的拥有了，是否如你想的那么美好嘛。在这支H5中，做了6种如果，如果你想拥有茂密的头发，如果你想整体无所事事，如果你想过上天天数钱的日子，如果你想成为一名有格调的艺术家，如果你可以去骑行看看外面的世界，如果你可以不问世事隐居室外，最后给出与其幻想未来，寻找自己的发光点。结尾给出6个人物角色，点击人物以后，生成一张人物的海报。

技术分析：

设计上，扁平颗粒度风格，插画人物和景物。技术上，pixi进行景物和人物的绘制，配合Tween.js实现动画效果。

视觉分析：

色调上颜色比较丰富，手绘动漫风格，整个滑动动漫剧情效果还是很逗趣的。体验上，锁屏横屏观看，不断向右侧滑动浏览更多内容。案例整体节奏不错。

天猫：我在这里遇见了十年后的自己

创意分析：

由一辆时光列车为由头，带着用户前往4个明星的时光空间，并由明星的时光空间引出一个问题，用户需要回答问题结束旅程抵达未来，在终点站会有关于十年后你的描述。

技术分析：

由时光列车串联了4个明星的时光空间，在那里明星会说一件自己十年来坚持的事情，之后便由此向用户提出一个问题，增加用户的带入感。在用户穿梭完毕所有的时光空间后，便将抵达十年后的终点站，在终点站，H5根据用户的答题结果，会给用户匹配一段对用户十年后的描述，用户可以保存分享。3D车厢、3D的时光空间，整各时光之旅的真实性很高，代入感也很强。列车行进的过程中，窗外的景色和光影效果都做的十分精致。