使用MockPlus

新入职一家公司，公司目前是属于一个组建团队的过程中。缺少产品设计，PC端已经写了部分，我作为移动端第一个入职的员工，总要从零开始。这不在开会的时候多了一句嘴，移动的原型图就交给了我来做。只能硬着头皮搞了

首先来看看我们要使用的工具

image.png
MockPlus下载地址 是慕课网的吧，不喜欢了解这些，好用就行。

打开新建一个项目

image.png

选择一个设备，就是你为啥设计的原型图， 我这里选手机哈。

image.png
刚刚创建好的会帮你创建一个界面
image.png

对于移动手机端的最常见的样子就是三级控制器，tab, navi, vc。类似这个样子的

image.png

首先我们创建三个控制器

image.png

创建完以后

image.png

选中首页，创建我们的tab栏

image.png

把这个拖到首页的底部，像这样摆好

image.png

创建tab的每一个item,item 由文字和图标组成
单行文字

image.png

图标选择区域

image.png

分别拖一个图标和文字，双击文字可以修改内容

image.png

然后选中图标和文字，点击左上角的组合图标
选中的操作是按住command分别点击图标和文字

image.png

组合成功之后，可以方便的进行一起移动和复制操作
选中组合之后，按住command+d，可以方便的额复制出一份，这里要复制三分

image.png

像这样摆好，然后双击图标编辑图标，双击文字编辑文字。

image.png
带目前为止，我们的tab栏已经做好了。😊

创建内容容器，
找到内容面板，

image.png

将他拖到首页中，并吧大小调整好。

image.png

点击加层

image.png

我们有三个控制器就是加两个

image.png

然后就是连线了
MockPlus，连线一般都在控件的右上角
选中一个控件，这个控件的右上角就会出现一个点

image.png

分别连线

image.png

三个都连好了以后，会出现红色的闪电，表示这个控件有被绑定事件的。

image.png

到最后一步了，我们现在可以的来进行页面的链接的，还记得一开始创建的三个控制器吗？
首先改变内容面板的当前图层为图一

image.png

然后将右上角的点和左边的对应控制器链接起来

image.png
链接完了以后，可以发现内容面板的三个图层的名称改变了
image.png

然后我们离开首页，去到三个子页面中分别创建一个顶部导航条

image.png

还是选这个，右边有修改组件样式的地方，自己可以多尝试，熟悉了就好了

image.png

改好了以后就是这样的

image.png

把另外的两个控制器都改了，就算最终完成了。

我们最后选中首页，点击顶部中间的三角形，运行我们的最终效果

image.png

发现tab有边框很丑，可以去掉。在上面加一个线条就好

image.png

最后的效果

image.png

完成了，要下班了。。。