原型交互设计入门，我该选哪个工具？
交互设计是我们原型设计中很重要的一部分， 如何快速掌握一个原型设计工具，尽快入门，高效地完成工作？这里选择了三款原型设计工具作对比，希望给想入门或者刚入门的童鞋提供一些参考。[*]Axure - 知名而强大的原型设计工具
[*]Mockplus - 新兴的快速原型设计工具
[*]JustinMind - 高保真原型设计工具
这三个工具，都是基于桌面的应用。基于Web的在线工具，以后如果有机会再作介绍。
第一部分 设置交互设置交互，是完成一个交互设计的开始。我暂时把交互设置分为两类：页面链接和组件交互。
设置页面链接Axure - 弹窗筛选不够直观 - 先选中组件，然后到属性面板上去筛选目标页面（页面多的时候就有点烦了）。https://cdns-mockplus-cn.alikunlun.com/image/2016/09/955f6930-9326-48d0-965d-68bea5ca0cbc.pngMockplus - 一键拖拽简单直观 - 与其他原型设计工具不一样，Mockplus采用了直观的拖拽方式来实现页面交互。红色的线指哪里连哪里。https://cdns-mockplus-cn.alikunlun.com/image/2016/09/544c9802-f22c-4612-9c2b-284a40840d45.pngJustinMind - 支持拖拽
简单 - 与Mockplus类似，Justinmind也可以通过拖拽的方式实现页面跳转。不同的是，需要拖动整个组件到项目树上。由于没有连接线，不够直观，也不容易看清。https://cdns-mockplus-cn.alikunlun.com/image/2016/09/d55d87d2-50d5-4ee2-a1e4-509612fda7c4.png设置组件交互Axure - 添加用例，不能拖拽完成对于一般的交互，在Axure中可以通过弹窗来逐个筛选设置。稍微复杂的交互，则需要条件构建器来实现。Axure在交互设置中，可以添加条件判断，但需要用户有一定的编程常识，否则掌握起来有相当难度。尤其是初次使用的时候。
https://cdns-mockplus-cn.alikunlun.com/image/2016/09/1330bb56-5022-47ac-8d44-e025f91799b3.pngMockplus - 直接拖拽，所见即所得与其它任何一款原型工具都不一样，Mockplus是通过拖拽组件上的链接点来实现交互。拖动组件的链接点到目标组件松开，弹出的面板会清晰地显示出触发条件和动作效果。只需跟着提示操作，就可以轻易地完成交互。https://cdns-mockplus-cn.alikunlun.com/image/2016/09/8fc23bb7-531f-4c3c-b282-d3dcfc0e541e.pngJustinMind - 添加事件，不能拖拽完成Justinmind设置交互的方式与Axure有些类似。当选中需要交互的组件，设计界面的下方面板中会显示出“事件”窗口，点击“添加事件”，也会弹出一个编辑面板。面板弹出后，分别对触发条件、事件的效果、交互对象进行设置。Justinmind也支持条件判断和变量，不过要掌握相关的技能还是要费一番功夫。在这个方面，Justinmind做了一些图形化的方式来表达设置，力图让用户好懂，这个是优于Axure的地方。https://cdns-mockplus-cn.alikunlun.com/image/2016/09/451699fe-52d9-4157-b704-672412c2ea38.png第二部分 实现交互我们通过一个实例来看看：在交互设计中，第一次交互发生后，第二次回到交互初始状态，是特别常用的场景。为了直观地说明问题，这里我就以左右移动组件为例子吧。
测试内容：点击一个图片，让它按照线型动画右移200px，然后再次点击这个图片，让它移动会原来的位置。看起来很简单，是吗？Axure - 添加多个用例我尝试了在Axure中能够实现这个交互的所有方法：方法一：使用动态面板的状态。在动态面板中，建立2个状态，然后用条件构建器判断动态面板状态，然后设置动态面板移动参数，最后通过点击换动态面板状态的可视性。我把最后的交互用例的样子截图出来吧：https://cdns-mockplus-cn.alikunlun.com/image/2016/09/0caae104-eeb2-4681-adae-f7626b5543c2.png方法二：使用条件判断。也需要用到条件构建器（Condition Builder）。实话讲，你需要一些编程的常识，比如：“变量”、“全局变量”、“赋值”，“初始化”、“条件判断”，否则你做起来可能比较费力。图中，是经过多步设置后，最后的结果。https://cdns-mockplus-cn.alikunlun.com/image/2016/09/08ec3524-196e-45e1-8605-facdbccd4535.png方法三：“伪装法”。用2个完全一样图片（A和B），通过“伪装”的方式来完成。首先设置A显示，B隐藏，点击A，移动到位后，让B显示，A隐藏，此时，点击B，移动到位后，让B隐藏，A显示。
JustInmind
我尝试了两种方法：方法一：使用Toggle事件+Move命令。实现起来还是比较简单。但如果是双击动作，这个方法就不奏效了。https://cdns-mockplus-cn.alikunlun.com/image/2016/09/08d510e2-a9b5-4825-ad5a-742c1531a6c8.png方法二：也是“伪装法”。方法和上述Axure中的一样，我不啰嗦了。反正是有点绕。
https://cdns-mockplus-cn.alikunlun.com/image/2016/09/2ecea00d-7795-4909-bfa6-ecffc1c0987e.pngMockplus - 一键自动还原Mockplus中，需要两步，拖拽一个交互链接到图片自己，然后在交互面板中勾选“自动还原”，如下图。我们不得不说，这个“自动还原”真是太妙了。当然，在Mockplus中，我们也可以通过上面所说的“伪装法”来实现这个交互，不过已经没有必要了。https://cdns-mockplus-cn.alikunlun.com/image/2016/09/36de4377-15ac-46d3-9eaa-243cc306d2c5.png
https://cdns-mockplus-cn.alikunlun.com/image/2016/09/2ba25bb1-ef60-43ad-9760-4518d997ba3a.png
建议以上我们尝试探索了3个工具的交互功能情况。
其实如果希望透彻了解一个工具，我建议你直接取去用，不要停留在某个视频或教程上。那么，到底该使用哪一个呢？我的看法是：如果你做事喜欢有条有理，不太在意时间约束，喜欢全面系统地掌握一个工具并成为专家，你可以选择Axure。Axure功能很全面，还有很多值得你去一步步熟悉和掌握的地方。
如果你对交互的复杂度和保真度的探索有信心，乐在其中，并有一定的编程基本常识，个人觉得你选择JustInmind比较合适。Justinmind对于移动应用的交互保真做得很到位。
如果你希望立即上手一个工具，同时非常在意设计的时间效率，不需要做特别复杂的交互，建议你选择Mockplus。Mockplus是一个力图让你做交互更快更简单的工具。一句话，对于工具软件来说，它的功能是而你而生，用最小的代价达到你的需求，是你选择的关键。
页:
[1]