产品原型怎么画「项目三要素」

当我们在画原型时，我们是在画什么？在讨论这个问题之前，我们应该先明确一个最本质的问题，就是我们画原型的目的是什么？

原型是产品设计阶段最终的交付物，产品经理设计完成的原型要交付给研发团队、UI团队、UED团队进行产品研发阶段的相关工作。所以原型的目的就是让接手下一个阶段工作的小伙伴可以清晰了解产品经理的产品设计思想，可以按照产品经理规划的愿景设计产品，避免打造出一款与最初设想截然相反的产出物。在一般产品流程中，原型都是与PRD文档一起作为产出物出现的，不过PRD文档不是本文的讨论重点，本文的重点在于如何画出一个简洁、清晰易懂的原型。

本文将一份简洁易懂的原型分为了三个部分：原型元素、元素注释、功能埋点。这三部分适用于大部分的产品原型组成要素，当然还会有本文没有涵盖的内容，可以根据具体产品具体场景个性化”增删改查”。

一、原型元素

原型元素为原型当中组成的最基本元素，如原型当中的文字、按钮、图片等等。这其中依据元素是否会改变、是否可操作又细分成了三类。

1.1展现元素

展现元素为原型当中最基本的元素，文字、图片等不会发生改变的元素。如原型中的标题、展示图片等等。

1.2可操作元素

可操作元素指用户在使用产品过程中，可以与用户之间发生交互效果的元素。

（1）按钮

按钮是原型中比较常出现的元素，如表单的提交按钮，内容点赞按钮等等。

（2）跳转链接

跳转链接指通过点击会跳转到相应页面的元素，跳转链接可以是文字、图片，也可以是产品导航类链接，如APP当中的Tab标签、功能跳转以及返回、分享功能链接等等。

（3）多媒体元素

多媒体元素指产品原型当中需要对用户展现的音频、视频以及动态图片等多媒体内容所使用的组件。

1.3输入元素

输入元素为用户在使用产品时提供数据输入功能的元素，最常见的有用户注册时需要填写的表单数据，或者是用户回复、评论内容的输入框。

二、元素注释

单纯的元素罗列在原型是无法满足产品研发团队的需求，根据元素类型的不同和可能产生的不同状态，需要对相应的元素加以注释，尽可能穷举元素的所有可能出现的状态和问题。

2.1元素规范

元素规范主要指元素在原型中的展现形式，如大小、位置、排版以及是否自适应屏幕等。另外针对于输入元素，要明确输入内容的规则，对输入内容的验证以及提示等。

2.2状态转换

状态转换针对于可操作元素而言，用户对元素进行操作后，元素会出现几种状态。如用户点击点赞按钮后，点赞数自动加一，点赞按钮变成已赞，当再次点击点赞按钮时，点赞数自动减一，点赞按钮回复初始状态。

在描述元素状态转换时，一定要尽可能将所有可能出现的状态穷举罗列，并辅助说明状态转换的逻辑以及可能出现的问题。这样做的目的在于让研发团队尽可能明确业务底层逻辑，减少bug出现的几率。

2.3页面跳转

页面跳转指用户点击相应跳转链接后会跳转到指定页面，这类注释主要针对跳转链接类元素，在注释时注明要跳转到的页面。关于页面跳转设计，可以在产品流程设计中的页面流程设计进行详细规划。

2.4交互说明

交互说明指用户的某些行为是否会对产品产生影响，如资讯类产品在阅读内容详情是，在当前页面从右向左滑动就会自动阅读下一篇文章。类似这类的交互动作，如单击、双击、屏幕滑动等，如果你的产品对于这些交互有不同的表现，也要在原型中进行相应的注释。

三、功能埋点

在产品上线后对产品功能、流程进行数据分析时，如果需要从产品自身数据库中提取数据，就需要在产品设计阶段对功能进行埋点。如对于电商原型页面的功能埋点，在用户点击加入购物车、点击结算等相关动作元素上进行埋点，利于后期对电商业务漏斗模型的数据分析统计提供数据支持。

对于功能的埋点一定要在定义数据关键指标时有所明确，这样在画原型时，可以对每一个页面需要埋点的功能进行突出注释。

四、实战案例-BPApp

本案例中的原型选自之前产品经理知识体系系列文章中的案例：BestProduct，下面仅选取了几个页面进行说明上面提到的画原型技巧。

#专栏作家#

记小忆，人人都是产品经理专栏作者，野蛮生长的产品经理，运营商大数据产品实践者，擅长从0-1搭建产品经理知识体系。公众号：PM龙门阵。

本文原创发布于人人都是产品经理。未经许可，禁止转载。

题图来自PEXELS，基于CC0协议