新入职一家公司，公司目前是属于一个组建团队的过程中。缺少产品设计，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
完成了，要下班了。。。
网友评论