#本文为2022年Mock RP原型工具评测大赛二等奖作品

作为产品经理，在原型制作的过程中，掌握“道术”会潜移默化地帮助你开发高端产品。本文以艾克为例，谈谈产品经理原型设计中的“道举”，希望对大家有所启发。

1、为什么有些产品经理会变成“原型工具人”？

在开始阅读本文之前，我们先问每个产品经理一个问题：产品经理在“画原型”这件事上应该具备哪些能力？我相信在不同类型公司、不同业务方向上工作的产品经理会对这个问题给出不同的答案。

例如：原型的高效快速输出——“生产力”、客户需求精准转化为原型——“领悟”、精美的原型界面设计效果——“审美力”、抢眼的原型交互动态效果——“创意”力等.

那么这些能力中哪个更重要呢？为什么有的产品经理能够通过“画原型”实现能力上的突破，而有的则停留在操作工具的阶段，成为“原型工具人”？

行业、公司和产品都有生命周期，通常可以归结为探索、成长、成熟和衰退。在产品经理的成长道路上，也有不同的阶段：进入、成长、进步、突破，不同的成长阶段也对应着产品经理能力的高低。

除了努力、天赋、机会等因素外，造成这种能力差异还有一个很重要的原因，那就是思维和认知的提高。

我将产品经理在原型绘制工作中应该具备的能力总结为“道”、“技能”、“器”三级能力框架。

希望能帮助一些行业新人或者陷入职业瓶颈的人，找到自己的提升空间，掌握原型的思维方法，建立对原型的全面认识，找到成功的金钥匙尽快打开高级产品经理的道路。

2. 原型制作的“道家”是什么？

从抽象的角度来看，“桃树栖”实际上是人与世界互动的三层境界。任何领域都可以从道、艺、器中拆解出来。“道”是思维，“艺术”是方法，“器”是工具。定位产品经理原型设计其实就是产品经理与原型交互的三个层次境界，分别是：

“道”是思维，是原型的思维方式和底层逻辑，是原型的指导思想。原型设计思维帮助我们发展原型设计的大局观，并学习如何战略性地看待原型设计工作。“技术”是一种方法，指的是原型设计的方法和策略，它直接影响到产品经理的原型设计技巧和效率。我们都知道“选择比努力更重要”，一个好的方法可以让我们沿着正确的道路做出决定，让工作事半功倍。“工具”是一种工具，指的是原型制作工具。有句话叫“欲做好事，必先利其器”。一个好的原型设计工具可以提高产品经理原型设计的工作效率，甚至在某些方面有所弥补。操作技能的弱点。

综上所述，对于原型制作的“道剧”来说，其实就是原型制作工作由浅入深、由实到虚的演进过程。

不了解原型这个“人工工具”，产品经理自己短期内可能察觉不到影响，但如果想要开发高端产品或期望更好的职业发展，就会产生不利影响。

下面我们就从下往上，详细介绍一下。

三、原型的“工具”——原型工具的功能演进路径

在原型制作“工具”层面，我们需要学习如何选择适合自己工作习惯的原型制作工具，并满足原型制作的最新趋势。

从计算机时代到现在，原型工具的发展经历了哪些阶段？当前发展阶段的特点是什么？如何选择一款适合自己、满足工作需求、紧跟最新发展趋势的原型制作工具？问题。

3.1 原型工具发展的四个阶段

作为原型制作的“工具”，原型制作工具主要经历了四个阶段：

1980 年代至 1990 年代：

随着计算机时代的到来，个人电脑逐渐普及，原型工具迎来了发展的第一阶段。当时的代表软件主要是Visio，实现了从手绘到软件绘图的转变。与手绘相比，原型绘图软件可以实现速度快、修改容易、绘图准确的特点。但同时，这些软件不仅学习成本高，专业技能要求高，而且团队协作功能少。

21世纪开始：

