五大原型设计工具的比较和分析

1.Axure

       Axure RP是美国Axure Software Solution公司旗舰产品，是一个专业的快速产品原型工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型工具，它能快速、高效的创建原型，同时支持多人协作设计和版本控制管理。作为 老牌原型设计工具，当然同时也带来了较高的学习成本。设计区域是无限画布，方便给设计稿添加文字注解。在交互效果层面，可以实现非常多条件判断、巧妙运用可以实现更复杂的交互。不过同时也会带来“效率不高”的问题，

       

 

 

优点：变化多端的操作，交互制作功能强大，自带组件库并支持强大的第三方组件库，提供强大的交互支持，完整的教程及支持文档，支持原型预览。

       缺点：学习曲线较高，性价比不高，专业需求度高。作为一款离线工具，Axure的原型预览和分享方式并不十分友好。浏览器预览本地文件需要安装插件；支持上传到Axshare分享，但在国内的速度也较慢。因为离线，Axure 文档存档会比较安心，不过如果涉及到多人协作，也会有“信息更新不及时”的问题。因为细节过于繁琐，所以会加重产品经理或交互设计师在画原型时的负担。

       适用人群：适用于追求强交互效果及细节产品经理及设计师，需要具有一定经验或较强专业性。

2.Adobe XD

        作为Adobe旗下的一款原型设计工具，有着平台自带的一个天然优势—用户可直接导入PS、AI、SKETCH文件作为原型素材。设计的页面间可以通过拖拽创建交互，可设置过渡动画；Adobe XD有提供基础组件元素、平台组件库和少量图标库。可以通过链接分享原型。此外，还支持设计稿的自动标注。

 

 

       优点：免费工具，上手没有难度

       缺点：免费度非常有限：只能最多使用 2 GB云存储，Typekit，以及最多共享1个设计规范和1个原型。

       适用人群：对于原型设计工具不够熟悉，刚入门的设计师。

3.Proto.io

       Proto.io 也是国外一款轻便好用的在线原型设计工具，专门用于移动应用的产品原型工具——可以构建和部署全交互式的移动应用的原型，在大多数浏览器中都能使用，支持导入Sketch和PS设计稿做交互。界面清爽，拥有较为丰富的UI组件。可以直接用链接分享原型，而且因为集成了移动录屏工具lookback，适用于用户测试场景：可以记录用户点击、滑动、点击区域；也可以记录用户的声音和facecam视频评论，并且可以模拟出相似的成品。基于Web的在线环境，它可以让你制作流行的 iPhone，iPad，Android 手机以及任何带有屏幕界面的产品原型。并且它可以运行在大多数的浏览器中，并提供了3个重要的接口：dashboard、编辑器以及播放器。

      优点：丰富的UI元素，且可以自定义；支持多屏互动和组件交互，可以从Dropbox上传设计图。价格相对Invision较便宜，但相对国内产品来说仍然较高

      缺点：目前Proto.io 有协作功能，只是比较受限；此外，交互设计较为复杂，细节效果只能通过容器实现，上手成本较高。不支持实时预览，交互动效较多时动画不够流畅，性价比不高。

      适用人群：擅长于使用Web浏览器的产品经理或设计师。

4.墨刀

       墨刀是一款在线原型设计与协同工具，借助墨刀，产品经理、设计师、开发、销售、运营及创业者等用户群体，能够搭建为产品原型，演示项目效果。墨刀同时也是协作平台，项目成员可以协作编辑、审阅，不

 

 

