【实用工具】原型图绘画工具推荐

【背景】

   前几天验收机房的时候说到了原型图的画图工具，当时的我有点蒙圈，因为之前几乎没怎么用过和花过原型图，更多的是看，所以对于他们说的那几个软件我都不是特别的熟悉，或者应该说是非常的陌生。但是也不能说这是一个不好的事，毕竟塞翁失马，焉知非福嘛？因为自己不是很懂，所以就去查，去了解，然后自然而然就懂了嘛~从某种程度上也算是促进了我的积极性，让我自己积极主动的去探索这个软件的选择和使用了~好了，废话不多说，接下来就是关于原型图的绘图工具推荐了，主要分为两大类：软件类和在线类。

一、软件类：

【原因】

   为什么主要先推荐软件类呢？因为软件爱你类的没网也可以编辑和保存啊，不用担心因为断网而影响图的编辑和保存，安全性比较高嘛。

 1、Axure Rp

   Axure RP是美国Axure Software Solution 公司的旗舰产品，该原型设计工具可以专业快速地帮助完成定义需求规格负责设计功能和界面的原型设计者快速创建应用软件或Web网站线框图、原型、规格说明书等。Axure所针对的用户包括用户体验设计师（UX）、交互设计师（UI）、业务分析师（BA）、信息架构师（IA）、可用性专家（UE）和产品经理（PM）等等。

  Axure RP 能让操作它的人快速准确的创建基于Web的网站流程图、原型页面、交互体验设计、标注详细开发说明，并导出Html原型或规格的Word开发文档。（通过扩展还会支持更多的输出格式）

• 网站架构图   (Site Structure)

• 示意图       (Wireframe)

• 流程图       (Flowchart)

• 交互设计     (Interaction Design)

• 原型设计     (HTML Prototype)

• 规格文档     (Specification)

   用Axure RP设计线框图和原型会有效提高工作效率，同时方便团队成员一起完成协同设计，可以向用户演示和交流以确认用户需求以及自动产生规格说明书，极大地优化工作方式：设计更加高效、可快速体验动态原型，帮助清晰有效的沟通。Axure RP的可视化工作界面以让用户轻松快速的简单用鼠标拖拽的方式创建带有注释的各种线框图。无需编程，就可以在线框图上定义简单链接和高级交互。同时该工具支持在线框图的基础上自动生成HTML原型和Word格式的规格说明书。

 

 2、Balsamiq Mockup

   BalsamiqMockuPS是一款快速原型的设计软件，由美国加利福利亚的Balsamiq工作室推出，它真正抓住了原型设计的核心与平衡点——既能快速设计草图，又能较好地进入到平时团队工作的流程和工具。它基于Adobe Air，能够流畅的在不同浏览器，不同操作系统平台下完美运行，可以在线使用，亦可以离线使用，能够很顺利地将其安装在Windows 7、FreeBSD、Ubuntu等平台中，高效率地完成每个原型设计任务。

   BalsamiqMockups具有极其丰富的表现形式，设计效果非常美观。它支持几乎所有的HTML控件原型图，比如按钮（基本按钮、单选按钮等）、文本框、下拉菜单、树形菜单、进度条、多选项卡、日历控件、颜色控件、表格、Windows窗体等。除此以外，它还支持Phone手机元素原型图，极大地方便了开发iPhone应用程序的软件工程师。

 

 3、Pencil Project

   PencilProject最初只是firefox的小插件，曾经得过Firefox插件Grand Prize大奖第一名，后来发布了独立软件。这款手绘风格的开源原型设计工具可以用来绘制各种架构图和流程图。Pencil Project内置丰富模板，可创建具有背景的多页面文档，支持文档内超链接跳转，支持富文本功能的文字处理，支持安装自制画笔和模版，具备所有标准绘图功能如对齐、堆叠层级、缩放、旋转等，支持添加外部对象，跨平台……可以创建可链接的文档并输出成为HTML、PNG、OpenOffice、Word、PDF等格式的文件。

 4、Prototype Composer

   PrototypeComposer是一款Serena出品的能够让非技术型的用户进行原型设计的免费软件，同时它还包括商业过程、活动、用户界面、需求和数据，不但可以制作界面原型，方便用户在代码编写之前直观预览到网站的运行流程，同时还可以用来做项目管理，包括需求管理，数据管理。

   PrototypeComposer提供了完整的集成环境，可轻松进行设计、建模，在进行开发之前使得商业应用软件合理化。该软件能够以可视化的形式描述软件的工作模型，提供可定制的Word格式说明书模板库，可自动组装上从模型中产生的数据，一键创建需求、功能、技术规格说明。

 

 5、Omni Graffle

   OmniGraffle软件由Omni Group公司出品，可以在OS X平台上轻松绘制漂亮的图表、树状结构图、流程图、页面等，可以用来规划电影或剧本的情节走向、绘制公司组织图、专案进度等等。该软件界面非常漂亮，模板丰富精致，容易激发灵感，辅助对齐和尺寸调整功能强大。目前还推出了iPad版本的应用（328元）。

 

  6、GUI Design Studio（GDS）

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

 

 7、Office组件

  大家熟悉的Office套件中有不少组件都可以用在原型设计中：如Visio、PPT、Word、甚至Excel等，但是操作过程相对比较繁琐。

