MockingBot原型设计工具新手入门教程

最近好几个朋友问我，想学产品原型设计，但不知道用什么工具好。我一般都会推荐MockingBot，中文名叫墨刀，主要是对新手太友好了。我自己当初也是从零开始摸索的，踩过不少坑，今天就把MockingBot原型设计工具的使用经验完整分享出来，从注册到做出第一个能点击的原型，一步步说清楚。不管你是产品经理、设计师还是想转行的朋友，跟着走一遍基本就能上手了。

一、MockingBot注册和界面初识，别一上来就懵

打开MockingBot官网，注册流程没啥好说的，邮箱或者手机号都行。登录进去之后，你会看到一个工作台页面。第一次用可能会有点眼花，但其实常用的就那几个地方。

左侧是页面和组件库，中间是画布，右侧是属性面板。我刚开始用的时候老找不到组件在哪，后来发现左侧那个“组件”按钮点开，里面有按钮、输入框、图片这些常用元素，直接拖到画布上就行。MockingBot新手入门最关键的一步就是先熟悉这个布局，别急着画东西，花五分钟把每个按钮点一遍，心里就有数了。

还有个小细节，MockingBot默认会给你建一个“首页”，你可以右键重命名。我习惯按页面层级来命名，比如“登录页”“首页”“详情页”，后面做交互跳转的时候会方便很多。这个习惯建议你一开始就养成，不然后面页面多了真的会乱。

二、画第一个原型页面，从拖拽组件开始

熟悉界面之后，咱们直接动手画一个简单的登录页。从左侧组件库拖一个矩形到画布，调整大小当背景。再拖两个输入框，一个放手机号，一个放密码。最后拖一个按钮，写上“登录”。

这里说个我踩过的坑：MockingBot里的组件对齐有时候靠手动拖不太准，记得用顶部工具栏的对齐工具，或者选中多个组件后右键选择“水平居中对齐”。另外，右侧属性面板可以调圆角、颜色、字体大小，MockingBot在这块做得挺直观的，改完马上能看到效果。

画完静态页面，你可以点右上角的“预览”按钮，看看在浏览器里的实际效果。如果发现哪里不对劲，关掉预览继续改就行。这个预览功能对新手特别友好，不用导出就能随时检查。

三、加交互让原型动起来，这才是MockingBot的精髓

光有静态页面还不够，MockingBot真正好用的地方是做交互。选中你刚才画的“登录”按钮，右侧面板有个“交互”选项，点进去新建一个交互。触发方式选“点击”，动作选“跳转到页面”，然后选你提前建好的“首页”。

就这么简单，一个点击跳转就做好了。再预览的时候，点按钮就能跳到首页了。我建议新手先把这个流程跑通，再去研究更复杂的交互，比如滑动、长按、条件判断这些。MockingBot原型设计工具的交互逻辑其实很符合直觉，你想到什么效果，基本都能找到对应的设置项。

另外提醒一下，做交互之前最好把页面结构规划好。我刚开始就是边做边加页面，结果交互线拉得乱七八糟，后来重新整理了一遍才理顺。建议你先在纸上画个简单的流程图，再动手做，效率会高很多。

四、分享和导出，团队协作的小技巧

原型做完之后，你可以直接点分享按钮，生成一个链接发给同事或者客户。对方不用装任何软件，浏览器打开就能看，还能直接在原型上评论。这个功能在我们团队里用得特别多，改稿的时候省了很多沟通成本。

如果要导出图片或者HTML，MockingBot也支持。不过我个人建议，如果是给开发看，直接分享链接就行，开发可以自己点着看交互，比静态图清楚多了。还有个小技巧，分享的时候可以设置密码和访问权限，对外发的时候安全一些。

好了，以上就是MockingBot新手入门教程的全部内容了。其实工具这东西，看再多教程不如自己动手画一个页面。你跟着这篇文章走一遍，基本就能掌握MockingBot的核心用法了。后面再慢慢探索更高级的功能，比如组件复用、动态面板这些，用熟了效率会更高。有啥问题欢迎留言交流。