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

2 评论 12153 浏览 7 收藏 22 分钟

#本文为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 协议。

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

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 多不是复杂,少也不是简单。见所不想见,关系又多头晕😵

    来自广东 回复
  2. 很棒的作品

    来自广东 回复