小米有品 X 网易哒哒:原来你还有不为人知的这一面…

2020-05-09 H5案例分享 H5案例分享
小米有品 X 网易哒哒:原来你还有不为人知的这一面…


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

识别图中二维码

原来你还有不为人知的这一面…-查阅二维码

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


案例:原来你还有不为人知的这一面…

品牌:小米有品 X 网易哒哒

技术实现: vuejs

亮点:

1、创意定位

小米有品和网易哒哒为有品APP内“515有品”活动的宣传H5,清单生成类H5。通过观察生活/社交行为上的变化,吸引大家晒出自己get的新技能,并通过简单的交互为自己的新技能评级,由新技能折射出有品生活的不同面,生成我的多面生活清单。

 

2、策划上

① 首屏展示大标题“原来你还有不为人知的这一面…”,提示向左翻动,解锁你的隐藏新技能;

② 进入技能列表页,一共60个技能,并不像以往飘动不断滑入,也不是一下可以看到全部技能,这60个技能分别在4个面中,四个面通过颜色区分,分别为蓝色、粉色、黄色、紫色,每个面15个技能,通过纵向滑动,查看当面中的全部技能,点击选择星星数量,为技能评定熟练程度(为get的技能可跳过);点选后屏幕左上角显示已选择的隐藏新技能数量;点击右下角的“换一面”按钮切换面;点击“确定”按钮,输入你的名字,生成清单技能海报;

③ 生成的技能清单海报中,有输入的名字,有品新生活已解锁了面数,下面以小图标形式列表呈现,还有对应的技能评定熟练程度;技能清单海报可以长按保存图片。

 

3、设计上

扁平风格,大背景为万能灰,配合饱和度适中的纯色条;图标采用六边形,看似立体的形状,配合卡通人物和实物。

 

4、体验上

有品新生活的主题和有品品牌默契度很高;内容策划生活的每一面都有品,又与形式上的60个技能分四面有默契;点选生成技能海报,虽然有很多形式,但是每次玩技能的角度是不同的,每次玩都有新鲜感,乐意查看和展示(或者说是炫耀)自己的技能。

 





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

标签

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

相关推荐:

网易新闻 | 哒哒+东南卫视:请查收你的2020好事发生目录

网易新闻 | 哒哒 x 快手:生成你的漫画人设

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~