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重写这部分会更好 =)

avatar

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

  Subscribe  
最新 最旧 得票最多
提醒
liuqin
游客
liuqin

是不的排列有点问题啊

苏漾
游客

看到文件中有一定的中文 已经翻译了 但不知道怎么可以切换到中文界面

Perchouli
游客

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

苏漾
游客

中文win7 IE9 Chrome Opera 全都显示英文 悲催 能手选就好了

Perchouli
游客

我几分钟前更新了代码,重新clone一份看看?…

苏漾
游客

[good] O了 给力啊

rokey
游客
rokey

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

Perchouli
游客

在这里: https://github.com/perchouli/ixedit 这是我修改过的版本,不依赖Google Gears,目前在linux下的firefox和chrome测试通过。