随着PC互联网时代的到来，原型工具的发展迎来了第二阶段。当时的代表软件是Axure。Axure 因其简单、易用和易于演示而广受欢迎，已成为 PC 产品经理的标准。Axure RP不仅可以设计产品原型注册机算法视频，还可以绘制产品线结构图、用例图、逻辑流程图等，甚至很多产品经理直接使用Axure RP来表达产品需求文档。

自 2009 年以来：

随着移动互联网时代的到来，原型工具正朝着敏捷、高效、移动化方向发展，配套的软件形式和功能也更加丰富，Proto、Proto等工具应运而生。此时的原型工具不仅兼容PC、手机、平板甚至智能手表等终端风格，原型界面更加精致细致，团队协作功能和辅助工具也越来越多。

目前：

随着移动互联网时代的逐渐成熟，原型工具的发展产生了新的趋势，产品经理对原型工具的功能也有了新的要求：

3.2 如何选择“与时俱进”的原型制作工具？

面对目前原型制作工具的发展趋势，虽然新的原型制作工具层出不穷，但我们评测的主角：Mock RP值得深入关注。

它的几个功能特性正好满足了我们目前在原型设计“设备”级别的发展趋势的核心需求：

如上所述，一个好的原型制作工具可以提高生产力并弥补我们技能水平的弱点。

作为与时俱进的原型工具，在“设备”层面满足了我们的基本要求，那么如何在“技术”层面进行改进呢？

四、原型的“艺术”——个人和团队层面的原型艺术

“气”与“术”的关系是抽象的，“术”是控制“气”的技术。我们所说的原型制作“技能”，就是原型制作的基本操作技能。

对于产品经理来说，仅仅掌握“设备”的运作方式本身并不能产生太大的价值。

设备只是技术的载体，就像一个人只精通软件本身一样，没有用处。有用的是能够将其用于爬取、数据分析、算法实现等。

使用同样的工具，产品经理的技术和专业能力不同，输出的原型自然也大不相同。

“技能”级别的能力，是大多数新产品经理最基本的工作能力，也是最基本的入门门槛。下面，我们将从个人和团队的角度对原型制作的“技术”层面进行详细介绍。

4.1 个人层面的原型制作“艺术”

原型是整个产品流程中最重要的位置，它有着前一个和下一个环节的联系。

在原型设计之前，需求或功能信息是相对抽象的。原型制作的过程是将抽象信息转化为具体信息的过程。随后的产品需求文档 (PRD) 是关于原型设计中的部分、接口、元素及其相互关系的信息。描述和解释了执行逻辑。

从抽象的角度来看，原型的设计主要由三部分组成：

所需内容的呈现：任何页面实际上都是文本、多媒体和交互组件的载体。通过这些材料向访问者呈现所需的内容是产品设计中最基本的部分。导航和链接：除了内容的呈现外，产品中还有很多导航和链接，这就是信息架构。信息架构的主要工作是设计组织分类和导航的结构，使用户能够高效地浏览产品的内容。数据与操作逻辑：除了直接呈现给用户的内容外，还有用户与产品之间的操作交互，伴随着数据的交换。

这三项实际上对应了用户体验五要素的层次。需求内容的呈现对应于战略层和范围层，分别代表了产品目标和产品功能需求。

导航和链接对应于将产品需求转化为系统和用户之间交互的结构层。数据和操作逻辑对应框架层，框架中的交互元素和信息旨在帮助用户理解功能和完成操作。

同时，用户需求和产品目标使我们贯穿产品原型设计的两条主要分析线。无论我们处于什么层面，都需要分别从用户端和产品（业务）端去思考。

4.1.1 基于垂直业务模板库，快速整理需求内容

从产品经理的角度梳理需求，需要明确两个问题：“用户需求”和“业务目标”。

用户需求是用户进入产品场景后想要解决的问题。业务目标是产品经理进行原型设计的初衷，也是实现每个界面设计的目标。

例如，电商商品详情页的商品业务目标是提示感兴趣的用户决定购买并跳转到订单页面。明确每个接口的业务目标，使提出的需求不会偏离大方向。

