航天文创CASCI X 科大讯飞AI学习机:测测你的航天知识等级
案例演示,请长按/扫描以下二维码 ->
识别图中二维码
完整欣赏此案例大约需要55秒
案例:测测你的航天知识等级
品牌:航天文创CASCI X 科大讯飞AI学习机
技术实现: VueJS + PixiJS + 人脸识别
亮点:
1、创意定位
航天文创CASCI和科大讯飞AI学习机一起出品的H5,在神十二回归地球的特别日子,可以穿上宇航服是多么自豪的事。
2、策划上
① 首先是一段关于太空的文案,一名穿着宇航服的人走进了航空馆;
② 回答问题界面,一共7个关于太空和宇航问题,每个问题有4个选项,第2个问题是2个选项;每回答一个问题,下方的北斗七星会有提示,答对为绿色小圆点,答错为小红点;问题回答完毕后,进入航天知识星图页面,点击星图的小圆点,有关于7个问题的详细解读知识点;
③ 进入定制航天海报页面,根据用户答对的问题数,有2个模板,萌娃版和酷炫版;答对的问题数不同,给出的模板也不同,小五测试出过太空中队长、航天知识准专业选手、太空小队长,还有其他称号,你可以测试后,告诉我,你新发现的称号哦;上传头像,自动识别用户上传的照片人脸位置,生成航天海报,用户长按保存。
3、设计上
深蓝色为主色调,配合太空的星球、流星,满满的航天气息,特别喜欢这支案例里面的航天海报,每一张都特别细腻。
4、交互上
首屏引导文案,默认一行行显示,也可以点击屏幕快速一起出现文案;在海报生成页面,用户上传的人脸如果识别的不满意,还可以拖动调整位置和大小。
标签
关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~
微信扫一扫
关注该公众号