中国农业银行信用卡×中国银联:思念翻译器
案例演示,请长按/扫描以下二维码 ->
识别图中二维码
完整欣赏此案例大约需要1分钟
案例:思念翻译器
品牌:中国农业银行信用卡×中国银联
技术实现: HTML5
亮点:
1.创意定位
中国农业银行信用卡与中国银联联合推出的中秋创意H5作品,以“思念翻译器”为主题,需要让用户说出一句思念的话,上传一张海报,生成相应的中秋节思念海报,借中秋之际传递思念,获得更多的品牌曝光。
2.策划逻辑
大致流程:主题页 → 录音交互 → 上传照片并填写姓名 → 生成海报。
主题页:以中秋月圆人团聚创意海报为背景,露出“思念翻译器”的主题,并有文案引导:明明想表达心中牵挂,却总是口是心非,言不由衷?那些不知道怎么说的思念,就让听过无数浪漫思念的月亮替你翻译吧。页面顶部是品牌Logo,底部是交互按钮,长按说出你的思念。
录音交互:点击“长按说出你的思念”,按底部的引导语“我想你”或“中秋节快乐”之类的进行录音,随后,一个月亮变圆的过渡动画,进入上传照片部分。
上传照片并填写姓名:根据上传语音生成一句文案,再上传一张照片,填写收信人、寄信人等信息,然后点击“生成专属思念明信片”,即可生成海报。
生成海报:海报包含根据语音翻译成的一句祝福文案,用户自己上传的照片,收信人和寄信人信息。可以长按保存思念明信片到手机相册,也可以点击“返回”再次调整海报信息。
3.视觉交互
视觉主要以农行绿为主色调,配上白字,清晰干净。交互上,用了长按、录音、上传、输入、点击等交互方式。
4.用户体验
整体操作流畅,语音交互很有创意,过程也不复杂,马上中秋了,如果不知道怎么表达思念,可以用“思念翻译器”定制一份中秋特殊明信片。
标签
关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~
微信扫一扫
关注该公众号