多媒体H5:移动端最简单的动画制作方案

了解和使用多媒体制作H5已经成为前端工程师的必备技能。


了解和使用多媒体制作H5已经成为前端工程师的必备技能。

多媒体H5:移动端最简单的动画制作方案

多媒体H5的现状

从吴亦凡假新闻H5的出现到现在,使用视频制作H5动画越来越流行,现在已然形趋势。

多媒体H5:移动端最简单的动画制作方案

了解和使用多媒体制作H5已经成为前端工程师的必备技能。

下面分析一下多媒体H5:

多媒体H5的优点

1、实物动画

偶像、明星、美女、帅哥真人拍摄,效果逼真,更吸引眼球。

2、丰富的视听享受

明星说唱,声优配音,魔性音乐,不但看得到还听得到。

3、动画播放再无BUG

视频不需要代码去控制播放,没有代码就没有BUG,视频就是动画。

4、动画效果流畅酷炫

不用担心动画元素太多,图片太大,手机性能低等性能问题,动画怎么酷炫怎么做。

多媒体H5:移动端最简单的动画制作方案

多媒体H5:移动端最简单的动画制作方案

以前动画需要很多文件现在只要一个。

5、动画控制简单灵活

视频是一个整体动画,任何的移动缩放都不会影响动画的内容 前进、后退、快进、快退、暂停都可以只用一个视频完成。

多媒体H5:移动端最简单的动画制作方案

6、动画和重构分离

重构只需展示动画和控制交互,无需关心动画的内容 动画和重构可以并行。

7、想对体积更小,可持续加载

相对canvas动画文件更少,整体文件大小也小很多 支持一边加载一边播放动画。

8、更短的制作周期

整体制作周期可以缩短3-5个工作日,多更少的时间做更多的事件。

多媒体H5的缺点

1、不支持预加载

video的预加载支持不好,如果不是页面一开始就播放视频,可以在用户触摸屏幕时播放视频然后马上暂时,这样可以加载视频。

2、触发机制

一些手机必须用户触摸手机屏幕视频才可以播放,需要引导用户点击屏幕。

多媒体H5:移动端最简单的动画制作方案

3、播放延迟

点了播放视频但是有时因为视频还没有加载好所以不能马上播放,可以用动画过渡等待时间。

4、慢网络体验差

视频是持续加载的,如果网络慢用户体验会非常差,卡卡卡。

5、非高清画质

高清画质视频的大小会非常大,用户加载页面时间太久,一般不选择高清画质。

6、视频置顶播放

原生播放组件被唤起,视频弹窗并置顶,遮挡整个页面,页面无法交互。

多媒体H5:移动端最简单的动画制作方案

置顶播放,不可以交互,明显的视频

多媒体H5:移动端最简单的动画制作方案

内联播放

解决方法:

(1)css

多媒体H5:移动端最简单的动画制作方案

(2)html

多媒体H5:移动端最简单的动画制作方案

应用css和html代码测试如果还不能内联播放视频,根据条件判断使用下面的插件播放视频,因为插件性能没有原生播放器好,所以只对不能内联播放的手机或是浏览器使用。

(3)javasctipt

多媒体H5:移动端最简单的动画制作方案

7、单音轨

很多手机只支持同时播放一个音频,视频没有声音也算一个音频,video播放视频后无法静音

多媒体H5的建议

视频

1、视频的时长建议60S内,大小尽可能压缩,最好在10M内,用户调查发现用户担心看H5浪费过多流量,视频格式mp4

2、建议视频1S平均大小范围控制在0.09~0.17M,根据画质要求选择,如果画质要求较高可适当超出,可以通过视频的时长提前估计视频的大小,例如:60S的视频大小范围5.4~10.2M

3、和动画师沟通保证视频清晰度的前提下尽量压缩视频, 动画设计时和设计师沟通少用过于炫丽的色彩能有效减少视频大小

4、因为视频是一边播放一边加载,因此不但视频的大小会影响加载体验,视频的清晰度对加载体验影响更大,5M以下的视频高清也很流畅

多媒体H5:移动端最简单的动画制作方案

注:以上数据来自王者故事站

音频

1、音频建议在30S内,背景音乐15S左右,格式mp3

2、音频1S平均大小范围7-12K,可以通过音频的时长提前估计音频的大小,例如:15S的音频大小范围105~180K

完。

 

作者:小明

本文由 @小明 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/24998/

(0)
CatherineCatherine
上一篇 2017-05-10 06:42
下一篇 2017-05-10 08:43

