mockplus教程

MOCKPLUS使用教程原型设计\交互设计\产品设计\实用教程NOCKPLUS实用教程CONTENT目录01软件简介关于MOCKPLUS操作方法MOCKPLUS的操作实用技巧软件使用技巧项目开发项目开发与总结0203041.软件简介1.软件简介Mockplus是一款快速原型设计工具，支持包括APP原型在内的多种原型与线框图设计。除了快速可以快速创建使用，Mockplus广受欢迎更因为它极低的上手门槛。MORETHENYOUWAITTODAY1.软件简介MOCKPLUS相对于其他原型工具来说非常方便学习易学易用MOCKPLUS功能强大，足够产品设计使用功能多样MOCKPLUS是学习者非常容易掌握的一种原型工具快速上手MOCKPLUS能够很好地表达设计者的设计思想表达全面1.软件简介移动App原型设计Web原型设计桌面应用原型设计交互快MOCKPLUS提供快速交互设计快可以迅速设计出自己想要的原型上手快初学者可以迅速上手操作2.操作方法2.操作方法左侧图标选项卡中搜索你想要的图标，配合单行文字组件，只需数秒即可完成底部导航栏制作。将图标与单行文字编为组，大小、样式、文字均可编辑2.操作方法在项目树中新建三个内容页面，在左侧的组件选项卡中搜索需要的组件，拖拽应用即可2.操作方法使用内容面板快速切换内容1.拖出内容面板，点击“+”创建3个层，每层分别拖拽链接点连接到三个内容页面。2.将底部导航栏的三个选项依次连接到内容面板的三个层。3.实用技巧3.实用技巧相对于传统原型工具AXURE，MOCKPLUS的界面更加简洁界面简洁简单学习就可以上手，操作十分简便，是产品新人的理想选择操作比对相对于AXURE的功能，MOCKPLUS丝毫不显逊色功能比对3.实用技巧直接演示，按下F5，或点击顶部工具栏中“演示”即可Mockplus可以通过8种方式演示与分享演示1在线发布HTML5网页，在主工具栏，点击“发布并分享”演示2导出HTML5的离线包，主菜单中选择“导出”、“导出HTML演示”演示3导出可独立运行的演示包（.exe或.app）演示4输入原型码，在手机中查看原型演示5扫描二维码在手机中查看原型演示6导出图片，主菜单，“导出”，“导出图片”演示7导出项目树，主菜单，“导出”、“导出项目树”演示84.项目开发4.项目开发新建项目4.项目开发选择你要设计原型的载体，选择手机4.项目开发软件会创建一个界面4.项目开发移动手机端的最常见的样子就是三级控制器，tab,navi,vc4.项目开发首先我们创建三个控制器这是我们创建完以后的形态4.项目开发选中首页，创建我们的tab栏，把这个拖到首页的底部，像这样摆好4.项目开发创建tab的每一个item（条目），item是由文字和图标组成，单行文字4.项目开发图标选择区域分别拖一个图标和文字，双击文字可以修改内容4.项目开发选中图标和文字，点击左上角的组合图标，选中的操作是按住command分别点击图标和文字组合成功后可方便进行一起移动和复制操作，选中组合按command+d，可方便复制出一份，复制三份4.项目开发排列好后，然后双击图标编辑图标，双击文字编辑文字4.项目开发创建内容容器找到内容面板将他拖到首页中，并且调整好大小4.项目开发点击添加图层三个控制器另外需要加两个图层4.项目开发然后就是连线了MockPlus，连线一般都在控件的右上角选中一个控件，这个控件的右上角就会出现一个点分别连线4.项目开发三个都连好了以后，会出现红色的闪电，表示这个控件有被绑定事件的4.项目开发现在可以的来进行页面的链接的，一开始创建的三个控制器，首先改变内容面板的当前图层为图一然后将右上角的点和左边的对应控制器链接起来4.项目开发链接完了以后，可以发现内容面板的三个图层的名称改变了4.项目开发离开首页，去到三个子页面中分别创建一个顶部导航条右边有修改组件样式的地方4.项目开发改好后的样式另外的两个控制器都改了，就算最终完成了，最后选中首页，点击顶部中间的三角形，运行我们的最终效果THANKYOU