《深圳40年,一镜到底》——庆深圳特区成立40年H5案例

2020年8月26日是深圳特区成立四十年纪念日。为致敬深圳,诸多优秀的H5作品不断涌现,《深圳40年,一镜到底》就是其中之一。

 

2020年8月26日是深圳特区成立四十年纪念日。为致敬深圳,诸多优秀的H5作品不断涌现,《深圳40年,一镜到底》就是其中之一。

 

深圳40年,一镜到底

 

 出品方:龙岗融媒

实现方式:意派Epub360在线H5制作工具

创意特色:一镜到底

内容特色:该H5旨在宣传深圳特区建立40周年。作品主要以一镜到底的方式向用户呈现了深圳在1978-2020年间的飞速发展,整体简洁利落,极具穿越感。在交互操作方面,用户只需根据提示上下滑动屏幕,即可控制画面的播放,而手指滑动的快慢还可影响播放速度。在内容结构及画面呈现方面,作品主要运用【年份+事件+情景对话】的方式突出深圳特区在建立前后的变化以及各个阶段所取得的成就。

 

《深圳40年,一镜到底》H5主要通过意派Epub360的【一镜到底】组件来实现,用户可控制前后元素的间距及元素出现的时长效果。具体制作教程在庆深圳特区成立40年H5案例合集之后,想学习的请往下滑~

▲意派Epub360【一镜到底】组件:基于X轴、Y轴的视觉基础,在Z轴上将多个元素前后放置

 

由意派Epub360制作出的一镜到底H5案例还有很多,例如:《转融新时代,南方新作为!》、《百年征程,为女神而战》、《清远30年的时光之旅》、《2017中国蒙牛可持续发展报告》、《一镜到底之物种起源》等。而关于深圳发展的H5案例也有很多,其中,《来了就是深圳人》就很有代表性,该H5还曾获得过第十一届设计之都(中国·深圳)公益广告大赛新媒体类优秀作品奖哦~

 

 

除了《深圳40年,一镜到底》以外,还有哪些致敬深圳的优秀H5案例呢?一起来看看吧!

 

庆深圳特区成立40年H5案例

 

来了就是深圳人

出品方:腾讯云、深圳商报、腾讯优图

创意特色:视频、人脸融合、合成海报

内容特色:用户可先浏览一段关于深圳的短视频,再进行人脸融合的相关设置,包括选择来深时间、上传头像、选择性别、输入姓名及换装。全部操作完毕后,用户可点击“确定”按钮,以获得一份专属的深份证海报。

 

深铁置业丨致敬特区40周年

出品方:深铁置业

创意特色:横屏、长页面、手绘插画、动画

内容特色:作品主要以横屏长页面的方式介绍深圳特区自建立以来的巨大变化,以及深铁置业的成立与发展。用户可通过长按页面右下角按钮的方式浏览作品,并根据提示松开手指,以获得相应的明信片。作品最后,用户还可通过“获取明信片”按钮查看并保存各种明信片。

 

点击丨穿越深圳特区辉煌40年!

出品方:新华社、快手

创意特色:视频、手绘插画

内容特色:用户进入首页后,可通过“点击进入”按钮浏览一段动画短视频,视频主要以一镜到底的方式呈现了深圳40年岁月变迁,其中包括了深南大道全线贯通、深圳证券交易所正式开业、深圳地王大厦建成等大事件。在观看过程中,用户可通过页面右下角的提示按钮选择暂停或直接跳过。视频结束后,用户还可在80年代、90年代、21世纪这三种代表性插画人物中任选一种形象,以获得一份打卡留念海报。

 

「深」圳事「业」,一路向前

出品方:深业集团

创意特色:横屏、长页面、手绘插画、动画

内容特色:该H5以“深业和深圳一起‘创业起航’”为主题,通过横屏长页面的方式介绍深业集团在深圳特区建立后的发展历程,包括深业的成立、转型升级、上市等。用户可通过长按按钮的方式触发画面中的插画人物奔跑,以营造一种贯穿历史的穿越感。作品最后,用户还可根据提示按钮为深业人点赞。

 

你是哪种特区青年?

出品方:新华社、独特

创意特色:人脸融合、合成海报

内容特色:该H5主要以人脸融合的方式让用户体验回到当年的深圳的感觉。用户可先选择心仪的模板(志愿者、创业者、售货员等),再通过上传单人正面照,从而获得一份人脸融合海报。

 

如何用意派Epub360制作一镜到底H5?

 

【一镜到底】组件使用注意事项

 

1、常规的一镜到底画面包含多个PNG图片,在上传图片前需确保图片是PNG格式的,以及边缘没有被裁切的痕迹;

2、文字可以直接在Layer页面使用段落组件编辑;

3、建议画面层控制在50个以内,如果素材相对较小,可以控制在60个左右;

4、考虑到手机性能,每张一镜到底画面的大小控制在70KB以内;

5、素材较大的情况下,每个画面层之间的间距设置为500PX及以上,小一些的画面素材暂时不做强制,但是需要于发布前在性能相对一般的手机上进行测试,以保证流畅。

6、由于素材偏多,我们在使用一镜到底组件时一定要设置页面预加载。具体操作如下:

 

 

【一镜到底】组件的基本用法

 

1.先编辑一镜到底组件内的内容,再添加一镜到底组件,然后切换到layer页面编辑一镜到底的内容,每个Layer页面可放置一个或多个要展示的元素。

 

2.切换回到页面,点击高级组件中的一镜到底组件并添加多个Layer容器。

 

3.一个layer中的元素表示一镜到底中的一层画面

 

4.设置间距:自定义间距大小,从而调整每个元素的出现时间。你也可以选择去掉勾选“初始视距修正”选项,以此来调整第一层元素与屏幕基准点的距离。

 

5.修改/替换素材:不需要切换到layer中,只需选中一镜到底组件,并在右侧找到要替换的素材layer,然后双击预览图,即可切换到layer页面修改。

 

6.设置播放方式

 

(1)手动播放:勾选“可拖动”即可。

 

(2)自动播放:勾选“自动播放”,并自定义“播放速度”。速度的值越大,播放的画面飞出越快。

 

(3)手动播放+自动播放:若同时设置好自动播放及手动播放,那么,用户则可在一镜到底自动播放时手动控制。

 

 

通过意派Epub360制作一镜到底H5的方法就是这样了,感兴趣的话就快参照教程学起来吧!

 

10