由于笔者职业为H5设计师,是靠H5设计承接客户的案子吃饭,客户的需求是各种奇葩,所以对于软件的自由度有一定要求,简易模板类的工具目前不在选择范围,但并不代表这些软件不好。
其实市面上的 H5 软件都很强大也很庞大,对于市面上大多数的H5效果,基本都能胜任,但由于笔者平时工作主要用的软件是意派Epub360,所以本文主要围绕有关于意派Epub360的特色功能进行评述,分为以下几方面:
初始使用感受:软件上手的第一印象。
动画及交互:这是做为专业软件的基本功,看是否可以实现酷炫的交互动画效果。
逻辑功能:要做轻游戏、测试题类的H5需要一定的逻辑功能。
数据功能:除了简单的表单数据收集,有些复杂的H5还需要数据库的支持。
屏幕适配:这个虽然不是很抢眼的功能,但又是非常重要的,直接影响到自己的设计作品是否能够在不同机型上得到很好的呈现。
特色功能:软件最有特点、做的最好的功能。
一、初始使用感受
意派Epub360初始上手,会觉得很熟悉,操作过PPT的人会很习惯意派Epub360的操作逻辑,基本上不用看教程便可进行简单的H5设计,但随着深入,意派Epub360会给你带来很大的惊喜,通过简单功能以及组件的不同组合,会产生各种可能,挑战你的不是如何操作,而是你的脑洞。意派Epub360采用页面方式来分组元素,比较直观,并有MasterPage、Layer的层级组织方式。
二、动画
1、基本动画设置
意派Epub360支持动效(目前简易模板类的工具都使用这种动画方式)、动画组合(类似PPT,但有动画组的概念),支持自定义曲线路径动画。
2、序列帧动画
可上传一组图片进行播放控制,并配有专门的触发器来进行精细的序列帧播放控制,序列帧动画也是意派Epub360的特色功能之一,优化的不错。
3、SVG动画
这也是意派Epub360的特色功能,可以从AI里导出SVG代码在编辑器里设置描边动画以及变形动画。
4、视差、联动交互动画
在意派Epub360里使用关联控制组件来实现联动交互动画,状态组动画是新推出的比较有特色的功能,可以实现任意状态的切换并实现自动补间。
5、陀螺仪组件
意派Epub360支持手机陀螺仪,可以可获取移动设备的3轴旋转角度,将旋转角度做为变量赋予元素的属性来实现动画。
三、交互
常规的交互事件,比如通过点击、长按、摇一摇等触发播放动画、控制视音频、设置变量、拨打电话、提交数据、修改分享短语、调取微信摄像头、录音等功能,都不在话下。
意派Epub360是通过添加触发器以及特殊的交互组件来实现交互效果,分为页面、元素、帧触发器以及动画触发器,并通过拖拽交互组件、碰撞检测交互组件、计时器组件实现特殊的交互,林林总总数十种触发事件,可以满足市面上多数的交互效果,意派Epub360还可以方便的定义事件统计,将用户的交互行为进行后台统计。
意派Epub360很注重交互组件的开发,将复杂的交互逻辑通过组件方式封装,可以大大提高效率。
四、逻辑判断
逻辑判断,是区分专业级工具和简易模板类工具的重要指标,具有一定的逻辑判断功能,可以设计小游戏、测试题等交互类H5,工具是一方面,最难的是设计者要有清晰的逻辑思维,这对于非理工科背景的人,掌握此技能将是一个挑战。
意派Epub360的逻辑判断很灵活,既有独立的参数变量、全局变量、随机数,同时在一些交互组件里也包含逻辑判断的属性,比如拖拽交互、碰撞检测,助力组件,计时器组件,将复杂的逻辑判断封装,方便设计师使用,同时结合新推出的数据库以及表达式功能,可实现的逻辑判断更加强大。
意派Epub360专门提供了条件判断组件,可以非常方便的进行多个条件判断设置及组织,很直观,方便后续的逻辑管理。
分享变量组件是非常有特色的组件,可以使同一个作品的不同访问者经过各自的修改分享出个性化的内容,可以很方便的实现助力类H5。
软件提供的系统参数也很有特点,可以方便监测当前的系统环境,可以识别用户当前打开H5的系统环境,根据不同的系统环境来进行页面逻辑的分别处理。可以识别微信、ios、安卓系统、windows系统、mac系统。
五、数据收集及数据库
数据收集大多是通过表单来实现,设计软件支持数据库也是蛮拼的,数据库功能可以设计自定义字段的数据表进行数据后台存储,可以进行数据的增删改查,对于H5的设计领域会有很大的扩展,在意派Epub360里分为基础表单、高级表单、数据库三个层级,简易表单可以实现基本的联系人信息、单选、多选的数据收集,并在后台进行数据查看和数据统计。
高级表单可以实现个性化的视觉呈现,使收集数据可以更有趣,意派Epub360对于表单功能做了很多拓展处理,游戏排行、评论,这些原本需要数据库才能完成的,都可以通过表单功能来快速实现。
数据库是意派Epub360今年8月份刚推出的模块,超级强大,可以自定义字段并有服务器端的约束,防刷票等数据安全性有一定的保障,支持数据表外链、支持多级过滤、关键词搜索等功能,除了目前常见的抽奖、助力、砍价、投票应用外,官方七夕还推出了基于数据库的交友H5,可实现简易的社交类应用,无编程可以实现到这种程度,也是很不易了。
六、适配
适配方面篇幅较多,主要分为手机屏幕适配、系统适配、响应式适配,虽然不是什么抢眼的功能,但对于设计师来讲非常重要。
目前意派Epub360的手机屏幕适配方式还是很特别的,引入了平面设计里的出血线的概念,分为内外两个区域,内区为安全区,确保内容不会被裁切。常用组件还有相对位置和尺寸自适应的选项,同时还提供了1:1、缩放以填充的适配方式,在适配手机屏幕方面做的最好,经测试,各种型号的屏幕尺寸适配的不错。
值得一提的是意派Epub360的系统参数,可以判断用户手机的操作系统,由于安卓和ios的系统差异,会导致复杂交互动画在安卓上体验不佳的情况,通过系统判断,可以针对于安卓系统做特殊的优化处理,这点很赞。
七、特色功能
做H5设计,大家可以根据自身的业务需求进行选择,以下的各自特色功能并不一定选择最酷炫的,也会考虑使用频度、开发的精细度以及稳定性。意派Epub360主要有序列帧控制、SVG动画、锚点、陀螺仪、适配、相对位置和尺寸自适应、分享变量、逻辑判断、数据库、代码导出等特色功能。
八、总结
意派Epub360,上手极快,而且充分考虑设计师的思维和软件使用习惯,很多功能提供多种实现方式,高级用户提供更高的自由度及高级组件来完成复杂的功能需求,同时也提供适合初学者的封装组件,尽量使复杂的问题简单化,出活更快,做为公司来讲,也意味着培养新人也快。随着数据库的推出提升了整体设计层级,可玩度更高。
同时,可以感受得到,在很多细节的处理方面做的很用心,虽然并不是可以炫耀的功能,但花了很多精力进行优化,比如预加载、序列帧优化及控制、尺寸适配、相对位置和尺寸自适应,在稳定性方面也是做的最好的。
对于初入此领域的设计师,建议先从意派Epub360入手,对H5交互设计整体有个概念,后续可在设计过程中可以根据自身的业务特点进行更多软件工具的选择。
h5页面制作地址:www.epub360.com
|