手机人民网 + 腾讯看点：做一碗温暖的面

2020-03-21 H5案例分享 H5案例分享

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

识别图中二维码

做一碗温暖的面-查阅二维码

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

案例：做一碗温暖的面

品牌：手机人民网 + 腾讯看点

技术实现： phaser.js

亮点：

1、创意定位

手机人民网和腾讯看点为武汉加油的H5，以热干面寓意武汉，以做热干面的操作和做热干面的碗数，代表大家对武汉的祝福。

2、策划上

① 热干面做法游戏形式呈现

主KV页以“这碗面，我也做”按钮开始，而后是制作热干面操作提示，提示用户手指左右划动，速度越快，碗数越多，点击“开始”按钮；一共10秒钟，提示用户在这个时间段内一共做出的碗数；可以“重新挑战”，也可以点击“出锅”按钮；

② 长图

点击“出锅”后，是一个纵向长图，提示用户做的几碗面，在这个祝福游戏中，冠亚季三名分别作了多少碗，还有其他用户做的碗数，最后是一张自己做的碗数海报，长图的最后一屏的左下角还要“切换背景”按钮，切换保存的海报背景（一共有5个背景哦~）。

3、设计上

手绘唯美插画，配色美食热干面的绘制，一看就想到了武汉，画面中还配有樱花，都是武汉的特色。

4、体验上

用美食寓意一个地方，通过制作地方美食，寓情于物，手法很棒~

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

标签