一、Axure

Axure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专门的原型设计工具,它比一般创建静态原型的工具如Visio、Omnigraffle、Illustrator、Photoshop、Dreamweaver、Visual Studio、FireWorks要快速、高效。

老牌原型设计工具,交互制作功能强大,当然同时也带来了较高的学习成本。设计区域是无限画布,方便给设计稿添加文字注解。在交互效果层面,可以实现非常多条件判断、巧妙运用可以实现更复杂的交互。不过同时也会带来“效率不高”的问题,因为细节过于繁琐,所以会加重产品经理或交互设计师在画原型时的负担

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

二、Invision

作为目前国外非常知名的一款在线原型设计协作工具,Invision 的发展势头很强。虽然最一开始Invision 主要是做设计稿之后的交互原型和团队协作管理,比如可以顺畅衔接Sketch/PS设计稿,为设计稿做批注,以及Freehand功能可以实现团队自由讨论想法。

但后来发布的 Invison studio 具备从基础开始的设计功能,可以完成相当精细的设计稿,较为强大的交互动效功能也可以满足大多数设计者的动效需求。利用 InVision Studio,还可以将团队的设计规范落地在设计工作中。

不过对于国内用户来说,Invision 始终还有些不便利:比如全英文的界面;国内访问速度一般;以及价格较贵。

三、Proto .io

Proto .io 也是国外一款轻便好用的在线原型设计工具,在大多数浏览器中都能使用,支持导入Sketch和PS设计稿做交互。界面清爽,拥有较为丰富的UI组件。可以直接用链接分享原型,而且因为集成了移动录屏工具lookback,适用于用户测试场景:可以记录用户点击、滑动、点击区域;也可以记录用户的声音和facecam视频评论。

目前Proto .io 有协作功能,只是比较受限;此外,交互设计较为复杂,细节效果只能通过容器实现,上手成本较高。价格相对Invision较便宜,但相对国内产品来说仍然较高。

四、蓝湖

蓝湖也是国产的一款原型协作平台,在其官网上,蓝湖将自身定位为“简单好用的团队工作台”。

使用蓝湖可以导入Sketch/Photoshop和Adobe XD的设计稿(通过插件),并在蓝湖上做自动标注和交互原型。对于设计师来说,可在蓝湖进行设计图管理和自动标注。对于产品经理来说,可以在蓝湖做页面逻辑流程图和汇集产品文档。

不过蓝湖本身没有设计功能,必须依托于在Sketch/Photoshop/Adobe XD平台的设计。而交互效果的创建方式也相对较为隐晦,是目前体会到的稍微不足之处。

五、Fluid UI

一款用于移动开发的原型设计工具,它能够帮助设计师快速高效地完成产品原型图的设计。毕竟现在的移动开发越来越趋于小规模团队协作,设计师需要在快速迭代过程中迅速制作出原型图,他们需要一款直观易用的工具来工作,从而和最终的产品相适应。Fluid UI主要帮助设计师画出线框图,它甚至能够影响到后期的界面设计、产品功能设置以及上线前测试。同时,Fluid UI对于UX流程设计有很大帮助,能够将不同的界面联立起来,以便于看到产品不同界面之间的关系。

1、Fluid UI无设备限制,无平台限制(Windows、Mac以及Linux系统),支持Chrome和Safari浏览器(Chrome浏览器上的app也可离线使用)。用户还可以使用Fluid Player来预览自己的设计,收集意见和反馈。

2、使用方法及其简单,采取拖拽的操作方式,不需要程序员来写代码,为用户节省很多时间和费用。

3、独特的屏幕流功能,帮助设计者更好得与团队进行交流。

4、Fluid UI资源库非常丰富,有很多针对iOS、Android以及Windows 8的资源。如果用户觉得库存资源不能满足自己的需求,用户也可以自行添加。

六、GUI Design Studio(GDS)

GUI Design Studio是面向应用软件设计图形用户界面的专业工具,特别适合客户端软件设计。该软件能够快速将设计思路以可视化的方式来表现出来,并实现基本的交互,便于演示以及与客户完成有效沟通交流。GUI Design Studio是不需要软件开发和编码的完整的设计工具,它支持所有基于微软Windows 平台的软件,提供的了大部分C/S、B/S组件的示意图,可组合使用,是一款非常款适合界面原型设计者和界面原型开发员的软件,能够满足一般软件界面模型设计需要。

七、Justinmind

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一样每一步都只能通过点击来完成。

 

八、iClap

iCLap,以产品自身为出发点,通过不同职位的准数工具彻底串联企业人员,再将工作产生的内容进行沉淀、处理、归档、共享,打造一个沟通与协作的闭环,以实现对产品,项目以及企业的规范化运营管理。颠覆了互联网企业传统协作方式,使得协同场景化,更智能、直观、高效,私有部署数据文件更安全;改变了种子用户与企业的互动方式,核心用户深度参与企业产品测试,增强用户体验度和粘性;机制构建完善,为企业提供人才培育、把控机制,基于DevStore平台全面高质量信息,智能分配信息,提高各职位人员职业技能与素养。

