快手:AI画出你的2022

2022-12-30 H5案例分享 H5案例分享
快手:AI画出你的2022


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

识别图中二维码

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案例分享”团队原创文章,转载请注明出处!

标签

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

相关推荐:

快手:想知道最契合你的灵魂职业吗

人民日报客户端X快手:复兴大道100号

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~