关于原型工具的见解

原型工具的见解

一、什么是原型工具：

原型设计工具，说白了就是能够帮助设计师制作静态或动态网页/App设计模型的工具。在界面设计初级或中期，为了能够方便和其他设计师讨论、测试产品相关的设计想法，需要利用各种原型工具将产品模型做出来，一个个界面修改和迭代，必要的时候，还可以制作成动态的模型，直接测试，看看可能会有哪些问题或不足等。是在项目分析阶段，用来做页面模板的，用它做出静态HTML很方便，可以直接用鼠标拖出要用的组件，放在相就的位置上就可以了，也可以实现简单的页面跳转，在初期阶段可以用它来对整个业务流程作出页面上一些简单的功能，基本上的工具都可以导出生成HTML代码，用原型工具做出的页面直观而且比较美观，总之用原型设计工具做简单的页面开发很方便。

二、原型工具的分类：

1.Pop (Prototyping on Paper)

 

 

 

学习曲线：低

适用于iOS和Android平台。借助POP，开发者或设计师只需在纸上简单地描绘出创意或想法，拍下几张草图照片，并将照片按顺序放置，利用链接点描摹出各张图片之间的逻辑关系，就可轻松创建一个动态模型，点击播放即可演示整个模型。

优点：与Balsamiq等同类应用相比，POP的优势在于简单易用，学习曲线短，生成快速且能被分享。

缺点：只支持低保真原型。对于被展示的客户或者团队成员，只知道产品的大概方向；交互效果复杂时不能很好地表达设计。

适用人群：追求手绘风格及快速原型的产品经理和设计师（对于短期内使用免费原型工具的人群来说，这也不失为一个好选择）。

 

2.Mockplus

 

 

 

学习曲线：低

Mockplus是一款简洁高效的免费产品原型工具。它为用户提供丰富的组件和图标资源，通过拖曳即可实现界面设计。支持一键导入项目页面和模板，快速搭建基础页面。软件还支持自定义组件库，数据填充，Sketch导入，拖曳设置交互等特色功能实现快速设计。近期，该工具还推出了团队协作功能，团队成员之间可以查看、编辑、评论项目，帮助用户更好地完成协作设计。

优点：学习曲线短，快速上手，交互简单（只需拖曳），功能多样，组件资源丰富，支持8种预览方式和多种文件导出类型，支持团队协作。

缺点：不支持手势交互。

适用人群：各阶段的产品经理及UI/UX设计师，追求中低保真，交互效果，快速原型，新手或专业人群皆适宜。

 

3.Axure

 

 

 

学习曲线：高

Axure RP是美国Axure Software Solution公司旗舰产品，是一个专业的快速产品原型工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型工具，它能快速、高效的创建原型，同时支持多人协作设计和版本控制管理。

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

缺点：学习曲线较高，性价比不高，专业需求度高。

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

 

4.Wireframe sketcher

 

 

 

学习曲线：较低

WireframeSketcher是一款强操作灵活、功能强大的线框图工具。可帮助设计人员，开发人员和产品经理快速创建用于桌面，Web和移动应用程序的线框和原型。值得一提的是Wireframe Sketcher还是一款带有手绘风格的创作工具，这在一定程度上可以帮助用户专注于设计。除此之外，这款产品原型工具还提供大量的UI控件，支持通过链接创建交互原型，灵活的Wiki形式，线框图注释，生成PDF文档等。

优点：操作灵活，绘制页面速度很快，功能强大，支持手绘风格，提供大量模板，可以进行原型导出。

缺点：仅支持低保真，交互效果较少。

适用人群：简单表达设计或追求手绘风格的产品经理及设计师。

 

5.Proto.io

 

 

 

学习曲线：中

Proto.io是一个专门用于移动应用的产品原型工具——可以构建和部署全交互式的移动应用的原型，并且可以模拟出相似的成品。基于Web的在线环境，它可以让你制作流行的 iPhone，iPad，Android 手机以及任何带有屏幕界面的产品原型。并且它可以运行在大多数的浏览器中，并提供了3个重要的接口：dashboard、编辑器以及播放器。

