Epub360、iH5、Mugeda，三款专业级H5设计工具详评

自2014年微信带火了H5之后，各种无需编程的在线H5页面制作工具层出不穷，经历了近几年的发展，目前的H5设计软件，基本分为两大阵营，简易模板类和专业工具类：简易模板类的以大家熟悉的易企秀、Maka、初页、兔展、云来……等为代表，操作方便快捷但功能有限；专业H5设计工具，可以实现更酷炫的动画及交互，并拥有强大的逻辑功能，此类以Epub360意派、VXPLO（现在改为iH5），Mugeda木疙瘩为代表，国外的有Google Web Designer 、 Adobe Edge 、 Hype等，本文将围绕专业工具类的H5设计软件进行评述。

本文适用范围：

由于笔者职业为设计师，是靠设计承接客户的案子吃饭，客户的需求是各种奇葩，所以对于软件的自由度有一定要求，简易模板类的工具目前不在选择范围，但并不代表这些软件不好。目前H5最大的传播渠道在微信，国外软件在本地化应用方面做的不好，所以这里仅针对目前主流的三款国产软件：Epub360意派、iH5、Mugeda木疙瘩。

评述要点说明：

其实三款软件都很强大也很庞大，对于市面上大多数的H5效果，三款软件都能胜任，所以对于基本的功能会简单带过，有很多功能也未做阐述，会把重点放在三款软件各自的特色及差异方面。由于软件更新很快，本文所述有效时间为2016年8月前。

本文主要围绕以下几方面进行评述：

初始使用感受：三款软件上手的第一印象。
动画及交互：这是做为专业软件的基本功，看是否可以实现酷炫的交互动画效果。
逻辑功能：要做轻游戏、测试题类的H5需要一定的逻辑功能。
数据功能：除了简单的表单数据收集，有些复杂的H5还需要数据库的支持。
屏幕适配：这个虽然不是很抢眼的功能，但又是非常重要的，直接影响到自己的设计作品是否能够在不同机型上得到很好的呈现。
特色功能：每款软件最有特点、做的最好的功能。

最后会给出笔者的总结，由于是笔者亲历的主观认识和感受，难免有所疏漏，本文仅供参考。

注：以下按软件首字母排序，本文不对软件总体打分排名，网上也有些文章对软件进行所谓的打分排名，其实是没有实际意义也是不负责任的做法，能够拿到这里进行评述的软件，都有自己的杀手锏，同样，也都有自己的不足之处，用户可以根据自身的团队组成及业务特点来选择最适合的工具，用足每款工具的最优功能来满足业务需求才是王道。

一、初始使用感受

1.Epub360意派（www.epub360.com）

Epub360初始上手，会觉得很熟悉，操作过PPT的人会很习惯Epub360的操作逻辑，基本上不用看教程便可进行简单的H5设计，但随着深入，Epub360会给你带来很大的惊喜，通过简单功能以及组件的不同组合，会产生各种可能，挑战你的不是如何操作，而是你的脑洞。Epub360采用页面方式来分组元素，比较直观，并有MasterPage、Layer的层级组织方式。

2.iH5互动大师（http://www.ih5.cn/）

iH5，初始上手，会觉得无所适从，不看教程基本无法进行设计，需要重构你的思维及习惯，ih5采用对象树来组织媒体元素，有父子对象概念（估计产品经理是程序员出身），交互动画方面采用时间轴…，但随着你的学习深入及逻辑能力的提升，会发现ih5的强大，各种热门功能基本都能实现。

3.Mugeda木疙瘩（www.mugeda.com）

打开界面会觉得一股专业范儿，深灰色的UI，满满的工具栏，mugeda定位为专业级动画制作云平台，整体沿用flash的设计逻辑，如果有flash、AE基础，估计会很快可以习惯，mugeda的动画、遮罩很有特色，但涉及到复杂的交互功能，就需要代码介入，这点也和flash的开发流程相似。

二、动画

1.Epub360

基本动画设置：Epub360支持动效（目前简易模板类的工具都使用这种动画方式）、动画组合（类似PPT，但有动画组的概念），支持自定义曲线路径动画。
序列帧动画：可上传一组图片进行播放控制，并配有专门的触发器来进行精细的序列帧播放控制，序列帧动画也是Epub360的特色功能之一，优化的不错。
SVG动画：这也是Epub360的特色功能，可以从AI里导出SVG代码在编辑器里设置描边动画以及变形动画。
视差、联动交互动画：在Epub360里使用关联控制组件来实现联动交互动画，状态组动画是新推出的比较有特色的功能，可以实现任意状态的切换并实现自动补间。

