现在市面上的这么多的h5交互设计软件，到底有什么差异？-H5教程

回复内容：

作为去年三月就被特斯拉翻页案例惊呆了然后立刻一周内花1万大洋找技术团队给某500强客户做了一个同样在当时看起来很屌但并没有卵用的翻页介绍之后又停不下来用了十几款H5免费软件的4A公司苦逼AE！看到这个题目还是决定在国庆节的最后一天回答一下

目前我所知道的H5设计软件大致可以分成两类，专业工具类和简易模板类。

专业工具类：VXPLO（貌似改版为iH5了）, Epub360, Google Web Designer , Adobe Edge , Hype

简易模板类：Maka , 易企秀，初页，兔展，易传单，品趣，点点客，秀制作，微杂志，云来，最酷轻应用，营销云，70度，Bluemp……

不过虽然软件很多，但国内专业类只有VXPLO和Epub比较靠谱，谷歌 Adobe Hype那些因为不适合中国国情根本用不了，而模板类同质化严重，基本上用一两个就够了。

模板类的选择很简单，因为基本都是简易自定义动画（类似简单PPT效果），加上用户作品模板化。而自定义功能在这个层次的软件基本没有任何区别，唯一选择的依据就是模板多不多，用户体验好不好。以本人阅软件无数的经验，用maka和易企秀就够了，前者用户体验好些，易企秀广告有点丑，不过模板多一些。

VXPLO和Epub的对比要有意思一些，都是国产良心之作，但软件的设计完全是不同风格，以下仅从个人使用角度分析一下优劣：

1、动画交互

VXPLO以“时间轴+轨迹”的方式组织动画，页面上每个动画元素对应一个轨迹，多个元素的轨迹可对应同一时间轴。通俗来讲就是，你用快播看电影，里面的演员各自都在行动，但是你可以通过播放进度条控制他们的状态，这里的播放进度条就是时间轴，表演的演员就是动态元素。也可以用多个时间轴来控制多个轨迹，这样各个元素的动作就是异步的。

Epub用的是PPT模式，通过动效组合及排列的方式组织动画，表达方式类似：A 动1→B 动1→C 动2→A 动3→C 动3→结束。

两种方式有利有弊。Epub模仿PPT的模式对一般人而言要更容易上手，但是对于稍微复杂的动画就有点效率低下，因为你要计算每个元素的动效相对上一个动效的时间差，这种方式在动画元素较多且动效组合复杂的情况下会比较晕，如果比喻成导演就是，100个群众演员，你每一个演员说完一句话都得告诉其他演员接下来要在什么时间后做什么，而且某个演员在时间上差错可能会对整体有很大的影响。

VXPLO的处理方式比较特别，感觉上是一种抽象思维，相当于把元素的动效抽象成一个个轨迹，再把轨迹统一由时间轴管理，好处就是效率很高，坏处就是学习成本高一些。还是用导演的例子，100个演员，每个人都有一个剧本，他们只要按照剧本要求的时间点和相应的台词动作执行，每个演员的表演相互独立，但通过时间轴建立协同。这种模式只要想清楚剧本，后期调整方便，并且可以单个元素调整而不影响整体。当然，这种思维方式需要一定时间才能掌握。

2、数据库应用

如果你的H5涉及评论、表单收集、微信登陆、排名这些功能，都属于数据库应用的范畴，这也是专业类软件区分模板类的重要功能之一。

VXPLO灵活度较高，所有字段以及表单的样式都由用户自己定义，模式是用户建立一个包含所需字段的空数据表单（可以认为是一个第一行是姓名 手机 邮箱 的excel），然后在页面画几个输入框，把各个输入框和表单的某一个字段（比如姓名）绑定一起，用户输入的信息会自动添加到对应的表单的列和行。表单可以排序和读取，于是实现评论、排名和登陆判断的功能。

Epub则要更容易操作一些，但自由度较低，所有评论、表单功能都是组件化的，添加评论和表单组件是整体添加，用户在提供的组件基础上修改。这种方式的好处是比较省事，坏处就是只能用固定的样式，字段和评论数量有一定限制，登陆判断暂时还没有组件支持。

（好久没登知乎，看在还有人点赞份上，再补充一些吧）

3、易用性和效率

其实所谓的易用性也是相对的，所谓“用”首先还是要满足需求，如果你的需求就是做一个方便展示信息和收集报名的邀请函，可能易企秀就够了，当然，像iH5这种较高级的工具也能做，但区别就是，很多时候你会用画图工具调整图片尺寸而不是PS。

