在产品开发中使用快速原型设计（打造原型设计工具中的卓越用户体验）
在产品开发中使用快速原型设计（打造原型设计工具中的卓越用户体验）而传统行业正在受到互联网影响，开始走向信息化、数字化，B端产品处于大发展阶段。产品的用户体验受到重视和追捧。但是由于产品形态和受众的差异化，B端设计与C端有所不同。一般采用“产品经理 体验设计师”的模式，产品经理除了需求分析之外，还会承担起原型设计工作；体验设计师是在原型方案基础上，进行交互优化，并完成高保真视觉效果图。在C端领域，岗位分工更加清晰，产品经理主要侧重需求分析，基本不需要输出原型方案，界面设计工作由专门的交互设计师和视觉设计师完成。交互设计师首选专业的设计工具，例如Sketch、Figma等等。今天我们通过摹客旗下的原型设计工具——摹客RP，了解下如何在产品设计借助创新思维，打造卓越用户体验，实现弯道超车。文章的主要内容包括以下几点：我现在是一名B端交互设计师，有时候偶尔会客串一下产品经理的角色。用过的工具也是五花八门，从最开始的PPT到专业的原型软件Axure，后来又转了设
#本文为2022摹客RP原型工具测评大赛三等奖作品
随着互联网的发展，产品设计需求也随即增多，市面上的原型设计工具都差不多，呈现差异化是当前原型工具从竞争中脱颖而出的关键。本文以摹客RP为例，借助用户五要素，阐述如何在产品设计借助创新思维，打造卓越用户体验，实现弯道超车，一起来看看。
2014年，国内移动互联网行业迎来大爆发，设计需求也随即井喷。所谓“工欲善其事、必先利其器”，原型软件已经成为产品经理的必备工具，而市面上的原型工具在交互设计上都大同小异。如何在激烈的市场竞争中，借助设计形成差异化的竞争优势，真正的为广大用户做好服务，成为了原型设计工具的重要使命。
目前，在全球90多个国家和地区，摹客已拥有数百万专业用户和数十万个企业团队，服务了众多领域的头部企业，其中不乏中国最为知名的科技企业、互联网企业和数字化转型中的大中型传统企业。
今天我们通过摹客旗下的原型设计工具——摹客RP，了解下如何在产品设计借助创新思维，打造卓越用户体验，实现弯道超车。文章的主要内容包括以下几点：
一、用户需求洞察我现在是一名B端交互设计师，有时候偶尔会客串一下产品经理的角色。用过的工具也是五花八门，从最开始的PPT到专业的原型软件Axure，后来又转了设计师专业工具Sketch、Figma。虽然一直在画原型，不过仔细思考下，会发现其中有了新的变化。主要有以下几点：
1. 原型质量要求变高
行业越来越成熟，各类产品都开始追求高质量的用户体验，对原型的要求也越来越高。简单的框图已经无法满足对内的需求传达、以及对外的展示要求。
在C端领域，岗位分工更加清晰，产品经理主要侧重需求分析，基本不需要输出原型方案，界面设计工作由专门的交互设计师和视觉设计师完成。交互设计师首选专业的设计工具，例如Sketch、Figma等等。
而传统行业正在受到互联网影响，开始走向信息化、数字化，B端产品处于大发展阶段。产品的用户体验受到重视和追捧。但是由于产品形态和受众的差异化，B端设计与C端有所不同。一般采用“产品经理 体验设计师”的模式，产品经理除了需求分析之外，还会承担起原型设计工作；体验设计师是在原型方案基础上，进行交互优化，并完成高保真视觉效果图。
这样的岗位配置对两者工作配合和个人能力要求都比较高，如果体验设计师的交互能力不足，产品经理就需要尽可能精细化的表达产品需求和设计方案，以便在后续的需求对接中，减少沟通成本，保证方案准确的执行落地。
现实工作中也的确如此，由于B端产品专业性比较强，行业门槛比较明显，兼顾视觉和交互的体验设计师缺乏对需求的理解和认知，更偏向于设计执行层面，更依赖产品经理的基础原型方案，于是产品经理也被倒逼着不断提高个人的原型设计能力。
2. 交互演示要求更高
B端产品以PC端为主，页面尺寸通常比较大，想要像C端产品一样，纯粹依靠页面流程图来展示产品交互逻辑不太现实。
在评审方案时，大范围的来回拖动设计方案，容易增加听众的理解成本。因此有必要添加一些基础的交互动作，方便设计方案演示。另一方面，带交互的方案演示效果也更加自然，给听众更强的代入感。
3. 迭代速度在加快
SaaS产品区别于传统B端产品，更容易受到市场和用户的双重驱动，产品的迭代速度也在加快。这就要求产品经理的设计速度也要加快，一款高效的原型工具，必须带给产品经理更高的工作效率，起到事半功倍的效果。
二、拆解摹客RP本文从用户体验五要素的维度，去拆解摹客RP，尝试洞察内在的设计逻辑以及设计亮点。
1. 战略层
战略层就是“产品能够带给用户什么样的价值，而在这个过程中产品又可以获得什么（通常就是商业目标的达成）”。
传统原型工具都是采用售卖软件的方式获得收益，用户免费下载软件，购买授权码后即可享受正版服务。不过这对个人用户和设计团队而言，都是一笔不小的成本。所以Axure 10推出付费订阅后，虽然我也希望能够体验到最新的产品功能，但是最终理智战胜了欲望，因为我不想付费。
而摹客RP则采用互联网运营模式，为产品经理和设计师量身定制了“免费设计计划”，只要邀请5名用户注册并加入团队一起工作，就可以获得永久无限设计包，不限时长、页面、功能。
这无疑给行业带来了巨大的冲击，零成本使用设计工具，让用户选择成本更低。对团队而言，免费模式也将成为设计团队迈向全面数字化的推动力。当然这种模式也促成了摹客RP用户规模的快速增长，实现了产品和团队的双赢。
而在产品层面，摹客RP的口号是“重新定义原型设计”，“更高效、更易用、更流畅”。目标就是要改变传统原型工具组件繁琐、交互复杂的问题，而这一产品设计理念也确实体现在了产品其他用户体验层级中。
2. 范围层
原型设计工具日渐趋同，从大的用户场景划分，主要包括静态原型设计动态交互设定，以及产品原型页面展示。但是细化到功能层面，还是有很大的拓展空间。
在我的体验中，发现摹客RP相较于其他产品，主要有以下产品特色：
1）适应行业变化，增强组件扩展性
前文提到现在对产品原型的要求越来越高，但是产品经理普遍不太注重原型界面的美观度，就容易造成原型方案比较粗糙，比较典型的问题包括，布局对齐、配色、字体大小等等，这样就无法展示出内在的信息层级。而在传统原型设计工具中，组件比较基础，无法覆盖到更多的产品设计场景。
对于复杂组件，需要产品经理通过基础组件组合搭配才能实现，这就造成了制作繁琐，在一定程度上影响了工作效率。如果涉及到团队协作，不同产品经理的使用习惯、个人能力不同，输出的原型方案可能大相径庭。
根据实际的用户需求，摹客RP推出了更加符合用户需求的场景级组件。包括复选框组、开关、二维码、日期选择器等28种常用组件、8种图表组件，以及海量矢量图标。有了这些成熟组件，产品经理不需要再去网络上寻找组件库和图标，并且这些组件有的还自带交互效果，无形中节省了大量的时间和精力。实现了软件安装即可使用，产品经理可以将更多经理专注在产品设计上。
海量图标库囊括了产品设计中常见的各类型图标，粗细两种风格可以灵活适应不同的设计场景，真的是解决了产品经理的后顾之忧。
组件样式的可编辑能力也在加强，可以满足产品经理的精益化需求，打造更加有质量的原型方案。同时标准化组件设计，让团队协作更加方便，更好地保证产品设计方案展示的一致性。
2）主辅画板创新模式，提升操作的易用性
为了提交原型方案的逼真程度，传统的原型工具实现弹窗效果时，要么将弹窗内容直接叠加在页面上方，或者将弹窗放置在页面外部隐藏起来，通过添加“移动”和“显示”2条交互命令实现仿真效果。
在弹窗数量不多的简单场景下，这样的操作模式也是可以接受的。但是对于弹窗较多的复杂场景，就会严重影响用户的操作效率。例如直接叠加在页面上，弹窗内容重叠容易造成选择困难或者错误选择。如果放在页面范围之外，每个弹窗都要添加移动命令，光是确定移动后的坐标值，都会增加额外的工作量。
摹客RP创造性的推出了自己的解决方案——“主辅面板”。主面板内容用来是最终的演示区域，辅助面板在主面板之外，承接各种内容信息，可以通过交互动作调用到主面板中。调用后的坐标设定了5种常用的位置。当然用户也可以自定义位置。这种方式就极大的提高了用户的操作效率。
辅助面板的另一个特点，就是编辑状态下直观、高效；而演示状态下，辅助面板则不可见，也就是说用户无需将面板内容手动隐藏。这相比传统原型工具的隐藏模式，更加直观。修改时也不需要激活显示，可以直接修改，用户的查看和编辑效率更高，更加流畅。
3）响应式布局，产品经理提效利器
当设计稿需要应用在不同的终端尺寸时，往往需要我们手动调整组件的布局和大小，费时费力。众多的设计工具都推出了“约束”功能，摹客RP也顺应趋势，推出了“响应式布局”功能，可以轻松完成布局调整。
响应式布局对产品经理提高工作效率有极大的帮助。例如原型设计时，会有大量的弹窗设计，但是每个弹窗的尺寸有大有小，就需要不断调整尺寸。有了响应式布局后，就可以将提示信息弹窗或者内容弹窗，约束好弹窗内容的定位方式和元素尺寸，并转化为组件资源，可以在不同场景下调用、编辑即可。在对画板或组进行缩放时，其所包含组件的布局和大小也会随之发生改变，减少了手动调整内容的工作量。
3. 结构层
1）交互操作创新
提升效率是原型设计工具的不懈追求。一些老牌的原型工具，拥有强大的命令式交互能力，可以制作出各种各样的逼真的交互效果，但是相应的学习门槛较高。当年我学习Axure时，专门找了一份教程来学习其中的技巧。
而摹客RP采用了“所见即所得”的交互模式，通过拖拽即可快速建立元素的交互关系，再经过简单的配置即可完成交互设置。这种方式相较于传统的命令交互的方式，大大地提高了用户的操作效率。
结合前面我们提到的丰富组件，甚至实现了在需求讨论时，就可以高效地完成页面搭建、演示并确认方案，有助于提升项目协同的整体效率。
2）辅助面板交互亮点
动态面板可以说是原型工具中非常重要的组件，可以承载各种页面信息，建立交互关系后，可以实现内容的展示和切换。但是动态面板也存在比较明显的交互短板。最大的痛点就是动态面板和页面是相互隔离的两个空间，用户需要单独进入动态面板才能进行内容编辑。编辑时首先要通过下拉选择或者逐个切换的方式，定位到具体面板完成编辑。这无疑增加了用户的操作成本。
摹客RP改变思路，利用辅助面板，解决了这个用户痛点。
首先摹客RP也有自己的动态面板——称之为“内容面板”。这个面板只是用来关联辅助面板，方便主面板承载信息功能。之前提到在编辑状态下，辅助面板与主面板平级展示在画布中，这样就减少了面板选择跳转的过程，操作更加快捷。主画板中的组件，通过拖拽即可与辅助面板建立交互关系，从而提升了操作效率。
但是对于复杂页面，辅助面板必然也会较多。面对满屏的面板，用户该如何快速定位呢？摹客RP在传统的图层列表搜索的基础上，还提供了2种解决方案，保证了良好的用户体验。
① 画板列表
考虑到画板的重要性，摹客RP单独提供了画板列表，用户可以快速定位、修改、删除面板，也可以拖拽建立交互关系，真正的做到了简洁高效。
② 定位功能
在主面板中，可以通过已经关联的交互关系的组件，快速定位到辅助面板。那么编辑完成辅助面板后，该如何快速返回主面板呢？摹客RP也想到了这一点，在工作区增加了鹰眼导航功能，只要双击导航区，就可以快速定位到主面板。
4. 框架层
摹客RP作为后来者，一方面要引入零基础的产品新人，另一方面主要是承接从其他原型工具迁移过来的行业老用户。因此遵循行业内通用的框架布局模式就是成了必然选择，有利于降低用户的学习成本。
摹客RP产品的框架结构并不复杂，左、中、右的布局模式与常见的工具软件非常相似，很容易让用户上手。
5. 表现层
摹客RP采用了固定的深色面板，只允许用户自定义工作区背景色，这种方式还是略显单一的，无法满足不同用户的视觉要求。反观大多数的设计软件都已经支持深色、浅色两种模式。
三、优化建议摹客RP也并不是完美无缺的。在体验过程中我也发现了一些体验细节问题。
1）快捷操作需要加强
作为Axure的老用户，我的绘图习惯已经被培养起来了。例如形状的切换，可以通过右键菜单完成。圆角矩形也可以通过矩形上的拖拽点直接生成。但是在摹客RP中，这些操作都必须通过右侧属性栏完成，操作效率并不高。形状切换功能被放在属性栏的最底部，我刚开始是没有找到的。所以我画错形状的情况下，就只能删除后，重新绘制。
另外文本组件中也缺少了标题文本组件，每次都要专门设定文本属性，虽然可以通过文本样式定义成资源，不过还要切换Tab页签，没有直接拖拽组件便捷。
2）资源管理能力要完善
摹客RP资源是可以复用的属性信息，分为了颜色、文本、组件3类。确实可以减少不必要的重复性操作。但是资源管理的能力还需要加强。例如文本样式不可以命名，用户的识别效率就比较低，颜色管理也存在这样的问题，可以做一些事情分组功能，方便用户选择。
3）交互细节要提升
界面交互中，基础的操作方式还是需要提升的。例如在用户场景中，预览功能频率更高，用户要校验交互动作是否准确有效，而发布功能其实应用的频率并不是最高的，主要是完成方案后才使用。但是在界面中，发布按钮作为主按钮，设计明显强于预览按钮，每次我都会有些迟疑，因为需要做一下思维的转换。
而在演示界面中，侧边的收起、现实的操作都被集中到了演示区域下方的工具栏中，这其实违背了亲密性原则。因为工具栏是在演示的内容区，用户首先想到的是对演示内容的控制。而常规的侧边栏控制按钮都是就近布置，目的是为了用户减少用户的认知负荷和操作负荷。
另一方面侧边虽然可以自行拖拽，但是目前版本中只能做拉宽，不能收窄。这也影响了操作的灵活性。
四、总结完整的体验后，个人认为摹客RP的设计亮点确实比较多，不仅在大的功能层面，小的细节也在不断优化提升。例如点击即可快速切换图标，而且可以继承原有图标的属性。比传统的删除、拖入、调整属性的方式，方便太多了。正是这些面向用户需求的设计细节，让摹客RP快速成为了原型设计利器。
希望摹客RP未来能够持续改进，为广大产品经理带来更加实用、更加惊艳的产品功能。
本文为2022摹客RP原型工具测评大赛的测评文章，如对摹客RP感兴趣可点击体验链接：https://www.mockplus.cn/rp-event/?hmsr=woshipmlichao
专栏作家
子牧先生。公众号：子牧UXD（HelloDesign），人人都是产品经理专栏作家。产品体验设计师。8年互联网行业经验，擅长体验设计思维、设计方法论、交互设计研究。
本文原创发布于人人都是产品经理，未经许可，禁止转载。
题图来自 Unsplash，基于 CC0 协议。
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
