蒂芙尼 tiffany:520 · 爱之旅

2018-05-21 11:10:00
admin
原创
195
蒂芙尼 tiffany:520 · 爱之旅


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

识别图中二维码

520 · 爱之旅-查阅二维码

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


案例:520 · 爱之旅

出品:蒂芙尼 tiffany

亮点:

  1. 策划上,以5月20日的谐音“520”为策划出发点,其中有单机模式(就是自己一个人玩)和双机模式(两个人一起玩)两个方式。
  2. 策划上,单机模式下:(横屏观看)滑动屏幕左侧一个女孩踩着一枚金色戒指过来,右侧一个男孩踩着铂金色戒指过来,在屏幕中间汇合;点击屏幕提示的小手,两个小人,爬上云朵,坐上蒂芙尼的项链;再横向滑动屏幕,两个小人划着云朵小船,穿过三枚戒指,又拽着一串气球,来到有旋转木马的游乐场;点击气球,出现带一颗大钻石的戒指。
  3. 策划上,双机模式下:(竖屏观看)选择双机模式,生成一个二维码,你的同伴,扫描二维码,而后你们的屏幕上生成单机模式下的一半画面,互动方式和单机差不多。
  4. 策划上,最后查看动画中出现的四款蒂芙尼首饰,最后一屏提示关注蒂芙尼的公众号。
  5. 设计上,主色调使用的是蒂芙尼蓝(英语:Tiffany Blue),通过卡通的线条插画。产品使用的是真实的图片。
  6. 交互上,有单机和双机两个模式。单机模式时,首先竖屏观看,而后横屏观看,再竖屏观看。双机模式时,始终竖屏观看就可以。



技术实现: jQuery + socket.io + swiper + webpack