不过只要你的需求稍微需要一些交互和逻辑，可能maka、易企秀就变得很烦人了，处处都是限制。具体到epub和iH5，两者还是差异挺大的，我的感觉就是epub其实介于 易企秀和iH5之间，形象点而言就是带交互的PPT，具体实现逻辑参考第1点动画交互的描述，总之给人感觉就是还行，不过可能因为基于PPT逻辑的关系，所以感觉很多复杂交互的东西还是实现不了。

iH5近似编程思维，感觉产品经理应该也是计算机出身，对类和继承的体现还是很明显的（好吧，如果你没学过计算机就忽略吧），能把编代码的工作可视化到这种程度，说实话个人还是比较佩服的，虽然还是比较复杂，但一般逻辑比较好的人还是很容易学会，好处就是一旦掌握了 基本什么效果都能做出来，而且iH5把所有元素的动画的对象化处理也对制作效率有比较大的帮助，可以很方便的在不同案例之间复制。

说句题外话，个人感觉这类工具市场还是非常大的，它其实是把编程平民化了。举个例子，几十年前可能做一张图片都要程序员编代码实现，但后来PS之类的工具出现了，普通人也能做很漂亮的图片，记得中学刚接触PS的时候也是觉得挺兴奋的。 现在其实iH5这种工具就是把 做网页的这种原本要编代码实现的事情平民化了，区别就是 会用PS的人比会编代码的人要多得多得多，以后做网页就跟做一张图片那样简单。 说实话，本来程序逻辑能解决的事就应该是能被机器替代的，个人觉得程序员迟早都是要失业的

跟iH5比较类似的主要是国外的软件，Adobe Animate CC、谷歌 Web designer ，还有苹果员工出来创业的Hype，其中Hype个人觉得是做的最好的，功能齐全，体验佳，不过就是离线的不太方便。有兴趣可以试试

易企秀
先讲最流行的，这个算是门槛最低的了，甚至于比PPT还要简单，操作简单，但是实际制作的内容没办法发挥出H5的最大效果，只能当幻灯片用。如果说题主的“交互设计”是指制作者的交互设计，那我这个答案里提到的都符合这个条件，但若是指“用户的交互”，易企秀也就到此为止了。

Vxplo
Vxplo不是很好用，不是说他不好，而是不好上手，什么帧之类的算的太细反而吓跑了我等小白众。第一次接触看到入门教程给的概念立马有种flash的感觉，但是由于功能过于强大，也导致各类模块繁杂，对于H5页面这样一类唯快不破的展示方式，入门成本确实过高了，但是如果投入进去绝对能做出不亚于Flash的惊艳效果。而在体验上来说，在安卓上中端机的体验并不算流畅（魅族MX4）

Epub360
我是先见到Vxplo再搜到Epub360，Epub360的上手难度中等，也需要付出一定的学习成本，但是入门比Vxplo快很多，我个人认为主要是时间轴控制的方式上的区别。
Vxplo是基于帧的，需要用户脑子计算每个动画效果的播放时长和播放时间点，Epub360是基于事件的，用户只需要考虑一个动画效果在哪个事件之后播放就行了
因此两家的构思逻辑上Vxplo会多一步转化
Vxplo 心里想的动画效果顺序>>>>转化成时间轴，精确到秒>>>>>实际播放效果
Epub360 心里想的动画效果顺序>>>>按照效果顺序设置动画效果排序>>>>>实际播放效果
由此可见Epub360更贴近直觉思维
而制作者的设计交互界面两家完全不是同一个风格
Vxplo是PS+Flash的感觉，很专业，但是很多操作只有一个图标，令人不明所以
Epub比较简洁，一眼了然Epub比较简洁，一眼了然


对于Vxplo与Epub360的总结：
两家走的其实不是同一条路，一家小而美，一家大而全，Vxplo甚至能做一些出乎想象的HTML5游戏，但是以我个人对H5的见解，几乎所有对H5互动页面有需求的企业都是利用H5针对一个短期的活动进行预热，因此这些企业的制作成本不高，而且非常快餐，这类H5的展示网页的生命周期大多不超过一个礼拜，这也就导致了即使有Vxplo和Epub360这两家“真互动”H5交互设计工具，市面上流行的仍然是易企秀之流。 近月来我也在研究一些制作H5交互的网站，这是我个人的一些体验分享给你：

Epub360（Epub360意派）

Epub360打造了一款专属于设计师的交互设计平台，操作简洁明了而又富有逻辑性。该软件提供了出色的动画效果，还支持路径动画、序列帧动画更有组合动画、动画组管理、动画时序管理等强大功能，就看设计师的脑洞有多大了。另外，该平台提供高度自由的交互设计还有可以利用微信高级接口设计互动级的H5 ，还有一些特色功能例如：高级表单、长按播放视频、svg变形动画等。