因此，在原型页面“入手”之前，产品经理首先要确定页面作为一个整体需要实现的业务目标，并根据目标进行评估：为了实现这个目标，一个具体的设计是否与实现它需要业务属性。

为了完成页面需求内容的组织，传统的方法是先与业务方充分沟通，明确需求内容，了解需求背景，再将业务需求转化为产品需求，细化需求的功能点，然后结合用户使用场景，用业务规则描述需求，从0到1设计满足业务需求的页面。

但更好的选择是直接使用素材或工具网站提供的原型模板，并基于这些完整的产品模型，直观地了解特定业务下的用户习惯和产品功能体系。

比如通过原型工具Mock RP内置的海量垂直行业原型，除了在demo界面直观展示交互外，还可以进入编辑界面快速掌握需要的内容、功能逻辑、用户操作路径和产品页面上的用户体验。

如果这些模板的整体方向与产品经理的期望一致，那么你可以直接复用模板，然后根据自己的想法进行调整和优化。基于模板页面进行微调，快速构建完整的功能模块，实现业务目标，帮助用户实现需求。

4.1.2 实现清晰的业务操作路径，清晰的导航和链接

通过垂直业务模板库，可以帮助产品经理快速组织每个页面所需的内容。

页面需求内容完成后，接下来就是设计一个业务流程图，保证主要业务流程走通。

垂直业务模板库虽然包含了一些比较常见的业务流程，但是产品经理需要在分析自己接手的具体业务需求后，根据具体业务流程和用户访问路径，尽可能地梳理、提炼和输出业务流程图.

在整个排序过程中，我们会深入理解产品形态、业务流程和产品逻辑的逆向关系，输出业务形态图、用户用例图和产品流程图。

业务表单图是业务逻辑流程的可视化，用例图是功能间流动关系的可视化，产品流程图是页面间跳转关系的可视化。

从业务形式图到产品流程图，是业务从抽象到具体，从概念到实现的过程。区分最终输出的流程图，即：业务流程图、功能流程图和页面流程图等。

这时，产品经理通过明确的业务和操作流程指定，清楚地传达产品的业务需求就显得尤为重要。在需求内容层面，我们提到了“用户需求”和“业务目标”这两个角度，对于流程图绘制的问题我们还是需要做一个差异化的分析。

从业务目标来看，通过Mock RP内置的“流程图模式”，产品经理可以直接在原型工具中绘制流程图；当你需要向团队描述产品需求时，借助可视化的流程图，沟通效率会大大提高，毕竟步骤清晰的流程图比一大段文字更直观、更容易理解。

从用户需求的角度出发，通过Ikeke的“画板”功能，可以方便的编辑和展示设计稿之间的跳转关系。产品经理可以根据用户需求，在用户操作层面完成需要呈现的页面跳转。转到流程图。

4.1.3 快速标注清晰表达数据和操作逻辑

通过明确所需的内容组织和导航和链接，已经初步完成了产品原型的基本页面内容。但只要页面不是静态页面注册机算法视频，就有数据和操作逻辑的设计和呈现。

继承上一部分“用户需求”和“业务目标”两个视角，操作逻辑对应“用户需求”，描述用户如何通过页面元素和交互来引导用户实现需求。数据逻辑对应“业务目标”，描述了产品如何通过记录和展示用户操作数据来引导业务方完成业务目标。

一个页面可以操作哪些页面元素，操作是点击、长按还是滑动，操作后会产生什么效果，是打开新页面、弹窗还是滑动界面，这些都需要在产品原型中完成。标记得很清楚。

同时，产品原型设计完成后，需要交付给研发人员进入开发流程，并以数据逻辑清晰表达对各个部分的需求。例如统计用户每周的订单量，即过去7天的总订单量。还是平均的。只有避免信息的错位，才能减少重复沟通的成本和浪费。

快速生成注释的功能可以通过Ikeke快速自动完成。设计稿导入后，可以点击元素查看间距、颜色、字体样式、阴影、圆角大小等标注信息。您还可以手动添加文本、坐标、颜色、大小和区域注释。信息更全面，更全面。准确，帮助开发恢复设计稿。自动生成的CSS //-C代码，开发伙伴可以直接复制使用，省去很多繁琐的劳动。

