小米有品 X 网易哒哒:原来你还有不为人知的这一面…
案例演示,请长按/扫描以下二维码 ->
识别图中二维码
完整欣赏此案例大约需要1分30秒
案例:原来你还有不为人知的这一面…
品牌:小米有品 X 网易哒哒
技术实现: vuejs
亮点:
1、创意定位
小米有品和网易哒哒为有品APP内“515有品”活动的宣传H5,清单生成类H5。通过观察生活/社交行为上的变化,吸引大家晒出自己get的新技能,并通过简单的交互为自己的新技能评级,由新技能折射出有品生活的不同面,生成我的多面生活清单。
2、策划上
① 首屏展示大标题“原来你还有不为人知的这一面…”,提示向左翻动,解锁你的隐藏新技能;
② 进入技能列表页,一共60个技能,并不像以往飘动不断滑入,也不是一下可以看到全部技能,这60个技能分别在4个面中,四个面通过颜色区分,分别为蓝色、粉色、黄色、紫色,每个面15个技能,通过纵向滑动,查看当面中的全部技能,点击选择星星数量,为技能评定熟练程度(为get的技能可跳过);点选后屏幕左上角显示已选择的隐藏新技能数量;点击右下角的“换一面”按钮切换面;点击“确定”按钮,输入你的名字,生成清单技能海报;
③ 生成的技能清单海报中,有输入的名字,有品新生活已解锁了面数,下面以小图标形式列表呈现,还有对应的技能评定熟练程度;技能清单海报可以长按保存图片。
3、设计上
扁平风格,大背景为万能灰,配合饱和度适中的纯色条;图标采用六边形,看似立体的形状,配合卡通人物和实物。
4、体验上
有品新生活的主题和有品品牌默契度很高;内容策划生活的每一面都有品,又与形式上的60个技能分四面有默契;点选生成技能海报,虽然有很多形式,但是每次玩技能的角度是不同的,每次玩都有新鲜感,乐意查看和展示(或者说是炫耀)自己的技能。
标签
关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~
微信扫一扫
关注该公众号