中国农业银行信用卡×中国银联:思念翻译器

2022-09-07 H5案例分享 H5案例分享
中国农业银行信用卡×中国银联:思念翻译器


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

识别图中二维码

思念翻译器-查阅二维码

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


案例:思念翻译器

品牌:中国农业银行信用卡×中国银联

技术实现: HTML5

亮点:

1.创意定位

中国农业银行信用卡与中国银联联合推出的中秋创意H5作品,以“思念翻译器”为主题,需要让用户说出一句思念的话,上传一张海报,生成相应的中秋节思念海报,借中秋之际传递思念,获得更多的品牌曝光。

 

2.策划逻辑

大致流程:主题页 → 录音交互 → 上传照片并填写姓名 → 生成海报。

 

主题页:以中秋月圆人团聚创意海报为背景,露出“思念翻译器”的主题,并有文案引导:明明想表达心中牵挂,却总是口是心非,言不由衷?那些不知道怎么说的思念,就让听过无数浪漫思念的月亮替你翻译吧。页面顶部是品牌Logo,底部是交互按钮,长按说出你的思念。

 

录音交互:点击“长按说出你的思念”,按底部的引导语“我想你”或“中秋节快乐”之类的进行录音,随后,一个月亮变圆的过渡动画,进入上传照片部分。

 

上传照片并填写姓名:根据上传语音生成一句文案,再上传一张照片,填写收信人、寄信人等信息,然后点击“生成专属思念明信片”,即可生成海报。

 

生成海报:海报包含根据语音翻译成的一句祝福文案,用户自己上传的照片,收信人和寄信人信息。可以长按保存思念明信片到手机相册,也可以点击“返回”再次调整海报信息。

 

3.视觉交互

视觉主要以农行绿为主色调,配上白字,清晰干净。交互上,用了长按、录音、上传、输入、点击等交互方式。

 

4.用户体验

整体操作流畅,语音交互很有创意,过程也不复杂,马上中秋了,如果不知道怎么表达思念,可以用“思念翻译器”定制一份中秋特殊明信片。

 





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

标签

分享:
海报
案列链接
下载截图
收藏案例
已收藏
分享到微信朋友圈
打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。

相关推荐:

中国农业银行:奔赴四海的你

农业银行:打怪闯关,你能走多远?

关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

对汉语支持不错,别对小五说英文

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~