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和样式:


<! ixEdit把jquery和jqueryui整合到这一个js里了 -->
<script src="jquery/jquery-plus-jquery-ui.js"></script>

<!-- 使用xedit时需要的js和css文件,实际发布的时候不需要 -->
<script src="ixedit/ixedit.packed.js"></script>
<link type="text/css" href="ixedit/ixedit.css" rel="stylesheet" />	

具体可以参考压缩包中的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重写这部分会更好 =)

0 0 投票数
文章评分
订阅评论
提醒
guest

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

8 评论
最新
最旧 最多投票
内联反馈
查看所有评论
liuqin
liuqin
10 年 前

是不的排列有点问题啊

苏漾
10 年 前

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

Perchouli
10 年 前
回复给  苏漾

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

苏漾
10 年 前
回复给  Perchouli

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

Perchouli
10 年 前
回复给  苏漾

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

苏漾
10 年 前
回复给  Perchouli

[good] O了 给力啊

rokey
rokey
10 年 前

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

Perchouli
10 年 前
回复给  rokey

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