网易云音乐:你的性格主导色

2021-05-26 H5案例分享 H5案例分享
网易云音乐:你的性格主导色


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

识别图中二维码

你的性格主导色-查阅二维码

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


案例:你的性格主导色

品牌:网易云音乐

技术实现: HTML5

亮点:

1.创意定位

网易云音乐品牌营销H5案例,以“你的性格主导色”为主题,根据美国心理学家Tom Maddron的著作《最准确的性格色彩测量工具》为基础,让用户回答8道题,得出正向的性格色彩海报,引发用户晒圈,为品牌带来曝光和影响。

 

2.策划逻辑

① Loading → ② 主题页 → ③ 答题8道 → ④ 输入姓名 → ⑤ 过渡文案分析 → ⑥ 生成海报。

 

① Loading页 :旋转而出的加载进度百分比,完成后需要点击“进入”,来到主题页;

 

② 主题页:露出品牌和活动主题“测一测属于你的主导色”,以及该测试的理论依据: 根据美国心理学家Tom Maddron的著作《最准确的性格色彩测量工具》得出结论。点击“点击开始”按钮,进入答题环节。

 

③ 答题环节:共8题,每题场景不同,基本为听声音,选感受。除第8题有两个选项外,其余每题有3个选项。每个场景有不同的细节动效和交互动效。

 

第1题:(下雨场景,有雨声) 这个声音,让你联想到?

A:舒适惬意的蜗居;B:被延误的约会;C:鞋子湿掉的难受。

 

第2题:(火花场景,有火苗声)这个声音,让你联想到?

A:香喷喷的烤肉;B:温馨的篝火;C:危险的电火花。

 

第3题:(开门场景,有开门的声音)这个声音,让你联想到?

A:门后藏着凶手;B:酒吧有陌生人进来;C:等待的人终于回家了。

 

第4题:(鲸鱼场景,有鲸鱼的叫声)鲸鱼为什么会发出这个叫声?

A:向同伴求救;B:和朋友聊天;C:鲸鱼饿了。

 

第5题:(音乐场景,有音乐响起)这个声音会出现在?

A:云层中;B:梦境里;C:灵魂中。

 

第6题:(海风场景,有风吹过的声音)这个声音给你的感受是?

A:惬意的海边;B:时光飞逝;C:台风要来了。

 

第7题:(键盘场景,有快速敲击机械键盘的声音)这个声音给你的感受是?

A:突然有了灵感;B:情绪激动的骂人;C:觉得声音好大,打扰到我了。

 

第8题:(音乐场景,一段旋律响起)这段旋律浪漫还是悲伤?

A:浪漫;B:悲伤。

 

④ 输入姓名:答题完毕,用户需要调起键盘输入姓名,然后点击:生成结果。

 

⑤ 过渡文案分析:根据用户之前环节的选项和输入的姓名,开始出现对你性格主导色的分析,关键词、颜色、人格占比、符合气质的歌曲等,文案逐行显现,给人一种大数据运算的感觉。

 

⑥ 海报生成:将分析结果生成性格主导色海报,包括:主导色关键词,被人喜欢的占比数据分析,性格特质关键词,在别人眼中是什么颜色,本质上你是什么颜色,这些颜色会被你吸引,这些颜色请保持距离,以及品牌的露出和测试基于的理论。海报底色随着性格颜色而变,背景有轻微欢动细节。

 

3.设计交互

采用听声音测试感受的玩法,跟网易云音乐的主业务形成强相关性。整体UI风格简洁有细节,动效有创意但不突兀,交互方式多样但不难,让用户在沉浸中,去听,去选,去了解未知的自己。

 

4.体验上

按自己的直觉去选,测出的性格还是蛮准的。

 

多测了几次后,发现不同题目的不同选项,对应的性格颜色是不同的。用小五粗浅的数学知识推导,理论上应该有3^7×2 = 4374种结果,即使实际结果没那么多,那也不太容易穷举。网易每次刷屏的案例,看似简单,实则很有深度。

 

上午保存的海报还带回流二维码,下午就已经只能去网易云音乐里搜“颜色”才能浏览。突然想到前不久美国限制卖芯片给华为,逼着中国自己造芯片,限制从另一个角度看,是帮助对方在成长。

 

如果微信中打不开此H5,可以从“网易云音乐”APP首页的Banner图进入,或者搜“颜色”进行访问。





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

标签

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

相关推荐:

网易云音乐 + 梦幻西游手游:把5年做成一张专辑

网易云音乐:遇见时光里的自己

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~