Epub360支持动画的快速复制和粘贴，这点非常方便，目前不支持遮罩动画，有些遗憾。

Epub360是三款软件里唯一一个不使用时间轴做为动画设定的工具，初始会觉得动画设置简单、上手很快，但随着深入，会发现能实现相当复杂的动画效果。

2.iH5

基本动画设置：ih5主要采用时间轴的设定方式，可以设定关键帧，熟悉flash或者AE的设计师上手会比较容易掌握。
Gif序列动画：可上传gif或者一组图片的zip压缩包进行播放，也可以通过添加事件进行控制，对gif进行播放控制，实际上是将GIF转换成图片序列，但转换后，会带来图片容量变大，会耗费内存。
物理引擎：可实现简单的重力模拟运动效果。
视差、联动交互动画：ih5有滑动时间轴的概念，来实现视差、联动交互动画。
3D旋转动画：ih5支持X、Y、Z三轴带透视旋转动画。
属性动画：可以通过事件来改变对象位置大小等属性来实现动画效果。

iH5的滑动时间轴有些特色，目前暂不支持SVG动画。

3.Mugeda

基本动画设置：Mugeda木疙瘩基本上沿用了flash的时间轴动画设定方式，可以设定关键帧，支持自定义路径动画，支持遮罩。
遮罩动画：Mugeda支持自定义路径的遮罩，并可以进行动画控制，这点是三款软件里做的最好的。
3D旋转动画：Mugeda支持X、Y、Z三轴带透视旋转动画。
路径及变形动画：Mugeda支持图形的变形动画（仅支持用Mugeda本身工具创建的图形）
视差、联动交互动画：在Mugeda里，采用关联动画实现此类效果，可以将一个元素的位置大小属性做为变量传递给另一个元素，来实现联动的效果。
陀螺仪控件：Mugeda制作的动画可以支持手机的陀螺仪功能，可获取移动设备的旋转角度，将旋转角度联动元素坐标进行动画播放。

在动画设置领域，三家各有特色功能，Epub360设置最快捷，其中序列帧播放控制、SVG动画、状态组补间动画是其特色，ih5的滑动时间轴以及物理引擎动画很有亮点，Mugeda的遮罩动画、陀螺仪控件、关联动画做的很好，ih5和mugeda都采用时间轴方式进行动画设定，可以设置的很精细，但同时会消耗较多的时间成本。

三、交互

常规的交互事件，比如通过点击、长按、摇一摇等触发播放动画、控制视音频、设置变量、拨打电话、提交数据、修改分享短语、调取微信摄像头、录音等功能，三款软件都不在话下。

1.Epub360

Epub360是通过添加触发器以及特殊的交互组件来实现交互效果，分为页面、元素、桢触发器以及动画触发器，并通过拖拽交互组件、碰撞检测交互组件、计时器组件实现特殊的交互，林林总总数十种触发事件，可以满足市面上多数的交互效果，Epub360还可以方便的定义事件统计，将用户的交互行为进行后台统计。
Epub360很注重交互组件的开发，将复杂的交互逻辑通过组件方式封装，可以大大提高效率。

2.iH5

iH5是通过添加事件的方式进行交互，通过事件组来简化一定的工作量，除了常规的交互事件外，也支持碰撞检测以及计时器，2016年上半年整合了物理引擎，也可以实现简单的重力感应等交互效果，ih5还支持对象克隆功能以及跨屏应用、桌面端的视频交互。

3.Mugeda

Mugeda是通过添加动作行为的方式设置交互，常用的交互效果可以进行可视化设置，但复杂的交互，Mugeda提供扩展的api进行代码级的实现，具有极高的灵活度，这对于有前端开发人员的团队是个很强悍的功能，但对于一般的设计师团队，基本上无法掌控，

四、逻辑判断

逻辑判断，是区分专业级工具和简易模板类工具的重要指标，具有一定的逻辑判断功能，可以设计小游戏、测试题等交互类H5，工具是一方面，最难的是设计者要有清晰的逻辑思维，这对于非理工科背景的人，掌握此技能将是一个挑战。

1.Epub360

Epub360的逻辑判断很灵活，既有独立的参数变量、全局变量、随机数，同时在一些交互组件里也包含逻辑判断的属性，比如拖拽交互、碰撞检测，助力组件，计时器组件，将复杂的逻辑判断封装，方便设计师使用，同时结合新推出的数据库以及表达式功能，可实现的逻辑判断更加强大。

