在软件开发过程中,原型设计是将想法转变为设计过程中至关重要的一环,而使用合适的原型设计工具,更能够大大提高我们的工作效率与质量,达到事半功倍的效果。下面将介绍几个目前市面上热门的原型设计工具,它们之间各有异同,也有各自的优缺点,学会在开发过程中的每个阶段选择合适的工具也是我们需要掌握的。

1、Mockplus摹客

在开发的早期阶段,快速建立一个软件的初始原型对于后续的工作有很大帮助。初始原型不需要实现交互,仅仅能够完成简单的页面展示与跳转即可,因此应选择一款上手容易且建造快速的工具。Mockplus(摹客)作为目前国内最大的一站式的产品设计和协作平台之一,能为中低保真的原型设计提供十分出色的制作环境。凭借其海量的组件与图标库存,即使是对软件前端开发完全不熟悉的用户也可以在观看教程后快速上手使用。仅通过拖拽等简单交互方式,即可完成对于原型的快速设计,并能够提供多种演示预览方式,方便用户全方位展示原型全貌。此外还支持多种导出方式,包括CSS、LESS等,直接显示各种组件代码,极大程度上帮助使用者后续开发所需。

摹客基础功能完全免费,使用方便,且为国内开发,完全支持中文,是我们设计自己项目原型的最佳选择。在软件工程(一)课程当中,我们团队就使用了摹客进行了对于用户自助寄件系统的原型设计,下面是制作过程的截图:

 

devexpress 原型设计器 原型设计工具哪个好_devexpress 原型设计器

 

 

       完全可视化的界面完全能无障碍的实现各种组件与图标的添加、编辑,此外还有各种现有热门手机型号供选择,非常的方便快捷,在团队合作构思下,完成整个原型设计仅花费了一个小时不到的时间,对于在校学生完成作业来说无疑是最佳选择。

2、UXPin

       在完成对于软件系统页面的整体布局后,接下来就需要制作具有响应体验的界面将各个页面连接起来,形成一个完整的结构,产生简单人机交互效果,而国外一款名叫UXPin的设计软件能够完美实现以上所有需求。不同于Adobe XD、Sketch、Figma、InVision等工具,UXPin能进行真正的交互状态设计,并提供相应的逻辑与代码组件,极大程度上方便了软件的后续开发工作。相比于前面谈到的MockPlus,UXPin功能更加强大,也更偏向于专业化制作,操作界面也更为复杂,能够实现完成度非常高的人机交互效果,同样也需要更长的上手时间来熟悉软件的操作过程。UXPin 自带的交互效果本身很丰富,除了常见的元素变化、页面跳转、显示隐藏,它还支持进行 API 请求等高级操作。

 

devexpress 原型设计器 原型设计工具哪个好_图层_02

 

 

同时,让它区别于其它设计工具的一点是,它支持变量和条件。所谓变量,就是你可以将一些值存起来,比如用户填的一个数字。而基于这些变量,你可以进行条件判断,比如将用户填写的年龄保存起来,再根据它是不是大于零的来进行后面的交互,这可以帮助我们做出具有一定复杂度的交互效果。此外,UXPin还支持直接进行CSS代码的编写,进行对目标组件的微调,还能自己设置断点,从而观察每一断点区间的预览效果,而且还能对每一区间进行样式调整,以此完成对响应过程的各个阶段进行细致地修改,这是想要制作页面响应效果的团队们所希望得到的结果。

3、Origami Studio

       在开发的后期,完成页面内和页面间的响应以无法满足对于整个软件完成状态的模拟,在原本的基础上,需要添加更加丰富的动画来显示运动状态的变化,提高整体的保真度。Origami Studio就是一款能实现以上所有场景的一站式设计和动画响应制作平台,凭借其出色的逻辑性和广泛适用性,被国内外许多IT界的公司团队所采用。在最新版本的更新中,Origami Studio可以提供给使用者新的sketch联动、调用基础接口等一系列功能,还延续了以往版本中备受好评的模块连线使用逻辑,上手难度也相较于过去大大降低。

       Origami Studio刻意追求与Sketch一致的使用逻辑,为了迎合设计师所熟悉的使用方式,在画面的右边你的每个设计元素都是一个图层,所有的交互动作在这些图层的基础上开展。Origami Studio准备了非常实用的iOS和Material Design预置图层,可以调用几乎所有的基础组件如甚至包括摄像头和高斯模糊等,这意味着使用者可以轻易地实现一个具有录像功能的交互原型。

 

devexpress 原型设计器 原型设计工具哪个好_图层_03

 

 

       作为Facebook公司发布的最新一代原型设计软件,Origami Studio还有更多崭新的工具等待我们发掘,例如补丁编辑器、补丁库等等,而且支持一键导出xcode和Android代码,并可以通过数据线连接的方式在手机上进行实时调试并查看结果。本体完全免费,但需要有一定的代码知识,对于前端开发人员来说,无疑是集性价比与功能为一体的不二之选。