她到底几个意思

案例分析链接：https://migmkt.qq.com/act/2018qqfanyi.html

完整欣赏此案例大约需要1分50秒

案例：她到底几个意思

出品：腾讯翻译君

亮点：

1、创意定位：

采用第一视角真人拍摄+互动测试，将时下H5最为流行的两种方式融合在一起。选取网络热议话题“直男求生欲”为切入点，击中“与我有关”的网友心理。并选取情侣间因为英文而造成窘况，将腾讯翻译君AR翻译功能结合在剧情之中，同时加入能让用户亲自操作的交互环节，在强代入感的剧情设计和趣味互动中软性植入产品功能，也向受众传递对待爱情要走心，更要智商在线的概念。

2、策划：

抛弃常规百分比进度条的loading页，设计为弹幕式女生“潜台词”，让用户一打开H5就快速get主题。故事内容发生在“男朋友”第一视角下，洞察情侣在生活中的细节，选取四个日常小事件，让用户自主点击选择下一步的剧情，根据不同的选择向用户展现不同结果的剧情。在最后一个中设计英文相关的情节，植入翻译君“AR翻译，即扫即懂”功能的露出。H5结束之后，用户通过自己在过程中的选择，可以检验自己的“直男程度”及英语水平，并得到如“注孤生优秀代表”、“大神级偷心Boy”等标签的测试结果。

3、设计：

视频部分，选取柔和、自然的色调，加上男女主角简单舒适的造型，配合视频的居家主体。在互动环节部分，弹窗、按键清晰明了，并根据文案配以相应的图案元素，增加画面完整性。最后在测试结果页部分，以手绘漫画形式展现情侣相处的不同场景，用色清新柔和，与视频整体画风保持一致，用荒诞感的人物动作增强画面的趣味性。

4、体验：

加载速度快，操作简单流畅，产品软性植入方式也不会让人反感，整体趣味性较强符合年轻受众的喜好，但节奏上可以适当地加快。

技术实现： jQuery + annieJs

以上为“H5案例分享”团队原创文章，转载请注明出处！