Mockplus——轻量好用的原型设计工具

定期推送各学科优质的数字学习工具，敬请期待！

本期编辑：罗安妮 冯孟坭

引言

Mockplus制作原型有别于Axure的繁复，致力于快速构建和迭代原型，为设计者提供简洁高效的设计方式，只需鼠标拖动即可画出线框图，无需编程。轻量设计，轻量开发，组件丰富，使用便捷，可以直接预览，也可以导出生成html格式文件。

工具简述

类别：原型设计工具

网站：https://www.mockplus.cn/

平台需求：macOS/windows/Andriod/iOS

软件语言：中文

是否免费：免费（专业版收费）

软件功能：原型设计

入门指南

Mockplus是一款原型设计工具软件，轻量、简便是它最大的优点之一，具有丰富的组件库，UI设计、交互设计，轻松搞定。限于篇幅，这里只对手机app的基础原型设计进行简要介绍。

工具的安装

登录网站https://www.mockplus.cn/download并选择适合自己操作系统的版本进行下载并安装。

安装好后打开软件Mockplus进行登录，如果没有帐号需先注册帐号后才能进入。登录后，选择新建项目，就可以开始使用Mockplus啦！

使用步骤简介

1、首先要选择好目标设备的类别及尺寸，我们这里就以手机作为目标设备，以iPhone6/6s/7/8的尺寸为例，点击创建，开始我们的app原型制作！

2、整个界面如下图所示，中间就是我们原型展示的区域啦，左上角是各个页面的列表，左下侧是我们丰富的组件库，而右侧是我们设置组件属性（字体、长宽、是否居中等）和为组件添加交互事件的地方。

3、接下来我们以做一个背单词app界面为例，首先在左下侧拖动文本组件到屏幕上，更改文本内容为book。在右侧调大字体到32号。

4、我们首先从组件库拖过来一个多行文本框，输入book的释义，设置好字号等样式。

5、接下来我们从组件库拖过来一个按钮，双击按钮即可编辑按钮上的文字内容，改为“下一个”。

6、下面我们为按钮添加交互事件，我们需要一个新的页面——在左上角右键点击“项目”，选择“新建页面”，再给页面起个名字即可。我们可以看到在左上角页面列表出现了新的页面。

7、 仿照刚刚的方法，在这个页面上写好单词student，及其释义。

8、下面我们回到第一个页面，选择按钮，在右上角选择“页链接”，目标选择刚刚新建的第二个页面，触发选择“点击时”，动画时长改为0。

9、现在我们点击整个页面上方中心处的播放小按钮，即可预览我们的项目啦！预览的效果是点击“下一个”按钮，页面会跳转到student单词页面去！

应用小结

Mockplus作为轻量级软件原型设计工具，界面风格简洁，操作方便，同时又不失强大而完整的功能。今天我们教各位老师如何搭建最简单的app小页面，老师们可以自行探索，就可以感受到Mockplus强大的功能了！

来和我们一起持续探讨适用于教学的数字学习工具吧，如果您有推荐的数字学习工具，欢迎推荐给我们哦，期待您的参与！