南湖国旅:一字情书

2018-04-27 11:26:00
admin
原创
216
南湖国旅:一字情书


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

识别图中二维码

一字情书-查阅二维码

完整欣赏此案例大约需要 40秒


案例:一字情书

出品:南湖国旅

亮点:

  1. 策划上,图片生成类,这是南湖国旅推出的“一字情书抵千金”活动的宣传H5。Loading完毕,进入一段页面动画,显示活动主题,“老婆”、“那谁”、“喂”......对于爱人的称谓,用过很多种方式,表达爱意,一字足矣。动画结束,此时点击页面的“写情书”按钮,可在页面中间的田字格内书写饱含爱意的一个字(手写哦),文字输入下方有三个按钮,帮助用户完成撤销重写、随机生成以及确定上传操作。完成后,可生成图片,引导用户长按保存图片,或识别“南湖国旅”的二维码,进入该网站。
  2. 设计上,背景以粉色为主色调,各种称呼的聊天框,整体营造了浪漫的氛围,突出520情人节主题。书写框的设计是一个亮点,可由用户自行手写输入,增强了参与感。
  3. 交互上,滑动页面书写文字,长按识别二维码或保存图片。
  4. 体验上,520全民表白旅游节“一字情书抵千金”主题,浪漫的粉色,轻柔的音乐,满足了小五的少女心。同时该H5打破常规,没有引导用户说出“我爱你”三个字,相爱的两个人,在对方心里是唯一的,总有一个字,是属于他们自己的。



技术实现: jQuery+createjs