航天文创CASCI X 科大讯飞AI学习机:测测你的航天知识等级

2021-09-17 H5案例分享 H5案例分享
航天文创CASCI X 科大讯飞AI学习机:测测你的航天知识等级


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

识别图中二维码

测测你的航天知识等级-查阅二维码

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


案例:测测你的航天知识等级

品牌:航天文创CASCI X 科大讯飞AI学习机

技术实现: VueJS + PixiJS + 人脸识别

亮点:

1、创意定位

航天文创CASCI和科大讯飞AI学习机一起出品的H5,在神十二回归地球的特别日子,可以穿上宇航服是多么自豪的事。

 

2、策划上

① 首先是一段关于太空的文案,一名穿着宇航服的人走进了航空馆;

② 回答问题界面,一共7个关于太空和宇航问题,每个问题有4个选项,第2个问题是2个选项;每回答一个问题,下方的北斗七星会有提示,答对为绿色小圆点,答错为小红点;问题回答完毕后,进入航天知识星图页面,点击星图的小圆点,有关于7个问题的详细解读知识点;

③ 进入定制航天海报页面,根据用户答对的问题数,有2个模板,萌娃版和酷炫版;答对的问题数不同,给出的模板也不同,小五测试出过太空中队长、航天知识准专业选手、太空小队长,还有其他称号,你可以测试后,告诉我,你新发现的称号哦;上传头像,自动识别用户上传的照片人脸位置,生成航天海报,用户长按保存。

 

3、设计上

深蓝色为主色调,配合太空的星球、流星,满满的航天气息,特别喜欢这支案例里面的航天海报,每一张都特别细腻。

 

4、交互上

首屏引导文案,默认一行行显示,也可以点击屏幕快速一起出现文案;在海报生成页面,用户上传的人脸如果识别的不满意,还可以拖动调整位置和大小。





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

标签

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

相关推荐:

腾讯×科普中国:腾讯太空科普

人民日报新媒体 + 网易文创:请查收,来自太空的诗

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~