软件开发与创新——原型设计工具个人博客

市面上的主流原型设计工具介绍和结合案例分析

工具一：摹客

一、工具简介

摹客（Mockplus）是成都摹客科技有限公司旗下设计协作品牌，专注于一站式的产品设计和协作平台，为产品开发团队提供全流程协作、高保真设计和设计规范管理支持。摹客可以自产出高保真设计，支持多款主流设计工具（Sketch/PS/XD/Axure等）的设计稿交付，团队成员在产品、设计到开发的各个工作环节，利用多种设计工具，都能使用摹客平台协同工作。摹客助力企业数字化和在线化，可为企业提供私有部署和定制化服务，以“快和简单”的产品特性，帮助企业提升设计效能、降低成本。

二、产品构成

1、摹客设计协作平台

这主要是web端的网页，可以分为三种结构，分别是全流程协作、高保真设计和设计规范。

（1）全流程协作

• 简介：为产品经理、设计师、开发工程师提供一站式产品协作设计支持。
• 设计稿交付：支持Sketch、Photoshop、Adobe XD、Axure等三方设计软件的设计稿在线交付。
• 在线评审：团队成员可使用多种评论方式，对设计稿进行在线评论审阅，快速反馈意见，实时查看评论解决状态。
• 自动标注和切图：自动生成标注和图层标记信息，支持导出CSS/OC/Swift/Android等主流样式代码。切图文件一键下载，支持自由切换平台和选择倍率，自动压缩和换算不同平台尺寸。
• 快速原型：支持Sketch、XD制作的交互。可自行设置页面跳转交互，支持8种手势交互，15种动画，丰富演示效果。
• 工作流：自定义产品设计工作流程，支持任务、状态管理。
• 产品文书：在线撰写和管理产品文档，支持产品文档和设计稿深度引用，并保持自动更新，准确表达产品意见。
• 对接飞书：设计协作+实时沟通协作，支持直接在飞书使用摹客。

（2）高保真设计

• 多人实时协同：支持多人同时编辑同一个项目的同一个页面，并保证操作互不干扰，共同完成一个设计。
• 快速创作：套装组件、海量图标、页面+多画板、智能布局、设计资源复用等特色功能，可帮助产品经理和设计师轻松完成设计创作。
• 交互设计：支持页面交互、状态交互、命令交互及设置多种触发方式和交互动作，支持自定义高级组件，自由编辑交互和样式。
• 高扩展组件：预设组件全部自带交互设置，可快速完成复杂组件内容的编辑、增删、排序并设置默认选中项。更支持高自由度调整组件样式。
• 矢量绘制：提供钢笔工具和铅笔工具。支持贝塞尔曲线、布尔运算、路径的裁剪、打开与闭合、像素级对齐。
• 流程图模式：支持流程图绘制功能，更好地表达与沟通。提供多个常用流程图形状，可快速绘制和调整流程图。
• 设计资源：将颜色、字符样式、组件添加到资源库中，方便进行快速复用。
• 辅助视角：提供网格、栅格、像素级网格、标尺、辅助线等视图功能，方便进行内容制作及编排布局。
• 快速交付：支持快速生成演示链接，一键分享给工作伙伴，使用摹客的评论、定稿、开发三种模式在线评审交付。

（3）设计规范管理

• 管理设计规范：支持多种设计资源的上传和管理，包括颜色、文字、图层样式、组件、图标、图片。可以建立多个库、分类和子分类在云端进行管理。
• 无缝对接Sketch:支持将Sketch中的设计元素上传到摹客规范，同时，也可将资源库中的设计资源快速应用到Sketch的设计中，并自动同步更新。
• 团队共享复用：支持创建团队，邀请成员，设置团队成员角色和权限。团队成员可共享及快速复用设计资源。
• 快速导出交付：支持导出PDF/图片文档，可生成CSS、LESS、SCSS等多种样式代码，轻松对接前端开发。

2、Mockplus经典版

（1）特色功能

• 快速设计：自带丰富的组件和矢量图标库，可快速完成界面构建。支持自定义组件库、母版、格子、数据填充等功能，快速复用设计。
• 快速交互：拖拽即可完成组件及页面间的交互设置，支持多种触发方式和动画效果。支持快速设置组件交互状态。
• 快速演示：支持原型项目一键发布到云端分享和管理，快速预览设计效果。支持二维码、微信小程序、手机App、离线演示包等8种预览分享方式，分享测试更自由。
• 团队协作：基于客户端，支持多人在线协作。一键邀请分享、通知审阅、同步共享组件样式资源。支持角色和权限按需设置，团队协作管理更轻松。

三、对于企业的服务

1、私有云部署

支持企业内网部署、自建云部署、公有云部署等，支持多地多机部署，企业自己掌握所有数据，提供数据安全保障。

2、后台管理

专有的企业后台高级管理，提供高级权限和统计管理。

3、定制服务

提供SSO、高可用配置等服务，还可根据企业需求进行定制。

工具二：墨刀

一、工具简介

墨刀是一款在线原型设计与协同工具，借助墨刀，产品经理、设计师、开发、销售、运营及创业者等用户群体，能够搭建为产品原型，演示项目效果。墨刀同时也是协作平台，项目成员可以协作编辑、审阅 ，不管是产品想法展示，还是向客户收集产品反馈，向投资人进行Demo展示，或是在团队内部协作沟通、项目管理。

