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-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~
微信扫一扫
关注该公众号