移动产品原型和线框图设计工具介绍

文章目录

前言
1. Proto.io
2. Moqups
3. UXPin
4. Balsamiq Mockups
5. JustinMind
6. FluidUI
7. Axure
8. Mockflow
9. Protoshare
10. Wireframe
11. WireframeSketcher
12. Omnigraffle
13. Pidoco
14. FlairBuilder
15. iPhone Mockup
16. HotGloo
17. InVision
18. Mokk.me
19. iPlotz
20. Pencil Project
21. Sketch

前言

线框图(Wireframe)是app、软件或者网站设计过程中非常重要的一个环节，它可以合理地组织并简化内容和元素。线框图除了可以帮助开发者节省时间外，更可以加深开发者对产品的认知，给开发者一个清晰的产品构架，避免了开发者陷入层次不清、功能不明的产品设计和开发混乱状态。

1. Proto.io

Proto.io是一个专用的手机原型开发平台——可以构建和部署全交互式的移动程序的原型，并且可以模拟出相似的成品。它可以运行在大多数的浏览器中，并提供了3个重要的接口：dashboard、编辑器以及播放器。

dashboard可以用来管理项目。编辑器是构建原型的环境，由一组设计和开发原型的工具组成，另外还可以构建交互。播放器用来观看原型，并与原型进行交互，并提供了相关工具来标注和保留反馈信息。你可以直接在真实的移动设备上对原型进行测试。并且可以使用iOS或Android上的浏览器以全屏模式运行原型。

2. Moqups

Moqups 是一个非常好的、免费的HTML5应用，通过它可以创建可爱朴素的线框图、实体模型和UI概念。该程序使用起来非常简单，并且有内置的模板可以直接使用（模板包括单选按钮、链接、图像占位符、文本框以及滑块等）。

它还提供了iPhone和iPad模板，以及iOS相关的按钮、提示框、picker、菜单、开关以及键盘等。你可以设置网格的尺寸，并预览和分享你的线框图。Moqups提供了一个很有用的功能就是对齐网格，可以使对象精准对齐。

3. UXPin

UXPin是DeSmart团队开发的一个简易快速的实体模型和在线可点击原型创作工具。它基于优秀的用户体验设计原则，在构建原型中，它提供了一个完整的工具包（该工具包具有良好的用户设计模式和元素）来从头构建一个出色的原型。

UXPin具有响应式的断点功能，创建的响应式原型和线框图可以运行在不同的设备和分辨率上。另外该软件还提供了版本控制和迭代功能，可以轻松的共享预览，直观的注解和实时的协同编辑和聊天。该软件拥有大量具有吸引力的用户界面元素风格（包括web，iOS，Android等），并且具有快速、灵敏的响应拖放接口。

4. Balsamiq Mockups

Balsamiq Mockups是一款非常使用起来非常方便、非常高效的原型设计软件。

Balsamiq Mockups目前包括75个界面控件和187个漂亮的icon，基本上自带了常用的小控件，UI控件支持自动拖拽，并且可以实现自动对齐。还有不少随即可用的元素，简单拖拽就能形成效果图。 Mockups To Go library中还有适合Android、Blackberry以及iOS开发者的模版，Windows、Mac OS、Linux下都可以使用。可使用XML语言保存元素，也可以导出PNG图片，可以插入到任何项目。

Balsamiq Mockups再现在白板上绘制草图的体验，共享原型进行测试有助于合作与反馈。整体采用了手绘风格，Balsamiq Mockups还提供了一个将图片转换成手绘风格的选项，保持了整体风格的一致。

5. JustinMind

JustinMind是由西班牙JustinMind公司出品的原型制作工具，可以输出Html页面。与目前主流的交互设计工具axure，Balsamiq Mockups等相比，Justinmind Prototyper更为专属于设计移动终端上app应用。

JustinMind可以帮助开发者设计更丰富、更具交互新的移动产品线框图，包含了iPhone、Android 以及iPad常用手势，滑动、缩放、旋转，甚至捕捉设备方向等，从而创造出更具交互性的原型。另外，它可以导出原型信息到Microsoft Word，生成规范的文档。

此外，你还可以自定义小组件，创建自定义组件库，并进行分类，不管对象是iPhone、iPad、黑莓、Android还是其他。

6. FluidUI

Fluid UI是一款用于移动开发的Web原型设计工具，可以帮助设计师高效地完成产品原型设计。Fluid UI 内置超过1700款的线框图和手机UI控件，并且还会经常进行更新。

