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

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

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

  • 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是一个力图让你做交互更快更简单的工具。

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

时间: 2024-12-19 01:20:55

原型交互设计入门,我该选哪个工具?的相关文章

游戏交互设计入门

下面是学习的一点笔记. 游戏交互设计需要考虑的三个问题 - 可用性,易用性,用户体验. 交互设计应当是在理解用户基础上以目标为导向的设计方法. 界面主要有两种功能:提供信息:允许用户做某事. 关于游戏UI设计师 定义:通过设计界面让游戏系统和玩家之间能够互动娱乐的人. 要求 1.了解游戏,至少得是半个策划: 2.懂交互,让玩家界面操作无挫折感: 3.对细节有追求,一像素偏差也要调: 4.要娱乐,让最生硬的东西也能跳舞. 贴个招聘UI设计师的要求 职责描述: 1. 根据项目的策划案以及相关制作规范

从产品原型到交互设计的过渡——初学者心得

产品经理根据需求来规划产品原型,但是产品原型往往比较粗糙,可能只包含了核心功能描述或者模块划分.我之前问过很多朋友产品经理的原型和交互设计师的原型相比有何异同,得到的结果简单来说,前者更加笼统且注重功能规划;而后者则更加细致,注重的是人机交互和用户体验. 我希望将自己培养成一个产品设计师,而不仅仅是产品经理.因此今天来和大家交流一下作为一个初学者在最近交互设计工作中的一些心得. 1.注重页面空白部分 对于空白列表.空白正文或缺失图片时,最好能够给予恰当的反馈,而不是给用户看白纸. 2.关注界面的

移动应用交互设计中合理使用动态

一个优秀的交互师可以轻松地解释每一个动作逻辑背后的设计概念,包括信息框架,页面内容的继承,每一个点击动作对于页面跳转的影响等. 不久的将来,动效将被广泛的引入到原型的概念设计当中,然而随之带来的是交互设计方案的确定与分析变得越来越复杂.影响这些决定的原因当中,诸如“这样看起来很 炫”,“这样看酷”等等,将会让动效设计失去了它本来的目的.接下来,我们将试着站在用户体验的角度来定义动效设计,以及解释引入动效设计的目的. 什么是功能性的动效? 功能性的动效就是被我们引入到交互设计当中的微动效(moti

完整的交互设计流程应该是怎样的?

我们常见的交互流程是这样的: 一.定性研究(Qualitative Research):针对可能使用你的产品的人,可以是问卷.访谈…… 二.确定人物角色(Persona):即产品的典型用户,可以有一种或几种.例如可以有一个人物角色叫CEO. 三.写问题脚本(Problem Scenario):罗列人物角色在使用产品时可能遇到的问题,可以整理成一个故事便于别人理解 四.写动作脚本(Action Scenario):像写故事一样,写人物角色在使用你设计好的产品时,发生的细节.注意,这个时候你的交互方

Origami – 用于 Quartz 的免费的交互设计框架

Origami 是一个为 Quartz Composer 开发的免费的工具包--由Facebook设计团队创建,让交互设计原型更加简单,不需要编程. 如今,大多数设计师通过创建静态原型来表达要实现的应用程序,但是越来越多的应用程序只是静态的,这意味着作为设计师需要一个更好的工具用于交互设计,Origami 就是这个目的. 您可能感兴趣的相关文章 太赞了!超炫的页面切换动画效果[附源码下载] 创意无限!一组网页边栏过渡动画[附源码下载] 真是好东西!13种非常动感的页面加载动画效果 你见过吗?9款

基于ARM的SoC设计入门[转]

原文:基于ARM的SoC设计入门 我们跳过所有对ARM介绍性的描述,直接进入工程师们最关心的问题.要设计一个基于ARM的SoC,我们首先要了解一个基于ARM的SoC的结构.图1是一个典型的SoC的结构: 图1从图1我们可以了解这个的SoC的基本构成: ARM core:ARM966E AMBA 总线:AHB+APB 外设IP(Peripheral IPs):VIC(Vector Interrupt Controller), DMA, UART, RTC, SSP, WDT…… Memory bl

学交互设计,这份超全学习清单给你准备好了

刚入行用户体验设计的人在学习时总会遇到这样的难题: 网上的文章看了不少,行业大V也follow了好几个,但是摄入的知识总感觉是一盘散沙,心里仍然没个底儿. 为此 我们特推荐墨刀整理了一个学习清单 有系统的UX设计知识框架 有各环节的实践技巧 有工具学习 行业大咖故事 -- 赶紧Mark住吧! 书籍 「一小本,读完大咖智慧」 <用户体验要素> Jesse James Garrett 写的这本<用户体验要素>(The elements of User Experience) 被 Int

Kinect 开发 &mdash;&mdash; 用户交互设计的若干思考

Metro 风格 windows 8 Kinect Hub 手势原型设计 悬停选择     翻页控制 关节点重叠的处理方法 将箭靶设置在画面的边缘,这样玩家持弓的角度与屏幕保持一个大约45度的锐角,这样Kinect可以很精确的检测到拉弓射箭的动作 手势天生具有一定随意性,而且具有一定的文化背景差异性   手与设备的非接触性 虚拟触摸的界面 Kinect 使交互"柔软化"   确认操作保持简单一致 悬停选择 -- 将手停在想要选择的项目方块或按钮上,等待进度圆圈的填充,这个过程会在T时间

目标导向的交互设计:About face 3 -- The essentials of interaction design 读书分享

近段读完并分享了Allan copper的 About face3 : The essentials of interaction design,推荐没看过的程序员朋友可以抽时间看看.感觉上这本书对交互设计讲得比较透彻,首先拿出了方法--目标导向的交互设计,再介绍了交互设计的过程框架,最后介绍交互设计的细节.比较易读,不仅有大量的细节规则,还会让读者对交互设计的方法和框架有一些认识. 第一部分:目标导向的交互设计 1. 设计的定义:了解用户的需求和期望,了解商业,了解技术限制,设计出可行,满足用