IH5（iH5最专业H5制作工具 &创作服务平台）

IH5的用户定位也是专业级设计师，虽在使用上稍稍复杂点，用户引导做的不是很完善所以入门需要花费点时间。但是其功能强大，其最具特色的要数多屏互动了，实现也很简单。该软件还提供了海量的模板、丰富的交互样式，用户可以直接编辑内容，自由度高、速成。

木疙瘩（Mugeda（木疙瘩））

木疙瘩是一款集设计、编码一体化的开发工具，主要偏向于解决移动互联网不支持传统动画开发工具Flash这一问题；Flash设计师上手较快，该平台除了提供Flash拥有的功能外，还在其基础上进行了功能完善。但有些功能的实现，需要设计师与程序员的密切配合，未能保证零代码操作。

补充一下一楼，VXPLO和EPUB使用上的一些区别。
声明：因为这两个工具都是在线平台，会随时更新功能，以下对比仅限于此此时此刻

使用范围：VX在同作品里可以设置支持多种屏幕设备，通过简单修改就能同时支持移动端的竖屏和桌面横屏。EPUB主要支持移动设备，另有COOLSITE以供制作自适应屏幕的项目。

视觉设计和排版操作：EPUB比较人性化，编辑状态默认以50%面积显示画布，有辅助对齐指示线和贴合功能，便于快速组合设计元素。VX有辅助线，但无法精确定位，比较鸡肋，这对一个严谨的设计师来说，真的很折磨。另外很想问一下VX的开发者，满大街的显示器都是1080，满大街的笔记本都是768分辨率，默认画布都无法全屏显示，你们是想拒绝这部分用户吗？

对象管理：VX有强大的对象树，一切对象包括分页、素材、事件、动画统统囊括，而且可以直接复制剪切粘贴对象（包括事件），便于统筹管理，但制作大项目的时候必须要有好的命名习惯，否则容易眼晕。EPUB则把各个对象分配到不同的面板，依据视觉元素》动画》事件的顺序排列，也比较合理，但是做小项目时几个面板绕来绕去也是比较麻烦。

动画效果：VX预置了时间轴、运动、缓动、动效等几种组件，其中动效里有几十个预设动画可选；用时间轴可以做细致的动画，另外还可以用视距参数做强大的三维动画，小白不详细学习的话估计会眼晕。而EPUB的动效集中在元素属性面板上添加，还有N个看得眼晕的加速度选项，可以在动画面板里统一管理，参数化操作，胜在快捷。

页面过度动效：EPUB集合了几种常用的页面过度效果，包括较炫的三维翻转。而VX那些强大的动效不能用在页面对象上，过渡效果只是一些加速度变化，聊胜于无。

特色组件：两家都在不定期的更新上线新组件。EPUB有地图导航（接入腾讯地图）路径动画，刚又上线了SVG动画。VX则有横幅、视频交互控制、多屏互动、、

外围设计(如作品管理分享)：VX比较简单明了，没什么限制。EPUB比较冗余，且限制较多，但胜在有用户自定义素材库。

总的来说，EPUB全部模块化参数化，适合小白快速出活。而VX更像是EPUB的底层，适合大拿深度研究。不过，具体项目上还得依据需求取舍。 因为老大说要做h5，就没办法百度了一下几款软件，身为设计师的，可以不需要学习代码就制作各种交互的h5效果，一下子逼格就高了。下面我谈谈几个我所使用过的h5编辑软件，可能不够全面，勿喷。

vxplo互动大师：灵活度高，可以自定义各种效果，功能强大，效果炫酷，对象的位置精确到像素，适合专业一点的设计师或者是逼格高的人使用。不足是新用户的引导做得还不够好，有点不知道要从哪里开始。看了几段视频之后才摸到点门道。不过工具确实足够强大，花一些时间学习后，什么交互效果都能做；技术做到这样，h5剩下的真的是拼创意了；不过小吐槽就是对设计师来说，少了排版功能，比如我想某个元素想在舞台上居中，客服回答说要自己根据坐标算一下，所以数学差一点的童鞋们暂时就绕路吧。

易企秀：简单易用，短时间就能上手，适合做展示，以及邀请函，最后一页是易企秀的尾页，商业做的话不太适合，后期没再使用了，不过貌似说现在可以买秀豆去尾页，具体的价格我不太清楚。但是缺点是自定义程度低，效果单一，做多了几个案例就腻了，统计数据的准确性需要进一步确认，有遗漏数据的现象，

