站长之家- 传媒 2017-01-24T15:57:22 +08:00

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的物理引擎相关组件实现。

  (5)跨屏互动:来一斤母爱(by 李小豆)

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

  (6)画图互动:画出属于你的夏日座驾(by 悟脚叔叔)

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

  (7)PC网站:这个真的炸到我了|WE ARE THE NIGHT(by wingz)

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

  五、结语

  国内外其实都出过很多H5页面制作工具,但适用于商用的大多是国外的大牌软件,比如Adobe Animate、Google Webdesigner、Tumult Hype等;国内平台很多做的是组合套件,这样带给创作者发挥的空间很少,所以iH5这样的H5页面制作工具实属难得。

推荐关键词

24小时热搜

查看更多内容

大家正在看