原型设计软件MockingBot学习笔记

Posted on 2019-05-18 Edited on 2019-06-26

安装

首先去官网下载安装包并进行安装，这个解压后直接是一个可运行exe. 最开始运行失败可以考虑重装一下。

最初有几天的试用期，之后就需要续费了。下面正式开始吧~

创建项目

最开始新建项目就是基础的选择设备，建立一个完全空白的项目。

由于我们组要做微信小程序，因此选择手机。

实际上也可以选择右侧的从模板中创建项目，但是没有发现很符合我们的产品需求的组件。因此这里我还是选择从空白项目做起了。

基础操作

添加页面

左上角添加新页面就可以根据创建项目。

添加组件

添加组件有三个方法：

最左侧边栏（左图）：根据图标一目了然为文字、矩形、原型、直线、图片、链接
右侧边栏（右图）

第一个是状态（主要用于动态组件，后面会说）。横线下面第一个提供了很多内置组件（如右图），还有IOS风格的弹窗、按钮、键盘等。（因此我觉得有了很多方便的内置组件，其实也就不需要最开始的模板了）。

第二个为我的组件，在设计过程中有很多需要复用的部分，比如我们的项目中选择学科和年级的地方既需要在个人资料那里显示，也需要问卷发布者在限制接收者的时候用作限制。我一般会把需要复用的内容打包成我的组件，以便在后面的页面中使用。

第三个为图标，有三个图标集合，都是些常用的图标，比起自己一个个去上网寻找还是很方便的。

最后一个为母版，是一个可以有多个状态的组件设计，这里在tab切换时比较好用，下面会介绍。

注意母版如果被修改，则所有嵌入该组件的地方都会修改，因此在不同的地方复用需要修改最好重新建立母版。

设置组件属性

右侧边栏调整页面大小、底色，点击每个组件的时候右侧调节对应的字体、字号、底色、圆角、阴影等等都一目了然。不过多介绍了。

添加跳转连接

原型和UI设计图最大的区别在于有动态的页面跳转。这个在墨刀中的实现只需要一步简单地拖动即可完成。

选择任意想要添加链接的按钮/文本，拖动闪电形状的按钮：

拖拽到要跳转到的页面上：

辅助线

很多时候，为了保证软件的美观，我们需要各种左对齐、居中对齐等等，尽管页面可以显示网格的参考线（如下图），但很费眼睛。

整个窗口的上方和左侧有一个像尺子一样的东西，可以在上面绘制辅助线，这样对齐某些文本框和按钮就方便了很多。

进阶操作

动态组件和母版

如果原型中每个界面都是静态，则和平面设计图没有很大的区别，也不能很好地辅助前端进行编码。因此有时候还需要界面内的变化
使用过程中个人认为动态组件和母版是差不多的，总结一下微小的区别以免在使用中踩坑：

	动态组件	母版
修改内容	其他的已经嵌入原型的相同组件不会被更改	其他的已经嵌入原型的相同组件会被更改

实例

比如下面的例子中，两个选择学科都来自同一个母版
假设我从第一个页面进入，编辑了母版
结果如下
- 两个引用母版的地方都被修改。
- 但其实如果将母版转换为动态组件后再进行修改就不会有问题

动态组件和母版的转换

	动态组件 -> 母版	母版 -> 动态组件
转换方法
效果	双击修改动态组件，另一个页面的母版不会发生改变

常见应用

底边栏切换

外观

我们的项目中主要分了三个边栏：主页、任务页和个人页。因此底边栏只需要三个图标。

转化为母版

下面就需要转换为动态组件然后添加状态了：

首先选中三个图标和背景，右键选择转换为母版ZeX9Fx

之后把鼠标放到上面就会出现双击编辑母版

状态

由于需要动态切换，需要在这个模板中添加不同的状态：

状态	主页按钮	任务页按钮	个人页按钮
主页	\	-> 任务页	-> 个人页
任务页	-> 主页	\	-> 个人页
个人页	-> 主页	-> 任务页	\

右上角的类似靶心的图标可以对母版的状态进行管理，比如这里需要三个状态ZeXPfK
全局状态可以同时修改所有状态的组件（添加删除等）以及组件属性；默认状态用于当母版添加到原型中没有选择状态的时候展示的内容
下面需要根据每个状态修改状态中的外观：
- 个人主页
- 主页
- 任务页

添加链接

在小程序中，程序中的切换一般有两种方式：1. 页面内切换 2. 页面间切换

切换状态

页面内的切换对应着母版中不同状态间的切换，同一页面的状态共享部分组件

切换页面

可以发现当编辑母版的时候，左侧的页面列表不见了，需要返回工作区到母版所在的页面上选择对应的状态进行修改：
这里需要在母版所在的页面对选择对应的状态，对链接进行修改，添加链接的方法和对于基础组件一样（这里以在主页的底边栏为例）
- 然后选中其中具体的图标链接到对应界面
记得还需要设置这个母版当前的默认状态（右侧边栏）：