网易文创 + 一汽大众：社交安全距离大作战

2022-02-08 H5案例分享 H5案例分享

案例演示，请长按/扫描以下二维码 ->

识别图中二维码

社交安全距离大作战-查阅二维码

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

案例：社交安全距离大作战

品牌：网易文创 + 一汽大众

技术实现： jquery +Vue.js + html2canvas

亮点：

1、创意定位

一汽大众揽境Talagon汽车宣传H5，展示汽车的特点，空间大（可以7人乘坐）的特点。

2、策划上

① 3道测试题，最后生成海报；

② 3道问题，和谁一汽自驾游（3个选项）；你不想带走的人选（8个选项中选2个）；拖动人进座位；

③ 根据选项生成海报，给出社交人设和具体数值；

④ 问题设置偏向人情味，以自驾游出行为切入点，问题涉及到人直接的关系，发小、同学、朋友、亲戚等；虽然没有直接介绍汽车特点，但是问题又涉及了汽车特点，算软植入。

3、设计上

扁平风格，卡通风格，配合多角度揽境真实汽车图；用户对真实汽车图的印象更深。

4、交互上

不同于以往测试类H5，一般用户点击，自动进入下一个问题；这支H5，问题的出现和选项的排版都不同常规；还引入多选；第三个问题还使用的选项拖拽；总体感觉就是交互不单调；如何让用户不中途离开，或者减少看了就忘；多在交互和细节动画上入手，很必要。

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

标签