Front Tech

IxEdit原型交互设计工具

某人是Firework的忠实用户,Firework设计完成后可以直接导出为HTML,做原型非常方便。但近几年Axure开始流行,于是某人被迫投身Axure门下,当时MAC版的Axure问题多多,这让他很不高兴,四处搜罗可以重现Firework荣光的玩意,最近他找到了IxEdit,但一直装不上,于是直接扔给我捣鼓,故在此汇报研究成果。

IxEdit可以让设计师根据自己的想法设计页面的交互行为,并生成 jQuery+ jQueryUI的代码。它不是原型设计工具,而是一个js代码生成器,只专注于交互效果,所以它和一些只能生成原型,不能做交互效果的工具——比如Firework是相当绝配的。相比Axure,IxEdit依靠Web浏览器来运行,不受平台的制约,而且生成的代码也可以直接使用。目前还是Beta版,也许正式release的时候会有更完善的功能。

Install

之前Web开发中,本地存储是个很麻烦的问题,于是Google开发了Google Gears,并将其内置在Chrome中,但HTML5推出后这个问题已经被解决了,Google不再更新Google Gears,而且Chrome10以上版本中去掉了Google Gears,于是这就造成了麻烦,大家都使用的是高版本的浏览器,而且通常都是非Windows环境,所以很难安装Google Gears。我把ixEdit对Google Gears依赖的部分先注释掉了,现在保存还有问题,但是可以运行,之后有空我会慢慢修正Bug。点这里查看不依赖Google Gears的ixEdit

目前已经测试通过的环境:

  • Windows: 1.直接使用Chrome10以下版本;2.使用IE9以下版本打开并安装Gears for windows; 3.使用Firefox3.6以下版本打开并安装Gears for windows;
  • Linux: 1.直接使用Chrome10以下版本;2.在Firefox3.6中安装本文后面的扩展;
  • Mac: 至少目前在Mentor的机器上试过了几个版本的Chrome和Safari,还未成功= =||

只要装好了Google Gears,剩下的就很简单了,点击这里下载Package包,在HTML中引入js和样式:

具体可以参考压缩包中的readme.html。安装后会确认是否接受Gears读写本地文件,确认之后就可以看到界面了:

Use

IxEdit本身可以涵盖JQ几乎所有的Effect,大部分DOM操作,可以很方便的绑定各种鼠标/键盘事件,但不能生成AJAX。

首先要选择Action,即事件如何被触发,其次要设置Reaction,当这个动作被触发后执行哪些动作。还可以设置Condition,即在满足什么条件的情况下,Action和Reaction才会被执行。下图演示的是,当点击Submit按钮,如果Username的value是?,就弹出错误提示,整个设置不需要任何的JQ知识就能完成:

最后,选择菜单中的Deploy,它就能自动生成jQuery代码可。

Afterword

原型设计工具很多,有桌面的,有在线的,或者我们还可以手绘。但现在的Web开发越来越强调用户体验,交互的设计也越来越重要,IxEdit提供了一个简单易用的解决方案。由于其本身是开源的,所以我去掉了其中的本地存储功能,这样就不需要安装Google Gears了,但也丢失了存储功能,所以如果有人能用HTML5重写这部分会更好 =)

9 thoughts on “IxEdit原型交互设计工具”

  1. 好像是09年的产品,之后其官网貌似就没怎么更新过,不知道博主说的“不需要安装Google Gears也可以使用“的IxEdit在哪可以下载…谢谢了

    1. 会自动检测浏览器类型,切换显示的语言。 用中文浏览器打开(我在IE8下测试过没有问题,其他浏览器没装中文的版本所以不确定)就可以了。

Leave a Reply

Your email address will not be published. Required fields are marked *