网易云音乐:你的性格主导色
案例演示,请长按/扫描以下二维码 ->
识别图中二维码
完整欣赏此案例大约需要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-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~
微信扫一扫
关注该公众号