摹客mockplus 更快更简单的原型交互设计工具

目录

一、什么是原型设计？

二、摹客Mockplus简介

三、Mockplus的下载

四、Mockplus的使用

 

什么是原型设计？

原型设计指的是让人能够提前看到或是体验到产品的一个创作过程，它可以很好的去表达出设计人员对产品的一种需求，具有很好的思路展现形式，是一种较为立体有效的沟通方式。

原型设计的最终呈现效果有几种不通的程度，被称之为“草图”、“低保真”、“高保真”已经更加复杂的交互原型。其实草图很好理解，简单潦草只是一个初步设想；低保真就是线框图，不做任何的修饰，是用来内部展示所用；高保真则是经过较为精心的渲染，图片的添加修饰，起到一种像经过PS流程一样的真实感，更接近于真实成品的一个临界点，主要用来给客户呈现展示；而最为复杂的交互原型主要是用来给开发人员。

原型的设计过程其实就是从“低保真”到“高保真”的一个过程，在时间及效果要求的范围内去设计你的原型图，如果时间宽泛当然是“高保真”得原型图更好，它能让你在领导面前增色不少，否则在时间不宽泛的情况下去选择“高保真”就有点得不偿失了，毕竟任何的工作，还是以结果为导向的。

 

摹客Mockplus简介

Mockplus（摹客）是一款简洁快速的原型图设计工具。适合软件团队、个人在软件开发的设计阶段使用。其低保真、无需学习、快速上手、功能够用。并能够很好地表达自己的设计。

如今是一个快节奏的社会，每一天都会有无数的软件发布，每一款软件的制作过程不可避免的需要使用原型设计工具。而Mockplus就是一款原型设计软件，可以用于移动端，PC端以及WEB的原型设计。它也符合如今快速设计的潮流，旨在帮助设计师在最短时间内设计出令人满意的软件原型。

现在市面上有很多的原型设计软件，而为什么选择Mockplus呢？我是因为它快速且高效，简单而不简陋的特点，专注于原型设计这件事本身的理念。如果把原型设计软件中的巨头Axure比作是一个武学宗师，那么Mockplus就是一个刺客，它远没有宗师那样华丽的招式，更没有宗师那样威力无穷且见于细微的内力。它只是一个刺客，它的招式不多，出手很快，每一招一式都是为了获得一个成功的结果。这就是Mockplus,它简单，没有太多繁复的操作，几乎每个人都可以轻易的上手；它快速，可以通过简单的拖拽设置等操作来实现其中大部分的功能。

 

Mockplus的下载

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

 

 

 

 

 Mockplus的使用

安装完客户端后，一进入便是新建项目页面，可以看见有各种设备的尺寸可供选择，都不满意的话还可以选择自定义自行设置页面尺寸。

 

 

创建完页面后默认是进入这样的空白页面

 

 左下角有很多可选的组件和功能，由于数量比较多，我就选其中一些进行简单介绍

 

=========================
几个组件的使用
=========================

"文字表格"组件:
文字表格有点像 pencil 中的表格, 可以直接通过写内容的方式设定表头和每个cell的文字, 比pencil强大多了, pencil表格最让人抓狂的是, 没法控制每列的宽度, mockplus 可以在内容最后一行使用特殊的语法控制每列宽度和对齐方式, 比如 {2,2R,4R,4C,2C} , 可以猜出来这个表格共5列, 每列有不同的对齐方式.

"表格"组件:
"表格"组件要比"文字表格"组件更强大, 它更像是Excel的样子, 可以控制行高、列宽、合并单元格, 以及调整每个cell的边框样式.
甚至我们可以将Excel的内容直接复制进来.

"热区"组件:
"热区"是一个特殊的组件, 它是透明的(即不可见), 但是有大小. 可以看作是一个隐形的按钮, 主要是用来完成交互设计, 使用"热区"来响应点击等事件, 完成互动设计.

"导航"组件:
web 设计中常用, 用来展现"首页>软件>下载"这样的导航效果, 导航条中每个链接都可以引出交互热点.

"内容面板"组件:
这个组件有点像Delphi的Frame概念, 内容面板可以包含多个frame, 每个frame都可以关联到其他的"页面", 注意是"页面", 而不是普通组件. 也就是说"内容面板"组件是页面容器, 比如 frame1 关联了 page1, frame2 关联了 page2. 如果我们有两个按钮 button1 和 button2, 点击button1/button2分别想跳转到page1/page2上, 这时候, 我们可以将button1和frame1绑定, 就能达到点击button1跳转到 page1; 同理button2也一样.

"弹出面板"组件:
如果想在页面上弹出一个对话框, 可以加一个弹出面板, 该面板是一个不可见容器, 可以在容器中加入UI组件. 如果要想在某个组件上触发一个弹出对话框, 可以将该组件和"弹出面板"关联. 在弹出时, 弹出面板画布会覆盖在原来的画布上, 达到弹出效果.

 

 

=========================

几个功能介绍
=========================
"数据填充"功能
在mockplus 工具条有个油漆桶按钮, 即是数据填充.
1. 页面上选中Text和Label等组件, 然后使用"数据填充"功能可以很方便地填写一些文字内容, mockplus 内置了很多文本模式, 有人名/日期/邮箱/随机文字等等.
2. 也支持图片组件的填充
3. 支持单独组件的填充, 也支持批量填充.

"转换为快速格子"功能(即Repeater)
在mockplus 工具条的"格式刷"旁边, 有一个井字形的工具, 即为"转换为快速格子", 这个功能非常好用, 可以实现批量复制的功能. 具体操作为,在页面上 选中一个或多个可视化组件, 然后点击该工具按钮, 就能形成一个小的cell, 该cell有横向和纵向复制功能. 再配合"数据填充"功能可以很快完成大量数据的录入.

"脑图"功能
脑图功能是项目树的脑图风格, 比较适合形成演示, 或者放到设计文档中.

"项目模板"功能
mockplus 安装包包含一个移动app的示例, 对于web示例, 可以在创建项目界面中, 选择下载一个在线模板, 然后在这个基础之上作业修改.