用好这6个新功能，让你的项目设计事半功倍

本文由Mockplus提供素材。

 

Mockplus3.2新功能发布有段时间了，新功能具体能给咱们的设计带来什么呢？且听我一一道来：

 

格子

 

格子功能，能够快速制做重复的布局，提升设计效率。

步骤：

1、建立格子

1. 选中一个或多个组件。

2. 在主工具栏上，点击“转为格子”的图标，此时能够看到格子已经生成（你也能够鼠标右键，“转为格子”）。

3. 拉动格子，格子的内容会自动生成。

 

 

2、调整单元格的大小、行距和间距

在格子上，拉动单元格侧边的红线，能够设置单元格的大小；拉动灰线，设置单元格的行距和间距（固然，你也能够在属性面板上直接输入数字，来进行设置）。

3、设置属性

在属性面板上，还有一些属性能够设置，好比：你能够给格子设置分隔线，包括其颜色、粗细等。

4、脱离

有时候，你须要某个格子保持本身独立的样式，不受总体变更的影响，那么，在当前格子上点击“脱离”。

 

 

数据自动填充

 

数据的自动填充功能，支持填充的数据类型为文字和图片。自动填充功能适用于如下两种状况：

1. 直接使用，用于图片或文字的单个或批量填充。

2. 在格子中使用，快速构建带有重复布局的组件（如列表），大大节省设计时间。

 

 

 

在自动填充功能中，设计者能够快速填充的文字类型有：

姓名、日期、文本（句子或段落）及邮箱。

其中，姓名、日期和邮箱都进一步提供了细分类型供设计者选择。

能够快速填充的图片类型有：头像（写实/卡通）、办公、美食及其余多种多样主题的高清图片。

 

模版

 

加入了模板和示例项目，灵活使用这些新功能，可让你更高效地完成原型设计。

1、项目模板

3.2版本 之前，每次建立新项目都是空白项目，只包含一个空白页面。3.2 中新增了模板，建立时能够直接选择不一样的模板。模板中预设好了合适的页面大小和字体字号等，而且包含一些基本页面，能够直接从这些页面开始你的设计。

1.  在新建项目时，点击“选择模版”；

2. 选择你喜欢的模版（若是想知道模板的具体内容，可在预览图上点右键，选择 “预览”）

 

 

2、页面模板

若是你正在作项目的过程当中，须要一些通用页面怎么办呢？你能够试试从模板新建页面。

1. 选择 “从模板新建页面”：

 

 

2. 选择你想要的页面：

 

 

3、示例项目

Mockplus 3.2 提供了很多的完整的项目例子可供参考，这些例子中都包含了丰富的页面和详细的交互设计，部分复杂页面还有批注说明，若是想要学习，能够多看。

你能够在Mockplus启动页的“打开项目”中找到这些示例项目，如图：

 

 

定时器

 

“定时器”组件，利用它能够方便地实现延时自动页面跳转、延迟自动交互的效果。

1. 使用定时器作页面自动跳转

这里咱们要实现的是：当进入Home页面后，等待1秒，自动跳转到Welcome to Bear 页面。方法以下：

在“交互”组件中找到“定时器”组件。

 

 

Home页面上添加一个“定时器”，并将它和Welcome to Bear 页面设置交互。

 

 

定时器的默认延迟时间为1000ms，你也能够本身修改。

 

 

运行，查看效果：

 

2. 使用定时器作组件交互

这里咱们要实现的是：当进入一个页面后，等待1秒，该页面中圆形、按钮文字的颜色都自动变为绿色。方法以下：

将定时器和圆形作交互，选择“设置颜色”。

再将定时器和按钮作交互，选择“设置颜色”（同其它交互组件同样，一个定时器上能够设置多个交互）。

 

 

 

运行，查看效果。

 

 

脑图编辑模式

 

脑图到底有多有用呢？咱们一块儿来看看：

在项目设计过程当中，有了脑图，你能够一键切换脑图设计模式，快速规划须要的模块。

在演示过程当中，随时调出脑图，便于对项目的总体功能进行演示讲解。

项目制做完成后，随时导出基于图表的图片，便于后期筹划PRD文档。

在脑图设计模式中，你能够：

1. 自由增添/删除/重命名页面和组。

2. 拖拽调整页面位置，直接映射到项目文件。

3. 变换脑图风格，多种样式任你选。

4. 一键导出脑图。

 

 

 

导入Sketch

 

Mockplus 3.2  为Sketch 开发了插件，能够将 Sketch 文档导出为 Mockplus 文档，而后在 Mockplus 中完成交互设计，整个使用过程很是简单。

准备

Mockplus 的插件须要运行在 Sketch 上，版本要求 45 以上。请注意：请保证你的Sketch是从Sketch官网下载的版本，而非从Mac Store下载的，不然可能没法使用这个插件。

安装

从https://www.mockplus.cn/download下载 Sketch 插件，解压开而后双击 .sketchplugin 文件。Sketch会提示插件已经装好了：

 

 

导出

当完成了设计后，在菜单中选择：“Plugins”- “Mockplus”-“导出项目文件”

 

 

设置选项

在下面的界面中设置项目选项，你能够选择导出部分的 Artboard，同时你还能够选择导出的项目类型和图片大小信息，这些选项会影响最终导出的项目文件。设置好之后，选择“导出”。

 

 

在Mockplus中继续设计

把你导出的mp文件使用 Mockplus 打开，而后就可使用 Mockplus 继续进行设计了。

 

这个6个功能，对我来讲，格子和数据填充功能最有用，不是说其余功能很差，而是其余的功能我暂时用不上，你以为哪一个功能对你有帮助 呢？

 

官网下载地址：https://www.mockplus.cn/download