除了以上功能，您可以使用 Iocki Figma 插件快速上传设计稿到 平台，还可以整合其他设计工具的设计稿，查看在线评论，轻松分享演示文稿，无需等待文件加载.

4.2 团队层面原型制作的“技术”

4.2.1 创建和管理团队规范，建立团队工作准则

无论是初创公司还是龙头企业，设计的一致性都非常重要。

对于大公司来说，对品牌定位和形象有特定的要求。如果不建立统一的标准，会带来过多的时间和资金成本。创业公司如果没有统一的设计规范管理，就很难建立清晰而长久的品牌定位。建立高效的团队管理设计规范主要包括三个部分：

合理分类：明确你需要组织哪些内容，如何呈现这些内容的分类；划分任务优先级：为了提高整体效率，需要对各个项目任务的优先级和判断标准进行划分；合理分工：制定一套团队分工规则，明确不同任务类型如何根据项目角色合理分工。

在印记设计系统中，可以实现上述要求。

产品经理可以创建多个库、类别和子类别进行管理。每个库包含两类资源类别：第一类是文件资源，包括标志、图片、图标、组件和字体；第二类是编辑资源，包括颜色、度量、标准词、阴影。基本满足了各种设计类型设计师的需求。

同时，在设计系统中，产品经理可以创建自己的团队，邀请成员，设置团队成员的角色和权限，各司其职，高效管理，进行协同设计。

成员还可以将设计元素上传到设计系统，在合兴等系统对接工具上形成规范，然后让整个团队共享和使用这些通用资源进行快速设计。

4.2.2 与协同办公深度融合，提升团队协作效率

无论哪个产品开发设计团队都有协同办公的需求，对协同工具的需求也比较旺盛。

为满足这一需求，国内外涌现出多种协作工具，涵盖文档协作、项目协作、企业内部即时通讯等。

各个领域都有自己的代表性头部工具，成为很多团队的长期选择，迁移成本巨大。

对于团队来说，原型工具不应该取代现有的协作工具，而应该深度整合，与协作工具建立“协同效应”。

在文档协作工具方面，携手“多人协作在线文档工具”腾讯文档，为用户提供完整的团队协作解决方案，提升互联网团队的效率和速度，解决团队协作的难题。单兵作战，效率低下。

在项目协作工具方面，已经正式接入公司项目管理工具Jira，Jira用户可以在项目中关联设计稿，精准定位设计内容，让团队在进行项目管理时沟通更加高效。

在即时通讯工具方面，已经完成了与腾讯会议的合作对接。接入腾讯会议后，在项目的画板模式下，主持人“发起会议”，会议提醒会以弹窗的形式显示给项目成员。，如果项目成员想参加会议，请点击“立即加入”。进入会议室后，页面同步显示主持人的演示界面。会议更加灵活，工作效率大大提高。

4.2.3 需求变更内容可追溯，优化团队进度控制

需求文档和原型设计稿交付后，进入需求内容的迭代环节。需求迭代修改的原因有很多，比如需求考虑不全、业务目的调整、操作路径优化等。

但比变化本身更重要的是如何实时同步和跟踪它们。每次迭代后，产品经理必须对修改后的意见进行及时的审核和修正，避免类似问题的再次发生。

因为一旦团队在后期面临层出不穷的变化，不仅项目工期会大大增加，项目会延期，最终的产品经理也会被认为是不专业的。

如何为团队建立可追溯的变更请求板，可以通过 的协作来实现。通过将原型上传到Mocko ，所有修改都可以通过@相关人员一键完成，标注相关修改内容，随时掌控整体进度。

使用这个工具可以大大提高产品经理的工作效率。它不仅适应团队的协作和管理方式，而且将设计与协作相结合。

五、原型设计的“道”——原型的概念、标准与体系

我更喜欢阅读哲学书籍来锻炼我的哲学思维。