相关推荐

  • 是时候聊聊具有直觉性的UI和交互设计了

    UI和交互设计中常常会强调某项设计需要足够的“直觉性”,但是直觉性的设计说来容易,实现却往往差强人意。但是不得不承认,它是目前交互和UI设计的刚需。“想象一下,如果桌面上反过来一颗球让你去转动控制,感觉应该比鼠标运作顺畅些。我们原本认为这是个好点子……可是我以前从未观潮这种触感的细节。”“当孩子们操作鼠标和遥控杆的时候,会不自觉地低头看输入装置……后来有人想到,如果操作时运动肌肉群范围较大,也许他们可以不必低头。我们做了一个大型轨迹球装置,让他们可以用手臂甚至肩膀牵动来操作,这样就把问题解决了。”“我们先是观察什么样的操作方式比较合乎自然,然后提出想法,再进行测试。”“心智模型指一个人对于事物运作的思维过程,即一个人对于周遭世界的理解。心智模型的基础是不完整的显示、过去的经验甚至直觉感知。它有助于形成人的动作和行为,影响人在复杂情况下的关注点,并确定人们如何着手解决问题。”(如果你仔细观察,会发现这个时候的设计师将纸的纹理运用到窗口上,此处的设计和Material Design 中纸的隐喻不谋而合,这又何尝不是一种潜意识的引导呢?)

    2017-05-16
  • 最浓缩的概念:什么是用户体验,用户体验设计怎么做?

    如约而至,这是体验三篇文章中的最后一篇。本篇我会说明一下何为UE,及UED的本质是什么。其实,我相信很多人其实能感觉到体验是什么,但是一直没能用一句话来表达出准确的意思。那,在说明之前先说什么是User Experience Desgin(UED),为什么大多称之为UXD呢?

    2017-05-25
  • 从Surface Studio聊一聊实体设备上的交互细节

    相信小伙伴们这两天的朋友圈基本躲不过微软大法的霸屏。作为工业设计背景的我,也是被它深深地impress到。所以今天我想来聊聊,实体产品上的交互体验。Handles are better for continuous control (e.g. trombone)
    “手柄”对于连续性的控制更加合适。
    Buttons are better for discrete control (e.g. piano keyboard)
    “按钮”对于状态有显著区别的控制更加合适。
    Handles leave you in control (e.g. opening a car door).
    “手柄”是将控制交付于用户手中。
    Buttons are more likely to trigger something automatic (e.g. opening an elevator door).
    “按钮”更倾向于触发一个自动化的过程。

    2017-05-16
  • 译文|Facebook将推"dislike"按钮

    Facebook users will soon be able to 'dislike' posts and pictures on their feeds. Facebook用户很快就可以“dislike”订阅内容里别人发的帖子和图片了。 The social networking site's founder Mark Zuckerberg r…

    交互设计 2015-09-18
  • 用户体验与产品价值

    关注一下,更多精彩等着你户体验不等于用户可用性当你局限地将用户体验等同于用户接触UI时的可用性的时候,或者是局限地理解用户体验只是发生在用户使用产品过程中的时候,你就会说:有比它更重要的事情,比如用户价值、产品价值。是的,没错。如果产品没有用,即对用户没有价值,UI的可用性绝对不是最重要且,但是我们仍然得时刻提醒自己,可用性不等同于用户体验,可用性只是用户体验(使用中)的一部分而已。用户体验设计超越产品设计。用户体验设计包括组织开展用户...

    2018-03-03
  • 聊天缩略图背后的故事:你不曾注意的那些细节

    作者:银光   这里我们主要讨论聊天列表中展示的缩略图,缩略图通常是将图片内容进行一定的缩小展现,或裁剪展现,主要有两个目的,一是提供一定的预览功能,二是节省屏幕展示空间、节省流量。 用户发送的图片长短…

    交互专题 2017-08-07
  • 用户体验地图为什么这么好使?来看蚂蚁金服的实战案例就知道了

    用户体验地图(experience map)作为一种常见工具能够让工作更加顺畅,用户体验地图就起到了一个很好的团队协作作用,产品、设计、开发都能够通熟易懂,便于梳理清楚产品的架构和使用流程。作者|蚂蚁金服UED源自|设计夹但是体验地图到底能解决什么问题,该怎么用呢?很多同学也许并不太了解。这次分享主要是将我们在各类渠道了解到的关于用户体验地图的各类说法做了一个总结,并结合了我们在工作中的实际运用,给有兴趣了解该方法的同学提供一点我们的见...

    2018-03-09
  • 用户体验方法论的演变

    用户体验工作流程令人困惑,即使对大多数设计师而言也是如此。最初Donald A. Norman创造了用户体验设计的概念:“我发明了这个词,因为我认为人机交互和可用性太窄了。我想涵盖该系统的所有方面,包括工业设计图形,交互界面,面对面交互和使用手册。从那时起,这个词被广泛传播,以至于它开始失去意义。”而到2016年,Don Norman开始谈及对于这个词的误解有多严重。在彻底了解现代用户体验之前,我们需要回顾20世纪90年代以来设计和开发...

    2018-03-07
  • 现阶段用户体验最完美的混合动力 试驾新款比亚迪唐100

    以上汽车你体验过开一天车只花4元么?你体验过地板油加速无声无息么?你体验过用车供电吃电火锅开Party么?你体验过下大雨没带伞直接把车遥控过来么?你体验过车外雾霾爆表你却淡定自若么?你体验过下坡行驶续航里程却越来越多么?你体验过开个三月车却用不到100元油费么?今天这个车让我们知道到了答案!话说以前以上君并没有太关注过新能源车型,总感觉没有乐趣,但是真正开上贴近生活以后才发现插电混动是真的实用。YishangAuto第一眼看到唐100就...

    2018-04-07
  • Axure RP入门第六篇——加载地图

    产品经理入门:Axure RP入门第六篇——加载地图http://api.map.baidu.com/lbsapi/creatmap/index.html

    2018-03-21