原型设计工具调查报告

在软件开发的过程中，我们要将客户想法到落地设计出产品，往往都是由沟通到设计，再到收集客户反馈信息进行终稿敲定，整个过程对于时间耗费较大的往往在于沟通和修改。在传统设计模式上，通常需要设计人员与外界沟通，在吸收信息后，通过手绘草图，耗费大量的设计时间；而若要设计出产品原型，需要多款工具交替使用，然后传达至客户手中，再进行沟通修改细节，整个流程前后沟通不顺畅，无法一步到位直接将客户需求落地。那么此时我们就需要有一款工具，能让客户、业务、设计三位一体共同参与沟通，实现产品从创意到落地快速生成原型产品。以下将对当下几款常用的、功能强大的原型设计工具做简要的介绍。

1. 墨刀

墨刀是一款在线原型设计与协同工具，借助墨刀，产品经理、设计师、开发、销售、运营及创业者等用户群体，能够搭建为产品原型，演示项目效果。墨刀同时也是协作平台，项目成员可以协作编辑、审阅，不管是产品想法展示，还是向客户收集产品反馈，向投资人进行Demo展示，或是在团队内部协作沟通、项目管理。

1.1  特点

1）其控件的拖拉、大小的调整，都会自然的去匹配相应的母版大小。无需去担心有多移动一点或多选择一点。并且系统控件都是基于APP，以及系统平台IOS和安卓，因此在里面可以首先选择相应的设备布局，减少了不少工作环节。

2）内置了很多移动端的素材库, 可以直接套用模板。墨刀推出了丰富的模板项目，可先预览模板效果，挑选成功后点击“创建项目”即可。 做原型的时候会方便很多，易用性也强很多。

3）墨刀的学习成本很低,掌握所有基础操作所需时间较短。

4）打开工作流便可看到全局状态和注释，实时同步进度和文档

1.2  使用方法

以下将通过制作一个简易的APP首页原型来初步了解墨刀的基本使用方法。

1.2.1   创建应用

选择新建原型项目，进入新建页面后，有IPhone、Ipad、网页、车载及apple watch等原型稿可供选择（这里选择了IPhone应用），输入应用名称后，设置设备类型和应用尺寸，点击创建按钮，完成应用创建。

 

1.2.2   制作底部导航栏

新建应用的标题栏会自动显示应用的名称（人人都是产品经理），标题栏文字可以自行修改。从左侧“组件栏”中找到底部组件，拖入到应用中，大小和样式可以自行根据需要修改。然后拖入三个导航标签，修改标签的位置和名称，完成底部导航栏的制作。

 

1.2.3   制作原型页面

在左侧的“组件栏”中找到搜索组件，拖入App首页中，在“母版”栏目中找到轮播图模版，拖入应用之中。墨刀中有一些已经做好的组件或母版，可直接拖入使用，加快创建原型的时间。

 

回到“组件栏”，为首页插入图片和文字。图片调节在右边的设置栏，也可直接拖入图片，然后用鼠标调节大小，这样会比较方便。文字的调节在左边的主题栏目，可调节文字的大小和样式，然后用鼠标摆至合适的位置。

 

1.2.4   创建页面

在软件右上角点击“+新页面”即可生成新的页面，每一个页面有复制、删除、添加子页面的功能。在新的页面中添加标题栏，复制首页的底部导航，粘贴至新的页面。按如此方式制作“发现”页面和“我的”页面。

 

1.2.5   页面跳转

墨刀有一个非常有特点的功能，就是通过连线的方式进行页面之间的跳转，在应用中选择任何一个控件，图片或者文字都可以通过添加手势和页面切换方式实现页面跳转。优点在于操作方便，且比较直观。缺点是如果页面复杂，跳转比较多，会有非常多交叉在一起的线，容易连接出错。

 

1.2.6   添加全局手势

在左侧“组件栏”找到全局手势组件，拖入至应用的任意位置，然后选择要发动手势后跳转的页面，选择手势方式和动画效果即可。

 

1.3  软件不足之处

1）交互效果有限。

2）效果切换采用的是连线的方式，容易给使用者造成错乱的感觉，影响设计时的体验。

3）如果要使用更强大的共享创建功能还需要付费购买。

1. Axure

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

原型设计中复杂的交互设计是它的强项，同时提供高保真与低保真两种设计效果，拥有良好的文档支持，自带实用的流程图功能，插件库可以定制特殊的行为。它的团队版和企业版还提供了团队协作功能，主要包括团队协作和在线评论，设计师还能使用Axure创建和托管团队项目。

2.1  特点

1）有强大的编辑功能, 使得制作素材库会更便捷一点。

2）更快的复制粘贴，素材库和原型库会多一些。

3）可以项目共享，使得同事间可以同步工作，并保留所有工作历史，并可以随时到处历史版本的项目文档。

2.2  使用方法

以下将简要介绍Axure的界面布局，并通过实现一个简单的案例来初步了解Axure的使用方法。

2.2.1   主页面

 

2.2.2   菜单栏

 

其中，经常使用的菜单功能有：

1）文件-导出图片：当前打开页面对应的单张图片、所有页面。

2）编辑-快捷键：保存、撤销。

3）视图-重置视图：当关闭某个窗口，可通过此次菜单快速恢复窗口视图。

4）布局-组合、对齐、分布，在工具栏也有快速按钮，包含shift键多选元件、组合后右键或者概要中进行重命名。

5）布局-显示网格和对齐辅助线。

6）发布-预览、预览选项、生成HTML文件，在工具栏也有快速按钮。

2.2.3   工具栏

 

这里是平常我们使用Axure需要的工具，其实跟我们平时用word差不多，可以放大缩小，设置文字大小颜色位置等。

2.2.4   登录页面设计

在元件库中，拖动文本框控件。

 

双击文本框，即可输入提示，并从元件库中选择按钮拖入页面编辑区域。

 

 

2.2.5   首页设计

与上相同的操作，在元件库中选择合适的元件拖入页面编辑区域。

 

2.2.6   添加登录动作

选中登录按钮，在右侧新增交互，实现点击“登录”按钮，页面会跳转到首页。

 

选择交互事件，这里选择“单击”。

 

再选择打开链接

 

最后再选择链接到首页，这样便完成了点击按钮跳转功能。

 

2.2.7   添加退出动作

操作流程同上，选中首页的“退出“按钮，新增”单击“链接跳转交互即可。至此，一个简单的登录功能原型就设计完备了，里面涵盖了Axure的基本操作。

2.3  软件不足之处

1）动态面板和中继器较为复杂，要完全弄懂也需要一定的时间成本。

2）Axure只支持在本地设计。

3）添加用例，不能拖拽完成:对于一般的交互，在Axure中可以通过弹窗来逐个筛选设置。稍微复杂的交互，则需要条件构建器来实现。Axure在交互设置中，可以添加条件判断，但需要用户有一定的编程常识，否则掌握起来有相当难度。尤其是初次使用的时候。

4）正版的Axure售价较高。

标签：墨刀,调查报告,原型,跳转,设计,工具,Axure,页面
来源： https://www.cnblogs.com/pzl-666/p/16253136.html