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

本文由Mockplus提供素材。


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


格子


格子功能,可以快速制作重复的布局,提高设计效率。

步骤:

一、创建格子

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

2. 在主工具栏上,点击“转为格子”的图标,此时可以看到格子已经生成(你也可以鼠标右键,“转为格子”)。

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


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

在格子上,拉动单元格侧边的红线,可以设置单元格的大小;拉动灰线,设置单元格的行距和间距(当然,你也可以在属性面板上直接输入数字,来进行设置)。

三、设置属性

在属性面板上,还有一些属性可以设置,比如:你可以给格子设置分隔线,包括其颜色、粗细等。

四、脱离

有时候,你需要某个格子保持自己独立的样式,不受整体变动的影响,那么,在当前格子上点击“脱离”。



数据自动填充


数据的自动填充功能,支持填充的数据类型为文字和图片。自动填充功能适用于以下两种情况:

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

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



在自动填充功能中,设计者可以快速填充的文字类型有:

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

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

可以快速填充的图片类型有:头像(写实/卡通)、办公、美食及其他多种多样主题的高清图片。


模版


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

一、项目模板

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

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

2. 选择你喜欢的模版(如果想知道模板的具体内容,可在预览图上点右键,选择 “预览”)


二、页面模板

如果你正在做项目的过程中,需要一些通用页面怎么办呢?你可以试试从模板新建页面。

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


2. 选择你想要的页面:


三、示例项目

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容