• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > 现在市面上的这么多的h5交互设计软件,到底有什么差异?

现在市面上的这么多的h5交互设计软件,到底有什么差异?

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含等相关知识,匿名希望在学习及工作中可以帮助到您

回复内容:

作为去年三月就被特斯拉翻页案例惊呆了然后立刻一周内花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比较简洁,一眼了然


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

Epub360(Epub360意派)

Epub360打造了一款专属于设计师的交互设计平台,操作简洁明了而又富有逻辑性。该软件提供了出色的动画效果,还支

您可能想查找下面的文章:

相关文章

  • 2018-12-03Web Component 与微软十五年前提出的 HTML Component 有什么区别和联系?
  • 2017-08-06html5 svg 中元素点击事件添加方法
  • 2018-12-03检测浏览器是否支持html5视频的代码_html5教程技巧
  • 2018-12-03html5 canvas和JavaScript如何实现本地截图
  • 2018-12-03你必须知道的28个HTML5特征、窍门和技术
  • 2018-12-03HTML5 or Silverlight?
  • 2018-12-03[HTML5游戏开发]挑战横版ACT(二):秀身手勇猛如当年
  • 2018-12-03HTML5应用-生日快乐动画的实现
  • 2018-12-03HTML5 Canvas绘制文本及图片的基础教程_html5教程技巧
  • 2018-12-03HTML5本地存储之Database Storage应用介绍_html5教程技巧

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • html5页面如何实现点击复制的功能 (完整代码)
    • Html5 Canvas初探学习笔记(10) -复杂路径
    • 实践HTML5的CSS3Media Queries的示例代码分享
    • HTML5 Video标签的属性、方法和事件汇总介绍
    • 微信站前端开发注意点?
    • 怎么制作一个H5响应式网站?
    • [html5游戏开发]经典的推箱子
    • html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法_html5教程技巧
    • 细说h5中cookie,localstorage与sessionstorage的区别
    • h5正常文本框提示语的实现方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有