3款主流原型设计工具基本功能介绍及对比

原型设计工具——Axure、墨刀、Mockplus基本功能介绍对比

目录

1.前言

2.简单介绍与下载

3.基本功能介绍与对比

4.案例演示对比

5.结果总结

6.感想 

 

1.前言

  在软件的开发过程中，原型设计是十分重要的。原型展示了各个部分之间的比重以及各个部分之间的联系。一个可交互的原型基本上能够像最终完成的产品那样运行，你可以对它进行操作，原型则会给予相应的反馈，使用者可以随之明白它的运作方式，寻求解决特定问题的方案。原型经过可用性测试之后，能够优化出更好的用户体验，能够在产品上线发布之前排除相当一部分的潜在问题和故障。

  因此一个好的原型可以让整个开发过程变得更轻松，同时一个适合自身的好的原型设计工具也是原型设计过程中必不可少的一部分，今天给大家介绍与对比三款主流的原型设计工具——Axure、墨刀、Mockplus。

首先声明由于本次介绍是结合我自身初步学习与实践后的使用感受，对比结果仅代表个人观点，若有不同意见，欢迎探讨。同时案例的实现也是初步学习后的实践，仅供初学者参考。由于本文较长，读者可以按照目录选取需要片段浏览。

2.简单介绍与下载

  2.1 Axure

  Axure RP是一款专业的快速原型设计工具。Axure（发音：Ack-sure），代表美国Axure公司；RP则是Rapid Prototyping(快速原型)的缩写。

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

  下载地址：https://www.pmyes.com/thread-35500.htm

  汉化包下载：https://www.pmyes.com/thread-35068.htm

  2.2 墨刀

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

  下载地址：https://modao.cc/?utm_source=xiongmao

  2.3 Mockplus

  Mockplus（摹客）是一款简洁快速的原型图设计工具。适合软件团队、个人在软件开发的设计阶段使用。其低保真、无需学习、快速上手、功能够用。并能够很好地表达自己的设计。

  下载地址：https://www.mockplus.cn/

 

