光明科学城:一进到底看光明
案例演示,请长按/扫描以下二维码 ->
识别图中二维码
完整欣赏此案例大约需要1分钟
案例:一进到底看光明
品牌:光明科学城
技术实现: HTML5
亮点:
1.创意定位
光明科学城推出的「一进到底看光明」创意H5作品。通过一镜到底的方式,让用户不停交互,去领略和了解光明科学城的发展,一起见证城市精彩嬗变。
2.策划逻辑
大致逻辑:Loading部分 → 主页 → 交互看城 → 生成海报。
Loading部分:时间进度条,主要的建设成就和品牌落款。
主页部分:邀请函。科学之城,创享光明!如今光明区以开放共创的产研氛围,吸引和荟聚各路英才,打造世界一流科学城和深圳北部中心。现诚邀您开启光明科学城之旅,一起见证城市精彩嬗变。
交互看城:上下滑动手指可移动,左右滑动手指可看到更多。随着用户的交互,由远及近观看和了解深圳科技新馆、光明生命科学园、深圳湾实验室、深圳市工程生物产业创新中心、深圳理工大学(筹)等已建、待建的软硬件设施。
生成海报:五选一,有五种款式供用户选择,此处需要用户授权获取微信头像昵称,点击【确认生成】,跳转海报下载页。
3.视觉交互
整体视觉为淡蓝科技风,体现光明科学城的未来感、科技感。交互方式主要采用点击、上下滑动和左右滑动等交互方式。
4.用户体验
在「逛城」时各个部分的信息和数据铺面而来,其中数字部分如果在视觉冲击力上更强,则效果更佳。
标签
关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~
微信扫一扫
关注该公众号