h5 一镜到底_这些一镜到底的H5还能怎么玩?

ae876a67774a512b808f2a4876269456.png

330fbe7cc5481817dff75ae86cc9e688.png

前文《单个公众号收入过亿,条漫为什么成为2019风口》提到,加入插画元素的条漫和ps拼接的长图文正处在2019年风口,这种现象也适合描述H5。

以往扁平化的H5内容新颖,但视觉上缺乏大幅度的起伏。想要让H5看起来更有律动,就要说说一镜到底的表现形式。

一镜到底打破了手机空间的限制,画面跳跃有节奏,在视觉上有层次感。举个例子,长寿的《娱乐圈画卷》系列从2016年起,开始使用一镜到底的制作形式。

“年更”连载时间间隔较长,但H5中加入古风元素,与现代娱乐圈形成反差,穿越感极强,容易被用户记住。

另外在剧情安排上,主要有由娱乐圈热点事件决定,从年初看到年末,用1个H5就能串联整年大事。

最巧妙的是,H5用“画中画”的形式切换每段场景,让每段毫无关系的明星、新闻连在一起,上一秒还是某情侣结婚,下一个画面就是一对明星离婚。

2ca5c51fd4602a6ac595305d92bc62bd.gif

《二零一八娱乐圈画卷》

2a0bea813958be5799c52b910b9bfdf5.png

有人说,这种一镜到底的H5类似动态条漫。H5在画面形式上类似条漫,实际还包容声音、交互等形态。

所以,区别于只能“看”的条漫,一镜到底类H5可以怎么玩?

967739ead45e32bfc0c357486642f758.png

视差动画指多层背景以不同速度移动,在扁平的画面中加入运动图层,呈现出立体的运动效果。

1、菜鸟网络:《一个包裹的“非人类”旅程》

长按包裹进入H5,画面跟随包裹从卖家仓库出仓,两侧缓慢流动的背景交代包裹的运送进程,最后寄到目的地。

用户在H5中代入包裹视角,产生跟随向前移动的错觉。

H5设计最贴心的一点,就是取消长按时页面会暂停,松手即可分享,不需要观看完整剧情。

缺点是H5流速缓慢,背景解说没有字幕,容易让用户失去观看耐心。

d4e6f3f22efe6421784665ae9dbdfd86.gif

《一个包裹的“非人类”旅程》

026f9ecd478e6dd55f8af0c2559d07b0.png

2、网易哒哒:《她挣扎48小时后死去,无人知晓》

H5把小女孩的眼泪为进入故事的“钥匙”,由波浪状背景过渡至哭泣的小女孩面孔。随着眼泪滴下,女孩面孔虚化放大,画面切换成小女孩一家,正式开始讲故事,视觉上的跳跃让故事看起来更像是回忆。

19319967c4bd491138e2e1ef79a941c1.png

《自白》

在画面上,H5选择了黑白色调,加入视差动画。一方面加深景深,让H5画面立体更有层次;另一方面营造紧张、恐怖的氛围,放大小女孩一家惨遭“魔鬼”毒手的冲击力。

同时,H5在多个场景中加入红色血液、魔鬼狞笑、火焰燃烧等特效,为接下来剧情反转做情绪铺垫。

H5在一些细节上处理上也有可点之处,例如在滑动过程中,“魔鬼突然笑着出现;小女孩家人逃跑时,“魔鬼”用渔叉打破边框,插入下一个画面。

94f4532476040c70c2b0d05c2e91ff86.png

《自白》

3、兴业银行x网易新闻:你想要的每个好,我们都努力做好

长图文形式倒叙银行发展30年历史,部分画面移动轨迹与手指滑动相反,加入视差动画,逆向移动凸显时空差异

部分转场采用交叉移动的形式,让纵向浏览的画面多了些变化,将空间横向延伸到屏幕之外。例如,画面中多排数字0和1快速横向移动,时间从年初切换到半年后;从大楼上的画报中进入下一阶段,银行开始向全国发展。

整个画面几乎每个元素都在运动,各图层移动迅速,画面层次分明。但内容过于充实,篇幅上稍显冗长。

82ea33545b1962f8b1e27a19cf2779c5.gif

《你想要的每个好,我们都努力做好》

