快手:AI画出你的2022
案例演示,请长按/扫描以下二维码 ->
识别图中二维码
完整欣赏此案例大约需要1分钟
案例:AI画出你的2022
品牌:快手
技术实现: HTML5
亮点:
1.创意定位
快手在2022即将结束2023马上到来之际,以“2023一起向前|AI画出你的2022”为主题,通过让用户回顾和点选2022年关键词标签,通过AI为用户生成一幅画作。最后,用户还可以抽奖和购买电子藏品。
2.策划逻辑
大致逻辑:Loading → 主题页 → 输入姓名 → 点选10个标签 → 过渡 → 生成画作海报 → 抽奖&购买。
Loading部分:抽象画框动效开场,艺术感十足。
主题页:露出主题——AI画出你的2022。如果用一幅画总结你的2022,那会是一件怎么样的作品,在这里,AI将为你绘制独一无二的画作。向左滑动,进入输入姓名部分。
输入姓名:用户点击输入框,输入用户昵称。点击底部按钮,进入标签点选环节。
标签点选:共6屏标签,一共可以点选10个。选中哪个,有相应的选中状态,左右滑动,可翻屏换页,点选完成,点击“完成选择”进入过渡页。
过渡页:主要是文案提示,提示完成,进入海报页。
海报页:根据用户点选的标签,AI默认创作一幅画作。用户可以长按保存海报到相册。可以点击“再画一幅”,进行再次创作。也可以点击“领取周边”,进入抽奖和购买页面。
抽奖&购买:盲盒抽奖,有3次机会,抽一次后即提醒跳转快手平台。购买AI画作,同样跳转快手平台,为产品引流。
3.设计交互
米黄素雅背景,整个作品俨然就是一个动态镜头浏览一个画展,整个展馆清新、素雅,从入场到结束,动效简洁炫酷。交互方式主要采用了:左滑,输入,长按保存,点击等。
4.用户体验
特效转场和关键词部分是亮点中的亮点。特效转场,好像让用户置身一个展馆,不同的墙壁上贴挂着不同的画作。关键词部分共6屏,每一屏又有若干,迅速让小五想起2022经历的点点滴滴,很是用心的一个作品。
标签
关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~
微信扫一扫
关注该公众号