文档章节

Mockplus教程:分分钟搞定APP首页原型设计

jongde
 jongde
发布于 2017/07/11 17:06
字数 850
阅读 11
收藏 0

Mockplus是一款快速原型设计工具,支持包括APP原型在内的多种原型与线框图设计。除了快速,Mockplus广受欢迎更因为它极低的上手门槛。今天小编就为大家展示如何用Mockplus在3分钟内完成APP首页的原型设计,新手也能马上掌握哦!

 

是时候展现真正的技术了!

 

 

创建项目

 

 

打开Mockplus,点击新建项目,选择“手机”项目类型与合适的页面尺寸,点击“确定”即创建成功,是不是不能更简单!无需任何文件创建操作,无需输入任何文字!

 

底部导航栏制作

 

 

在左侧图标选项卡中搜索你想要的图标,配合单行文字组件,只需数秒即可完成底部导航栏制作。将图标与单行文字编为组,大小、样式、文字均可编辑。

 

制作原型内容页面

 

在项目树中新建三个内容页面,在左侧的组件选项卡中搜索需要的组件,拖拽应用即可。

 

 

“首页”页面用到的组件:形状组件、搜索框组件、图片组件、多行文字组件。

 

“发现”页面用到的组件:形状组件、图片组件、多行文字组件

 

“我的”页面用到的组件:图标组件、多行文字组件、按钮组件

 

Mockplus提供接近200个封装组件和3000个以上的图标素材,同时支持订阅组件库,在最大程度上满足您的原型设计需求。

 

使用内容面板快速切换内容

 

 

1.拖出内容面板,点击“+”创建3个层,每层分别拖拽链接点连接到三个内容页面。

 

2.将底部导航栏的三个选项依次连接到内容面板的三个层

 

演示与分享

 

在Mockplus中,您可以通过8中方式演示与分享:

 

1.直接演示。

 

按下F5,或点击顶部工具栏中的“演示”即可。

 

2.在线发布为HTML5网页。

 

在主工具栏,点击“发布并分享”。发布完成后,即可获得一个网页链接地址,复制这个地址,将它发送给同事或客户。

 

3.导出HTML5的离线包

 

在主菜单中选择“导出”、“导出HTML演示”。

 

4.导出可独立运行的演示包(.exe或.app)。

 

在主菜单中选择“导出”、“导出演示包”。

 

5.输入原型码,在手机中查看原型。

 

在主工具栏,点击“发布”。发布完成后,即可获得一个原型码,将这个原型码发送给同事或客户。


6.扫描二维码在手机中查看原型

 

直接扫码。发布项目后,用手机在浏览器中扫码,或者把二维码截图发给同事或客户。

 

7.导出图片

 

主菜单,“导出”,“导出图片”。支持JPG和PNG两种格式。

 

8.导出项目树

 

主菜单,“导出”、“导出项目树”。

 

总结:

 

坦率的讲,Mockplus的原型设计流程几乎是所有原型设计软件中最方便的。无需基础知识可快速上手,操作简单,预览方式多样,中保真度。对于需要快速制作app原型的产品和设计师,Mockplus也是您的不二之选。

© 著作权归作者所有

共有 人打赏支持
jongde
粉丝 8
博文 260
码字总数 323940
作品 0
成都
私信 提问
加载中

评论(2)

Edita
Edita
公司现在都在用Mockplus做原型了,工具很赞,快速,便捷。
cindy21
cindy21
刚去试了一下,很快就做出效果了,感觉做同样的效果,Mockplus比Axure要快几倍。
这些工具你会用吗?常见设计工具视频教程集锦

在产品开发过程中,最常用的展现构思的方式一般来说是纸笔原型,最简单也最迅速,寥寥一画,一个大致的线框图就呈现出来了。但是如果想要把线框图表现得更完美,你还是有很多工作要做哒~YouT...

jongde
2016/12/02
7
0
Mockplus: 一款简单而又强大的原型设计工具

在网络技术蓬勃发展的当今社会,各类线框图和原型设计工具也随之而大量涌现。但是,作为一款简单又不失强大的新型工具,Mockplus借着它的独特之处在市场中也占有着它的一席之地。 作为一款简...

jongde
2015/11/12
0
1
国外设计师眼中的原型工具Mockplus

今天,我们评述一款新型设计工具,Mockplus,专为设计师而打造的创新性原型设计工具。Mockplus适合于各种应用软件的制作,无论是手机应用,网页应用,亦或是桌面应用,方便快捷。让我们先来看...

jongde
2015/10/21
331
0
跳出思维圈,“类H5”助你市场推广一臂之力

HTML5,也就是我们常说的H5,它是一种标记语言,主要用于网站的编写和Web App的开发。H5制作的网页可以说是现在网络推广、促销方面的利器。其优点主要体现在两个方面,一是丰富的动效支持,二...

jongde
2016/11/10
19
0
国外设计师眼中的原型工具Mockplus

今天,我们评述一款新型设计工具,Mockplus,专为设计师而打造的创新性原型设计工具。Mockplus适合于各种应用软件的制作,无论是手机应用,网页应用,亦或是桌面应用,方便快捷。让我们先来看...

jongde
2015/10/21
34
2

没有更多内容

加载失败,请刷新页面

加载更多

集成测试——Spring TestContext框架支持详细解说

概述 集成测试是在单元测试之上,通常是将一个或多个已进行过单元测试的组件组合起来完成的,即集成测试中一般不会出现Mock对象,都是实实在在的真实实现。 对于单元测试,如前边在进行数据访...

呐呐丶嘿
刚刚
0
0
爬取豆瓣电影TOP250的所有电影名称,网址为:https://movie.douban.com/top250

所谓静态页面是指纯粹的HTML格式的页面,这样的页面在浏览器中展示的内容都在HTML源码中。 目标:爬取豆瓣电影TOP250的所有电影名称,网址为:https://movie.douban.com/top250 1)确定目标网...

linjin200
1分钟前
0
0
ES6私有变量的实现

1. 约定 实现 class Example { constructor() { this._private = 'private'; } getName() { return this._private }}var ex = new Example();console.log(ex.getName()); // ......

peakedness丶
3分钟前
0
0
SQLServer AlwaysOn在阿里云的前世今生

缘起 早在2015年的时候,随着阿里云业务突飞猛进的发展,SQLServer业务也积累了大批忠实客户,其中一些体量较大的客户在类似大促的业务高峰时RDS的单机规格(规格是按照 内存CPUIOPS 一定比例...

阿里云官方博客
8分钟前
0
0
绑定域名到 GitHub Pages

GitHub Pages 绑定来自阿里云的域名 简介 我在阿里云上注册了一个新域名:yuanzb.com,我已经在GitHub Pages上建立了自己的博客:http://yuanzb.github.io/yuanzb/。现在我希望将yuanzb.com映...

临江仙卜算子
13分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部