原型页面PRD浅析:交互、注释一个不落

产品经理就业特训营,专门为大学生和准备转型做产品的人量身定制,60天线下培训,包就业!了解详情

之前有分享过一篇分享,关于我的PRD文档结构介绍《我的三年产品基本功(PRD)|将交互、业务逻辑、需求字段撰入文档》得到了不少朋友们的支持,但除了用word之外,不少产品工作中因为时间、项目进度、团队氛围等种种原因每个PM在工作中,梳理PRD都会用原型或word进行梳理,今天将自己的原型PRD进行分享,方便大家根据自己的需求来选择性制作。

我需要的原型PRD控件

首先说明过下常用的原型PRD控件,包括交互说明我都会采用以下控件进行说,就算是复杂的交互说明,也可以通过以下控件进行注释和说明。

(1)注释面板

(2)注释说明

(3)边界线

(4)标注点与注释点

以上控件都是自己做的,我已在文末附带下载地址,方便各位朋友下载。

1. 整体效果

通过使用以上体系,整个原型的标注与说明效果如下,附带交互和注释说明。

1.1 页面交互与注释说明

1.2 页面prd

以上是按照页面交互与页面PRD进行分开描述,那么接下来就为大家介绍下,如何去进行描述相应的字段或功能。哪些地方需要注释?哪些地方需要说明异常情况?

2. 关于页面的说明

在这里,最重要的就是页面路径;页面的路径表示当前的操作会让该页面走向那里,会回到那里;让开发、测试、设计人员是否需要考虑全局统一、是否当前的页面在测试版本中有错误,也能帮助PM去验证其页面的走向是否符合用户预期。

标明每个页面的走向,这里需要值得注意的是,关于页面的命名也要注意。0-1中,很多功能体系涉及到无数个页面,因此我们以功能的分化,让页面的列表更加清晰

将页面进行分级后,按评审的时候也可以将页面一个页面的进行评审,一个页面一个页面的过,保证不会遗漏或者不会出现大的问题遗漏。

当然,相信不少朋友采取以原型页面跳转来进行页面表示,保证设计或开发可以知道整个功能的页面情况是怎么样的。

但是这里有疑问的是,往往我们从0-1的时候,页面太多不能在一个地方把所有的页面全部展示出来,为此我建议按功能分页面,比如上面说的以功能A进行区分,将页面进行单独的链接展示

【按照登录功能来表示页面跳转】

3. 页面功能说明

【我的标注说明】

以上是对ICON的标注说明,这里需要注意的是“状态”标注。

如果一个ICON因交互行为会有不同的状态或条件(如登录状态、未登录状态)那么需要在标注著名。

【标注说明不同状态】

状态可以通过当前的页面条件或者用户交互状态,页面条件在不同的产品业务有不同的判断方式。

而交互方式往往就以下几个:

根据不同的交互行为,有不同的提示,可以通过这样的方式进行表达。如果交互行为涉及到不同的页面,可以用如下表达方式。

【交互表达】

很多朋友说,产品经理应该把交互的效果尽可能去完成。但是真正的在工作中,其交互的效果因为第一费时间,第二需要不断的去修改、修正。

如果一张图就能表达事情,为什么要费这么多周折去做一个视频呢?

善用当前的交互状态与页面切换,加上文字描述,可以很快的让开发或设计同事知道你的意图或效果。

在移动端的交互形式就那么固定,安卓随着版本不同可能会有一些区别,但大体用户都有感知,有使用过。IOS因为系统的普及和更新覆盖率远超过安卓,因此IOS的交互行为也同样能够理解。

至于最难的,就是WEB的交互形式,这一块原型中的说明也可进行完善。

KEVIN常用部件库下载地址:

链接:http://pan.baidu.com/s/1bp6fziB 密码:9127

#专栏作家#

kevin,微信公众号:Kevin改变世界的点滴,人人都是产品经理专栏作家。曾从事腾讯云产品设计与中兴通讯产品研发,现金融高级产品经理一枚。欢迎交流~

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

题图来自 Pexels,基于 CC0 协议

祝给予赞赏的伙伴,2017年发大财!
4人打赏

评论( 3

写下你的想法
  1. PM from B2B company.

    在原型里面做标注,是程序猿最喜欢看的文档之一

    回复
  2. 初入产品一直保持一颗谦卑的心,多学多看多

    您好,您发的帖图片很不清晰。能加个好友,像您请教一二吗?

    回复
    1. 回复

      个人微信:574319420 加好友请备注!

推荐阅读