Visio：功能相对丰富，操作复杂。适合画流程图，框架图。不利于批注与交互的表达与演示。

Word：可以画线框图、流程图，添加批注与文字说明。对交互表达不好，不利于演示。

PPT：易于画框架图、做批注，也可以表达部分交互流程，擅长演示。

 8、Adobe设计组件

   一些视觉设计出身的原型设计人员因为软件使用习惯的原因，会选用Adobe的一些平面和网页设计工具来做原型设计工具。

Photoshop/Illustrator：操作难度相对较大，易于画框架图、流程图。不利于表达交互设计，不擅长文字说明与批注。

Dreamweaver：操作难度大，需要基础html知识。易于画框架图、流程图、表达交互设计。不擅长文字说明与批注。

 

 9、纸笔

  当然，我们最传统的纸笔也是非常重要的原型设计工具，帮助我们在设计初期记录和整理思路，绘制最初的草稿。

二、在线类：

 1、 LucidChart

  LucidChart是一个基于HTML5的在线流程图绘制和协作应用平台，用户可以通过它方便快速的实现流程图表的绘制，同时还可以实现与他人进行实时的流程图绘制和修改功能，对需要群组协作功能的团队来说，这点非常方便。由于LucidChart是基于HTML5开发，因此用户不需要下载本地应用程序，通过浏览器就可以在个人PC、iPad等设备上进行使用。

  Lucidchart支持数百种模板与范例，包括流程图、UML、ERD、线框 / 实体模型、网络图、业务流程模型、组织结构图、思维导图以及网站地图等等，还有一点就是它还支持从Microsoft Visio 直接导入文档。

2. Cacoo

Cacoo也是一个在线的网络画图工具，运用它可以制作多种图表，例如Site maps、Wireframes、Flow Fharts、Mind、UML等等，它跟LucidChart非常的类似，也支持多人协作。除了基础的模板之外，Cacoo还推出了一个模板商店，用户可以自己上传一些模板到商店里，而且大多数模板也是免费的。除此之外，Cacoo的图表可用矢量格式导出（例如PDF，SVG等），导出的图表可打印或用其他绘图工具（如Adobe Illustrator）进行再编辑，不过这些功能仅在付费版本中才提供。

3. Gliffy

Gliffy 也是一个基于Web的在线作图应用，它可以帮助用户创建流程图、组织结构图、平面图、业务流程、网络图、技术图、线框图等等。跟上面的两款工具也是非常类似，Gliffy的基础版本免费。不过其在线制作的思维导图是公开的，高级版本有设置隐私权的权力。用户可以将其可以嵌入博客，办公室应用软件中，有很好的兼容性。通过Gliffy编辑的流程图图片可输出SVG、GPEG格式。

4. Creately

Creately也是一款优秀的绘制产品图形的在线工具，绘制的图形更为丰富，支持UML图、Mindmap图、SWOT图、产品原型图、流程图等等数十种类型。Creately的提供的图形对象也很多，从简单的流程图到各种吸引人的剪贴画。而且多人协作也很方便，用户可以使用侧边栏来邀请其他人在线协作，历史版本的功能也可以使用。

 

5. Mockingbird

Mockingbird是一款基于 Cappuccino 开源框架下的产品原型设计工具，能够模拟桌面软件给予设计人员更快速的上手和实践。Mockingbird 能够为用户提供了完全基于浏览器窗口的产品原型设计服务，由于Mockingbird采用了Cappuccino开源框架，能够较为逼真的模拟Axure 这类桌面软件，给用户极大的亲切感。Mockingbird 内置了常用的各种Web控件，包括Text、Link、 Button、 Image、List,Box 等等，鼠标拖拽便可添加至画布中，Mockingbird也支持协作功能。

 

6. ProcessOn

ProcessOn算是国内垂直领域最好用的作图工具了，基本上已经完全实现了其他作图工具的所有功能，而且与其他工具相比，ProcessOn还提供了小组、活动等很多社交性质的功能。

ProcessOn 支持 Flowchart、EVC、EPC、BPMN、UML、UI界面原型图、iOS界面原型图、维恩图和思维导图等9种不同类型图，这款工具采用实时的保存机制，每一步操作之后都自动保存，做完之后用户就可以导出图片，目前仅支持PNG格式和PDF格式。对比国外，虽然提供了很多格式，但都是需要付费才能够使用，而ProcessOn提供的服务则是完全免费，虽然现阶段，用户的作图文件数量也是非常的有限，不过只需要邀请几个好友，用户就可以获取更多的扩展空间了，起码不用花钱了。

ProcessOn 也是一款基于HTML5 开发的在线作图工具，也可以做到无延迟协作，方便两个或多个人同时对一个文件协作编辑和沟通，对创业团队或者企业办公小组来说，是一个非常简单好用的工具。