【辅助工具】20款优秀的移动产品原型和线框图设计工具（一）

设计是决定开发和测试的重要要素。在平时做设计过程当中，我们可能会使用一些不同的设计工具来勾画原型稿子。

下面是一些做移动设计时候常用到的工具。

================================================

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

1、Proto.io

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

 

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

 

2、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有浏览器窗口和移动手机两个模版选项，移动版有纵向和横向两个选择。线框图的每个元素都可以编辑和转换。

 

见后一篇：【辅助工具】20款优秀的移动产品原型和线框图设计工具（二）：http://www.cnblogs.com/haochuang/p/3997141.html