FCC0725

导航

统计

主流原型设计工具

第一类特点:简单快速。

代表工具:摹客、InVision、Flinto Lite。

操作难度:低。

就像摹客的标语一样,这一类工具是UI设计师的交互演示利器。三款工具都是在网页端进行设计,虽然风格略有不同,但实质上是大同小异。交互的设置上多以创建热区为基础,点击热区跳转页面为主要功能,几乎不需要任何学习成本,也没有什么操作难度。国内用户可能对摹客更熟悉一点,支持Sketch、PS、XD、Figma的设计稿,也有国外的版本,而且由于具有协作功能等原因,InVision和摹客显现出更加优秀的一面,也赢得了更多国外用户的青睐。

使用这一类的工具有一点明显的好处,就是可以把UI设计师做好的图片直接导入当做界面,比如InVision和Flinto Lite,它们可以直接导入PS或AI的设计文件。然而,它们是,也只能是UI设计师的交互演示利器,因为这三款工具并不支持设置组件以及组件交互。

摹客RP同时具备 强大的高保真原型设计能力和团队协作能力。不仅保证了快速产出和精细设计两不误,同时满足产品经理、设计师的需要,在线工具的协作能力更是不容小觑:多人实时编辑,便捷的团队评审,工程师查看页面数据、复制代码等强大功能非常适合团队使用。

最重要的是,摹客RP 是一款真正完全免费的原型设计工具,不限时长、不限功能、不限页面,设计页面不受限制,灵感肆意发挥;无需为成员付费,注册即可实时参与项目编辑;无限导出离线演示包,无忧演示与汇报;设计资源库自由搭建,团队共享不收费;历史版本无限生成,随时查看及回溯。而且摹客RP的特色众多:自带交互效果的预设组件、海量图标、便捷的编辑方式,快速产出设计。支持页面交互、状态交互、组件交互,以及设置多种触发方式和交互动作,轻松制作精细交互效果。钢笔工具、铅笔工具、布尔运算、响应式布局等特色功能,设计创作自由随心。支持多人同时在线编辑同一项目,共同完成原型设计。

设计稿中支持直接绘制流程图,清晰呈现项目逻辑。强大的协作功能:团队评审、工程师查看页面数据、复制代码、撰写在线文档、任务管理... ...摹客RP不仅适用于中高保真原型、快速原型和团队协作,还适用于WEB/移动端/平板原型,线框图,视觉稿。

InVision


 

图片

 

这款工具很大的一个优势就是它可以让你免费创建一个项目。这对于学生和初学者来说是一个不错的福利,这样一开始的时候就不用担心预算问题了。

 

这款工具的付费版本也是比较便宜的。 功能的分享和协作功能也很简单。你的团队成员或者客户都可以给你的设计添加评论,并且你能够很轻松的追踪评论。

 

项目状态是此工具另外一个强大的功能,你可以向你的整个团队分享项目进度。每一个进程都可以标为“进行中”或者“需测评”或者某部分也可以标为“积压”或者“通过”。

 

Invison提供了版本控制功能。你也可以与其他工具进行协作,例如 DropBox,PS,Sketch等。

空白项目:

 模板项目:

创建模板项目有包含各应用组件的模板页面,十分便于我们借鉴与修改;(网易云音乐模板项目如下)

 

这里我们简要介绍下空白项目的创建操作;

然后在下方输入项目名以及选择原型的平台后,点击创建,进入项目首页,如下:

 

中间的是项目的编辑页面,中部的左侧以及顶部边框标注着的数字是像素,用来准对页面的宽度与高度以及页面内组件的位置;

最左侧一列素材工具栏——用于直接将素材拖入页面中,页面栏——用于编辑和切换各页面:

右侧工具栏包含组件及图标等素材,最右侧外观栏——当你选中某个组件时可在其中编辑外观的各种参数:

上方工具栏最右侧的运行按键可以模拟运行时的页面操作:

第二类特点:灵活轻快。

代表工具:Mockplus、Proto.io 6、UXPin、Flinto for Mac。

操作难度:适中。

在第二类的四款工具都是进行交互设计的好帮手,它们的共同特点就是设计上相对的轻便快捷。比如Flinto for Mac,只需要根据层级移动组件位置,就可以创造出对应的交互效果。同时,这些工具虽然看上去操作方式并不是完全一致,但它们都不约而同的采用了拖拽链接点来作为基本的操作方式。这种操作中的高度可视化,使得设计的过程变得十分简单有效。

Mockplus可以说是在这四款工具中比较具有代表性的,相对于Proto.io 6这种由小组件组成容器,再由容器组合为其他组件的设计模式,Mockplus则是更多的直接提供高度封装组件。作为一个“懒人”,熊先生对这种化繁为简的方式甚是喜爱。而且依靠着这种简单的操作方式和程序本身自带的超过2000枚的矢量图标,你甚至可以在完全没有网络的情况下仍然出色地完成原型设计。导出的演示包、HTML的离线包也会让预览变得不受网络的限制。

 Mockplus


 

图片

 

简单易上手,摩客已经逐渐成为很多设计师们的选择。写代码是很讨厌的事情。因此,摩客给大家提供了拖拽设计原型的功能。

 