Fluid UI无设备限制，无平台限制（Windows、Mac以及Linux系统），支持Chrome和Safari浏览器（Chrome浏览器上的app也可离线使用）。你可以使用Fluid Player来预览你的设计，收集意见和反馈。还可以以PNG、PDF方式输出。

Fluid UI使用方法简单，采取拖拽的操作方式，不需要程序员来写代码。另外，Fluid UI资源库非常丰富，有针对iOS、Android以及Windows 8的资源。如果你觉得库存资源不能满足你的需求，你也可以自行添加。

7. Axure

不多说了，很多人都在用这个交互原型设计软件。网上也有很多这方面的教程和文档。

8. Mockflow

Mockflow是一款可以为网站和移动app快速高效制作线框图的工具，友好而强大，类似于Axure。内置了许多经常用到的控件和图标，比如按钮、图片、下拉式菜单、进度条以及文字面板等等，能够有效帮助用户提高对传统软件以及富互联网应用软件的快速设计和交互式用户界面实体模型的规划进程。

Mockflow附带有大量跟线框图部件有关的资源库，提供了四个可选模版(iPhone app、Android app、iPad app以及Windows Phone) ，你也可以选择自己的布局和设计。你还可以通过MockStore下载更多元素和模版。

Mockflow支持协作和聊天功能，每个人可以在不同的页面看到项目的实时进展和变更。项目也可以以各种不同的形式输出，你也可以在移动设备或者台式电脑上查看和测试app的功能。

9. Protoshare

ProtoShare：在线网站开发协同制作工具是一个十分便捷的在线原型制作工具，侧重于团队协作。团队成员可以通过这个工具对工作进行审查，并及时提供反馈，对线框图或内容进行建议。

作为一个强大的线框图和原型平台，Protoshare提供了大量移动工具集（有来自中心资源库的大量移动模版和大量2D、3D动画过渡）。通过“拖放”界面，你可以快速创建交互式的线框图和移动原型，然后发送至iPhone、iPad或者Android设备进行测试，体验app的功能实现情况。

另外，Protoshare还支持分享和反馈功能，项目成员可以标记和跟踪的反馈信息来做出决定。而大量的资源库意味着你可以使用模版和获得的反馈创建移动产品线框图，进而演变为高保真的原型。

10. Wireframe

Wireframe是一款具有“点击-拖-放”界面且超简单的线框图创作工具。双击实现编辑功能，有限的界面意味着你会把精力集中于你的想法上。还给每个线框图分配了特有的URL，便于标记和分享。

Wireframe有浏览器窗口和移动手机两个模版选项，移动版有纵向和横向两个选择。线框图的每个元素都可以编辑和转换。

11. WireframeSketcher

WireframeSketcher是一款强大的、灵活的线框图和原型快速创作工具，适用于桌面app和移动app开发者。WireframeSketcher可以作为单独的app，也可作为一个Eclipse 插件。

WireframeSketcher还是一款简单的带有手绘风格的创作工具，这样你就不会被一些细节所打扰。它包含大量UI控件，可以进行灵活的自定义设置。经过优化的界面、多个快捷方式、格点捕捉以及智能化引导都让WireframeSketcher成为快、高效的选择。Mockups Gallery 还储存了大量可供下载的插件、模版以及icon等。

12. Omnigraffle

OmniGraffle是由The Omni Group制作的一款带有大量模版可以用来快速绘制线框图、图表、流程图、组织结构图以及插图等类型图的app，也可以用来组织头脑中思考的信息，曾获得2002年的苹果设计奖。

它采用拖放的所见即所得界面，你可以用钢笔工具绘制自定义的模版或者图形，此外还自带Graffletopia提供的多个iPhone、iPad以及Android模版。

13. Pidoco

Pidoco 是一款基于Web的原型设计软件，用于快速创建可点击的线框图。也可以用于制作网站项目、移动项目、企业应用程序的用户界面原型。拥有智能的共享和协同工作功能以及便捷的可用性测试模块，更易于使用。

通过简单的拖放界面，你可以使用软件自带的移动UI元素来快速创建移动app原型，或者使用移动页面模版来节省更多时间。你可以选择"plain" 或者"sketched" 模式来展示你的线框图。

14. FlairBuilder

