原型交互设计入门,我该选哪个工具?

交互设计是我们原型设计中很重要的一部分, 如何快速掌握一个原型设计工具,尽快入门,高效地完成工作?

这里选择了三款原型设计工具作对比,希望给想入门或者刚入门的童鞋提供一些参考。

  • Axure - 知名而强大的原型设计工具
  • Mockplus - 新兴的快速原型设计工具
  • JustinMind - 高保真原型设计工具

这三个工具,都是基于桌面的应用。基于Web的在线工具,以后如果有机会再作介绍。

第一部分 设置交互

设置交互,是完成一个交互设计的开始。我暂时把交互设置分为两类:页面链接和组件交互。

设置页面链接

Axure - 弹窗筛选

不够直观 - 先选中组件,然后到属性面板上去筛选目标页面(页面多的时候就有点烦了)。

原型交互设计入门,我该选哪个工具?

Mockplus - 一键拖拽

简单直观 - 与其他原型设计工具不一样,Mockplus采用了直观的拖拽方式来实现页面交互。红色的线指哪里连哪里。

原型交互设计入门,我该选哪个工具?

JustinMind - 支持拖拽

简单 - 与Mockplus类似,Justinmind也可以通过拖拽的方式实现页面跳转。不同的是,需要拖动整个组件到项目树上。由于没有连接线,不够直观,也不容易看清。

原型交互设计入门,我该选哪个工具?

设置组件交互

Axure - 添加用例,不能拖拽完成

对于一般的交互,在Axure中可以通过弹窗来逐个筛选设置。稍微复杂的交互,则需要条件构建器来实现。Axure在交互设置中,可以添加条件判断,但需要用户有一定的编程常识,否则掌握起来有相当难度。尤其是初次使用的时候。

原型交互设计入门,我该选哪个工具?

Mockplus - 直接拖拽,所见即所得

与其它任何一款原型工具都不一样,Mockplus是通过拖拽组件上的链接点来实现交互。拖动组件的链接点到目标组件松开,弹出的面板会清晰地显示出触发条件和动作效果。只需跟着提示操作,就可以轻易地完成交互。

原型交互设计入门,我该选哪个工具?

JustinMind - 添加事件,不能拖拽完成

Justinmind设置交互的方式与Axure有些类似。

当选中需要交互的组件,设计界面的下方面板中会显示出“事件”窗口,点击“添加事件”,也会弹出一个编辑面板。面板弹出后,分别对触发条件、事件的效果、交互对象进行设置。Justinmind也支持条件判断和变量,不过要掌握相关的技能还是要费一番功夫。在这个方面,Justinmind做了一些图形化的方式来表达设置,力图让用户好懂,这个是优于Axure的地方。

原型交互设计入门,我该选哪个工具?


第二部分 实现交互

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

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

测试内容:

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

看起来很简单,是吗?

Axure - 添加多个用例

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

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

在动态面板中,建立2个状态,然后用条件构建器判断动态面板状态,然后设置动态面板移动参数,最后通过点击换动态面板状态的可视性。我把最后的交互用例的样子截图出来吧:

原型交互设计入门,我该选哪个工具?

方法二:使用条件判断。

也需要用到条件构建器(Condition Builder)。实话讲,你需要一些编程的常识,比如:“变量”、“全局变量”、“赋值”,“初始化”、“条件判断”,否则你做起来可能比较费力。图中,是经过多步设置后,最后的结果。

原型交互设计入门,我该选哪个工具?

方法三:“伪装法”。

用2个完全一样图片(A和B),通过“伪装”的方式来完成。首先设置A显示,B隐藏,点击A,移动到位后,让B显示,A隐藏,此时,点击B,移动到位后,让B隐藏,A显示。

JustInmind

我尝试了两种方法:

方法一:使用Toggle事件+Move命令。

实现起来还是比较简单。但如果是双击动作,这个方法就不奏效了。

原型交互设计入门,我该选哪个工具?

方法二:也是“伪装法”。

方法和上述Axure中的一样,我不啰嗦了。反正是有点绕。

原型交互设计入门,我该选哪个工具?

Mockplus - 一键自动还原

Mockplus中,需要两步,拖拽一个交互链接到图片自己,然后在交互面板中勾选“自动还原”,如下图。

我们不得不说,这个“自动还原”真是太妙了。

当然,在Mockplus中,我们也可以通过上面所说的“伪装法”来实现这个交互,不过已经没有必要了。

原型交互设计入门,我该选哪个工具?

原型交互设计入门,我该选哪个工具?

建议

