这篇文章有点标题党,但内容值得你看。
Axure在笔者心目中是一款伟大的老牌产品。对于从2003年就开始专注在原型设计工具这个领域的专家,笔者非常敬重。本文并无猥亵之意。
当然,这个“伟大”仅仅限于英文中的那个“great”,而非中文的“伟大”。老外是很容易说“great”,那么就用这个词给它。咱们国人的“伟大”其实不能随便给,所以得废话两句来说明。
说正题,交互设计是我们原型设计中很重要的一部分, 是否能够快速搞定?设计的效率如何?是否简单易用?很大程度上决定了我们在原型设计上花费的时间和成本。

Axure做交互有多慢?

快慢是相对的,我们不妨用另一款工具做个对比吧,既然Mockplus和Axure都自称“快速原型设计工具”,那我们就来看看。

问题1:设置交互有多慢?

设置交互,是完成一个交互设计的开始。

Axure – 弹窗筛选,多步设置

做任何一个交互,需要在图中的弹窗中,在一堆事件和一大堆的页面组件中去找到一个交互目标。

我看过几本关于Axure的书籍,其中都提到一个“精要”,就是反复提醒你:在做交互的时候,一定不要忘记给每个组件取个名字——为什么呢?因为做交互的时候不好找。

在最新的Axure 8 中,特意把设置组件名字的输入框单独放出来,然后做得很大,就是要善意地告诉你:“哥,别忘了先取名字哦,不然,到时候你找不到哦”。

重要的事情说三遍,咳,咳。

1000

Mockplus – 一键拖拽

与其它原型设计工具不一样,Mockplus采用了非常直观的拖拽方式来设定交互目标。红色的连接线,随着鼠标拖哪连哪。连到的组件,就是交互目标。松开鼠标,弹出的面板中会清晰地显示出触发条件和动作效果。只需跟着提示操作,就可快速地完成交互。

2000

问题2:实现交互有多慢?

我们通过一个实例来看看:

在交互设计中,第一次交互发生后,第二次回到交互初始状态,是特别常用的场景。为了直观地说明问题,这里我们就以左右移动组件为例子吧。

测试内容:

点击一个图片,让它按照线型动画右移200px,然后再次点击这个图片,让它移动回原来的位置。

看起来很简单,是吗?

Axure – 添加多个用例,多步完成

我尝试了在Axure中能够实现这个交互的所有方法:

方法一:使用动态面板的状态。

在动态面板中,建立2个状态,然后,然后,然后,再然后……

好了,为节约纸张,我把最后的交互用例的样子截图出来吧:

3000

方法二:使用条件编辑器,进行条件判断设置,类似编程。直接献图吧。

不是我不详细说,确实有点原因:

——你知道什么是“变量”和“赋值”吗?

——你知道什么是“全局变量”吗?是什么“全局变量的初始化”吗?

——你知道什么是“条件判断”,什么是“if”,什么“else”?,什么是条件、分支?

估计妹子们会立即喷我:“你会编程你屌呀?!!,本宫如果会编程还用这个吗?”,所以……不敢再多说了,但是没这个知识你还真搞不懂。

不要被图中的东西吓到了,我保证我没有多用一个步骤,但还是这么多:

4000

方法三:用2个完全一样图片(A和B),通过“伪装”的方式来完成。首先设置A显示,B隐藏,点击A,移动到位后,让B显示,A隐藏,此时,点击B,移动到位后,让B隐藏,A显示——我已经喘不过气了,你呢?

以上无论哪种方法,都需要很多步骤才能完成。

Mockplus -一键自动还原

Mockplus中,只需要2步:鼠标拖拽一个交互链接到图片自己,选择“移动”交互,然后在交互面板中勾选“自动还原”,如图。

快吗?

是的,真的就是这么快。妹子该笑颜如花了。

5000

结语

当你计划去设计一个网站或者App时,可能会选择那些“尽人皆知”的原型设计工具,它们很“强大”。可是,在其面面俱到的背后,我们看到了缓慢、臃肿、复杂、难懂——其实,我反而认为简单快速就是强大。

用最小的代价得到你要的,这个,就是我们经常唠叨的“用户体验”。

你知道Axure做交互能有多慢?