有比axure更好用的原型设计吗

转载的，你可以看看。

《你知道Axure做交互能有多慢？》

Axure在笔者心目中是一款伟大的老牌产品。对于从2003年就开始专注在原型设计工具这个领域的专家，笔者非常敬重。本文并无猥亵之意。

当然，这个“伟大”仅仅限于英文中的那个“great”，而非中文的“伟大”。老外是很容易说“great”，那么就用这个词给它。咱们国人的“伟大”其实不能随便给，所以得废话两句来说明。

说正题，交互设计是我们原型设计中很重要的一部分， 是否能够快速搞定？设计的效率如何？是否简单易用？很大程度上决定了我们在原型设计上花费的时间和成本。

Axure做交互有多慢？

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

问题1：设置交互有多慢？

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

Axure - 弹窗筛选，多步设置

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

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

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

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

Mockplus - 一键拖拽

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

 

问题2：实现交互有多慢？

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

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

测试内容：

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

看起来很简单，是吗？

Axure - 添加多个用例，多步完成

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

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

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

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

 

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

不是我不详细说，确实有点原因： 

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

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

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

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

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

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

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

Mockplus -一键自动还原

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

快吗？

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

结语

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

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

如果是移动端产品的话，你可以试下墨刀。不过本人不习惯用

你可以试一下墨刀~

墨刀：国产的一款原型设计协作工具，比起axure来非常容易学会，内置组件很多，创建页面跳转也比axure简单太多。因为是一款在线工具，可以云端保存工作，这点确实很便捷。另外，通过分享链接就可以分享原型给别人看了，如果涉及到跟同事对接什么的，选择在线的工具更方便。支持sketch文稿导入和自动标注。个人认为性价比高。

简单再分享一些它的亮点功能：

• Sketch标注：

在sketch里做完设计后，可以用墨刀给sketch设计稿做自动标注，分享链接给开发哥哥，他们就可以查看标注了～

操作办法：下载“墨刀sketch插件”并安装，在sketch里选择页面导出到墨刀项目里，点击“分享”获取分享链接，发给开发，他们就能在“标注”处查看标注了。

• 演示原型：

在墨刀可以演示带有真机壳效果的移动端原型。

操作办法：在墨刀的预览页面设置“真机”效果就可以。

在手机端预览墨刀原型也蛮方便的。点“分享”能获得一个二维码和分享链接，手机扫码或者点击链接就可以查看原型了。或者下载他们的手机端应用，“MockingBot 墨刀”， 登陆查看原型也可以。

希望对你有帮助！有疑问的地方欢迎追问~