3.基本功能介绍与对比

  3.1主界面介绍与对比

   Axure主界面：

  可以看到打开Axure RP9之后直接显示的就是原型绘制的界面，可以通过文件菜单对已有项目进行导入或者创建新的项目。

   墨刀主界面：

 

  用户可以通过浏览项目目录或者选择新建按钮来创建自己的项目。

   Mockplus主界面：

 

  Mockplus主界面与墨刀总体差别不大。

  3.2项目创建/导入对比

   Axure项目创建/导入：

  直接通过打卡文件的下拉菜单中新建和导入的方式建立项目或者导入已有项目。

   墨刀项目创建/导入：

  选择需要开发项目基于的设备类型，创建属于自己的项目。导入项目时可以通过项目列表对已有项目进行导入与编辑。

   Mockplus项目创建/导入：

  软件提供了多种支持平台，每种平台中均内置了常用设备数据供快速选择，也可以自定义尺寸等。选择好所需项目后即可新建个人项目。项目导入可以通过上述打开项目功能键对已有项目进行导入。

  3.3软件提供模板/资源量对比

   Axure：

   在项目创建时可以看到，Axure仅为用户提供一张画布，而并不像墨刀和Mockplus在软件内部为用户提供各种原型模板。大多数的Axure元件库、原型模板需要用户自己在网上查找下载或者通过AxureShop商城进行下载，其中也有免费可用的资源需要用户自己下载导入。

   墨刀：

   在创建项目时，墨刀为用户提供尽可能多的模板可以直接导入使用，在这点上相较于Axure为用户提供了一定的便利。

   Mockplus：

   Mockplus也为用户提供了各种模板资源，在创建项目时可以直接选择模板，在此基础上修改与使用。

  3.4项目界面介绍与对比

   Axure：

   墨刀：

 

   Mockplus：

 

  3.5软件工具/功能介绍

   Axure工具/功能：

    ●Axure常见操作快捷键：

   剪切： [Ctrl]+[X] ，[CMD]+[X]

   复制： [Ctrl]+[X]， [CMD]+[C]

   粘贴： [Ctrl]+[V]， [CMD]+[V]

   粘贴为文本： [Ctrl]+[Shift]+[V] ，[CMD]+[Shift]+[V]

   粘贴包含锁定的元件：[Ctrl]+[Shift]+[Alt]+[V] ，[CMD]+[Shift]+[option]+[V]

   粘贴样式： [Ctrl]+[Alt]+[V] ，[CMD]+[option]+[V]

   副本： [Ctrl]+[D]， [CMD]+[D]

   撤销 ：[Ctrl]+[Z]， [CMD]+[Z]

   重做： [Ctrl]+[Y] ，[CMD]+[Y]

   全选 ：[Ctrl]+[A] ，[CMD]+[A]

   打开： [Ctrl]+[O]， [CMD]+[O]

   新建： [Ctrl]+[N]， [CMD]+[N]

   保存： [Ctrl]+[S] ，[CMD]+[S]

   另存为：[Ctrl]+[Shift]+[S] ，[CMD]+[Shift]+[S]

   退出： [Alt]+[F4]， [CMD]+[Q]

   打印 ：[Ctrl]+[P] ，[CMD]+[P]

   查找： [Ctrl]+[F] ，[CMD]+[F]

   替换： [Ctrl]+[H] ，[CMD]+[R]

   帮助 ：[F1]， [F1]

   拼写检查： [F7] ，[CMD]+[Shift]+[；]

   选项设置： [F9]， [CMD]+[,]

    ●Axure元件库介绍

 

   元件又称组件，是原型设计的组成要素，多个归类的元件就叫元件库，每一个元件都可以配合元件检视属性设置切换跳转等事件。

   1.获取元件库：打开Axure官方网站可下载官方提供的元件

   2.载入元件库：导入本地元件库

   3.创建元件库：创业一个自命名的元件库并保存，可对该元件库进行编辑设计

   4.编辑元件库：编辑当前选中的元件库 进行编辑设计

   5.移除元件库：删除当前选中的元件库

   元件库中包含许多元件，不同元件的功能也有所不同，在此不再赘述，在原型设计的过程中对元件的利用可以使得大家对各个元件的功能更加熟悉。

    ●Axure元件的使用：

 

 

 

 

   在左下角的元件菜单中选择自己需要的元件，拖动到工作区。在右侧的元件属性这一栏中可以对元件的样实、交互、说明进行具体的操作和设置。

    ●Axure热区与动态面板：

 

 

 

   图中蓝色部分为动态面板，绿色部分为热区。热区和动态面板是常用到的交互设计元件，配合元件检视属性可以设置切换跳转等事件。

   1.热区：对热区的常用功能就是单击跳转，在图片、文字等某个局部为止上添加热区，通过属性设置就可实现类似超链接的功能

   2.动态面板：动态面板可做的交互效果是非常多的，例如幻灯片切换、弹窗、选项卡切换，隐藏显示等。

    ●Axure交互实现：

 

   Axure的交互是以下拉菜单的方式实现的，想要实现页面跳转或者元件内部交互需要在下拉列表中选取需要跳转的对象实现交互功能。给按钮添加点击事件，Axure相较于其他两款软件更为复杂，除了鼠标、键盘动作外还有其他类型的触发方式，传参，全局变量等功能。

    ●Axure母版介绍：

 

   母版的使用对于原型设计是非常有必要的，原型经常在讨论中不断修订，修订时有些共用的元素每个页面单独去修改是非常耗费时间的。母版的作用就是当所有或多个页面用到同一个元素，需改更改时只需要修改母版就事项了所有页面该元素的修改。

 

   例如在制作基于手机端的原型时，一个模型的框架就可以作为一个母版，之后用户在此母版的基础上添加不同页面的功能即可。

 

    ●Axure演示：

 

 

 

   点击预览按钮后会自动跳转到默认浏览器中，可以浏览当前的原型。

 

   墨刀工具/功能：

    ●墨刀组件介绍：

   墨刀的组件相对于Axure的元件，软件自身提供了更多的组件素材包，同时可以点击获取更多素材在官网进行组件包的下载。

    ●墨刀组件属性介绍：

   与Axure类似，在组件栏中拖动自己需要用到的组件，之后选中组件在左侧的组件属性栏中设置组件的具体大小、文本、外观、动效等信息。

    ●墨刀交互实现：

   墨刀可以添加事件，与 Axure相同点击下拉菜单添加需要跳转的页面即可实现页面之间的交互。

   同时，墨刀还可以通过选中组件后，拖动交互按钮连接需要跳转的页面，实现页面之间的跳转这点比下拉菜单选择的方式更直观更便捷。显然在组建交互方面墨刀的实现更为简单。

    ●墨刀运行预览：

   在设计好原型后，点击运行会在墨刀软件中生成预览界面，同时可以生成连接分享给其他成员来对原型有更深入的了解和修改。

    ●墨刀运行预览后的功能：

   可以看到墨刀运行预览后，有标注与评论功能，能够更好的在原型设计阶段完成用户详细需求的了解以及有助于团队项目的完成。

    ●墨刀工作流功能：

   墨刀为用户提供了工作流功能，类似于总体界面的流程图可以使得整个原型的流程更加清晰更易于理解，在导入了原型页面后可以添加连线与文本说明各个页面之间的关系。

   Mockplus工具/功能：

   Mockplus在大多数功能方面与墨刀较为相似，此处不再做过多讲解。