傅培荣先生在《哲学与人生》一书中写道，判断一个人是否是哲学思维的三个标准：澄清概念、制定标准、构建体系，如图所示。

哲学思维的三个标准，实际上对应着解决世间一切问题的三个底层逻辑，以及从顶层的角度思考任何事情的方式。

而这种思维方式可以帮助我们确立如何解决产品经理原型设计工作中的问题的核心解决方案：

首先解决产品经理如何正确认识原型工作的问题，建立清晰、清晰、合理的“原型观”，即“理清概念”；然后解决如何建立一套原型设计工作和思维的“尺子”，即“定标准”；最后，通过整合多种思维模式、商业实践和自我认知，建立自己的原型处理系统，即“构建系统”。5.1 澄清概念：认识原型工具的核心本质

从产品经理的日常工作应用场景来看，原型绘制工具的核心本质，从不同层面有不同的理解：

目前，Ikeke的几款主要原型产品也验证了原型工具的三大精髓。

例如，Mock-up协作对应“沟通”工具，Mock-up RP对应“测试”工具，设计系统对应“交付”工具。

5.2 设定标准：在原型设计中找到秩序感

原型设计中的秩序感本质上是一种规律。它不仅是一种自然的形式，而且是一种规律和有序。

交互界面设计中的秩序感体现在视觉构建的过程中，视觉体验和运动规律的适应、感知和决策。基于此，原型设计的秩序感主要体现在交互界面的视觉秩序、目标秩序和审美心理秩序三个部分。

适配——界面视觉顺序：由于交互界面的设计更注重人机交互，远不如平面布局设计那么自由。根据一般交互界面设计中视觉层次的秩序感，界面结构大致可分为以下几种：点阵式、左上式、右下式、居中式和整体式等。

感知——用户心理的顺序：交互界面除了要考虑人机交互水平之外，还需要考虑用户体验水平的审美心理因素。根据交互界面设计中审美因素所产生的设计思路，界面设计原则可分为以下几类：希克定律、特斯勒定律、奥卡姆剃刀原理、帕累托定律等。

决策——业务目标的顺序：如前所述，交互界面必须具备实现业务目标的属性，即通过界面结构、组件分布、展示策略等因素来引导用户完成相关的业务操作，例如如注册、下单和分享。基于业务，目的可以分为以下界面设计原则：亲密度原则、对齐原则、重复原则、对比原则。

如何快速找到原型制作的秩序感？这可以使用 Iblog 的快速布局相关功能来实现。

通过等距克隆、等距调整、等距排序、图标快捷替换等功能，帮助产品经理快速创建原型页面，使页面上的组件、元素、文本等素材布局有序、分布合理。

这些功能中我最喜欢的是等距排序，只要选择了多个等距的元素，当鼠标悬停在其中一个部分上时，就会出现一个点。通过拖动这个点，可以轻松地交换和调整元素之间的位置。

5.3 搭建系统：搭建高效便捷的原型中台

除了掌握通用的产品设计方法，掌握原型控件的使用外，还有一个步骤可以不断提高我们的设计效率注册机算法视频，那就是构建自己的完整原型模板库。

第一类是基于Web和移动平台的通用组件模板库，提供丰富的组件和界面模板，可以满足相关平台的原型设计，并且可以复用相关元素，提高输出效率。

另一种基于相关行业和案例分享结合实际项目需求的产品模板，可以帮助产品经理快速掌握产品原型的设计方法和技巧，同时提升自身的产品策划经验和技能。

模板库中不仅有日常原型制作所需的各种控件，还有一些常用的功能级控件，如：注册/登录功能、列表页功能、表单功能、搜索功能等，建立丰富的原型模板库，并在设计过程中复用，大大提高了原型设计的效率。

在 RP 设计系统中，我们可以快速创建资源库。资源库包含九种设计资源：Logo、标准颜色、字体、标准字、图标、组件、图片、尺寸和阴影。登录设计系统后，点击界面上的“+”号，创建资源库。在新的资源库界面中，您可以选择创建“空白库”和“示例库”两种类型。

