认识产品原型

制作原型是产品汪们日常例行工作，也是一名产品经理需要具备的基础技能。也许是一个大功能模块，需要制作整个业务流程的原型；也许只是个别页面的增加。作者比较喜欢的方式：在梳理好需求和流程后，先采用纸笔手绘原型，进行修改大致得出定稿之后，再采用工具（Axure RP）参照手绘原型制图。在需求设计阶段，最终交付物是原型。之后，开发团队和UX设计师，会参照原型来开展工作。产品经理需要在这份原型里表达清晰产品愿景和一些注意事项，以免后续团队走偏。一般产品流程中，原型会与PRD文档一起作为产出物出现。

image.png

本文重点讲一下如何画出一份简洁、易懂的原型。

首先我们把原型分为三个部分：原型元素、元素注释、功能埋点。这三部分是绝大多数产品原型组成要素，若是本文没有涵盖的内容，读者可以根据具体场景个性化”增删改”哈，欢迎提出建议~

原型元素

1.原型元素主要包括三种形式：文字、按钮、图片等。

1.1元素分类：依据元素会否改变、可否操作又细分成了三类 展现元素、可操作元素、输入元素。

1.1.1展现元素（不会发生改变）:一般为：文字、图片等不会发生改变的元素。如页面标题、展示图片等。

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

a.按钮：如表单的提交按钮，内容点赞按钮，频道切换等。

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

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

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

元素注释

如果我们只是提供一张不加说明的原型图给研发人员，设计人员，他们是很难理解的。所以，我们需要加以注释说明，根据元素的类型和可能性不同场景下的状态，对相应元素加以注释，尽可能穷举元素的所有可能出现的状态及异常case。

2.1元素规范

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

2.2状态转换

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

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

2.3页面跳转

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

2.4交互说明

交互说明指用户的某些行为是否会对产品产生影响，如在查看产品的资讯第一个栏目时，在资讯区域从右向左滑动就会自动切换到下一个资讯栏目。类似这类的交互动作，如单击、双击、屏幕滑动等，如果你的产品对于这些交互有不同的表现，也要在原型中进行相应的注释。

功能埋点

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

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

原型实例分享

请参见本案例中，左边部分为原型图，右边为注解说明（部分有连接线），仔细的同学可以将每个注释指向对应区域。仅供参考。

image.png

............................................................................... The End.........................................................................

如需转载，请与作者联系，谢谢~