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

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

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

技术实现：vuejs

亮点：

1、创意定位

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

2、策划上

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

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

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

3、设计上

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

4、体验上

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

【案例截屏】

请长按/扫描以下二维码

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

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