04b10b43a5def2b116840c0c35f185d6.png

4、in:《节气奇妙物语》

H5以节气为路标,用镜头平移的形式,展现从立春到立秋的全部气候节点。

随着小船前进划过每个节气,画面场景出现动画,如经过夏至时背景荷叶微动,河流线条缓缓移动。

H5是小清新插画风格,加入动态元素和视差动画,节气间过渡有“大鱼”游过,进入“雨水”节气会用下雨隔开画面。

9230225a7d85c239bb1011a268d73422.gif

《节气奇妙物语》

fc5e35f4b50da7ea9a95051c64ab5556.png

5、此处故意留白

这只曾经刷屏的H5采用黑白漫画风格,“借鉴”了Phallaina APP的“卷轴式漫画”形式。

通过简单的拉进度条的方式,讲述“工作狗”的生活,最终用一镜到底的形式呈现出来。

H5各图层间移动速度不同,多次用乌鸦进行转场。主人公上地铁之后,从背影切换到低气压、人挤人的地铁中,整个作品十分压抑。

96f354503add99dee8f70514b44c6e83.png

《此处故意留白》(已下架)

ecb418df875738deb7e53c8a442adca8.png

画中画形式可以加入其他场景串联多个故事,无论画面放大或缩小,都在同一空间内。

随着镜头的穿梭,用户可以从前进或后退到下一场景,电视机、相册、手机等都是常见的连接点。

H5可以让用户从上帝视角观看故事,长按画面跳动时间线。

并列式和递进式剧情是画中的惯用手段,整体剧情连贯一气呵成,吸引用户眼球的同时还可以快速黏住用户。

1、五粮液:《五粮液丨和美敬意》

画面从证书里的酒瓶图案,延伸到餐桌上的一家人,再到对面大楼里烛光晚餐的情侣,每个场景都以酒为主。

H5抓住中国人在餐桌上饮酒的习惯,安排烛光晚餐、合家团聚、老友重逢等内容,用白酒连接人与人之间的情谊,引起读者共鸣。

因为H5以白酒为主体,内容相对单一,所以H5中一杯酒配一段文案,区分饮酒的时间地点和饮酒人的不同心境,剧情相对充实。

1acbc9c6568726eba66c8203525d78a6.gif

《五粮液丨和美敬意》

f305d849c8927f9e70fb510d36aef982.png

bccaa1f53e75c91063c882aefa1aad70.png

有些直线性H5方向明确,画面转折较少,视角相对狭窄,用户难免会产生疲劳。

H5可以加入视频、图片、3D、VR等其他内容形态后,切换视角给予用户惊喜感。

1、斯凯奇:《斯凯奇DLT-A》

这支H5整体十分炫酷,随着磁带的转动,画面开始运动,一台电视机由远及近出现,用户点击电视会播放广告视频。

这支H5最大的亮点就是在一镜到底H5中,融入视频创意元素。

H5给了用户选择,视频播放或跳过都不会影响H5继续观看。用户可以滑动屏幕,控制镜头拉远拉近,H5结束后还可倒回观看视频,画面切话比较灵活。

468988e4c0ea2caf8d362b60ae0ba094.gif

《斯凯奇DLT-A》

b0c25c531fbccf568eeecb9ed03fdbfd.png

2、网易新闻:《一分钟漫游港珠澳大桥》

H5整体浏览下来需要1分钟,长按屏幕控制画面前进,松手可选择拍照留念。照片存在H5相册中,用户可选择8张照片制成明信片。

通过摄影实拍和全彩插画,用户可以从第一视角漫游港珠澳大桥,仿佛真的在大桥上行走。用户在经过桥上的长度提示牌时,画面运动速度放慢,用二维平面加视差动画的形式,展现空间透视感

另外,这类时事类H5最重要的是要拉近用户之间的距离,让用户觉得大桥和“我”有关,“我”可以近距离接触到大桥,并心甘情愿的去了解大桥。

所以这支H5面对多圈层用户,用1分钟的体验满足用户好奇心,并且用实景照片的形式让用户宣泄情感,留下记忆。而且轻量型H5操作简单,用户仅需长按即可浏览,获取信息门槛低。

ac17879eb4cd29a5c9e7eb58304021ff.gif

《一分钟漫游港珠澳大桥》

