2023年【摹客RP测评大赛优秀作品】基于用户需求打造原型设计工具中的卓越用户体验

【摹客RP测评大赛优秀作品】基于用户需求，打造原型设计工具中的卓越用户体验2022年，国内移动互联网行业迎来大爆发，设计需求也随即井喷。所谓“工欲善其事、必先利其器”，原型软件已经成为产品经理的必备工具，而市面上的原型工具在交互设计上都大同小异。如何在激烈的市场竞争中，借助设计形成差异化的竞争优势，真正的为广阔用户做好服务，成为了原型设计工具的重要使命。

目前，在全球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.战略层

战略层就是“产品能够带给用户什么样的价值，而在这个过程中产品又可以获得什么（通常就是商业目标的达成）”。

传统原型工具都是采纳售卖软件的方式获得收益，用户免费下载软件，购买授权码后即可享受正版服务。不过这对个人用户和设计团队而言，都是一笔不小的成本。所以Axure10推出付费订阅后，虽然我也盼望能够体验到最新的产品功能，但是最终理智战胜了欲望，由于我不想付费。

而摹客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）交互细节要提升

界面交互中，基础的操作方式还是需要提升的。例如在用户场景中，预览功能频率更高，用户要校验交互动作是否精确     有效，而发布功能其实应用的频率并不是最高的，主要是完成方案后才使用。但是在界面中，发布按钮作为主按钮，设计明显强于预览按钮，每次我都会有些迟疑，由于需要做一下思维的转换。

而在演示界面中，侧边的收起、现实的操作都被集中到了演示区域下方的工具栏中，这其实违反了亲热性原则。由于工具栏是在演示的内容区，用户首先想到的是对演示内容的掌握。而常规的侧边栏掌握按钮都是就近布置，目的是为了用户削减用户的认知负荷和操作负荷。

另一方面侧边虽然可以自行拖拽，但是目前版本中只能做拉宽，