天猫：奇妙的闺蜜化学反应！

2018-05-15 H5案例分享 H5案例分享

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

识别图中二维码

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

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

案例：奇妙的闺蜜化学反应！

出品：天猫

亮点：

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

技术实现： jQuery+video

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

标签