maka，秀米等，其实我自己觉得他们跟易企秀都挺像的，不知道这几个产品具体的定位差异是什么。秀米功能对我来说太少了，maka就是网站不是太稳定。

暂时就用过这些。还有什么好介绍的？欢迎推荐。 现在H5创作工具太多了，同质化严重，谁能真正做到即简单，又不失专业性或者说叫灵活性，有图是款不错的工具（http://360youtu.cn)，他是由照片书制作类的图文排版工具延伸到H5的生成，所以，图片处理以及文字排版功能相对较强，也是国内唯一一款桌面软件（离线的），所以大图片和本地视频的导入和发布都比较方便，至少服务商不见了，原创的作品内容还在，有可能的，这么多同质化H5的，过不了多久会死掉一批，赚不到钱自然要消失，有图最大的弊端就是免费版只能保留3天，需要长期保留是收费的，10个币/页，不过对于有刚需的用户来讲，费用很低，可以忽略不计。有图不但可以创作H5，还能设计和印刷一本起订的画册等，对于创作需求的人来讲，还可以小满足一下个人的需求。 国内H5工具主要分三大类，偏轻度营销工具、轻营销工具和基础工具。

偏轻度营销工具比如易企秀、MAKA和兔展这些，只能做翻页的简单动效（相当于PPT的在线形式，如下图可见明显的页面结构），有PC网站形式也有APP，因为容易上手，有很多个人用户。

这种类型虽然受众多，但是严格意义上根本算不上营销工具，更多像是娱乐工具。就像美图秀秀是休闲软件，只能用它预设的滤镜一样。

轻度营销工具比如意派、木疙瘩这些，能做稍微复杂点的表单收集，是PC网站形式。这类工具以个人用户为主，但是也能吸引一些企业用户。

相比在线PPT，这些工具的优势在于能做简单的问卷采集，虽然不能自主设计表单（可以理解为问卷样式），但是至少能采集一些提交上来的数据。

基础工具国内只有http://www.ih5.cn一家，简单地说能做和H5相关的所有交互（如下图，以“对象”为基本单元编辑素材）。

听起来不是很可信，但的确是事实，因为只有ih5是自主开发引擎的，所以设计的自由度很高。其他工具基本用的是国外的开源引擎，说难听点就是套别人的源码，所以灵活度比较差。

ih5的企业用户比较多，因为它除了基本的翻页特效、动画动效这些PPT式的功能外，还会提供很多比较专业的功能（当然更大原因是知道的人太少啊，企业用户都是口口相传的，个人知道的不多所以用的也不多）。

比如数据库和变量这种用来收集数据的，屏幕设备这种用来做多屏互动的、时间轴轨迹这种用来做动画的，绘图事件这种用来做刷一刷特效的。

说糙点就是把传统上用dreamweaver这种一个G多的网页设计软件的功能给搬网上了，还搭上了axure这种做原型交互的软件的功能。 各位的评价都很赞，个人觉得VXPLO是灵活度较高的，实现的效果也多多的，还可以做很多牛逼的小游戏。例如： http://www.ih5.cn/idea/qlNd7hO
说到区别，有一个比较干货的文章，是讨论HTML5制作工具怎么做屏幕自适应的，不同工具方法不同吧。大家可以去围观一下哦~~html5制作工具怎么做屏幕自适应？ - flying 的回答 在网上看到谈来谈去的都是这几款，其实也有一些实用 的功能强大又容易上手的H5动画工具。
像有图、木疙瘩这些，它们在营销推广上投入不大，所以名气相对较小，但是在体验和功能上并不逊色。
有兴趣的朋友请自行去试用，花费不了多少时间成本。

1. 有图
http://www.360youtu.com
很 容易上手的H5页面制作工具，完全不需要编程基础；我比较喜欢的是它除了在线版本外还有离线版本，可以在本地编辑完成后再上传发布，对于担心网络状况的朋友其实是福音。
整体的动画制作思路和PPT动画很接近，容易上手，培训成本低，基本上30分钟就可以让新手来试做了。
报名表单、一键拨打电话等常见功能也都模块化，傻瓜实现，不需要懂编程。

2. 木疙瘩
http://www.mugeda.com
相比于互动大师，其实我觉得mugeda给我的感觉更接近于flash。总体来说两者有相似也有不同，不过都是属于学习成本相对较高的，有一定的flash动画制作经验的用户更容易上手。

抱着分享的态度，不是打广告，也不是和谁争论孰优孰劣；欢迎探讨，共同找到更好用的工具。 评价很中肯，我们努力服务好专业客户的同时也会开发更多地模版让新手也能更快上手，期待关注。