光明科学城:一进到底看光明

2023-10-14 H5案例分享 H5案例分享
光明科学城:一进到底看光明


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

识别图中二维码

一进到底看光明-查阅二维码

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


案例:一进到底看光明

品牌:光明科学城

技术实现: HTML5

亮点:

1.创意定位

光明科学城推出的「一进到底看光明」创意H5作品。通过一镜到底的方式,让用户不停交互,去领略和了解光明科学城的发展,一起见证城市精彩嬗变。

 

2.策划逻辑

大致逻辑:Loading部分 → 主页 → 交互看城 → 生成海报。

 

Loading部分:时间进度条,主要的建设成就和品牌落款。

 

主页部分:邀请函。科学之城,创享光明!如今光明区以开放共创的产研氛围,吸引和荟聚各路英才,打造世界一流科学城和深圳北部中心。现诚邀您开启光明科学城之旅,一起见证城市精彩嬗变。

 

交互看城:上下滑动手指可移动,左右滑动手指可看到更多。随着用户的交互,由远及近观看和了解深圳科技新馆、光明生命科学园、深圳湾实验室、深圳市工程生物产业创新中心、深圳理工大学(筹)等已建、待建的软硬件设施。

 

生成海报:五选一,有五种款式供用户选择,此处需要用户授权获取微信头像昵称,点击【确认生成】,跳转海报下载页。

 

3.视觉交互

整体视觉为淡蓝科技风,体现光明科学城的未来感、科技感。交互方式主要采用点击、上下滑动和左右滑动等交互方式。

 

4.用户体验

在「逛城」时各个部分的信息和数据铺面而来,其中数字部分如果在视觉冲击力上更强,则效果更佳。





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

标签

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

相关推荐:

人民日报客户端X网易文创X哒哒:穿越2020

深圳银保监局:特区金色大道

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~