新入职一家公司，公司目前是属于一个组建团队的过程中。缺少产品设计，PC端已经写了部分，我作为移动端第一个入职的员工，总要从零开始。这不在开会的时候多了一句嘴，移动的原型图就交给了我来做。只能硬着头皮搞了
首先来看看我们要使用的工具
MockPlus下载地址 是慕课网的吧，不喜欢了解这些，好用就行。
打开新建一个项目
选择一个设备，就是你为啥设计的原型图， 我这里选手机哈。
刚刚创建好的会帮你创建一个界面
对于移动手机端的最常见的样子就是三级控制器，tab, navi, vc。类似这个样子的
首先我们创建三个控制器
创建完以后
选中首页，创建我们的tab栏
把这个拖到首页的底部，像这样摆好
创建tab的每一个item,item 由文字和图标组成
单行文字
图标选择区域
分别拖一个图标和文字，双击文字可以修改内容
然后选中图标和文字，点击左上角的组合图标
选中的操作是按住command分别点击图标和文字
组合成功之后，可以方便的进行一起移动和复制操作
选中组合之后，按住command+d，可以方便的额复制出一份，这里要复制三分
像这样摆好，然后双击图标编辑图标，双击文字编辑文字。
带目前为止，我们的tab栏已经做好了。😊
创建内容容器，
找到内容面板，
将他拖到首页中，并吧大小调整好。
点击加层
我们有三个控制器就是加两个
然后就是连线了
MockPlus，连线一般都在控件的右上角
选中一个控件，这个控件的右上角就会出现一个点
分别连线
三个都连好了以后，会出现红色的闪电，表示这个控件有被绑定事件的。
到最后一步了，我们现在可以的来进行页面的链接的，还记得一开始创建的三个控制器吗？
首先改变内容面板的当前图层为图一
然后将右上角的点和左边的对应控制器链接起来
链接完了以后，可以发现内容面板的三个图层的名称改变了
然后我们离开首页，去到三个子页面中分别创建一个顶部导航条
还是选这个，右边有修改组件样式的地方，自己可以多尝试，熟悉了就好了
改好了以后就是这样的
把另外的两个控制器都改了，就算最终完成了。
我们最后选中首页，点击顶部中间的三角形，运行我们的最终效果
发现tab有边框很丑，可以去掉。在上面加一个线条就好
最后的效果
完成了，要下班了。。。