对于还在使用纸和笔的设计师来说,摩客提供了更多的灵活性。你可以使用素描风格的组件来画原型。摩客丰富的组件库和图标也让设计更加快捷。

 

摩客的易用性还表现在创建原型的速度。如果使用其他工具,你可能需要花大量的时间完成一个原型。但使用摩客,只需5分钟。你还可以通过扫描二维码,快速的预览原型。

 

今年摩客团队推出了2.1版本,这就意味着你可以使用简单的拖拽完成交互功能的设计。高度封装的交互组件(例如弹出面板、弹窗、弹出菜单、抽屉、内容面板、轮播、滚动区等)让原型设计变得更加简单,快速。

 

想了解摩客更多功能,请查看摩客官方教程。文章中提到的功能只是很小的一部分,摩客还有更多简单好用的功能等着你去挖掘。

 Proto.Io


 

图片

 

与其他原型工具不一样,Proto.io 是一款在线工具,因此使用它的时候需要联网。如果你经常在线,那么使用这款工具就没什么问题。

 

其中很重要的一个功能就是内置的组件库,设计师都知道从第三方寻找组件是很痛苦的事情。即使软件中没有你想要的组件,你也可以轻易的从第三方导入。

 

如果你只是需要一个常规的布局,proto.io 的启动项目能够让你的工作变得简单。你也可以保存不同的变量,并且能够预览用户与各个页面之间的交互。

 

正因为这是一款在线的功能,在使用的时候有一些局限。例如,不能单独备份某一个页面,而只能备份整个项目;不能添加需求文档。

UXpin


 

图片

 

Uxpin,另外一款值得推荐的原型设计工具。这款工具的优点就是简单易用。它的界面十分简洁,你可以轻易的把图片和文件合并到你的设计中去。

 

这款工具的预览功能也很好用,不仅可以预览原型,也可以预览点击时或者鼠标划过时各个页面的状态。其他人也可以对原型进行评论,方便了同事间的协作。

 

谈到评论功能,如果UXpin 能够在有新评论的时候增加一个提醒就更好了。目前没有这个功能,如果有新的评论,你需要手动的去检查。

第三类特点:功能全面。

代表工具:Axure RP、Justinmind。

操作难度:高。

原型设计想做到功能全面,那就难免会和代码挂上钩。这一类中,Axure应该是大家更为熟悉的一个。也可以说,Axure是原型设计工具中在设计难度和可用性上平衡把握的比较好的一个了。但是,即便如此,它的变量、判断等等功能还是难倒了许多交互设计师。

如果说Axure是在寻求平衡,那么Framer JS则是在诠释着到底什么才是用代码“写”原型。这才是这一类中真正以代码为基础的原型设计工具,只要能够写出相应的代码,它就可以把你的想法通通变成现实。

 

Axure RP的用户群体非常宽泛,包括商业分析师、信息架构师、可用性专家、产品经理、IT咨询师、用户体验设计师、交互设计师、界面设计师、架构师、程序开发工程师等相关从业者。

Axure RP优点:

1、擅长原型设计的复杂交互行为;

2、拥有良好的培训和文档支持;

3、拥有多种元素样式,可增加独立元素交互性;

4、内置的插件库可以定制特殊的动作和行为。

虽然Axure的应用几乎已成惯例,但它也有自己的缺点:

1、陡峭的学习曲线,对于初学者来说不算容易;

2、在导出HTML之前无法对原型进行预览;

3、原型的web展示并不支持所有的浏览器,比如,对于谷歌浏览器就必须要使用插件才能观看;

4、对其它设备的支持较差。

 

JustinMind可以输出Html页面,与目前主流的交互原型设计工具相比更为专属于设计移动终端上app应用。Justinmind Prototyper的收费版本提供iPhone,android,ipad等交互组件,并有丰富的动态效果,但免费版就要简单一些。Justinmind Prototyper同时提供winxp,win7和mac os的版本。

1、JustinMind的可视化工作环境支持以鼠标的方式创建带有注释的高保真原型;

2、提供多种触屏的交互效果,例如滑动、缩放、旋转,甚至捕捉设备方向等,在需要产生效果的部件中选择对应的手势即可;

3、JustinMind为iPhone、iPad、黑莓、Android提供了多样的组件,可以创建自定义组件库;

4、比Axure,JustinMind更好的提供了属性窗口,并且更好的支持捕获PS等软件的图像属性;

5、可以通过拖拽等方式来实现跳转、定向等交互效果,无需像Axure一样每一步都只能通过点击来完成。

 

总结:

  原型设计是交互设计师与PD、PM、网站开发工程师沟通的最好工具。而该块的设计在原则上必须是交互设计师的产物,交互设计以用户为中心的理念会贯穿整个产品。利用交互设计师专业的眼光与经验直接导致该产品的可用性。上面这些原型设计工具各有各的特点以及优缺点,我们在使用时可以根据自己的需要和偏好来选择,亦可同时使用多种工具进行协作。对于我来说,会更加喜欢使用墨刀和摹客RP。我觉得这两个是最好的原型设计工具。一来是操作都比较简单,容易入手,二来墨刀推出了丰富的模板项目,可以充分利用已有的模板来进行建造,而摹客RP 则是一款真正完全免费的原型设计工具。

posted on   FCC0725  阅读(179)  评论(0编辑  收藏  举报

点击右上角即可分享
微信分享提示