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意派（）
Epub360初始上⼿，会觉得很熟悉，操作过PPT的⼈会很习惯Epub360的操作逻辑，基本上不⽤看教程便可进⾏简单的H5设计，但随着深⼊，Epub360会给你带来很⼤的惊喜，通过简单功能以及组件的不同组合，会产⽣各种可能，挑战你的不是如何操作，⽽是你的脑洞。Epub360采⽤页⾯⽅式来分组元素，⽐较直观，并有MasterPage、Layer的层级组织⽅式。
iH5，初始上⼿，会觉得⽆所适从，不看教程基本⽆法进⾏设计，需要重构你的思维及习惯，ih5采⽤对象树来组织媒体元素，有⽗⼦对象概念（估计产品经理是程序员出⾝），交互动画⽅⾯采⽤时间轴…，但随着你的学习深⼊及逻辑能⼒的提升，会发现ih5的强⼤，各种热门功能基本都能实现。
3.Mugeda⽊疙瘩（www.mugeda）
打开界⾯会觉得⼀股专业范⼉，深灰⾊的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，推出新功能的频率也很快。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论