当老师让我们在博客上介绍主流原型设计工具时，我第一反应是想选取两到三款来对比着介绍，但无奈经过一番思虑，我发现如果不经过亲身试用过的话很难深入体会到工具之间的好坏差异之分，因此最后我还是选择主要介绍摹客（Mockplus）这一款原型设计工具。但由于我本人并没有上手使用过它，因此以下介绍均来源于网络资料，希望能给大家提供一些初步的参考。
下面我将从功能概述、案例、价格三个方面来介绍摹客原型设计工具。
摹客设计系统（Mockplus Design System）是国内独家设计系统平台，致力于定制设计规范、统一管理设计资源、让设计和开发沟通更简单。设计驱动产品，在当下和未来的十年、二十年，设计和基于设计的用户体验将越来越成为产品成败的关键。摹客作为个人设计利器，团队的协作平台，原型设计快速上手，协同工作效率提升，设计规范轻松管理。
1.功能概述
因为官网上就有很详细的图文/视频教程啦，因此在这里只简单罗列大概功能，不多做赘述，需要的小伙伴自取链接吧~
图文教程：https://help.mockplus.cn/p/230
视频教程：https://help.mockplus.cn/p/200
2.案例
下面，我选取了官网上的电商类Web例子项目来介绍使用Mockplus的一些实用技巧。
电商管理系统E-Market属于中高保真原型，包含登录注册、数据统计、信息管理、邮件、聊天、任务管理等19个重要页面，每个页面都具备必要的交互设计，较好地呈现了电商管理系统的基础功能。
在页面搭建过程中，开发团队充分利用了摹客Mockplus的封装组件和图标，如内容面板、弹出面板、下拉选择框组件等，完成了产品思路的表达。同时，在这款原型例子中，除了基础的交互方式，还使用了快速格子、母版等实用功能，节省了大量设计时间，快速实现了原型的交互效果，让原型更加清晰易懂。
（以上为该原型的界面总览和交互效果演示）
在线浏览地址：https://run.mockplus.cn/gSsa2Birba1JWTPD/index.html
实用技巧如下：
（1）使用母版功能快速复用导航栏
在设计电商管理系统原型时，在每一个功能页面都设计了侧边导航栏，导航栏的每一个选项都能链接到不同的页面，但如果每切换一个页面就重新设置一次交互，一定会造成大量的时间浪费。因此，他们使用了Mockplus的母版功能，可以直接复用组件，减少重复设计。
①在某个页面设计好导航栏组件样式；
在这款原型中，使用了矩形+图标+文字组件进行组合设计，也可以使用带文字图标组件直接组合，另外，列表、菜单、折叠面板、树组件等，也适用于导航栏的快速设计。
②右键选中组件，在弹出菜单中选择“设置为母版”即可添加一个母版组件；
③将母版从左侧母版管理中拖入工作区即可应用到项目中的任意页面中；
④双击任意母版，即可进入编辑模式，修改完成后，在外部双击即可退出编辑。修改后会自动应用到所有使用了该母版的页面中；
⑤如果需要单独编辑某个页面的组件，在该页面选中该组件，右键选择“从母版脱离”，即可恢复为普通组件。
这个功能类似于PPT的母版功能，对于我这种懒癌患者来说非常实用！
（2）巧用图标组件搭建Dashboard
Dashboard页面主要使用了Mockplus的图表组件搭建而成。Mockplus提供4种可直接使用的图表组件：柱状图、条形图、曲线图、饼图。在这款原型中，使用了柱状图、曲线图和饼图三种组件。
图表的使用方式很简单，双击组件即可编辑数据和颜色。下面分享几点Dashboard页面的设计技巧：
①在柱状图中，通过将其中某项数据颜色设置为白色，做出了空行效果；
②在曲线图中，使用圆形组件标记处重要节点；
③使用单行文字组件，可设计出坐标轴、数据展示等效果，将矩形与单行文字进行结合，也可作为图表注释。
没有什么能比画图简单更重要的了吧，回想起被EXCEL支配的人生！
（3）分段控件+内容面板，实现内容切换
在日程表页面，使用分段控件+内容面板组件，实现了月、周、日三种日程表格式的内容切换，具体操作如下：
①分别在新的页面中设计好三种日程表格式；
②在日程表页面添加内容面板组件，使用内容面板上方的工具栏，将内容面板设置为三层；
③选中内容层，拖拽右边的连接点，将三种日程表与三层内容面板进行连接，日程表即可被加载到对应内容层；
④使用分段控件组件设置月、周、日三个选项，分别与对应的内容层设置交互，即可实现内容切换的效果。
（上图为最终实现效果）
（4）使用快速格子功能一键填充信息列表
在设计商品管理、邮件、聊天等页面时，通常需要填充大量信息，以保证最终呈现效果的完整性。但单独设计每条每条信息太浪费时间，复制黏贴又需要逐个调整间距，使用Mockplus的快速格子功能即可快速制作重复的布局，提高设计效率。
①使用矩形、单行文字、图标等组件，完成单条信息的设计；
②选中刚刚设计好的组件，点击主工具栏上的“转为格子”图标，或右键选择“转为格子”，即可生成格子；
③拉动格子，格子的内容会自动生成；
④在格子上，可以直接拉动线条来设置单元格的大小、行间距等，也可以直接砸右侧属性面板中输入数字进行设置；
⑤如果需要单独编辑某个格子，操作方式与母版一样，右键选择“脱离”即可。
这种避免大量重复操作的设计真的很实用，可以把时间花费在更重要的地方，效率upup！
（5）消息列表选择状态切换设计
在设计邮件和聊天页面的消息列表时，为了突出选择，对被选中的条目增加颜色切换的设计，当消息列表中某个条目被选中时，颜色会切换为白色，且与右侧展开的详情页颜色一致，互相呼应。
①使用矩形+单行文字+图标组合成一个条目；
②选中矩形，将拖拽连接点连向自己，选择“点击时设置颜色”，即可实现上述效果；
③使用快速格子功能或直接复制粘贴条目，消息列表的设计即可完成。
（6）封装组件
①下拉列表框组件
当想要呈现上文所述的内容切换效果，但内容层太多，无法使用分段控件实现，就可以使用下拉列表框组件，这也是这款原型中使用频率非常高的组件之一。双击下拉列表框组件，即可编辑条目名称和设置交互。在右侧属性面板中还可以设置文本颜色、选中颜色、是否允许输入等属性，非常方便。
②弹出面板组件
在日历、订单管理等页面，都使用了弹出面板来呈现电商管理系统的“增加任务”等效果。在弹出面板中设置好内容格式，拖动对应按钮的链接点设置触发方式，即可实现下图效果：
③卡片式设计
卡片式设计是E-Market电商管理系统原型的设计亮点之一，使用矩形+图标+单行文字组件即可组合成卡片。使用上文中提到的快速格子功能即可快速完成文件管理页面的设计。除了快速格子，还可以在面板组件中添加卡片设计元素，然后直接复制粘贴面板组件，即可实现快速复用。
更多项目例子详见https://help.mockplus.cn/p/196
3.价格
作为一名贫穷的女大学生，对于此类工具的要求中必定有价格一项吧。比如我用ProcessOn画流程图，一开始倍儿开心以为找到了一劳永逸的简单好用的免费画图工具，但没想到免费版只能画九张！！
摹客拥有基础版、团队版、企业版三种价格模式，其中团队版是99元/人/年，企业版需要联系部署。当然，按照我这种大二生的需求来看的话，主要还是看免费版比较合适。免费版拥有所有基础功能，100名成员，100个协作项目（Sketch/PS/XD/Axure设计交付），这些都是妥妥够用的，但只能创作3个原型设计项目，不过我觉得也不少啦，因为在大二下学期才会真正接触到完成项目（因为我没参加过竞赛）或者实在不行再改用别的试试吧T.T
参考链接：
https://www.mockplus.cn/?home=1
https://www.mockplus.cn/newfeatures/post/1001
https://help.mockplus.cn/p/349
https://www.mockplus.cn/buy/idoc
https://www.zhihu.com/question/19572438
最后，正如知乎上说的：
作为交互设计师，工具不重要，逻辑、产品思维和设计思维更重要。
说了这么多，还是只有真正上手操作才能知道这款原型设计工具究竟是否真的好用/适合自己。我对摹客的理解难免过于片面，大家如果真的想要使用，最好还是亲身试用，再从中挑选最适合自己的。当然不仅仅是摹客，像axure(https://www.axure.com/)/墨刀(https://modao.cc/)等都是优秀的原型设计工具。但也要注意不能本末倒置，技术才是硬道理哦。
以上就是我分享的全部内容，感谢观看~作为一名博客小白，我会继续努力的！o(*////▽////*)q