H5页面制作工具，实力推荐

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

　　今天就来给大家推荐一个超实用的H5页面制作工具——ih5.cn，零代码就能够轻松制作酷炫H5。

　　它是一个网站，打开网页就能在线编辑H5页面，并且拥有720°全景、重力感应、跨屏互动、画图互动等超多交互组件。

　　一、体验环境

　　体验产品：www.ih5.cn

　　评测时间：17年1月

　　浏览器： Google Chrome 53(PC端)

　　二、产品概述

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

　　网站结构：

　　产品服务

　　iH5是一个专业的H5页面制作工具，从它的四个产品服务来看，它提供一套完整H5广告制作解决方案，从培训、制作、发布到数据监控，构造出H5制作的生态链。以下重点介绍H5制作工具和教学培训。

　　(1)H5可视化编辑工具

　　iH5提供H5页面的在线可视化制作与发布，包括全景组件、画布、物理引擎、画图、付费点等高级组件。

　　从界面上看，iH5编辑器分为菜单栏、工具栏、属性栏、工作台、资源区5个部分，隐含用户、开发逻辑、操作逻辑三个方面。

　　a. 菜单栏：包括PSD导入、模板、在线课堂、LOGO等按钮，看起来简单，却涵盖iH5面向的不同群体。专业设计师需要依靠PSD分层进行设计，初学者需要依赖于模板和在线课堂，商业用户重视的是自定义LOGO的加载。

　　b. 工具栏：提供的组件大部分是比较基础的多媒体对象，诸如画布、输入框、变量、文本、全景容器等，几乎没有像表单、图表等组合程度较高的套件，说明iH5提供的是底层元素的交互，开发初衷是要确保设计的灵活性与拓展性。

　　c. 工作台：支持拖拽上传、拖拽改变属性等动作，属于iH5可视化编辑的方向之一，图形化的可操作界面。

　　d. 属性栏&资源区：以参数的设定为主，属于iH5可视化编辑的方向之二，文字化的属性配置。

　　iH5的整个界面其实跟PS有点类似，用起来非常友好，有PS基础的话是很好上手的。

　　(2)工具教学与培训中心

　　提供针对iH5的H5制作教学，包括线上的QQ群咨询、直播间、教学视频、教学手册，以及线下的课程培训。

　　本质上，采用的是线上免费教学、线下付费指导的模式。

　　三、功能分析

　　iH5遵循“图形化+事件+配置”的工作流程，用事件控制不同对象/元素的交互，相比其他工具在实际操作上对多媒体的控制更灵活多样。

　　(1)基础多媒体组件

　　一般的H5页面制作工具都具备的组件，比如中文字体、图片、音频、视频、地图等。

　　(2)高级多媒体组件

　　包括720度全景、物理引擎、时间轴、付费点等特色组件，属于HTML5网页支持的复杂功能，可能涉及外部js的应用。

　　(3)数据应用组件

　　与iH5数据库相关的功能组件，主要涉及对字段、输入框与变量的控制，属于HTML5网页表单相关的控件，拓展性较强。

　　(4)容器组件

　　用于iH5多媒体对象的中高层级控制，包括设备、屏幕、面板等组件，属于HTML5网页支持的顶层功能。

　　(5)其他功能

　　主要是一些外部js的应用，包括微信红包、微信设定内容、语音识别等。

　　四、iH5特色案例体验与解析

　　(1)720°全景：ZERO TO ONE(by 小漾互动)

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

　　(2)交互动画：顺丰同城“即刻送”(by 小牙)

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

　　(3)连续动画：想家就出发，爱从无界限!(by 悟脚叔叔)

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

　　(4)重力感应游戏：百事·夺罐就现在(by 迪智特营销)

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

（编辑：源码网）

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