原型设计工具 - Mockplus

原型设计

对于一个完整的产品而言，产品原型可以说是整个产品面市之前的框架设计。原型设计是交互设计师与PD、PM、网站开发工程师沟通的最好工具，将页面的模块、元素和人机交互的形式，利用线框描述的方法，更加直接生动地表达产品架构。

原型设计工具 Mockplus

原型设计可以基于手绘，也可借助工具。显然，使用工具进行页面交互设计及构建，不仅可以节省人力，也能够更加清晰明确地呈现页面内容，同时可以保证风格的统一化，更加便于修改。

Mockplus作为一款简洁快速的原型设计工具，适合软件团队及个人在软件开发的设计阶段使用。其素描风格、组件交互、模板重用和审阅协作等创新理念，吸引了众多的项目团队。与此同时，由于入门简单，无需编程，Mockplus也已经逐渐普及，成为新手和有经验设计者的前列选择。

下载地址：Mockplus

需要注意的是，Mockplus专注于提供低保真原型设计，所谓低保真，一般指一个可以简单交互的现况模型，表达产品的整体框架。

Mockplus 的初步使用

新建项目

Mockplus提供新建手机、平板、网页、桌面项目的原型模板，使用者也可以选择自由模板或自定义项目，单击选项，界面下方可更改页面尺寸：

Mockplus 界面

以网页项目为例，介绍Mockplus界面的分布：

如上图，Mockplus界面主要分为6个区域，分别为界面顶部的工具栏，左侧的项目总览和元件库，右侧的页面属性区（样式、备注）和组件大纲，以及占据界面主要位置的主操作界面。显然，主操作界面是呈现具体原型设计的区域，呈现内容包括元件类别、位置、事件关联等。

Mockplus 元件

Mockplus包括大量的元件元素，如下截图显示部分元件：

          

观察到部分元件为网页页面中的常见元素，如图片轮播元件常用于广告版的设计或头条图片的推送；滚动区则基本出现在所有页面中，作为页面的定位组件；单复选框则常见于选项内容，比如选择电影列表的排序方式，注册时用户选择自己的关注标签等。通过添加这些元件，使得页面表达出呈现内容，更加直观地反映页面及交互设计是否合理，是否能够满足用户使用的舒适度，是否契合后端数据库的连接等。

例如，添加图片轮播组件于主编辑界面，并添加图片表示其展示内容：

单击上方“播放”按钮，即可显示设计效果，观察到图片按一定顺序进行轮播，同时可以设置鼠标触发事件、页面备注等。

除此之外，还可以点击“五角星”按钮，添加组件至个人的组件库中：

Mockplus事件

众所周知，原型设计除了涉及页面布局的内容外，事件触发也是非常重要的一部分。事件的编辑和触发体现于交互效果上，用户的体验感、页面跳转是否合理，都需要对事件进行细心编排。

下面以链接元件为例，展示Mockplus工具添加事件的过程：

为首页添加一个名为“电影资讯”的链接元件

点击右上方圆圈并将其拖动至链接框，表示选中链接为目标组件，并为其添加事件：

如上图，表示点击该元件时，元件将隐藏，预览效果即为每点击一次链接，链接将闪动一次。

若目标事件为与其他页面，则将小圆点拖动至项目总览栏中其他页面的位置，如下：

除此之外，还有缩放事件、移动事件、悬浮事件等，帮助使用者更好地完善页面设计细节。

总结

了解了以上Mockplus工具的基本功能后，即可根据需要，完成原型设计工作。由于对原型设计的理解还不够深入，因此此教程的介绍较为浅显基础，日后还将认真体会对此工具的使用。

这里推荐一个Mockplus的详细教程，个人认为对此工具学习非常有用：Mockplus使用教程