设计系统与两个设计工具相连，工具中制作的复合组件可以上传到设计系统中，然后这些组件可以在and中同步修改和更新。

制定相关设计规范后，您可以与其他合作伙伴共享或导出规范。此外，Logo、标准字、标准颜色、图标、图片、组件六大设计资源可直接应用于and。

6.Mock的几个优化建议

文末，除了从多维度对Mock产品进行评估和安利Moke产品外，从产品经理实际使用Mock进行原型设计的过程，对Mock未来的功能优化提出一些建议：

6.1 低保真和高保真原型的相互转换

低保真和高保真原型都适用于业务场景。例如，低保真原型适用于对客户、开发和项目参与者进行快速头脑风暴或演示设计思路，而高保真原型适用于确保核心功能需求方面，满足用户的基本目标，以及场景有效减少错误和返工等。

在实际工作中，有时需要将低保真原型快速转换为高保真原型，以满足客户、研发、业务人员的沟通需求，而高保真原型则需要转换为客户演示隐私保护、版本回滚和其他场景。低保真原型。

现在从低保真转向高保真还为时过早，但高保真到低保真原型设计亟待实施。

6.2 支持原型图自动生成需求文档

目前支持在线编写产品需求文档功能，可以直接引用材料将线框图、原型或高保真原型插入文档，方便产品经理的日常工作。

不过在输出word手册的功能上还是略逊于竞品Axure的。Axure可以基于原型直接输出完整的word格式需求文档，包括所有原型设计和相应的文字描述。

虽然输出文档没有目录、页码错误、不规范，但是通过导入模板功能配置文档格式后，仍然可以输出满足特定模板要求的需求文档。

产品经理可以根据导出的文档内容进一步完善基础版，方便团队管理，非常方便。建议产品团队跟进调研，规划需求。

右侧是axure配置界面，左侧是实际导出的文档

6.3 加强UML图绘制功能的扩展

随着移动互联网时代的成熟和工业互联网时代的到来，toB产品业务也成为不少产品经理的主攻方向。

其中，UML图是B端产品经理最常用的图形化工具，可以更好地挖掘业务需求，让需求文档更加清晰，进而推动团队整体业务。

B端产品经理常用的UML图包括ER图（UML中的类图）、跨部门流程图（泳道图）、状态机图、活动图、用例图等。

虽然目前支持绘制复杂流程图，但是对于ER图、状态机图、用例图等常用的UML图类型，仍然缺乏基本的绘制功能和模板，亟待加强UML图绘制功能的扩展。

在线流程图绘制工具支持多种UML图绘制模板

6.4 加强创新产品类型载体探索

今年元界概念的火爆，预示着以沉浸式虚拟现实内容、深度人机交互、VR、AR终端应用为代表的互联网3.0时代的到来。

互联网3.0最大的特点就是身临其境的3D视觉体验，吸引着我们从手机到AR/VR设备。作为3D视觉体验的硬件入口，VR设备和AR设备可以分别提供3D沉浸式视觉体验和3D虚拟现实融合视觉体验。

传统的原型制作工具只支持手机、PC、平板等传统硬件。面对内容消费载体的新变化，要及时做出应对策略。

例如，Figma 目前支持通过插件制作支持 AR 交互功能的交互原型，并在 PC、移动端、AR 眼睛等各种终端上进行测试。目前国内有很多相关的AR能力插件，艾克可以选择合作接入。

在 Figma 上使用插件制作 AR 原型界面

本文为2022 Mock RP原型工具评测大赛评测文章。如果您对Mock RP感兴趣，可以点击体验链接：

专栏作家

穆宁，公众号：穆宁，大家都是产品经理专栏作家。北京邮报硕士，原京东、百度商业产品经理，《产品思维模型-方法与实践》作者。

本文最初发表于每个人都是产品经理。禁止任何未经许可的复制。

题图来自，基于CC0协议。

本文观点仅代表作者本人，大家都是产品经理。平台仅提供信息存储空间服务。