Epub360专门提供了条件判断组件，可以非常方便的进行多个条件判断设置及组织，很直观，方便后续的逻辑管理。

分享变量组件是非常有特色的组件，可以使同一个作品的不同访问者经过各自的修改分享出个性化的内容，可以很方便的实现助力类H5。

软件提供的系统参数也很有特点，可以方便监测当前的系统环境，可以识别用户当前打开H5的系统环境，根据不同的系统环境来进行页面逻辑的分别处理。可以识别微信、ios、安卓系统、windows系统、mac系统。

2.iH5

iH5的逻辑判断功能也很强大，主要由计数器、变量、二维变量、数据库组成，可实现非常灵活的数据存储、赋值及判断。

iH5的获取对象属性很强大，可获取目标对象的X坐标、Y坐标、宽、高、旋转（顺时针）、X轴旋转、Y轴旋转、视距、资源位置这些属性，输出到变量进行判断，并提供对象克隆功能，这点很有特色。

iH5还提供cookie功能，可以将数据存储在用户的浏览器缓存中，方便下次打开进行历史数据获取。

iH5的二维变量功能也很有特色，可以存储一组数据进行后续操作。

3.Mugeda

Mugeda提供行为参数以及执行参数表达式方式进行逻辑设计，更侧重于动画的交互逻辑。

Mugeda可以获取元素的属性，并根据元素属性变化来设置后续的交互逻辑，这点和ih5的获取对象属性有些类似。

Mugeda由于提供了API接口，所以更复杂的逻辑判断，可以通过代码来实现。

逻辑判断方面，三款软件都可以实现常见的逻辑功能，Epub360还提供了部分逻辑封装以及直观的条件判断组件，胜在快捷，对设计师的友好度方面做了很多考虑，ih5的二维变量、获取对象属性很灵活，Mugeda采用Flash的工作流方式，支持代码级的设置，胜在开放。

五、数据收集及数据库

数据收集大多是通过表单来实现，设计软件支持数据库也是蛮拼的，数据库功能可以设计自定义字段的数据表进行数据后台存储，可以进行数据的增删改查，对于H5的设计领域会有很大的扩展，目前这个领域，我只看到国产软件实现了此类的功能，可以实现可视化的数据库应用操作，但对设计师来讲，如何用好也是一个挑战。

1.Epub360

在Epub360里分为基础表单、高级表单、数据库三个层级，简易表单可以实现基本的联系人信息、单选、多选的数据收集，并在后台进行数据查看和数据统计。

高级表单可以实现个性化的视觉呈现，使收集数据可以更有趣，Epub360对于表单功能做了很多拓展处理，游戏排行、评论，这些原本需要数据库才能完成的，都可以通过表单功能来快速实现。

数据库是Epub360今年8月份刚推出的模块，超级强大，可以自定义字段并有服务器端的约束，防刷票等数据安全性有一定的保障，支持数据表外链、支持多级过滤、关键词搜索等功能，除了目前常见的抽奖、助力、砍价、投票应用外，官方七夕还推出了基于数据库的交友H5，可实现简易的社交类应用，无编程可以实现到这种程度，也是很不易了。

2.iH5

iH5的数据库是最早推出的，同样支持自定义字段，结合二维变量功能可以实现一定的数据库操作，支持数据的查询过滤及排序，可以实现诸如投票、助力、游戏排行等H5。

iH5的数据存储还提供cookie的方式，将用户的数据临时存储在本地以供下次打开时调用。

3.Mugeda

Mugeda的数据功能相对于前两款显得比较弱，仅提供基础的表单类功能，当然，也可以自己写代码来补充这部分功能。

三款软件的数据功能差异比较大，Epub360后来居上，从表单到数据库，由简到繁，相对比较完整，Epub360里的数据库是在后台定义，H5引用，方便多个H5交叉引入数据。ih5推出的较早，也很强大，但简单的数据收集也需要数据库，使用门槛高了些。

六、适配（手机屏幕适配、系统适配、响应式适配）

适配方面篇幅较多，虽然不是什么抢眼的功能，但对于设计师来讲非常重要。

1.Epub360

目前Epub360的手机屏幕适配方式还是很特别的，引入了平面设计里的出血线的概念，分为内外两个区域，内区为安全区，确保内容不会被裁切。常用组件还有相对位置和尺寸自适应的选项，同时还提供了1:1、缩放以填充的适配方式，在适配手机屏幕方面做的最好，经测试，各种型号的屏幕尺寸适配的不错。

