OPPO:OPPO社区感恩节晚宴

2020-12-03 H5案例分享 H5案例分享
OPPO:OPPO社区感恩节晚宴


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

识别图中二维码

OPPO社区感恩节晚宴-查阅二维码

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


案例:OPPO社区感恩节晚宴

品牌:OPPO

技术实现: HTML5

亮点:

1.创意定位

OPPO社区2020年感恩节创意H5作品。以“OPPO社区感恩节晚宴”为主题,通过让用户交互点选生成一道“菜”,吸引用户将生成的图发到社区,有机会获得OPPO相关奖品。

 

 

2.策划逻辑

 

① Loading部分:正在切菜...各种食材迅速飘过。

 

② 主题页:进入主题页前,有一个OPPO宠物过场动效,然后弹出“一封信”:亲爱的O粉:很开心你选择入住OPPO社区,为表达心中的感谢,小O特别策划了感恩盛宴,诚邀你来参加。DIY你的感恩节大餐,和大家一起分享美食吧! 点击“下一步”按钮,进入菜品选择页。页面底部设置排行榜,点击后弹出排行榜页面。

 

③ 排行榜页面:分两个页卡,我的菜品和排行榜。我的菜品显示当前用户定制的菜品列表。排行榜显示比较热门的菜品排行。

 

④ 菜品选择页:8种菜品,可以通过点选菜品牌子选择,也可以通过左右箭头,左右调整选中的菜品。然后点击“下一步”,进入“选择buff加成”页面。

 

⑤ 选择buff加成:OPPO的四款产品-手机、耳机、手表、电视,点击四选一,选中后有高亮提醒,当然也可以点击“本次不用”跳过,也可以点击“下一步”进入佐料添加页面。

 

⑥ 佐料添加:加入食材和选择口味页卡,有多重食材和口味,点选后,页面上部的锅里会有局部动画,点击“下一步”,进入出锅页面,点击“出锅”,进入餐具选择页,餐具选完,点击“下一步”进入署名页。

 

⑦ 署名页:署名打包,调起键盘输入用户昵称,点击“确认”后,进入到最后的海报落地页。

 

⑧ 海报页:亲手DIY出来的一道大菜,有产品名称,口味特点,大菜图片,还有用户的头像和H5回流二维码。

 

3.设计交互

整体以暖色为主,烘托晚宴气氛,各步骤中,植入品牌元素和品牌产品。交互方式多样,有点击,键盘输入,长按保存。

 

4.用户体验

菜品道道诱人,虽然步骤稍多,但好饭不怕晚,做一道色香味俱全的菜品,就得“消耗”一定的时间,掌握一定的火候。好啦,小五去线下找家狮子头店,赶紧满足一下。





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

标签

分享:
海报
案列链接
下载截图
收藏案例
已收藏
分享到微信朋友圈
打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。

相关推荐:

OPPO:OPPO Reno3 Pro 5G体验官招募

OPPO:OPPO Reno造乐节

关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

对汉语支持不错,别对小五说英文

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~