9649c2dc6f4b9457a9586f8c7f0ab689.png

无论是影视作品中,还是H5广告中,一镜到底都是品牌营销活动的新宠。

H5用一个长镜头就能解决问题,衔接自然中间不会被打断,比其他形式的H5内容上更流畅。

但一镜到底型H5信息加载量大,难免会发生卡顿问题,影响用户观看体验。

说到底,不管是从视觉感受还是操作体验,一镜到底形式的H5从用户视角出发,总能在第一时间抓住用户目光。

#你问我答时间:

如果你有关于H5、营销、策划、运营、互联网方面的干货需求、行业讯息、想吃的瓜、想吐的嘈、想扒的料、任何你想知道想了解的,都可以在下方给我们留言,我们会挑选好的问题解答。


新媒体资源情报群正式开放!

扫码关注,回复”进群“立即加入!

74ecb17ab2649ca4aeaea8983ed63a16.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/381492.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

打开端口_打印机ip及端口设置

越洋帮路由网原创:文章是关于"打印机ip及端口设置"的相关知识分享,希望可以帮到大家。 - 素材来源网络 编辑:小易。随着科学技术的发展,各种技术成果也进入到千家万户,近日,有人咨询怎样设置和修改打印机ip及…

分计算iv值_快捷、经济、实用的光伏及IV曲线测试仪PVPM 1500X

PVPM 1500X IV曲线测试仪pvpm 1500x (1500V,20ADC)可测量光伏模块以及字符串或阵列的 iv 曲线。通过专利程序, 该设备可以直接在光伏系统的安装位置测量和计算峰值功率 ppk、r 和 rp。计算结果和图表可以显示在内部彩色的 tft 显示屏上。因此, 光伏系统的质量控制可以快速、经济…

Open Source Blog 开源ASP.NET/C# 博客平台 v2.5 发布(提供源码下载)

EntLib.com Blog 开源ASP.NET/C# 博客平台 v2.5 发布(提供源码下载)基于Subtext v2.0 开源ASP.NET博客系统的中文汉化及定制化开发,EntLib.com 开源博客小组根据用户的反馈意见,不断改进系统。2008年11月22日正式发布 EntLib.com …

兄弟3150cdn加粉后清零_兄弟MFC1618MFC1816 tn1035加粉清零方法