值得一提的是Epub360的系统参数，可以判断用户手机的操作系统，由于安卓和ios的系统差异，会导致复杂交互动画在安卓上体验不佳的情况，通过系统判断，可以针对于安卓系统做特殊的优化处理，这点很赞。

适配桌面、pad、phone端的响应式页面，虽然Epub360可以自定义页面尺寸来设计桌面端的H5，但不支持响应式，意派家的另一款Coolsite360，是专门用来设计响应式网站的，在响应式网页设计方面，做的很专业，可以看得出，意派家的产品针对不同的领域，选择采用不同的产品来解决，不会做的大而全，这可能也是意派家的产品设计理念吧。

2.iH5

iH5提供自定义页面尺寸和响应式设计功能，ih5提供的响应式功能其实是需要设计多套H5页面，根据不同的屏幕尺寸来调用不同尺寸的H5页面，不像意派家的Coolsite360自动进行响应式排版。

iH5的移动端页面，在手机屏幕适配方面做的差强人意，有些机型会出现内容被裁切以及出现页面滚动的情况，当然也可以多设几个屏幕尺寸进行调整，但未免太繁琐，目前也没有相对位置的处理机制。

3.Mugeda

Mugeda默认的适配方式是宽度适配，垂直居中。这种适配方式，会导致内容在某些设备上出现图片被裁掉的情况，需要提前考虑预留区域，但未提供像Epub360那样的出血区，Mugeda还提供高度适配、包含、覆盖、全屏集中显示方式来满足不同的设计。

Mugeda目前不支持相对位置，不提供响应式功能和系统识别功能。

七、特色功能

虽然三款软件都是做H5设计，但各有特色，大家可以根据自身的业务需求进行选择，以下的各自特色功能并不一定选择最酷炫的，也会考虑使用频度、开发的精细度以及稳定性。

1.Epub360

序列帧控制、SVG动画、锚点、适配、相对位置和尺寸自适应、分享变量、逻辑判断、数据库、代码导出

2.iH5

对象树、滑动时间轴、设置对象属性、多尺寸响应、物理引擎、二维变量、跨屏应用、红包及支付、数据库。

3.Mugeda

路径动画、联动、遮罩、API及代码支持、代码导出。

八、总结

Epub360、ih5、Mugeda，三款软件都是一个领域的产品，但从产品设计角度上还有很大的差异，以下是笔者对于三款软件的感受及建议：

Epub360：快、可简可繁

Epub360，上手极快，而且充分考虑设计师的思维和软件使用习惯，很多功能提供多种实现方式，高级用户提供更高的自由度及高级组件来完成复杂的功能需求，同时也提供适合初学者的封装组件，尽量使复杂的问题简单化，出活更快，做为公司来讲，也意味着培养新人也快。随着数据库的推出提升了整体设计层级，可玩度更高。

同时，可以感受得到，在很多细节的处理方面做的很用心，虽然并不是可以炫耀的功能，但花了很多精力进行优化，比如预加载、序列帧优化及控制、尺寸适配、相对位置和尺寸自适应，在稳定性方面也是做的最好的。

同时，Epub360也有很多不足，对于遮罩、改变元素属性、基础3D旋转还有待完善。

iH5：大、全面

iH5，功能很全面，对象树组织的很有条理，有很多热门的功能，从3d、物理引擎、数据库到近期推出的全景，基本涵盖了当下流行的功能，iH5自己定位为H5界的PS，推出新功能的频率也很快。

当然，iH5也有很多需要完善的方面，学习门槛高，需要用户重新构建使用习惯，有些简单的效果实现的方式过于复杂，功能全面也是把双刃剑，方便了用户，不用切换多个软件，但可能由于精力有限，很多功能点到而止，细节还有待完善，其实功能宁可少些，先将最基础的适配、高频的功能细节做到位更好。

Mugeda：专、开放

Mugeda，给人的感觉是很安静，很节制，没有iH5那么大力度进行市场推广，但也拥有了一批忠实用户，在动画方面有很突出的优势，Mugeda沿用了flash的工作流，提供了设计和开发的统一平台，对于以前有Flash开发经验的团队会是很棒的软件，Mugeda也是唯一提供完整API开放接口的产品。