二、功能介绍

1、操作简单

简单拖拽和设置，即可将想法、创意变成产品原型。

2、演示

真机设备边框、沉浸感全屏、离线模式等多种演示模式，项目演示效果逼真。

3、团队协作

• 与同事共同编辑原型，效率提升；一键分享发送给别人，分享便捷；
• 还可在原型上打点、评论，收集反馈意见，高效协作。

4、交互简单

简单拖拽就可实现页面跳转，还可通过交互面板实现复杂交互，多种手势和转场效果，可以实现一个媲美真实产品体验的原型。

5、自动标注及切图

将 Sketch 设计稿墨刀插件上传至墨刀，将项目链接分享给开发人员，无需登录可直接获取到每个元素宽高、间距、字体颜色等信息，支持一键下载多倍率切图。

6、素材库

内置丰富的行业素材库，也可创建自己的素材库、共享团队组件库，高频素材直接复用。

三、版本区别

1、免费版

支持产品设计、工作流、原型预览、Sketch标注插件、移动端演示，可免费创建3个项目，每个项目20个页面，以及总共50MB素材容量。

2、个人专业版

享受免费版所有功能，可以创建不限数量的项目及页面，支持文件导出。

3、企业版

享受专业版所有功能，支持添加企业成员，进行成员协作及管理，共享企业自定义素材库。方便进行成员管理、项目管理及数据管理。

四、适用范围

1、 适用平台

浏览器注册使用， Windows、Mac 桌面客户端，同时支持 iOS、Android 端预览。

2、 适用企业

墨刀为企业级用户提供权限控制、项目管理及基础项目数据统计等功能。

两种工具对比分析

一、主要负责用户不同

• 摹客设计云是面向企业的产品设计解决方案，也是国内拥有完整产品线的设计平台。
• 墨刀虽然现在也逐渐开始面向企业推出了相应的产品，但他们最初还是从个人用户方面做起的，他们做的最好的方向也是个人用户方向。

二、价格方面

我去查阅了相关资料发现相比较之下，墨刀产品上线更早，并且有获得融资，综合实力也不错。摹客就起步较晚，也还未获得融资，但在墨刀转向国外市场后，摹客通过自己的坚持在逐渐开拓自己的国内市场。

三、主要优缺点

墨刀和摹客优点就是快，特别是在做外包的时候。了解客户需求后分分钟勾出个框架给他看。缺点也相对明显，主要是付费服务，还有他们不好像Axure那样可以每次更改的时候就更新一次版本，管理上不是很方便。

在墨刀被万兴收购后，主要面向国外的当下，摹客对于国内来说还是优势更明显的。

1）支持所有主流设计稿类型

对于设计团队，所有的工作都是要完成最初的设计输入后才能开展的。而设计稿的支持程度直接决定了团队的包容性。摹客支持Photoshop、Sketch、Adobe XD、Figma、Axure、Mockplus及图片格式设计稿（其中Figma目前依然是行业内独家支持），在业界算是第一梯队的水平。

2）紧密贴合设计流程的任务管理

市面上主流的任务管理、项目管理产品大都是通用型产品（这也是商业角度的必然结果）。但产品设计流程的管理，有其自身的任务的颗粒度要求，通用的管理工具很难生搬硬套。于是摹客另辟蹊径地推出了一个任务管理的“模块”，同时和通用管理产品打通，结果是，原本粗犷的通用管理软件获得了更多业务端细节，另一方面摹客云平台的价值链也得到了延伸，可谓“双赢”。

3）自带功能强大的在线设计工具

作为一个靠原型软件起家的品牌，在线原型设计的功能自然是必须要提供的。经过全新设计、完全基于Web的在线设计改进了不少的Mockplus经典版中存在的问题，还增补了大量的创新功能。

4）可上传或在线撰写PRD文档，资源板块可轻松整合资源

资源模块各种产品都大同小异，不过摹客在“支持范围”和“信息的相互引用”方面都具备优势。文档资源随项目集中管理，也解决了存放和交接混乱的问题。

5）丰富的设计系统（Design System）功能

设计规范和设计系统，是产品设计的灵魂。越是大型和商业化成功的产品越是重视设计系统的创建、维护和应用。摹客在这个模块明显受了brand.ai的影响，但又推出了Sketch插件，理念上算是整合了多款类似产品的长处。

案例分析

简单的使用摹客通过自己的项目做了一个首页和登录注册界面

总结

通过这次疫情的冲击，可以预见的是，设计协作产品的爆发期还远未结束，越来越多的团队会考虑使用设计协作平台来规范产出、提升效率，同时也更兼容团队的远程化。而摹客和墨刀在这个领域的铺垫和准备，在业界是比较超前的。最后不得不提一下摹客坚持的“Low-Fi”设计风格。虽然这个风格在设计圈显得比较复古，但Low-Fi的氛围确实可以更好地突出内容和素材。我在刚使用Adobe XD的时候也有同样的感受，习惯以后会非常适应这种“低噪”的生产环境。拥有改变世界的决心，也有不被世界改变的信念，我想这大概摹客想要传达的。这也是其他协作软件，甚至是其他模块的软件该学习的方面。