以上我们尝试探索了3个工具的交互功能情况。

其实如果希望透彻了解一个工具,我建议你直接取去用,不要停留在某个视频或教程上。那么,到底该使用哪一个呢?我的看法是:

如果你做事喜欢有条有理,不太在意时间约束,喜欢全面系统地掌握一个工具并成为专家,你可以选择Axure。Axure功能很全面,还有很多值得你去一步步熟悉和掌握的地方。

如果你对交互的复杂度和保真度的探索有信心,乐在其中,并有一定的编程基本常识,个人觉得你选择JustInmind比较合适。Justinmind对于移动应用的交互保真做得很到位。

如果你希望立即上手一个工具,同时非常在意设计的时间效率,不需要做特别复杂的交互,建议你选择Mockplus。Mockplus是一个力图让你做交互更快更简单的工具。

一句话,对于工具软件来说,它的功能是而你而生,用最小的代价达到你的需求,是你选择的关键。

原创文章,作者:yanz kontol,如若转载,请注明出处:https://www.iamue.com/17831/

(0)
yanz kontolyanz kontol
上一篇 2016-09-19 18:11
下一篇 2016-09-22 09:38

相关推荐

  • 防止用户无意识犯错的6个实用方法

    #交互学堂##防呆设计#用户经常会从手头上的事情分心,提供建议,利用约束条件以及设计更灵活的方案能够防止无意识的差错产生。今天这篇译文讨论了6个防止用户无意识犯错的方法,专业干货收。

    2016-11-02
  • 国外排名前20的UX/UI设计师推荐

    在UX/UI设计领域中,当下最不缺乏的当属日新月异的科技和创意百变的设计灵感。保持对设计行业的持续关注以及敏锐嗅觉,不仅是可以提高我们的专业素质,同时也能保持自身的行业竞争力。说了这么多,那应该具体怎么做…

    2016-09-23
  • 【翻译】未来的用户体验模式:预期设计

    原文作者:Zack Rutherford Zack Rutherford是一名在Unpin的UX设计作者。 原文链接:UX Patterns of the Future: Anticipatory Design 预期设计是一种相当新的用户体验模式,寻求在一个平衡的情况下,完全移除用户…

    2016-01-27
  • 从二维界面到虚拟现实 VR (总)

    我是Google的一名产品设计师。2012年,我当时就职的一家名为Sparrow的法国创业公司被Google收购。从那时起,我就一直在Gmail团队效力,并全程参与了旗舰产品Inbox by Gmail的设计工作。 这些年下来,始终置身于移动…

    VR 2016-05-03
  • 哪种性格的人能成为最好的设计师

    性格与你工作优秀与否有关吗?让我们来看下事实与证据吧。   有句老话是这么说的“大千世界,无奇不有”。这句话在应运于工作场所时再真实不过了。无论是爱交际的创意总监还是僵硬死板的会计师,我们对他们持有…

    2016-06-10
  • 应对谷歌烧脑招聘面试题,看看你够聪明吗?

    谷歌每年收到大约2,000,000份申请,但它只雇用大约4,000人,比耶鲁和哈佛的录取率还低。很多人都被那些刁钻古怪的考试问题所难住。 网上流传的版本很多,甚至已经有些被神化的味道。但实际上总结起来,谷歌的考试题…

    译文 2016-05-17
  • 【译文】移动端表单设计小妙招

    在app上填写表单是不可避免的,同时又是无趣的。如何才能让用户高效的填写表单呢?除了让表单看起来更美一些,

    2017-03-21
  • 【译文】”移动优先”的设计理念已过时了吗

    【译者注】Mobile First(移动优先)大概是移动设计师听到最多的设计理念之一,2011年Luke Wroblewski大神提出它时,打破了原来“先完成web设计再移植移动设计”的常规方式,为移动设计注入了一针强心剂,一时各大企…

    2016-02-19
  • 在非舒适地带实现自我成长与提升

    每周博文伊始,要么肆意描述一下身边的环境以及自己的心情状态,要么一时语塞,左顾右盼却不知如何言语;像此刻这样强烈的希望将最近忙于的各项事务全盘托出的状况好像不大常见。 比如?可以用“精心打磨”来形容的Wi…

    2017-05-24
  • 熊先生做原型之初级原型设计流程

    相信每个人都有自己的工作方式,但并不是每个人的工作方式都是科学的、有效的。熊先生入职也有一段时间了,平时也浅薄地学习了一些书籍知识,自己总结了一个平时工作的流程,希望对在工作上摸不出头绪的小白们可以…

    2016-09-16