墨刀MOCKINGBOT原型设计工具介绍

       在第十二周的网课课堂上，王文娟老师在学习通系统上发布了介绍主流原型设计工具的任务。通过查阅网上资料，现有的原型设计工具主要有axure、墨刀、摩客（Mockplus）、xiaopiu、Sketch等，其中现在最常用的原型设计工具主要包括axure和墨刀。在此，我选择墨刀这一原型设计工具进行介绍。

引言

       墨刀拥有PC端、手机端、网页版，让你随时随地可以进行产品原型设计，它的定位是主要用于设计移动APP原型，特点短平快，适合一些APP，小型pc工程，以及一些频繁迭代的产品，优点协同办公效率比较高，目前国内个别大公司以及中小企业都有用到，个人版本免费，但是使用页面数量有限，编辑后产品都是保存直接保存在云上，很方便，不会出现文件丢失的情况。

      对于我自身而言，之前接触原型设计工具并不多，了解的也不够，作为一个新手菜鸟，墨刀上手简单这一特点深深的吸引我，基本不需要我费很多功夫特意去学，一些基础的操作都能学会。

墨刀的使用

       一、下载和登陆

      下载链接：https://modao.cc/downloads

图1-1 下载界面截图

       从该界面我们可以选择适合自己硬件的版本进行下载和使用，可以看出，墨刀支持桌面版、移动端，甚至网页端的使用。

图1-2 移动端墨刀注册和登陆界面

图1-3 网页端和桌面版墨刀注册和登陆界面

        在此篇博客中，我使用的是桌面版的墨刀应用，注册十分方便，使用微信扫一扫即可登陆成功。

       二、使用总结

图2-1 墨刀新手教程

       墨刀十分人性化，因为我是新用户，所以有一个新手教程，能帮助我快速上手。

       在简单学习新手教程之后便可以开始创作自己的项目了。

     （1）新建项目

       在这一步我们有两种选择，一种是选择新建空白项目，另一种是选择从模板中创建项目。我先来介绍第一种方式：第一步我们首先需要填写新建项目的项目名称（见图2-1-1），第二步我们可以选择所设计的原型需要使用的设备，如手机可以选择苹果或安卓（见图2-1-2），这里与我们本学期学习的另一门课所使用的Android Studio中创建AVD的过程十分相似，可以选择自己需要的设备（见图2-1-3），甚至自定义。

 

2-1-1新建空白项目

图2-1-2 系统选择

 

图2-1-3 设备选择

         第二种方式我们可以从模板中创建项目，从图2-1-4可以看到，墨刀提供了海量的模板供我们参考，它的分类涉及了各行各业，也提供了快速筛选和搜索模板的功能。如果在这找不到你想要的模板，还可以点击右上角的“获取更多素材”进入素材广场，从而找到你心仪的原型模板、页面、组件及图形素材。

 

图2-1-4 模板 

       （2）基本用法

        在这里我采用了从模板中创建项目，选择了一个时下热门“抗疫服务小程序”的一个项目进行学习和介绍。

        我们先来看看从模板中创建项目后界面的样子（见图2-2-1），随后再逐一介绍各个功能的用法。

图2-2-1 从模板中创建项目

        1.常用组件

      （如图2-2-2）我们可以把左边组件栏中的一些组件拉到这个中间的编辑栏，通过双击对应的组件，在左侧样式栏进行文字或者颜色的编辑。

 

图2-2-2

        2.页面管理

        对于页面的管理，我们可以在最左边的页面管理栏进行新建或者复制页面（见图2-2-3），也可以选择展开所有页面或者显示模式的切换（见图2-2-4）。

                                                                                                                             

                                                                                                                           图2-2-3                                                                图2-2-4

        3.页面跳转

        如果要进行页面之间的跳转，可以点击组件，然后拉动组件旁边的超链接的样式图标到相应页面即可执行进行页面跳转功能，如下图所示：

图2-2-5

        4.元素

        我认为元素这个功能栏十分便捷，因为在设计原型时，一个界面可能存在着许许多多的组件，在需要添加交互时就会十分的头疼，但是有墨刀这一功能，你点击某一个元素里的组件，在设计界面就会在它周围产生蓝色框，便于你找到，甚至元素还提供了直接搜索组件的功能。（见图2-2-6）

    图2-2-6

       5.状态

       状态功能是墨刀里用于设计交互动画效果的功能，类似PPT里的动画功能、Axure的动态面板功能。通俗的来说，就比如微信底部的菜单栏，同样的四个图标，在我们进行切换时图标会变色，这就是页面状态。

图2-2-7

       6.内置组件

       内置组件即我们会使用到的一些元素，它分类众多，供我们设计时选择。还有一个特别的功能，就是组合功能，我们可以组合多个组件，或者对已有的组件进行打散，这一功能方便简单，节约了设计的时间。

                                                                                      

                                                                             图2-2-8                                                    图2-2-9                                                          图2-2-9

       7.我的组件

       这一功能就是新建自己需要的组件或者将以后还会用到的组件保存到我的组件中，方便以后的使用。有2种方式可以创建“我的组件”：1 选中组件，右键弹出面板，选择“创建我的组件”。2 直接拖拽组件到“我的组件”面板空白区域。

 

  图2-2-10

       8.图标

       图标包含了图标库和常用图标，图标库里提供了5套图标，我们也可点击下方获取更多图标素材。常用图标会添加我们使用次数较多的图标，极大方面了我们的设计。

图2-2-11

       9.母版

        当同一个组件（组合）在多个页面多处都用到，但是当后期需要修改时，我们想一次性修改所有这样的组件，此时我们就可以利用墨刀的“母版”了。

图2-2-12

      （3）导出下载、运行分享

       点击页面上方的下载图标，具体如下图所示：

       图2-3-1

      点击页面上方的运行图标即可运行编辑的应用，而后在运行页面右方通过分享图标可以生成分享链接，如下图所示：

     图2-3-2

      三、简单实例的说明——使用页面状态制作点击弹窗

      拖动“按钮”键到中央，双击修改名称为“支付”（见图3-1）；拖动“密码弹窗”键至中央，修改名称和内容（见图3-2），并打开状态，新建状态2；在状态1中将“密码弹窗”隐藏并图层置底；最后将“按钮”页面跳转连接到状态二即可（见图3-3）。利用同理制作状态三“支付成功弹窗”。（见图3-4）

                                                                                           

                                                                                                                        图3-1                                                                                        图3-2

                                                             

                                                                                               图3-3                                                                                                             图3-4

            效果图：

                                                                                      

                                                                                                                                                   图3-5

学习及使用心得

        总体对于墨刀使用的体验还是很好的，便捷容易上手；它的原型分享功能做得很好, 可以很方便的在手机上预览原型；提供了很多优秀的模板，供我们学习或者使用。但是墨刀定位于移动端的软件产品, 这样的交互效果在做高保真原型的时候, 还是不够用的， 这方面Axure就强大很多了, 通过动态面板, 函数, 中继器等, 几乎能实现所有常见的交互效果, 或者自己也能设计出想要的交互效果。所以我们应该掌握多种原型设计工具，才能便于日后的使用。