天猫:奇妙的闺蜜化学反应!

2018-05-16 11:20:00
admin
原创
201
天猫:奇妙的闺蜜化学反应!


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

识别图中二维码

奇妙的闺蜜化学反应!-查阅二维码

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


案例:奇妙的闺蜜化学反应!

出品:天猫

亮点:

  1. 策划上,视频类+测试类,这是5月20日天猫闺蜜节的宣传H5。第一部分为一段视频,介绍了H和O、Li和C、以及Na和Cl这三种元素性格组合的闺蜜,性格迥异,看似没有交集,确是最懂彼此的那个,最后引出话题“你是哪种元素性格的girl”;第二部分包含5个测试问题,内容涉及闺蜜之间观点、交流等方面,测试题回答后,则生成用户的测试报告,显示用户的性格特点,所属化学元素,此页面获取用户的微信头像,引导用户长按保存图片、分享、或者查看天猫闺蜜节的活动信息。
  2. 设计上,使用手绘漫画风格,颜色鲜艳明快、人物刻画生动;将不同闺蜜的不同特点比做不同化学元素,洞察精准,创意突出。
  3. 交互上,交互方式:点击页面+长按保存。
  4. 体验上,这个H5的创意点在于将人物性格比作不同的化学元素,闺蜜之间对应的化学元素可以相互反应,最终的组合结果是稳定的,天猫上了一堂文科生都愿意听的化学课。



技术实现: jQuery+video