恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
H5设计趋势解析:全屏动画潮来袭!
0.0°
2017-01-13 原创文章 设计趋势 举报 4228 12 15 0

10月,H5的设计趋势是?

Image title


近期,国内H5的创作大有动画化的趋势,主要通过全屏动画搭建故事化场景。

 

全屏动画有什么优势?把动态变换的场景占满手机整屏,配上与情节环环相扣的音效,让观众把所有的注意力放在内容上,叙事空间极大。一不留神,你就掉进了创作者设计的故事里。

 

具体实现上,主要用全屏视频、图片轮播2种形式,以下深度分析它们流行的原因以及创作方法。

 

1、全屏视频,不爱你太难

Image title

滴滴的《童年阴影合辑》,算是9月最火的视频动画了。前面还在讲小红帽被骗的童话故事,冷不防冒出个滴滴人脸识别功能。

 

如果你经常留意H5广告,肯定还知道腾讯最近出品的H5也基本都是视频。最出名的是之前刷爆朋友圈的《穿越故宫来看你》,9月的有下面两个:

Image title

Image title

有垂直视频(就是能竖着手机观看的全屏视频),也有横屏视频(就是横着手机观看的全屏视频),反正都是视频。

 

为什么腾讯那么喜欢做视频动画?一气呵成,在别人没来得及反应之前,故事已经进入尾声,一屏广告静静地冒出来。

 

【优势】


只要视频长度合理,H5的体验不会轻易被中断,因为我们只需要盯着手机看。

 

2、安卓播放,3种解决方案

 

全屏很带感,但前端大多知道安卓浏览器播放视频有个大坑,播放器不能像PC浏览器、苹果浏览器一样直接隐藏。怎么办?

Image title

有3种解决方案:

 

(1)

 

你就是腾讯创作团队的人,或和他们有合作项目。

 

因为微信浏览器进行了特殊配置,并对一些域名作白名单处理,以此担保视频在安卓设备的微信浏览器播放能隐藏播放器。所以,这大概是腾讯系爱在H5里放视频的原因之一,应用上本来有一定特权。

 

(2)

 

曲线救国,要么把视频放大一点,要么直接设计超出屏幕的视频。

 

这两个法子能帮助逃除安卓魔咒,主要原因是视频尺寸大于屏幕,如果超出的范围比较大,就能让播放控制条跳到屏幕之外。这会让强迫症非常难受,但的确有效。

 

下面是我在iH5.cn后台编辑H5的界面,可以直观看到这两种应用:

Image title

▲放大视频的显示比例

Image title

Image title

▲设计特定尺寸的视频

 

H5《审讯室》就把第2种方法玩得登峰造极(以上两个特定尺寸的视频出自该H5),它有很多分段视频,并为手机竖屏和横屏模式分别做了两套缓存方案:


要么把视频做长(竖屏),要么硬生生在底部多留出一大块灰色区块(横屏),以确保能过安卓这关。

 

(3)

 

见下一部分。

 

3、图片轮播,你怎么那么好玩!

 

如果在网页缓存一连串的图片序列帧,连续播放,也能达到没有播放器的视觉效果(因为本来就不是视频嘛)。Image title

Image title

比如国窖中秋这个H5,抒情,适合中秋的气氛。

 

但很多人做图片轮播,只重视它说故事的能力,忽略了它真正的价值:

 

可以制造个性化的用户体验!!!

 

国外有类似原理的营销案例,就成功形成了病毒传播效应。

Image title

美国职业摔跤联盟(WWE),2011年比赛期间为加强与粉丝的联系,提前录制了一些抠除部分图像的现场视频上传到网上。提取用户的Facebook头像后,利用Flash把这些头像图片嵌入视频被抠除的部分。

 

结果用户看的时候,会惊喜地发现自己也出现在了视频里!这样的生成效果,真实感极强。

 

项目在官网发布后,深受用户追捧,浏览量暴涨30万。

 

当然,现在大火的是H5,而且我们依旧能用同样的方法(比如利用iH5的图片序列功能),实现这样的效果。

Image title

【优势】


能把故事讲得好,又能通过简单的交互把我们完全代入到故事里。

 

现在大家这么热衷于用全屏动画,主要是因为我们策划、制作一个移动端H5,越来越重视用户体验,想要在短期内与用户建立起联系。这么一来,故事的刻画很重要,而动画在故事表达上比较好。

 

所以虽然10月还没来,可以预见的是动画潮还会继续!

更新:2017-01-13

收藏

12人已收藏

Seedheart

好玩是一切的宗旨。

  • 19

    作品

  • 615

    粉丝

  • 4

    关注

  • 他从瑞典回来后,用了10年让设计师用上H5
  • 腾讯这个H5的套路太深!大部分人没看懂
  • 100个免费可商用字体,你总有一天用到它
  • H5页面制作软件,中国和美国差多少?

    猜你喜欢

      2017-01-13 原创文章 设计趋势 举报 4228 12 15 0

      H5设计趋势解析:全屏动画潮来袭!

      0.0°

      你确定要举报H5设计趋势解析:全屏动画潮来袭!

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年09月29日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      15
      12
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录