技能之H5
自在园O设计Mix科技实验室，正在
搭建Mix技能树，前几期更新的技能有：
今天更新设计师进军科技领域的又一
技能H5。
作为新时期的设计师，不会制作H5 ，恐怕很难跟上时代的步伐了。
H5原本指的是html5的标准，后来逐渐特指用于营销、广告用途的页面形式。
关于H5，你需要掌握html标签、js语法、css样式。建议自学，网站http://www.w3school.com.cn/上有大量实例教程，我的经验是大概1个月可以入门。
H5的形式
H5目前有各种各样的形式，视频、图文、动画展示的、测试答题类的、故事场景类的、通关小游戏、重力感应全景类等。
设计风格
漫画风格、中国风、手绘板报风、考卷风格、报纸风格，也是各种各样的。
技术实现
大致有3种方式：
1、用软件，如adobe的Edge Animate。
制作HTML5动画的可视化工具，简单的可以理解为HTML5版本的Flash Pro
2、用web应用，如易企秀、初页等，工具还蛮多的，可以在这里查
http://www.chinaz.com/design/2015/0526/409474.shtml
3、编程的方式，主要运用javascript、jQuery、CreateJS（动画类）、zepto、CSS3、canvas技术、白鹭引擎、swiperJS、html5fullscreen等。
3种方式各有利弊：
1、用软件比较便捷，源文件受到保护，但有一个学习过程，并且需要自己部署到服务器上，效果只能在软件提供的功能上组合；
2、用web应用，有丰富的模版，操作简单，云端直接生成，自动部署，缺点就是源文件在第三方平台，并且需要付费才可去掉第三方标识；
3、编程，优点是效果完全定制，想做成什么样都行，源文件也受到保护，缺点就是编程代码量会比较大，花的时间会比较多，难度会比较高。
我觉得比较简单的编程方式推荐：
白鹭引擎是专门制作h5游戏的游戏引擎，也配套有图形化的软件lakeshore可以制作h5。
swiperJS，提供了一些成熟的模版，可以直接套用。
用zepto、html5fullscreen，可以在Github上搜索得到。
围绕创意来选择搭配，能达到目的，也不一定要编程。
一般H5制作涉及到的7个主要内容
预加载
如果有大量图片，视频等，为了体验流畅度，要借助JS实现资源预加载。
Loading页的设计
一个富有创意的loading页起到眼前一亮的作用。
web优化
网速很重要，所以图片要压缩，js、css文件加载顺序要注意
真机调试技巧
最后是需要面临各种用户机型的，多终端屏幕适配，横屏竖屏状态检测等。我一般是用Browsersync中的RemoteDebug－－CSS Outlining调试的。
Gif制作
一些动态效果可以用gif，而不用采用css或js，可以省很多事。关于Gif的技能我在前面已经介绍过啦，有需求可以查看：《5个用法，关于Gif》
背景音乐
我习惯使用<audio autoplay="" loop=""><source src="https://xxxxSong.mp3"></audio>这种方式。
但要注意audio标签跟video标签会互相影响，比如audio作为背景音乐，在播放中，碰到video标签时，video不能自动播放。
视频
可以使用webkit-playsinline 使iOS设备不会自动全屏视频。
如：
<video poster="img/H502video.png" preload controls webkit-playsinline>
<source src="480.mp4" type="video/mp4">
</video>
有一个经典单视频页面案例：
有兴趣对各种类型更深入的了解，可以参看h5-share这个公众号，收集了H5蛮全的案例。
以上为学习制作H5过程的一些经验心得，与大家分享。
设计+科技=
自在园O设计Mix科技实验室。