iClap的主要功能:

在线批注:APP运行中直接将批注生成任务,处理任务时将场景还原,直观高效。

语音任务:将语音精确转换为任务,自动识别任务紧急程度与对接人。

即点即用:多个APP项目同一客户端管理,无需逐一下载。

简单发布:版本升级只需后台上传一次数据,客户端自动更新。

Bug跟踪:自动检测APP漏洞并生成报告,让bug无可遁形。

插件管理:多元化模块插件管理,满足企业多方面需求。

会议纪要:项目组进行实时、群组沟通,自动生成会议纪要。

人才培养:以DevStore为平台提供技能培养,智能匹配发送给各岗位人员,有效提高人员综合素质。

 

九、Balsamiq Mockups

Balsamiq Mockups是一个很简单的小软件,功能不多。但是,在控件方面,它可是下足了功夫,不但内置了所有常用的控件,而且每个控件的属性都经过精心的设计,既不复杂,又涵盖了必要的功能,出来的效果也很精致。内置的图标库也很不错。不需要到处搜集第三方控件库,不需要安装插件,绝对省心。当然,从另外的角度,这也是个缺点——当它的控件库不能满足我们的需要时,又不能自己定制,就只能干瞪眼了。

喜欢它的理由是:

– 快——它能让我以最快的速度把界面原型画出来。

– 手绘风格——用它画出来的界面是不折不扣手绘风格,很酷。

– 都是现成的——它已经内置了常用的控件和图标,基本够用了。

十、墨刀

毫无疑问,墨刀对于APP的原型设计真的是体验非常好,怎么说呢?就像有一个无形的人在帮助你,和你一起打造你的原型APP。(当然以后也适用微信小程序的设计),其控件的拖拉、大小的调整,都会自然的去匹配相应的母版大小。无需去担心有多移动一点或多 选择一点。并且墨刀的系统控件都是基于APP,以及系统平台IOS和安卓,因此在里面可以首先选择相应的设备布局,减少了不少工作环节。

另外墨刀的APP原型可以支持下载在手机里,当然是单机版,但是你可以完全通过手机来打开你的原型,相应的Axure这一点就做的很不好,虽然有插件支持手机预览,但是非常卡顿。中文版教程对很多人来说很 NICE。

 

墨刀使用方法

通过网上的案例亲自实验一把墨刀的使用方法,在这里罗列出我使用后总结下来的成果。

下面我们以网页版墨刀为例来进行使用总结:

一、创建新的应用

       访问墨刀官网,登录之后,点击右上方的创建应用,可以选择不同的模板和设备类型,填写应用名称之后即可完成应用的创建,然后我们可以随时编辑应用或者与他人共同编辑和分享应用。

 原型工具 墨刀_原型设计工具 axure-冯金伟博客园原型工具 墨刀_原型设计工具 axure-冯金伟博客园

 

 

二、编辑应用

       点击我们创建的对应应用进行编辑,进去之后会看到下图,其分为菜单栏、组件栏、编辑栏和预览排列栏几个部分。最左边是组件栏,我们可以在这里选择需要的组件,然后拖拽到中间编辑栏中进行设计;中间编辑栏里可以对选取的组件进行编辑;右边是预览排列,就是最终我们看到的页面的基本排列。

 原型工具 墨刀_原型设计工具 axure-冯金伟博客园原型工具 墨刀_原型设计工具 axure-冯金伟博客园

 

 

1、组件使用

 

        如图,我们把左边组件栏中的一些组件拉到这个中间的编辑栏,通过双击对应的组件进行文字或者颜色的编辑:

 原型工具 墨刀_原型设计工具 axure-冯金伟博客园原型工具 墨刀_原型设计工具 axure-冯金伟博客园

 

 

2、页面管理

       对于页面的管理,我们可以在最右边的页面管理栏进行新建或者复制页面,这样我们的原型也可以在不同页面之间跳转,如下图所示是一个原型部分页面树图:

 原型工具 墨刀_原型设计工具 axure-冯金伟博客园原型工具 墨刀_原型设计工具 axure-冯金伟博客园

 

 

3、页面跳转

      如果要进行页面之间的跳转,可以点击组件,然后拉动组件旁边的超链接的样式图标到相应页面即可执行进行页面跳转功能,如下图所示:

 原型工具 墨刀_原型设计工具 axure-冯金伟博客园原型工具 墨刀_原型设计工具 axure-冯金伟博客园

 

 

三、导出下载图片或者安装包

点击页面上方的下载图标,具体如下图所示:

 原型工具 墨刀_原型设计工具 axure-冯金伟博客园原型工具 墨刀_原型设计工具 axure-冯金伟博客园

 

 

四、运行分享应用

      点击页面上方的运行图标即可运行编辑的应用,而后在运行页面右方通过分享图标可以生成分享链接。