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

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

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

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

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

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

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

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

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

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

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

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

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