H5制作工具评测 | 典型H5、核心操作和成本

微信小程序的诞生，把H5推上舆论风口浪尖，同时普及了H5成为互联网新一代APP的实力和潜力。

“H5不是做营销的？”问这个问题的人越来越少。

“H5还可以做什么？”回答这个问题的人越来越多。

这次推荐的网站比较特别，它是H5，它也生产H5——

一、体验环境

体验案例：www.ih5.cn

评测时间：16年9月

浏览器：Google Chrome 53（PC端）

二、网站介绍

产品定位：专业的H5创作工具与服务平台

网站结构：

三、特色案例体验与解析

（1）720°全景：ZERO TO ONE（by 小漾互动）

以上是行内大名鼎鼎的720°全景VR淘宝造物节H5——《ZAO》——的翻版，主要使用iH5的全景相关组件实现。

（2）交互视频：7.19 魅族 MX6 这样玩陌陌真的好吗（by 大蛇）

最近特别火用一个视频撑起整个H5，比如魅族这个交互视频，利用iH5的视频组件，结合事件进行控制（视频一般用AE之类的第三方软件制作）。

（3）交互动画：顺丰同城“即刻送”（by 小牙）

顺丰御用动画设计师的大作，主要用的是iH5的时间轴组件，结合事件进行控制，比较考验H5的动效设计。

（4）连续动画：想家就出发，爱从无界限！（by 悟脚叔叔）

这个是业内常用的伪视频，看起来是视频，其实是通过在H5中上传图片压缩包（gif或zip）来播放图片动画，主要使用iH5的图片序列组件。

（5）重力感应游戏：百事·夺罐就现在（by 迪智特营销）

百事可乐的一个H5迷宫游戏，利用重力感应让小球在迷宫中游走，主要使用iH5的物理引擎相关组件实现。

（6）跨屏互动：来一斤母爱（by 李小豆）

这个H5得特别有诚意，通过两个手机之间的互动，连接两个人，主要使用iH5的屏幕组件和二维码，结合事件控制。

（7）画图互动：画出属于你的夏日座驾（by 悟脚叔叔）

画小人，你可能会想到361°或者网易里约奥运会的洪荒小人，不过这个H5是汽车品牌的广告，主要用到iH5的画图和时间轴。

（8）轻应用：拿起手机-拍下万达（by 晓舒）

万达这个摄影大赛的H5微官网表面看上去简单，实际上相当于一个轻应用了，因为涉及图片上传、分页输出、内容显示等考验逻辑能力的数据处理，主要使用iH5的数据库相关组件。

（9）PC网站：这个真的炸到我了｜WE ARE THE NIGHT（by wingz）

PC网站实际上用到的是iH5的图片、中文字体等多媒体组件，其实做起来反而简单，而是对设计功底的要求比较高。

四、其他差异化功能

·地理定位：支持获取玩家位置。

·语音识别：支持识别玩家录音内容。

·付费点：支持通过微信向玩家收取费用。

·微信红包：支持用微信派红包。

·设备：支持不同设备的自适应方案。

·多媒体控制：支持玩家控制gif、音视频播放与否、快慢、起始等。

·运动：支持物理运动轨迹的模拟。

·psd上传：支持psd的上传。

·画布遮罩：支持不同类型的遮罩层。

·文本匹配：支持不同文本的匹配判断。

·外链：支持网页、音视频、图片、文件等外链。

·文件上传：支持所有格式文件的上传。

·文件下载：支持玩家下载上传的文件。

……

五、淘宝造物节《ZAO》教程

以下教程摘自《一不小心，做出淘宝花了30万的720°VR全景H5…》（原文有所删改），主要是用iH5制作淘宝造物节H5的教程（注：《ZAO》原为开发案例，VML上海出品）。

（1）准备全景素材

（编辑：源码门户网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!