FlairBuilder是一款可以用来创建交互性线框图的快速原型工具，可以帮你把低保真度的草图升级为高保真度的线框图。FlairBuilder内置数量超过70个的小部件或小元件，还带有大量模版。你可以简单快速地预览你的项目，并且输出功能齐备的HTML原型。线框图以树状结构出现，FlairBuilder可以读取你的线框图，并产生一个易于查看的层级式网站地图。

FlairBuilder带有iOS和Android模版，你可以以HTML形式输出原型，这样也易于在真机上进行测试。

15. iPhone Mockup

iPhone Mockup最大的特点是简单，可绘制简单线框图（illustration）和手绘风格线框图（pencil）两种风格的在线原型工具，你可以在两种风格之间自由切换。

iPhone Mockup支持协同创作和同步数据/操作，每个人都可以知道项目做了那些更改，只要他们有项目的URL，每个人都可以在线编辑。iPhone Mockup支持Firefox、Safari、Chrome以及Internet Explorer 8 浏览器。

缺点是没有密码保护，且组件有限，但却是一个最基本且最简单的工具，可以上传图片和更改文本标签。

16. HotGloo

HotGloo是一款为传统软件以及富互联网应用软件制作产品原型的在线工具，友好而强大。内置了许许多多会经常使用到的控件和UI元素，鼠标拖拽至画布，再组织绘制即可。能够有效的帮助用户提高对传统软件以及富互联网应用软件的快速设计和交互式用户界面实体模型的规划进程。

最近，该软件新增了iPad和iPhone专用的模板套件，包括基本的界面元件，比如标签、icon、地图、按钮以及大量表视图。

HotGloo轻量级但却非常强大的模版系统给人深刻印象，双击可编辑模版组件，还有助于强调app中响应式的交互设计。协作功能可以让团队多人参与到线框图制作过程中，你也可以邀请别人来参看或者给你一些反馈和意见。内置的聊天功能可以让成员实时讨论线框图的绘制情况。

17. InVision

InVision是一个便捷的产品原型生成工具，用户制作一个在线原型只需要四部：创建一个工程、上传视觉设计稿、添加链接以及生成在线原型。

确切说，InVision提供的不是准确的线框图，而是一个快速原型的环境，可以把你的UX/UI草图快速连接起来。数字型的线框图和高保真的设计可以帮你测试app的工作情况，同时该工具还支持协作和分享功能，生成的在线原型可以支持任何人在产品原型的任何地方评论，便于准确的交流。

针对iOS 开发，InVision还增添了其他功能，比如自定义主屏幕icon和自定义加载页面。

18. Mokk.me

Mokk.me是一个简单快速的原型工具，通过界面上简单的拖放操作，不用了解单线编程就能创作一个可以分享、测试以及多平台的app。目前，Mokk.me正在测试中，但它是一个简单的基本的工具，任何人可以用它来创建app的布局。你可拖、放或者编辑小工具，可以搭建和连接页面，还可以选择过渡动画。它的特点还在于页面和按钮、图片小工具、文本输入以及复选框形式。

另外，你可以借助HTML、CSS以及JavaScript完成app其他一些功能，一旦你创建了原型，你还可以进行分享，在iOS 和Android上进行测试。

19. iPlotz

iPlotz 是一款可以用来创建可点击、可导航的原型和线框图工具，适合网站开发者和移动app开发者。你可以在一个可调整的页面拖放元件，然后连接起来，增加其他屏幕或者页面的热点链接。你可以选择使用iPhone/iPad模版或者Android模版，任何模版都有独一无二的元件设置。

iPlotz界面明白易懂，支持协同工作、可分享的编辑权限、任务管理以及评价系统。另外，项目可以以IPML、JPG、PNG、PDF以及HTML形式输出。

20. Pencil Project

Pencil是一款开源的可以用来制作图表和GUI原型的工具，可以作为一个独立的app，也可以作为Firefox插件。内置模版可以帮你绘制桌面和移动界面中用到的各种各样的用户界面，包括流程图、UI和一般的通用图形。

通过它内置的模板，你可以创建可链接的文档，并输出成为HTML文件、PNG、OpenOffice文档、Word文档、PDF。Pencil Project还包含大量移动app模版。

21. Sketch

sketch 是一款适用于所有设计师的矢量绘图应用。矢量绘图也是目前进行网页，图标以及界面设计的最好方式。

Sketch 是为图标设计和界面设计而生的。它是一个有着出色 UI 的一站式应用，所有你需要的工具都触手可及。在 Sketch 中，画布将是无限大小的，每个图层都支持多种填充模式；