优点：丰富的UI元素，且可以自定义；支持多屏互动和组件交互，可以从Dropbox上传设计图。

缺点：不支持实时预览，交互动效较多时动画不够流畅，性价比不高。

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

 

6.Balsamiq Mockups

 

 

 

 

学习曲线：较高

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

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

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

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

 

7.Fluid UI

 

 

 

学习曲线：中

Fluid UI是一款用于移动开发的Web原型工具，可以帮助设计师高效地完成产品原型设计。用户可以选择低保真的线框图来加快开发，也可以选择高保真的组件来模仿真实的操作系统。Fluid UI 内置超过2000款的线框图和手机UI控件，并且还会经常进行更新，如果这些图片尚不能满足需求，还可以上传自己的图片。

优点：操作简单，无设备限制，屏幕流功能，资源库非常丰富，同时支持高低保真。

缺点：有时候看起来不够直观，性价比不是很高。

适用人群：适合习惯使用多平台的产品经理及设计师。

 

8．Justinmind

 

 

 

学习曲线：中高

JustinMind是一款来自西班牙的原型制作工具，主要致力于高保真原型。它提供的功能有绘图工具，拖放位置,大小,格式和导出/导入的小部件。你还可以自定义小组件，创建自定义组件库，并进行分类。此外，该产品原型工具还提供丰富的动画支持及强大的交互效果（支持手势交互），官网有丰富的组件及模板资源，用户可以根据需要下载使用。

优点：支持高保真，支持动画效果，便捷的自定义样式，支持原型共享，支持手势交互。

缺点：学习成本较高，程序启动较慢。

适用人群：追求高保真原型的产品经理及设计师。

9、Adobe XD

 

 

 

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

而作为一款本地工具，目前只能通过登录Adobe icloud账号云端管理项目。

当然，虽然官方有在宣传是免费工具，但是免费度非常有限：只能最多使用 2 GB云存储，Typekit，以及最多共享1个设计规范和1个原型。

10、Invision

 

 

 

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

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

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

11、Proto.io

 

 

 

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

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

12、墨刀

 

 

 

作为国内目前广受认可的一款在线原型设计和协同工具，墨刀有内置丰富的UI素材和模板，清爽的界面，让设计原型的过程顺畅高效。墨刀同样支持Sketch设计稿的导入，拖拽式创建交互链接，可以通过链接或者二维码在电脑端或者移动端快捷预览原型。此外，设计师也可以通过墨刀进行自动标注，开发者也可以用墨刀进行切图。

而墨刀新出的版本更加强化了协同管理功能，满足了更大规模团队的需求。不仅多人团队可以在墨刀协同编辑/实时讨论，共同管理素材库，对于人员权限的管理也更加清晰分明。目前很多雇主在招聘产品经理时，已经会将墨刀列为和Axure并列的必备技能之一。

13、蓝湖

 

 

 

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

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

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

三、原型工具的作用：

软件开发中为何使用原型工具以及使用的好处。：

因为原型是在最终系统产生之前的一个局部真实表现，所以原型方法可以让人们在系统的开发过程中，就能够对一些具体问题进行基于实物的有效沟通，从而帮助人们尽早解决软件开发过程中存在的各种不确定性。不确定性是指人们已经拥有的知识是不充分的，不足以预测将来的事件发展，或者不足以清晰、准确地描述某个事物。

实践证明，利用原型有如下好处：

①及时、有力地响应用户需求的变化。

②减少返工。

③帮助控制不完整需求所带来的风险。

④可以将一个大的难以处理的开发过程细分成一些更小更容易处理的步骤。

⑤减少开发成本，提高经济效益。

⑥增加开发者之间的交流，帮助确定技术解决方案的可行性。

⑦有效地识别风险和解决风险，帮助进行风险管理。

⑧提高用户在软件开发中的参与程度。