目前，Mugeda的数据功能还相对简单，也可能是产品设计的理念，专注做好动画，提供开放接口，不解决所有问题，其他的，让程序员去解决吧，这点虽然也不错，但会流失很多没有开发团队的用户，未免有些可惜。

Epub360、i5、Mugeda，三款软件都可谓国产软件的良心之作，以往设计领域，基本上被adobe、autodesk等国际大牌垄断，但在H5领域，由于本地化的原因，也促成了此领域国产软件的崛起，而且也具有相当的水准。

三款软件都能完成大部分高自由度的H5设计，做为用户，其实不用担心软件是否能够完成自己的需求，反而应该花时间完善自己数字媒体的交互设计理念，对于初入此领域的设计师，建议先从Epub360入手，对H5交互设计整体有个概念，后续可在设计过程中可以根据自身的业务特点进行更多软件工具的选择。

附：在H5案例分享网站、H5说上，可以看到很多基于这三款软件的设计作品，可以参考学习，也可以通过作品评估下三款软件的特色。

Epub360、iH5、Mugeda，三款专业级H5设计工具详评相关推荐

7款免费原型设计工具
身为一位产品经理或设计师,原型设计工具是必不可少的工作伙伴.但我们难免会遇到预算有限的时候,这时候,去哪里寻找一款好用的免费原型设计工具呢?以下,小编为大家精心挑选了7款免费的原型工具,并对其进行了简 ...
linux 原型软件,7款免费原型设计工具，总有一款是你的菜！
身为一位产品经理或设计师,原型设计工具是必不可少的工作伙伴.但我们难免会遇到预算有限的时候,这时候,去哪里寻找一款好用的免费原型设计工具呢?以下,小编为大家精心挑选了7款免费的原型工具,并对其进行了简 ...
4款交互原型设计工具评测
概述:原型设计工具:Axure是Web产品前期设计的首选,能快速.简易地建立Web AP和Website的线框图.流程图.网站架构图.示意图和HTML模版等:Prototype Composer: 一 ...
云麦体脂秤华为体脂秤_华为、小米和有品体脂秤哪个品牌好？三款智能体脂秤横评结果排行...
如今生活水平的提高,也让更多人开始关注健康问题.由于大部分时间都忙于工作,本身就运动少.体重超标等等.如果长期得不到控制的话,会造成日后脂性肝炎.肝纤维化.肝癌,想想都可怕,在意识到这样的严重性,不得 ...
推荐的四款产品原型设计工具
与一般针对产品功能的介绍不同,本文以亲身的设计需求为出发点,通过对产品整理和提供相关的链接,帮助解决从业人群对做产品页面原型的直接需求.可以为做产品设计的童鞋提供一些参考和下载帮助. 天天和产品打交道 ...
于浩java_巅峰之战三款最热java浏览器横评
对于非智能机用户来说,有一款出色的Java手机浏览器是尽享手机冲浪乐趣的关键.目前,中国java手机浏览器市场,用户最热衷的莫过于OperaMini.UC浏览器7.7.手机QQ浏览器2.0.那么,这三 ...
10款免费原型设计工具，产品设计得力助手
经过多年的产品设计的积累,也对原型设计工具产生了很大依赖,可以这么说,很多优秀的产品设计,是离不开产品设计工具的,一个好的产品设计需要的工具由很多,例如:图片处理的photoshop.文档描述的wor ...
分享| 三款在线临时文件分享工具，无需注册
今天给各位分享三款在线的工具,主要功能就是无需注册直接上传文件然后做分享,类似服务在国外很流行,但由于带宽成本以及监管问题,这类服务在国内极少. AirPortal 空投官方网址: https:// ...
简单操作、高质量转换：三款在线转换mp3工具分享
在音视频格式转换领域,MP3格式转换是常见的需求.为了解决这一难题,本文介绍了三款优秀的工具,它们在功能性.操作性和适用性方面具备出色的表现.无论您是软件开发者.文档转换需求者,还是对音视频转换有需求 ...
怎么给视频添加字幕？三款视频字幕添加工具帮你轻松解决
当我们在社交媒体上分享自己制作的视频时,可能会想要为视频添加字幕.因为这可以让观看视频的小伙伴更好地理解和欣赏我们的视频内容,还可以帮助提升我们的影响力和吸引力.但是手动添加字幕可能需要花费大量的时间 ...

Epub360、iH5、Mugeda，三款专业级H5设计工具详评

Epub360、iH5、Mugeda，三款专业级H5设计工具详评相关推荐

最新文章

热门文章