原型设计工具(介绍与简单使用)


对原型设计工具的介绍总结主要从以下几点进行:

1. 大致介绍几种主流原型设计工具(对比介绍,特点、使用方法等)

2. 选出一种设计工具,结合目前团队项目进行实验,说明使用方法,给出运行结果

3. 总结

 

首先需要确定一下原型设计的基本概念,百度百科是这样给出的“原型设计是交互设计师与PDPM网站开发工程师沟通的最好工具。而该块的设计在原则上必须是交互设计师的产物,交互设计以用户为中心的理念会贯穿整个产品。利用交互设计师专业的眼光与经验直接导致该产品的可用性。

提取关键字,即“与PDPM网站开发工程师沟通的最好工具”、“以用户为中心”。

结合上述内容,对于原型设计,我的个人理解是,原型设计是产品最初的框架设计,即将产品的模块、元素和交互形式等用最简单的方式诠释出来,以供产品用户、开发者更加直观的了解产品的全貌。

通过原型设计工具就能更加简单直观的将产品框架设计并展现出来。

 

一、主流原型设计工具

 

下面简单介绍Axure RP摹客Mockplus)、墨刀、POPPrototyping on Paper)四种原型设计工具。

 

Axure RP

摹客

墨刀

POP

保真度

中高保真

中保真

中保真

低保真

搭建速度

极快

上手难度

极易

平台

Win+Mac

全平台

桌面+ios

ios

(保真度: 主要是关于 功能和交互设计的逼真度)

 

1.1  Axure RP

 

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

特点:

1.支持WinMac

2.有库和自定义控件,功能强大

缺点:

1.移动端预览不方便

2.功能强大但操作繁琐,无法快速设计出原型

 

1.2  摹客(Mockplus

 

定位:Mockplus是更快更简单的原型图设计工具。

摹客(Mockplus)是成都摹客科技有限公司旗下设计协作品牌,专注于一站式的产品设计和协作平台,为产品开发团队提供全流程协作、高保真设计和设计规范管理支持。摹客可以自产出高保真设计,支持多款主流设计工具(Sketch/PS/XD/Axure等)的设计稿交付,团队成员在产品、设计到开发的各个工作环节,利用多种设计工具,都能使用摹客平台协同工作。

特点:

1.支持全平台(在线、桌面端、移动端)

2.相比Axure,更加轻便,操作更加简单

3.相比墨刀,性能更加稳定,功能更加丰富

 

1.3  墨刀

 

定位:墨刀是最简洁易用的原型设计工具和线框图工具。

墨刀为北京磨刀刻石科技有限公司旗下一款在线原型设计与协作工具产品,用户群体包括:产品经理、设计、研发、运营销售、创业者等。借助墨刀,用户能够搭建为产品原型,演示项目效果。墨刀同时也是协作平台,项目成员可以协作编辑、审阅 [1]  ,不管是产品想法展示,还是向客户收集产品反馈,向投资人进行Demo展示,或是在团队内部协作沟通、项目管理

特点:

1.支持在线编辑、桌面端、ios

2.上手难度低,使用轻巧,简单,能够快速给出原型

3.主打主打团队协同方向与团队成员对接方便

 

1.4  POPPrototyping on Paper

 

由台湾Woomoo团队所开发,实现了纸本App企划动起来的可能,只要用手机拍下手绘草稿,用POP设计好流程连结,马上就能变成可互动的Prototype,讨论起来更加实际与方便。

特点:

1.操作轻巧十分简单,可以理解为纸质原型的升级版,能够极快速给出原型

缺点:

1.功能简单,无法满足深层次的需求

2.只支持ios

 

1.5  总结

其中Axure RP相对复杂,从入门到成功设计出原型的学习周期相对较长,并不适合我们当前的项目设计,POP过于简单,更适合记录临时冒出的新点子。摹客和墨刀就相对折中,操作相对轻巧简洁并且功能也相对丰富,通过点击拖拽和简单调试就可以完成大多数操作。十分适合作为我们现阶段项目的原型设计工具。

二、原型设计工具与团队当前项目

目前团队项目是《飞来递》,一个无人机模拟投递系统。手机端主要呈现从主页面跳转至三种视角界面(AR视角、自由视角和追踪视角)、帮助和关于界面。

在注册账号后,点击“新建”选择“原型”,即可选择原型稿开始设计。

 (由于是手机端,所以这里我随便选择一个手机机型作为原型稿。)

因为软件中呈现的图像(无人机飞行路线以及周围的障碍物)大多取决于建模和实时计算,所以在这里的原型设计中,只给出各个组件(按钮,小地图)的布局设计页面跳转

 在进入编辑页面后,工作窗口如下,十分简洁明了。

元素区可以理解为ps中的图层,组件区中的组件十分丰富,完全满足当前项目的需求,只需要拖拽进工作区进行大小调试文字编辑即可。事件区可以详细设置事件响应相关属性。

在页面跳转的设置上,也可以通过拖拽的方式,类似可视化编程(蓝图)一样,将按钮连接至目标页面即可。

在设计完毕后可以进行简单的运行,效果如下:(gif

 

 三、总结

文档中介绍了Axure RP摹客(Mockplus)、墨刀、POPPrototyping on Paper)四种原型设计工具(当然在查询相关介绍的时候也了解到了其他原型设计工具),从简易(类似POP)到复杂(类似Axure),以及倾向交互性或倾向保真度各种类型,原型设计工具有许多种。

文档一开头就有提到原型设计的概念,原型设计的重点是当前项目具体的概念表达,结合实际的产品开发,原型设计可以测试产品,提高设计效率,节约设计成本。原型设计工具并没有优劣之分,只需要针对当前团队情况、项目特点和项目进度选用最合适效率最高的原型设计工具即可。

在结合我们自身项目特点和时间关系,因为只需要展现页面的跳转页面整体布局,所以最终我选择了墨刀作为原型设计工具,简单完成了项目的原型设计。