中国宋庆龄基金会×Tencent腾讯:全国青少年编程与人工智能计划
案例演示,请长按/扫描以下二维码 ->
识别图中二维码
完整欣赏此案例大约需要5分钟
案例:全国青少年编程与人工智能计划
品牌:中国宋庆龄基金会×Tencent腾讯
技术实现: HTML5
亮点:
1.创意定位
中国宋庆龄基金会与腾讯联合推出的“全国青少年编程与人工智能计划”创意H5,以“致敬中国航天——共建数字空间站”为切入点,让用户“参与”空间站的编程模块,快速了解青少年编程的乐趣,获得编程启蒙。
2.策划逻辑
大致流程:主题页 → 引导视频 → 码上换装 → 形象确认 → 编程介绍 → 编程演示 → 开始编程-组装 → 编程-输出一段话/表情 → 组装好的航天器 → 认证海报。
主题页: 包含中国宋庆龄基金会和腾讯品牌的Logo露出,活动主题:全国青少年编程与人工智能计划,以及H5主标题:致敬中国航天 共建数字空间站,以及“青少年编程启蒙活动”副标题。最底部有技术支持平台:腾讯扣叮。背景有声音口播引导,点击“码上出发”,进入引导视频部分。
引导视频:用视频形式回忆和讲述了中国航天的故事,召集10万青少年参与编程建设。可以点击“跳过”按钮,进入下一部分。
码上换装:输入信息获取你的编程装备吧。点击输入你的姓名,选择性别,选择年龄,点击“确认”后,进入形象确认页。
形象确认:为用户分配一个QQ卡通编程装备形象,点击“开始”按钮,进入编程介绍部分。
编程介绍:介绍空间站的组装知识,以及领取编程任务,点击左右按钮,可以向前翻页、向后翻页,点击右箭头,进入编程演示部分。
编程演示:编程任务指引手册,每一步操作都有手势和口播引导,拖动左侧动作模块,然后点击运行按钮,弹出确认交互层,点击“开始编程”,进入正式编程环节。
开始编程-组装:通过7步编程操作,把航天器组装任务完成,完成后展示用户组装部件在航天器上的样子,并标注有用户昵称。点击“码上写”,进入另一编程环节。
编程-输出一段话/表情:根据引导,点击main()函数,再输入一段话,或者点击3-4个表情,完成后,展示组装好的航天器。
组装好的航天器:航天器可以放大缩小,查看细节,航天器上有用户编程写下的那段话,或者表情。点击“获取认证”,进入认证海报。
认证海报:包含品牌露出,活动主题,以及定制的QQ卡通形象,过程中编写的代码等,长按可以保存海报到相册。点击“码上出发”,弹出腾讯扣叮APP的授权确认。
3.设计交互
设计融合了航天的元素,视觉编程的基础逻辑,品牌的IP形象和各个步骤的口播讲解,很是周全和细致。交互上,点击、输入、点选、拖动、长按...融合了常用的所有交互方式,但每一步都有清晰的引导,逻辑清晰,操作明确。
4.用户体验
原来编程可以这么有趣,这么简单,果断下载腾讯扣叮APP,先玩起来~
标签
关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~
微信扫一扫
关注该公众号