技能之H5

自在园O设计Mix科技实验室，正在

搭建Mix技能树，前几期更新的技能有：

技能之AR技术入门

5个用法，关于Gif技能

技能之用iMovie制作预告片

今天更新设计师进军科技领域的又一技能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="http://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科技实验室。