Mockplus-更快更简单的原型设计

本文主要介绍Mockplus的基础功能，主要是基于学习过程的总结记录，可能比较简要，详细内容请参考Mockplus的官方教程，也即本文的主要参考资料。

引入：为什么选择Mockplus？

既然你选择打开这篇文章，相信你大概已经知道了Mockplus是干什么的，它是一款优秀的原型设计工具，相比于Axure，正如Mockplus的slogan所说的，它更快、更简单。

我了解一点Axure，但是为什么转而使用Mockplus呢？主要是知乎上看到的关于Axure和Mockplus比较的两句话提醒了我：

如果你是一名设计师，需要的是高仿真、像素级的原型设计，选择Axure；
如果你是一名程序员，需要的是一款方便和同事更精确、高效地讨论交互设计的工具，选择Mockplus。

最近参与的一个项目需求非常模糊，交互比较复杂，后者正是我所需要的。Axure的强大毋庸置疑，但对我而言并没有必要花费太多的时间精力构建自己的组件库和学习它复杂的交互设计，基于我简单的了解，而这正是Mockplus的长项所在，丰富完善的常用组件和简单易用的交互设置。

一、快速入门

首先，通过10分钟玩转Mockplus这个视频了解一下Mockplus的界面；如何在Mockplus中新建项目；如何设置组件属性；如何拖拽链接点来设置交互；如何在桌面和手机端预览演示项目；以及团队协作等基本功能。

如果你有一些使用Axure的经验，或者做过拖拖拽拽的那种程序设计，甚至只是熟悉一点PS，你都会发现Mockplus的使用与之有一些相似之处，无非都是上面或者左上角伸缩的有个菜单栏，包括几乎所有的操作；中间是主工作区；左侧有组件或者工具列表；需要在右侧设置属性；下面是状态栏，是一些基本信息……

基本使用方法在视频中有清楚说明，在此不再赘述。

二、熟悉组件

通过如上入门视频，你已经可以新建项目、新建页面、了解一些组件的用途、可以设置一些简单的页面跳转等交互动作。

接下来这一步非常重要，你可以把所有的组件都随便拉出来看一看，回忆或者想像一下它们的使用场景，简单设置一下右侧的属性看看效果变化，简单了解即可，至少知道有这样功能的组件，需要的时候再做具体设置。

胡乱测试截图：

三、要点深入

1. 基本交互

• 页链接
  直接拖动链接点到项目树中的页面即可：
  
• 返回链接
  首先选中一个组件（图标），在右侧链接页签中进行设置：
  
• 组件间的交互（如单击某个组件时，别的组件缩放、移动等）
  拖动一个组件的链接点到另一个组件上，会自动填出设置交互效果的对话框：
  
• 单个组件的交互状态（如hover动作等）
  首先选中某个组件，点击右侧属性区域的对应闪电图标进行设置：
  

2. 表格说明

如何使用Mockplus的表格

3. 使用标尺和参考线

4. 使用导入导出在项目之间共享组件和页面

1. 页面数据的交换
(1) 打开项目A，在项目树里，选择所需的页面（可以一个或者多个），鼠标右键菜单->导出页面；
(2) 另外打开一个Mockplus，打开项目B，在项目树的节点上，鼠标右键菜单->导入页面。
2. 组件数据的交换
(1) 打开项目A，选中所需组件（一个或多个），鼠标右键菜单->导出组件；
(2) 另外打开一个Mockplus，打开项目B，在工作区空白处，鼠标右键菜单->导入组件。

5. 数据自动填充与快速格子

快速格子
这无疑是最让我惊喜的功能，制作列表类效果非常方便：

6. 母板

在Mockplus中使用母版
将自己的组件添加为母板和添加到组件库中的区别是：使用同一母板的任一元素的改变会同时反映到所有元素上，而组件库中的组件不会。

7. 复制样式

在Mockplus中，你可以通过两种方式来复制样式，高效工作。一个方法是使用格式刷，另一个方法是粘贴样式。
1. 格式刷
先选中组件，然后点击主工具栏上的“格式刷”按钮，光标变为十字，此时你移动光标到需要复制样式的组件上，点击即可。如果需要退出，按下Esc或者鼠标右键。
2. 粘贴样式
选中组件，右键菜单选“复制”（或者Ctrl+C），然后选中需要复制样式的组件，右键菜单“粘贴样式”（或者快捷键Ctrl+Shift+V）。

8. 组件库

Mockplus原型设计视频教程 – 组件库同步和分享

9. 字母热键创建组件

10. 自动还原与自动回转

自动还原：表示再次点击时，执行逆操作；
自动回转：表示执行完指定动作之后马上回到动作之初的状态。

11. 编辑时快速跳转到目标链接页

12. 组件样式

Mockplus组件样式

13. 流程图、脑图

四、快捷键

其实只需要熟记一个快捷键，那就是“查看快捷键”的快捷键（Ctrl+F1），或者点击左上角伸缩菜单中的“快捷键”即可查看。
查看快捷键截图如下，不再全部截图，直接去按Ctrl+F1就行了

复制（Ctrl+c）、粘贴（Ctrl+v）、保存（Ctrl+s）这种Windows软件几乎通用的快捷键不再列出，有一些个人比较常用快捷键的如下：

操作	快捷键
克隆	Ctrl+D / Alt+鼠标拖动
组件上移一层	Ctrl+Up
组件上移一层	Ctrl+Down
组件置顶	Ctrl+Shift+Up
组件置底	Ctrl+Shift+Down
合并 / 解散组	Ctrl+G
锁定	Ctrl+K
备注	Ctrl+M
演示	F5
工作区放大	Ctrl+鼠标滚轮向上
工作区缩小	Ctrl+鼠标滚轮向下
工作区复原	Ctrl+1
拖动工作区画面	Space+鼠标拖动

五、发布方式

Mockplus演示和分享原型设计的8种方式

六、项目实例

官方提供了丰富的项目实例，非常具有参考价值。

1. 手风琴Menu

列表组件、调整尺寸、移动交互

2. 标签组模拟分页器

3. 滚动区模拟时间选择器

4. 定时器

页面跳转、组件交互

七、实用技巧

1. 鼠标悬停效果

Mockplus目前是不支持鼠标悬停效果的，在交互事件中只有鼠标单击、双击等，也没有鼠标悬停；
如果是单个元素，可在元素属性中通过设定交互状态实现一些简单的鼠标悬停效果；

但如果是一个组合元素，就不太好实现了，如下图菜单项，希望在鼠标悬停时，背景色变为白色，图标和文字变为蓝色；

针对这种需求，可以克隆一个菜单项，修改为白底蓝字，置于原菜单下部，原菜单（组合元素）在鼠标悬停时设置透明度为0即可：

需要特别注意的是：组合元素的各子元素上不能再有交互设置，不然这里设置的透明度为0不起作用。

启发来源：https://www.jianshu.com/p/eaf891433f07