摹客教程：分分钟搞定APP原型设计

作为一个“年轻”的互联网产品经理，了解到前辈们经历过的手绘原型时代，无法想象那时候的工作效率，毕竟现在有了各种各样的高效原型设计工具，APP原型设计也变成了分分钟就能搞定的事情。以原型设计工具摹客RP为例，我们一起来看看绘制一款APP原型究竟有多简单吧~

创建项目

打开摹客RP，可以看到摹客RP提供了手机、平板电脑、网页以及自定义尺寸四种项目类型以及多种画板尺寸，可以供大家自由选择。填写好项目名称，选择好适配的项目尺寸，项目就创建完成啦。

快速布局

当然，快速布局的前提是，你已经在脑海里有了这个原型的大致框架。有了大致框架以后，我们就可以利用摹客RP预置的丰富组件和图标，来快速完成页面搭建啦。摹客RP的操作方式很简单，把需要的组件拖到画板中就可以。

首先我们来制作底部导航。如果你的APP原型只需要简洁的底部导航，那么直接使用摹客RP的“分段控件”组件就可以，将分段控件拖到画板底部，双击修改选项名称，再将组件两端拉至与画板同宽，圆角设置为0，底部导航就完成啦。摹客RP的分段控件自带交互属性，当我们完成其它页面搭建后，可以将三个选项链接到不同页面。

接下来我们在左侧项目树中，创建两个新页面，再在三个页面中分别进行内容填充。创建页面的步骤过于简单，在此不加赘述，我们直接来看在这三个页面中，我用到了哪些组件吧。

“主页”用到的组件：分段控件、图片、文本、输入框、按钮、图标。

“收藏”用到的组件：分段控件、图片、文本、输入框、按钮、图标。

“我的”用到的组件：分段控件、选项卡、图片、文本、输入框、按钮、图标。

可以看到，我们只用到了摹客预置的少部分组件，就完成了三个页面的搭建。对于产品经理来说，不需要制作高保真原型，只需要向设计师交付线框即可。但为了将需求传达得更加明确，我们也可以为原型增加一些简单的页面跳转交互。

制作交互

在之前的步骤中，我们为每个页面都添加了底部导航，接下来我们分别在每个页面双击底部导航，进入分段控件的编辑模式，并拖动选项后面的链接点，链接到左侧项目树中的对应页面。

在弹出的面板中，设置好“点击-页面跳转”的交互，如果想要更好的交互效果，也可以在下方设置好对应的参数。这样我们的交互效果就制作完成啦。

分享演示

完成原型设计后，我们可以在摹客RP界面右上角点击下载离线演示包，在弹出的面板中，我们可以设置原型的设备外壳和相关参数。打包下载后就可以发给小伙伴们啦，离线状态下也可以查看演示哦。

当然，还有更加简便的方法，就是直接分享在线演示链接。点击界面右上角的演示按钮，然后点击浮动工具条最右侧的分享按钮，我们就可以获得一个分享链接，同样可以设置对应的参数。值得一提的是，对项目进行更新后，演示链接也会同步更新，不需要重新分享，是不是很方便呢~

总结

对比Axure之类的老牌原型设计工具，摹客RP的原型设计流程不能更简单了，几乎不需要特意学习就能轻松上手。当然，简单并不代表着功能简陋，如果熟练掌握了摹客RP的各种高阶功能，比如矢量绘图、专业布局等功能，高保真原型设计也不在话下。

此外，摹客RP还自带流程图模式，绘制完原型，还可以在页面中增加流程图，让逻辑表达更加清晰。

最后（或许也是最重要的），摹客RP是一款完全基于云的原型工具，非常适合团队多成员进行实时协同工作。你和你的小伙伴可以同时编辑同一个项目的同一个页面，轻轻松松效率翻倍。这样一款上手简单、功能强悍的原型工具有没有让你心动呢，赶紧点击这里免费开始使用吧。