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

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

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

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

创建项目


img_233d430961fd036b0bba1f2ecb932db2.png

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

底部导航栏制作


img_71ff65e52c4caecd5c7e682cd3a7aaaf.png

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

制作原型内容页面

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


img_3a00db29349da9de8930033a6354cc44.png

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

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

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

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

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


img_86596e55b95254380c5eb9afa23279d6.gif

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

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

演示与分享


img_91f5509cca47347772ce0c6e1078ab69.gif

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

1.直接演示。

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

2.在线发布为HTML5网页。

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

3.导出HTML5的离线包

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

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

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

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

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

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

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

7.导出图片

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

8.导出项目树

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

总结:

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

相关文章
|
9月前
|
iOS开发 开发者
一键制作 iOS 上架 App Store 描述文件教程
一键制作 iOS 上架 App Store 描述文件教程
|
9月前
|
监控 安全 数据可视化
【教程】为什么要为 App 应用加固 ?如何为 App 应用加固 ?
【教程】为什么要为 App 应用加固 ?如何为 App 应用加固 ?
|
9月前
|
开发者 iOS开发
UniApp打包教程:使用HBuilder X和AppUploader完成原生App云打包和上架指南“
UniApp打包教程:使用HBuilder X和AppUploader完成原生App云打包和上架指南“
269 3
|
23天前
|
弹性计算 开发工具 Android开发
阿里云APP备案流程图以及备案所需材料整理,跟着教程一步步操作
阿里云APP备案流程分为六步,确保应用合法上架。首先登录阿里云账号填写APP信息,提交后等待阿里云初审。初审通过后进行工信部短信核验,随后由管局审核。审核通过后,APP即可获得备案号并正式上架分发平台。整个过程需仔细填写主办者及APP详细信息,确保所有资料准确无误。阿小云详细分享了这一流程,帮助开发者顺利完成备案。
|
9月前
|
Android开发 移动开发 小程序
binder机制原理面试,安卓app开发教程
binder机制原理面试,安卓app开发教程
binder机制原理面试,安卓app开发教程
|
9月前
|
搜索推荐 前端开发 JavaScript
【专栏】从网页轻松转换为应用越来越便捷
【4月更文挑战第27天】本文介绍了将网页转换为移动应用的在线生成App过程,包括原理(封装网页内容,添加移动特性)、优势(便捷高效,节省成本,快速上线)以及具体步骤(选择工具,准备内容,配置选项,生成测试,发布推广)。同时,注意版权、兼容性和用户体验问题。通过案例分析和实践经验分享,帮助读者深入了解如何通过在线工具实现App梦想,强调了网页优化、用户界面设计和个性化定制的重要性。
261 3
|
6月前
|
网络协议 物联网 测试技术
App Inventor 2 MQTT拓展入门(保姆级教程)
本文演示的是App和一个测试客户端进行消息交互的案例,实际应用中,我们的测试客户端可以看着是任意的、支持MQTT协议的硬件,通过订阅及发布消息,联网硬件与我们的App进行双向数据通信,以实现万物互联的智能控制效果。
311 2
|
9月前
|
存储 JavaScript 前端开发
uni-app 从vue3项目创建到Pinia管理数据全局使用 持久化存储数据 详细教程
uni-app 从vue3项目创建到Pinia管理数据全局使用 持久化存储数据 详细教程
|
9月前
|
iOS开发 开发者
【教程】uni-app iOS 打包解决 profile 文件与私钥证书不匹配问题
【教程】uni-app iOS 打包解决 profile 文件与私钥证书不匹配问题
|
9月前
|
移动开发 安全 数据安全/隐私保护
【教程】APP 加固的那些小事情
【教程】APP 加固的那些小事情

热门文章

最新文章

  • 1
    MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
  • 4
    【Azure App Service】基于Linux创建的App Service是否可以主动升级内置的Nginx版本呢?
  • 5
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 6
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 7
    【Azure Function】Function App出现System.IO.FileNotFoundException异常
  • 8
    【Azure Logic App】使用MySQL 新增行触发器遇见错误 :“Unknown column 'created_at' in 'order clause'”
  • 9
    阿里云APP备案流程图以及备案所需材料整理,跟着教程一步步操作
  • 10
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程