一、Mockplus简介
Mockplus(摹客)是一款简洁快速的原型图设计工具。适合软件团队、个人在软件开发的设计阶段使用。其低保真、无需学习、快速上手、功能够用。并能够很好地表达自己的设计。摹客被称为产品团队的设计协作神器,是因为摹客是专为产品设计团队量身打造的“设计+协作”的一站式云平台,能够完美发挥产品设计团队间应有的协作效能。
Mockplus拥有Axure RP类似的界面、操作方式,但提供了与时俱进的组件,去掉了用不上的互动方式。与其他原型设计工具不一样,Mockplus采用了直观的拖拽方式来实现页面交互。这样,它能像Axure RP那样,通过简洁便利的组件设置,初期只专注功能,快速完成页面功能设计,并模拟互动。等功能布局精确定型,又能通过样式设置,实现和Sketch一致的最终成果。
对于产品经理来说,摹客提供客户端和在线版两种原型设计方式,可以适应不同团队的需求。产品经理可使用摹客封装的现成组件和丰富的图标,快速产出产品原型。同时摹客还支持在线撰写和管理产品文档,支持多人实时编辑。
对于设计师来说,摹客具有高度兼容性,支持所有主流设计稿格式,设计师可在线交付设计稿,在线讨论评审、标注切图、管理版本。除此之外,在摹客平台还可以高效管理设计资源和设计规范,快速分享和复用。
对于开发人员来说,摹客具有强大的设计稿自动标注,切图及智能代码输出功能,开发人员可以自由查看设计稿标注及获取切图,省去了许多重复无效的沟通,在一定程度上简化了开发的工作流程。
二、上手实践
进入摹客的官网https://www.mockplus.cn/,在下载选项栏即可选择自己想要下载的版本。我选择的是桌面客户端。下载安装过程十分简便,在此就不赘述。
在进入软件,点击新建项目后,新窗口会显示默认支持的原型类型。软件提供了多种项目,每种项目中均内置了常用设备数据供快速选择,也可以自定义尺寸等。选择好所需项目后即可新建个人项目。
新建项目中有大量的模板供用户参考使用,可以选择自己想要的模板。
这是选择空白模板后的工作界面。
界面上方的主工具栏提供了演示、同步等各种快捷按钮。界面的中央区域是工作区,在这里完成设计工作。底部是项目状态栏,所在页面位置及页面尺寸等信息会显示在这里。工作区左侧上半部分是项目树,可以清楚地看到整体项目的页面结构。工作区左侧下半部分分为四个板块,分别为组件库、图标库、我的组件库、母版库,可以方便地切换想要的板块。
三、项目协作
点击页面中央上方的云同步,可以支持多人同时编辑项目
但此功能要收费,就不实际操作了。教学视频中看到,这里添加成员后,成员就可以分享到你的项目,并对其进行修改、同步。
在自己编辑的时候,项目前会显示绿色的图标,表示自己有权编辑,而其他成员的项目前则显示的是红色图标,表示自己无权编辑,编辑完后,点击绿色圆点即可放开权限。
四、演示原型
在演示方面,Mockplus不像Axure那样麻烦,十分便利。在演示原型方面,Mockplus提供了多达8种方式,确实很丰富,也很实用。
第一个方法:直接演示
适用场合:设计时,便于设计者非常快速地看到原型效果。
操作方式:在设计时,按下F5。
演示支持环境:Mockplus软件。
第二个方法:在线发布为HTML5的网页
适用场合:通过发送一个网页链接就可以查看原型。
操作方式:在主工具栏,点击“发布”。发布完成后,即可获得一个网页链接地址,复制这个地址,将它发送给同事或客户。
演示支持环境:浏览器。
第三个方法:导出HTML5的离线包
适用场合:在离线的情况下,也可以通过网页方式查看原型。还可以通过这个功能,把网页部署到你自己的服务器上,便于团队内部分享。
操作方式:主菜单,“导出”,“导出HTML演示”。
演示支持环境:浏览器。
第四个方法:导出可独立运行的演示包
适用场合:在离线的情况下查看原型。由于演示包内含了Mockplus的支持环境,因此,演示时可以最大程度保证演示效果和设计效果完全一致,不受各种浏览器的兼容问题影响。
操作方式:主菜单,“导出”,“导出演示包”。
演示支持环境:不需要其它软件支持。
第五个方法:输入原型码,在手机中查看原型
适用场合:在线发布项目后,把获得的原型码告诉同事或者客户,扫描后在线查看原型。
操作方式:在主工具栏,点击“发布”。发布完成后,即可获得一个原型码,将这个原型码发送给同事或客户。
演示支持环境:Mockplus手机App。
第六个方法:扫描二维码在手机中查看原型
适用场合:设计时,离线扫码后即时查看原型;在线发布项目后,也可以在浏览器中扫码。
操作方式:设计时,直接扫码。发布项目后,用手机在浏览器中扫码,或者把二维码截图发给同事或客户。
演示支持环境:手机浏览器(设计时离线扫描需要Mockplus手机App)。
第七个方法:导出图片
适用场合:演示和分享静态的线框图。
操作方式:主菜单,“导出”,“导出图片”。支持JPG和PNG两种格式。
演示支持环境:图片播放软件或幻灯片播放软件。
第八个方法:导出项目树
适用场合:把整个项目的树形结构,导出为图片等多种形式,包括脑图、树图、HTML、MarkDown、XML、文本等形式。适合插入到PRD文档中,辅助演示和分享。
操作方式:主菜单,“导出”,“导出项目树”。
演示支持环境:图片播放软件、文本编辑软件或幻灯片播放软件。
以上,就是Mockplus演示分享原型的几种方式,在使用中,你可以根据需要选择适合你的方式。
五、使用体验与总结
慕客就如同它在官网所介绍的“快速原型设计工具”,使用起来很简单,无需过多学习就可以实现丰富的交互原型的制作。同时支持各种原型如手机、桌面、web等,十分方便。
我第一次上手做了个养老平台的手机界面,感觉挺不错的,十分容易上手。
从学生角度来看,Mockplus挺适合新手的,不仅仅是因为它的简单。我在它的官网找到了大量的教学视频,能指导新手怎样快速的学会使用这款软件来进行工作。这样的服务使得这款软件易学易用,可以快速的投入其中,可以大大的缩减设计者学习使用工具的时间,非常适合初次做原型设计的同学们。