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

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也是您的不二之选。

地址:Mockplus

作者:jongde

mockplus
(0)

相关推荐

  • 酷6视频网怎么下载视频,不需软件分分钟搞定

    很多小伙伴不知道酷6视频网怎么才能下载视频.今天小编给大家说一下不需要软件分分钟搞定的方法 操作方法 01 打开电脑上面的浏览器.,在搜索引擎输入:酷6视频.然后点击进入官方网站 02 进入酷6视频网 ...

  • 10个文字排版秘诀搞定你的PPT设计

    10个文字排版秘诀搞定你的PPT设计 资深视觉设计师 Janie Kliever 在 Design School 发表了一篇文章,列出 10 个能帮你增进文字排版的诀窍和密技,虽然介绍的是英文字型,不 ...

  • WPS文字教程:障眼法搞定偏旁部首

    加偏旁组词是小学语文的家常菜,如果要输入各种输入法都拿它没折的部件,或是初入此道的同事电话请你指点迷津,你该如何应对呢?别急,今天,我要您介绍放之四海而皆准的懒人办法——膏药法,或曰障眼法。打开你的W ...

  • 三步搞定情人节活动专题页设计!

    小编:一年一度的虐狗日--2.14情人节马上要到了,大家都已经在准备情人节相关的活动了吧?一起跟随@TTTing1去看看情人节页面设计都有哪些玩法呐? 情人节这天,作为设计师最痛苦的事情莫过于,1/让 ...

  • 百张图片修改尺寸 美图看看分分钟搞定方法图文教程

    清明刚过,大家的相机里一定存储了不少踏青拍下的美图。拍照一时爽,看图选图和处理图片时却“压力山大”?不用慌张,用美图看看来帮忙就OK了。这款小巧全能的看图软件,不仅可以帮我们批量修改图片尺寸等,还可以 ...

  • 懂分析思路,详情页设计分分钟搞定!

    写在前面 @TTTing 应大家要求,今天开始陆续会写一些详情页相关的文章,并且我们先不谈视觉执行,而是先把品牌/消费者/详情页设计之间的关系先捋清楚,因为你要先知道为谁做为什么做这个设计,而后才知道 ...

  • 百张图片修改尺寸 美图看看分分钟搞定

    清明刚过,大家的相机里一定存储了不少踏青拍下的美图。拍照一时爽,看图选图和处理图片时却“压力山大”?不用慌张,用美图看看来帮忙就OK了。这款小巧全能的看图软件,不仅可以帮我们批量修改图片尺寸等,还可以 ...

  • 26款高品质 APP UI原型设计灵感

    一款好用的 APP,前期的原型线框是关键阶段,原型图函盖很多方面的东西,如功能.易用性.版式,这对于交互设计师做原型时都需要考虑的. 拥有一个良好的高保真的原型图,能在后期的设计不需要考虑任何流程或功 ...

  • 完全没有版式基础的新手如何搞定PPT图片排版?

    我发现了一款让图片排版变的简单的神器,而且还是微软自带的,但你可能不会用.今天这篇教程手把手帮你全面认识它的强大,建议完全没有版式基础的同学阅读收藏. SmartArt 是PowerPoint自带的一 ...