管是产品想法展示，还是向客户收集产品反馈，向投资人进行Demo展示，或是在团队内部协作沟通、项目管理。

       优点：就是快，特别是在做外包的时候。了解客户需求后分分钟勾出个框架给他看。缺点也相对明显，主要是付费服务，还有他们不好像Axure那样可以每次更改的时候就更新一次版本，管理上不是很方便。墨刀有内置丰富的UI素材和模板，清爽的界面，让设计原型的过程顺畅高效。墨刀同样支持Sketch设计稿的导入，拖拽式创建交互链接，可以通过链接或者二维码在电脑端或者移动端快捷预览原型。此外，设计师也可以通过墨刀进行自动标注，开发者也可以用墨刀进行切图。而墨刀新出的版本更加强化了协同管理功能，满足了更大规模团队的需求。不仅多人团队可以在墨刀协同编辑/实时讨论，共同管理素材库，对于人员权限的管理也更加清晰分明。

       缺点：对交互效果、控件组合、操作面板的选择都不如Axure灵活，内置交互效果包括点击、滑动、滚动等，做高保真原型的时候不够用；另外，效果切换因为是采用连线的方式，有时会让用户产生错乱的感觉。

       适用人群：多人团队开发，草稿制作。

5.Balsamiq Mockups

       Balsamiq Mockups是一款软件工程中快速产品原型工具，可以作为与用户交互的一个界面草图，一旦客户认可也可以作为美工开发HTML的原型使用，特别是在web原型图设计领域有不错的影响力。使用Balsamiq Mockups画出的原型图都是手绘风格的图像，看上去非常美观、清爽。此外，这款工具支持几乎所有的HTML控件原型图，比如按钮（基本按钮、单选按钮等）、文本框、下拉菜单、树形菜单、进

 

 

度条、多选项卡、颜色控件、表格、Windows窗体等。除此以外，还支持iPhone手机元素原型图。

      优点：虽然不是免费原型工具，但性价比也算不错；工具内置大量模块，能够快速应用于原型设计，支持手绘风格。

      缺点：原型没有配色，没有设计风格，不能进行交互展示。

      适用人群：需要生成简单原型（草图）的产品经理或设计师。

         我们使用的是墨刀，来实现我们易动APP的部分功能。首先打开墨刀软件，新建一个应用，选择应用类型（选择了iPhone设备），输入应用名称，设备类型和应用尺寸，点击创建按钮，完成应用创建。新建应用的标题栏会自动显示应用的名称（人人都是产品经理），标题栏文字可以自行修改。制作里布导航栏，从左侧“组件”栏目中找到底部组件，拖入应用之中，大小和样式可以自行修改。然后拖入三个导航标签，修改标签的位置和名称。至此完成底部导航栏的制作。然后开始简单的制作下“产品经理”的首页原型，在左侧的“组件”栏目中找到搜索组件，拖入App首页中，在“母版”栏目中找到轮播图模版，拖入应用之中。墨刀中有一些已经做好的组件或母版，可直接拖入使用，加快创建原型的时间。然后回到“组件”栏目，为首页插入图片和文字。图片调节在右边的设置栏，这里推荐大家直接拖入图片，然后用鼠标调节大小这样会比较方便。文字的调节在左边的主题栏目，可调节文字的大小和样式，然后用鼠标摆至合适的位置。在软件右上角点击“+新页面”即可生成新的页面，每一个页面有复制、删除、添加子页面的功能。在新的页面中添加标题栏，复制首页的底部导航，粘贴至新的页面，注意粘贴时用于粘贴至“原位置”。按如此方式制作“发现”页面和“我的”页面。这里介绍一个墨刀非常有特点的功能，就是通过连线的方式进行页面之间的跳转，在应用中选择任何一个控件，图片或者文字都可以通过添加手势和页面切换方式实现页面跳转。优点在于操作方便，且比较直观。缺点是如果页面复杂，跳转比较多，会有非常多交叉在一起的线，容易连接出错。利用连线的方式即可快速的实现底部导航的切换，设置完成后选择右上角运行按钮，即可查看实际效果，效果如图所示。说一个在移动端比较重要的功能，应用全局手势的添加，在左侧“组件”栏目找到全局手势组件，拖入至应用的任意位置，然后选择你要发动手势后跳转的页面，选择手势方式和动画效果即可。手机预览功能，可以直接将原型导到手机上查看。只需要在运行界面，点击分享，用手机浏览器（墨刀app可以）扫描二维码即可直接在手机上查看原型。