4. 原型图

细化每个页面，进一步阐述页面元素及相对位置、跳转逻辑、设计要求、交互目的传达，在正式进入开发阶段之前必备的沟通图档，也产品经理最重要的技能之一。

（图片来源：我司标签管理后台原型图）

在优化产品体验的过程中，产品经理首先需要把“故事（为什么提这个需求）”说清楚，而要说好一个故事，具象的“场景（用户使用情境是什么）”和“角色（哪些人是我们的用户）”有助于“读者（处理需求的人，包含设计、开发团队）”更快的进入状况并理解脉络。

因此，对于产品经理来说，一个好用的原型图工具便是能将故事讲明白的桥梁，原型图既能体现自己的构思和想象，又能让协作人员更直观掌握你的核心诉求从而将其实践。下图为腾讯问卷 2020 产品经理生存报告的调查结果，超过八成的产品经理表示工作内容中包含“产品设计”，绘制原型图能力的重要度可见一斑。

（图片来源：腾讯问卷 2020 产品经理生存报告）

产品经理大多以产出低保真原型图为主，确保流程和元素能够传达设计细节与功能理念，高保真原型图则多交由设计团队接手，产品经理可依据自身成熟度和使用习惯选择对应工具，外企或海外较常使用的原型图工具 Axure、Figma 的特点在于交互效果强大，但对初学者有较高的学习门槛，对企业在选择组织协作工具也是一笔成本，也因此现在有越来越多的产品经理倾向选择免费一站式且有更多团队协作功能的平台，来产出高质量的原型图优化产品体验，这也是近期我开始调研原型图平台的原因。

在比较工具的过程中，我发现了大学时期曾使用的 Mockplus 经典版，在近期推出了在线原型设计功能——摹客 RP，适逢公司在下个开发周期准备进行全网站改版，身为老用户的我当然得借此机会试试新功能。

首先简介我司“全网站改版”这个项目：

• 背景：我司网站虽有在每个开发周期推出新功能，但旧的页面一直缺乏优化，很多早期规划的 UI 和功能现已不符合使用趋势及习惯，也无系统性的做过全网站调性调整。我们将全网站拆成类型页面按服务类型、页面种类分三个开发周期优化，来推动全网站 0 上线。
• 测试页面：这次主要在摹客 RP 绘制的是供应商店家页，此页面需要呈现内容包含：信息公布栏、供应商简介、产品线、亮点产品、技术支持文章、问与答，属于改版幅度较大的页面，因此需要产出大量的原型图来说明不同按钮或功能的交互关系。

再来说明使用原型图工具时，我自己最重视的几个层面：

1. 面板布局合理性：过于复杂的功能摆放层级，光是找寻功能就会耗费大量时间，不合适的工作区域功能和布局调整方式，将增加绘图过程的使用和学习成本。
2. 预设组件和图标数量：若是每个组件都需要自己从头拉图和设定交互，图标得自行从网上下载或依赖设计师手绘，将降低原型图的产出效能。
3. 交互形式及设置弹性：交互方式决定原型图的丰富度，组件、画板、页面都应该开放设置弹性来强化操作效果，多样且精细的交互更有助于协作人员理解及还原需求。
4. 历史版本与演示方式：产品经理经常遇到需求变动和版本迭代，尤其 B 端产品设计的业务逻辑复杂，每次原型图变更都需要被妥善保存，并在展示时零误差还原所有内容。

这次透过摹客 RP 绘制原型图的过程，我也以上述四点当作主要测评的方向，对比平常惯用的 Axure，发现摹客 RP 非常符合我制作原型图的诉求，以下结合摹客 RP 界面截图和自己使用的经验分享。

这次商店页面涉及前后台的功能设计，前台需要轮播图、下拉选单、面包屑等丰富的内容呈现方式，后台又需要有对应的设置功能，在组件的类型上有较复杂的需求。

摹客 RP 内建组件几乎覆盖了所有功能类型，海量且高质感的图库让我在绘制时能找到最合适的图标，有效制作引导用户操作的后台功能，还可将此次建立的颜色、样式、组件储存为设计资源，或者请设计师提前建制资源库，日后即可透过共享的方式让其他项目共同使用。

界面布局可说是摹客 RP 最大的亮点。之前常遇到的问题是，当单一页面有许多层交互画面时，往往会变成用叠加的方式将页面变化一层层盖上去，每次要编辑其中一个画面就需要点开图层调整，有时候容易误触或整个模块被拖拉到。

摹客 RP 的辅助画板正好可以解决这个问题，在辅助面板上制作功能的交互流程有效将工作区划分开，分别来制作主流程和次流程，再透过交互设定来关联主次画板的流程；而当画板一多（像这次光是一个页面改版我就画了十几张图），右下角导航面板的重要性也体现出来了，透过导航面板可以在茫茫图海中加速找到目标页面，这是大部分原型图工具都不具备的功能，一般比较常见于设计师使用的高保真绘图工具中（如 Figma）。