中国宋庆龄基金会×Tencent腾讯:全国青少年编程与人工智能计划

2022-06-12 H5案例分享 H5案例分享
中国宋庆龄基金会×Tencent腾讯:全国青少年编程与人工智能计划


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

识别图中二维码

全国青少年编程与人工智能计划-查阅二维码

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


案例:全国青少年编程与人工智能计划

品牌:中国宋庆龄基金会×Tencent腾讯

技术实现: HTML5

亮点:

1.创意定位

中国宋庆龄基金会与腾讯联合推出的“全国青少年编程与人工智能计划”创意H5,以“致敬中国航天——共建数字空间站”为切入点,让用户“参与”空间站的编程模块,快速了解青少年编程的乐趣,获得编程启蒙。

 

2.策划逻辑

大致流程:主题页 → 引导视频 → 码上换装 → 形象确认 → 编程介绍 → 编程演示 → 开始编程-组装 → 编程-输出一段话/表情 → 组装好的航天器 → 认证海报。

 

主题页: 包含中国宋庆龄基金会和腾讯品牌的Logo露出,活动主题:全国青少年编程与人工智能计划,以及H5主标题:致敬中国航天 共建数字空间站,以及“青少年编程启蒙活动”副标题。最底部有技术支持平台:腾讯扣叮。背景有声音口播引导,点击“码上出发”,进入引导视频部分。

 

引导视频:用视频形式回忆和讲述了中国航天的故事,召集10万青少年参与编程建设。可以点击“跳过”按钮,进入下一部分。

 

码上换装:输入信息获取你的编程装备吧。点击输入你的姓名,选择性别,选择年龄,点击“确认”后,进入形象确认页。

 

形象确认:为用户分配一个QQ卡通编程装备形象,点击“开始”按钮,进入编程介绍部分。

 

编程介绍:介绍空间站的组装知识,以及领取编程任务,点击左右按钮,可以向前翻页、向后翻页,点击右箭头,进入编程演示部分。

 

编程演示:编程任务指引手册,每一步操作都有手势和口播引导,拖动左侧动作模块,然后点击运行按钮,弹出确认交互层,点击“开始编程”,进入正式编程环节。

 

开始编程-组装:通过7步编程操作,把航天器组装任务完成,完成后展示用户组装部件在航天器上的样子,并标注有用户昵称。点击“码上写”,进入另一编程环节。

 

编程-输出一段话/表情:根据引导,点击main()函数,再输入一段话,或者点击3-4个表情,完成后,展示组装好的航天器。

 

组装好的航天器:航天器可以放大缩小,查看细节,航天器上有用户编程写下的那段话,或者表情。点击“获取认证”,进入认证海报。

 

认证海报:包含品牌露出,活动主题,以及定制的QQ卡通形象,过程中编写的代码等,长按可以保存海报到相册。点击“码上出发”,弹出腾讯扣叮APP的授权确认。

 

3.设计交互

设计融合了航天的元素,视觉编程的基础逻辑,品牌的IP形象和各个步骤的口播讲解,很是周全和细致。交互上,点击、输入、点选、拖动、长按...融合了常用的所有交互方式,但每一步都有清晰的引导,逻辑清晰,操作明确。

 

4.用户体验

原来编程可以这么有趣,这么简单,果断下载腾讯扣叮APP,先玩起来~ 





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

标签

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

相关推荐:

平安惠普 中国妇女发展基金会 上海宋庆龄基金会:这一抹风景,惊艳中国

腾讯 × 北京市文物局:北京中轴线,申遗有我

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~