兄弟MFC-1618\MFC-1816 tn-1035加粉清零方法 有今天要发的题目的话؛兄弟MFC-1618\MFC-1816 tn-1035加粉清零方法 墨粉盒型号:兄弟TN-1035兄弟MFC-1618的清零方法有两种:一、清粉盒(转动粉盒右侧的齿轮180度);二、在机器上操作;(以…

字体外面怎么加边框_有钱人家连电视墙都发“光”,大理石墙周围加一圈镜面边框,华丽...

阅读本文前,请您先点击上面蓝色字体,再点关 注这样您就可以继续免费收到文章了,每天都有分享,完全是“免费订阅”,请放心关注注:本文转载自网络,如有侵权,请在后台留言联系我们进行删…

计算机与人脑_类脑计算机:一种新型的计算系统

近日,中国浙江大学联合之江实验室共同研制成功了国内首台基于自主知识产权类脑芯片的类脑计算机(Darwin Mouse)。这台类脑计算机包含792颗浙江大学研制的达尔文2代类脑芯片,支持1.2亿脉冲神经元、近千亿神经突触,与小鼠大脑神经元数量规模相当…

吴玉禄他的机器人_中国人— 我们村的机器人

他是北京郊区的一名普通农民,二十多岁的时候突发奇想,一门心思要研制机器人。吴玉禄说,他自己也搞不清楚这个念头到底是哪儿来的。吴玉禄没有受过正规教育,他研制机器人所用的材料,都是些平时收捡来的“破烂”。吴玉禄…

c++ map iterator 获取key_JAVA | Map集合使用详解

引言了解Set集合如何使用和旗下各类比较,这篇我们继续和大家一起看看Map集合的使用机制。MapMap集合介绍 Map(也称为字典、关联数组)是用于保存具有映射关系的数据,保存两组值,key和value,这两组值可以是任何应用类型的数据。  …

儿童的身高标准对照表_2020“儿童身高标准”出炉,10岁身高140,你家娃达标吗...

文丨小哥(文章原创 ,版权归本人所有,欢迎妈妈们转发分享)孩子的身体发育是非常重要的,如果有家长看到自家孩子的身高不如别人,内心多半是非常痛苦的,因为谁都希望自己家的孩子长得高一些。要判断孩子的身高合不合适&am…

晚上答辩的理论知识准备

web2.0介绍(对比web1.0): 有个人这么说的(呵呵,引用一下,觉得他说的不错) web1.0还是web2.0,不要去管二者的定义,那将毫无意义,WEB1.0也好,2.0也好…

eclipse中图片大小用什么单位_建筑工程行业中各个单位都是什么样的关系?

大家好,我叫开发商,最近我很烦恼,因为我爱上了一位名叫“国有土地”的女孩儿。故事就此开始。国有土地的父亲叫“国家”,权利很大,因为有很多其他人也喜欢国有土地,如果要娶到她,要送很多聘礼。…

java 关注公众号没有调接口_高频面试题:接口和抽象类的区别

作为一个基础的Java高频面试题,是所有Java面试者必须烂熟于心的。当然不能死记硬背,可以通过实际地写几个小demo,边实际操作边理解,既能感受到编程的快乐,更重要的是真的理解记住了二者的区别。此外,本篇文…

电池供电的电容麦_电容话筒受潮了怎么办?

听说许多人对电容话筒不了解,有人以为电容话筒可以直接插在电脑主板上用,有些人以为电容话筒可以插在卡拉ok的大两芯话筒口上用,有人以为电容话筒一定要独立的48V电源盒才能用等等。以上问题的答案全都是:不是。电容话筒最怕什么&…

c 调用openoffice word转pdf_批量 Word 转 PDF 方法

- START -手上有近百个 Word 文档需要转为 PDF, 怎么办?难道要一个一个的导出吗?确实,Office2010 以后版本的 Word 可以直接导出 PDF,是时候让 Python 来替我们干这个重复性的活了!直接上代码:from win32co…

hadoop put命令的格式_HDFS常用命令

一.HDFS命令行Hadoop help命令的使用1.hadoop -help查询所有Hadoop Shell支持的命令2.distcp这是Hadoop下的一个分布式复制程序,可以在不t同的HDFS集群间复制数据,也可以在本地文件间复制数据。hadoop distcp将/test/test.txt文件复制到/test/cp下面&…

python的opencv模块_OpenCV Python - 没有名为cv2的模块(再次)

我刚刚在Ubuntu 14.04上安装了OpenCV 3.0。它的工作原理。 根据官方教程,安装OpenCV。#!/bin/bashd #https://help.ubuntu.com/community/OpenCV version"$(wget -q -O - http://sourceforge.net/projects/opencvlibrary/files/opencv-unix | egrep -m1 -o \&q…

freemarker html 引入script_HTML编码规范

一、前言HTML作为描述网页结构的超文本标记语言,在百度一直有着广泛的应用。本文档的目标是使HTML代码风格保持一致,容易被理解和被维护。二、代码风格2.1. 缩进与换行​[强制] 使用 4个空格做为一个缩进层级,不允许使用 2个空格 或 tab字符。…

写入null_ArrayList并发写出现Null值

ArrayList并非线程安全的容器,这一点大家可能都非常清楚,但是在并发写入的情况下,不安全的情况具体有哪些,大家是否很清楚呢?本篇文章重点聊一下出现null的情况,然后对于其他并发写的安全做一个简单的叙述我…

c语言函数调用数组_第七讲:C语言基础之函数,第二节,实现汉诺塔

本文约2200字,主要讲了C语言基础之函数,递归,数组作为函数参数以及案例、练习题等。带你进入C语言的世界,入门C语言,后边将持续更新。可以收藏学习。想了解C语言基础之函数,函数的基本概述,函数…

仍然报错_only_full_group_by配置,竟让所有应用报错?

推荐学习周一福利到!献上“独家全新”MySQL进阶套餐,简直就是血赚 全网独家的“MySQL高级知识”集合,骨灰级收藏,手慢则无 1. 踩坑经历一个很平常的下午,大家都在埋头认真写bug呢,突然企业微信群里炸锅了&a…