4.案例演示对比

  Axure实现微信界面步骤：

   1. 建立母版

  因为Axure没有固定的模板可以直接创建，在网上搜索手机边框的图片对图片进行组合排版形成手机样式存储为母版。

   2.创建导航栏和标签栏

 

 

  在母版的基础上，创建动态面板分别为导航栏和标签栏为方便之后页面跳转。具体页面上的其他按键信息可以以图片插入的方式以及插入元件的方式进行排版，插入到母版中。

   3. 创建通讯录页面

  创建新的页面后可以复制之前“我”的页面下的动态面板，并插入图片信息。

   4.设置页面交互。

  在标签栏中选中需要实现页面跳转的按钮，设置交互条件之后实现简单的页面跳转。

   5.点击预览。

   6.浏览器中预览生成结果。

  简单的案例可以成功实现页面基本功能的跳转，如果需要设计较为复杂的系统以此类推。建立母版后根据页面内容和功能的不同进行排版与添加，形成自己想要的原型。

  墨刀实现微信界面步骤：

   1.创建项目

  选择手机端创建微信项目。

   2.添加组件

  在项目中设置各类群组，群组中包含图标、按键以及文字信息，同时可以使用墨刀中的微信组件来建立微信界面。

   3.添加页面

  创建新的页面，页面下部的标签栏可以复制初始创建的群组中的组件信息，按照以上步骤创建多个跳转页内容。

   4.添加事件

  事件添加可以使用手动添加的方式或者直接使用拖拽的方式，拖拽指向目标跳转的页面。即可完成事件的添加。

   5.添加动态组件

   双击该组件，创建状态2组件的信息，设置事件为单击后切换组件为状态二。则完成动态组件的创建。

   6.运行

   将功能完善运行。

   案例成果展示：https://free.modao.cc/app/f03420b086e9da4d704da7643dfff12cb4ac48c4?simulator_type=device&sticky

  Mockplus实现微信界面：

   1.创建项目

 

 

 

   选择基于手机设备的项目之后点击创建。

   2.创建页面并实现。

   Mockplus与墨刀操作相近，步骤一：添加相应的页面信息；步骤二：在页面的工作区中加入组件以及符号信息，并插入图片进行排版；步骤三：拖拽设置跳转目标，Mockplus的跳转方式仅限于拖拽设定跳转目标。

   3.运行

 

 

 

   生成预览结果，与墨刀类似。

5.结果总结

  Axure：

  使用心得：在软件现有资源与元件中，Axure软件仅提供软件自带的元件资源，用户想要额外的资源需要自己从网上搜索下载添加，需要耗费一定时间。但在总体界面上就可以看出Axure的功能较其他两款软件来说十分多样，想要用好这款软件需要花费一定的功夫进行深层次的学习。其操作相较于其他两款还是有一定难度，但专业性十足。

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

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

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

 墨刀：

  使用心得：在墨刀的使用过程中，软件自身提供了许多组件资源以及模板，对于不了解组件实际作用的初学者十分友好。其控件的拖拉、大小的调整，都会自然的去匹配相应的母版大小。无需去担心有多移动一点或多选择一点。操作界面也比较简单易懂，初学者上手很容易。

  优点：界面易懂，初学者容易上手。

  缺点：在交互效果上、控件组合上，操作面板的选择上都不如AXURE 灵活。

  适用人群：无较高专业需求的人群。

  Mockplus：

  使用心得：在Mockplus的使用中我觉得它与墨刀两者较为相似，界面设计以及提供的资源都比较时合初学者上手。

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

  缺点:不支持手势交互。

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

6.感想

  通过本次的学习了解到了许多原型设计工具，对其中三种比较主流的原型设计工具进行了学习。我了解到了类似的工具还有：xiaopiu，Sketch，同时对于三种不同工具的学习我觉得三者各有各自的优势。不同的情况下会使用不同的原型设计工具，总的来说本次的学习让我收获了不少，不仅了解到了各式各样的原型设计工具，也能让我亲自实践来学习这些工具的具体使用，使我受益匪浅。