一份做原型的PRD文档规范模板

关注 Kevin和互联网产品经理们，一起成长

作者 l Kevin

来源 l Kevin改变世界的点滴

分享 l Kevin

01. 设计规范

设计规范详细阐述本规范的维度、要求和示例等内容，产品原型设计工作者应共同努力使用规范、维护规范和更新规范。设计规范更新是一个不断调整和丰富的动态过程，通过持续更新以符合公司产品原型设计的实际情况，保证专业性、规范性与实用性的统一。

设计规范在操作过程中，从强制性角度划分有4个级别：必须、推荐、一般和禁止。下文均有明确提示，如未明确提示的，则表示为“一般”。

本规范包括3个配套附件：

1. 产品原型设计模板-WEB.rp

2. 产品原型设计模板-Software.rp

3. 产品原型设计模板-APP.rp

1.1 页面结构

1.1.1 描述

页面结构指产品原型设计工作界面的目标产品的页面结构，页面结构由原型说明和产品原型2部分组成，各部分使用文件夹分隔（如果产品包含多个子系统，则需要创建多个文件夹分隔）。

原型说明是辅助说明内容，方便体验者快速了解产品的全貌，原型说明包括：修订记录、版本规划、业务流程、功能模块、交互说明和参考尺寸等页面；

产品原型是页面设计的主体部分，各页面严格按照功能结构拓扑或者任务关系拓扑，且命名必须使用“编号+名称”的形式，如：A-1-1-新闻列表，其中，A表示页面或任务编号，1-1表示层级，各部分使用“-”连接。

1.1.2 示例

1.2 修订记录

1.2.1 描述

产品原型通过评审，交付项目组后，如果进行后期维护，必须打上修订记录。每次产品原型修订，详细描述修订记录，修订类型：创建、新增、修改、删除。修订记录需要说明页面层级或编号以明确路径。

1.2.2 示例

▲图4-2产品原型修订记录

1.3 版本计划

1.3.1 描述
版本计划，需要简述软件简介，描述软件名称、定位、目标用户、子系统职责等基本信息。版本计划应该基于目标产品和产品目标输出，在产品原型中重点描述规划的版本号（如2.5.0）、特性和优先级等。

1.3.2 示例

1.4 业务流程

1.4.1 描述

业务流程是指产品的整体/全局业务流程，用于描述产品的业务场景。流程图要求：包含流程名称、角色/职责/系统名称、起始状态等；建议使用Visio/Axuer等软件绘制流程图；其中，子流程建议在中转页面中绘制。

1.4.2 示例

1.5 功能模块

1.5.1 描述

功能结构图即软件的功能拓扑图，是一种快速直观地展示软件功能的图示，建议使用MindManager、Xmind、Axure等软件绘制思维导图，以功能层级或业务流程为基准进行拓扑设计，或者使用Microsoft Office软件绘制也可。推荐思维导图工具：Xmind_7.5。

1.5.2 示例

1.6 交互说明

1.6.1 描述
全局性交互说明，如：弹窗、数据加载、暂无数据、404等；交互说明包括：事件名称、触发条件、适用范围和交互流程等，且辅助示例展示。

1.6.2 示例

1.7 参考尺寸

1.7.1 描述

注意参考尺寸是辅助产品原型设计的说明内容，不作为产品视觉设计依据。根据产品形态不同，产品原型设计参考尺寸如下：

1.WEB：

页面尺寸：推荐1600*900（min）px

版心尺寸：推荐1000*600（min）px

2.Software：

NO.1-推荐尺寸：1366*768PX（16:9）

NO.2-推荐尺寸：1024*768PX（4:3）

3.APP：

Phone:

NO.1-最小尺寸：320*570PX；

NO.2-推荐尺寸：393*700PX;

NO.3-最大尺寸：456*821X;

Pad：

NO.1-推荐尺寸：553*738PX（738*553PX）；

NO.2-最大尺寸：768*1024PX（1024*768PX）

1.7.2 示例

1.8 版权信息

1.8.1 描述
版权信息指产品原型的版权信息，即可凸显公司产品实力，又可防止产品原型被盗用。版权信息包括产品名称、版本号、产品经理和版权申明等内容。针对不同的使用场景，提供2种版权信息示例。

1.8.2 示例

图4-13版权信息

1.9 页面设计

1.9.1 描述

页面设计是产品原型设计的主体工作，一般依据需求文档进行页面规划和版面设计，不仅需要实现页面布局和内容展示，还需要实现页面的交互设计和需求标注等。

页面设计严格按照功能结构拓扑或者任务关系拓扑，且命名必须使用“编号+名称”的形式，如：A-1-1-新闻列表，其中，A表示页面或任务编号，1-1表示层级，各部分使用“-”连接。

页面设计要求菜单层级的链接和业务流程的层级跳转是有效的，保证主要页面之间交互的连续性，便于体验者浏览产品原型HTML；页面设计需严格遵循本规范定义的设计原则，以保证原型设计质量；产品原型设计应该在注重实用性的同时，考虑创新性。

1.9.2 示例

1.10 用例描述

1.10.1 描述

高保真产品原型设计重点在于交互设计，对象的交互用例设计必须遵循相互独立完全穷尽原则（MECE原则）。同一个对象用例超过2个时，必须对用例进行命名，建议保留用例编号，如：用例3；

1.10.2 示例

图4-16用例设计示意图

1.11 需求说明

1.11.1 描述

为了保证需求传递的一致性，页面的关键元件、用例、表单、按钮等按需标注需求说明。需求、用例、备注、提示等需求说明，推荐使用规范格式设计，如：1A，其中，1表示编号，A表示流程顺序；需求说明也可使用快捷方式如：TIPS：密码错误时，在密码输入框下方提示“密码错误”。需求描述的放置位置应当保持页面的美观。

1.11.2 示例

图4-17需求描述说明

1.12 中转页面

1.12.1 描述

中转页面一般是在产品原型设计过程中产生的，如：一级菜单=产品发布，二级子菜单1=产品列表，二级子菜单2=产品修改，由于产品发布页面并没有内容，所以产品发布页面就是中转页面。中转页面必须放置页面跳转的按钮，方便浏览。

中转页面大有可为，推荐在中转页面绘制子业务流程图、页面流程图（APP必须）、用例图、数据流图等需求类图示，加强产品原型的解释能力。

1.12.2 示例

图4-18子业务流程图

图4-19用例图

图4-20页面流程图

1.13 弹窗/浮窗

1.13.1 描述

页面交互如果涉及弹窗/浮窗提示的，必须设计弹窗/浮窗，且保证事件执行有效性和完备性，禁止出现弹窗点击没有反应的情况。弹窗设计禁止出现超过3层弹窗的情况！

弹窗设计主流的3种方式：弹窗没有背景效果；弹窗附带页面背景遮罩效果；弹窗附带阴影效果。

浮窗设计一般是显示后自动隐藏，少数隐藏后还执行事件。

1.13.2 示例

图4-21弹窗示意图

图4-22浮窗示意图

1.14 菜单设计

1.14.1 描述

Axure自带元件库提供了树形菜单、横向菜单和纵向菜单3种菜单设计方案，能够满足多数使用场景。如果产品需要，建议自定义创新菜单设计。

菜单设计，必须实现悬浮、点选、选中等交互效果，推荐与母版嵌套使用，方便后期维护，禁止出现多个页面菜单一致的情况下，不使用母版。

1.14.2 示例

图4-23Axure自动的3种菜单

图4-24自定义菜单设计（1）

图4-25自定义菜单设计（2）

1.15 表单设计
1.15.1 描述
表单设计应用于多项数据排版和展示的场景，如：机构用户注册、标识符申请、产品发布等。推荐使用表格进行设计表单设计，包括：查询表单、数据填写表单、查看详情表单等。

1.15.2 示例

图4-26查看详情表单设计示例

图4-27修改信息表单设计示例

图4-28查询列表表单设计示例

1.16 提示设计

1.16.1 描述

产品原型的精细程度，除了合理的页面布局和完备的交互外，很大一部分是交互提示和交互提示的系统化整理。避免，遇到一个默认提示或者报错，临时定义。时间长了，数量多了，没有办法跟踪和管理。一方面，产品原型中穷尽用例和提示语，另一方，推荐使用Excel文档形式进行跟踪。

1.16.2 示例

图4-29表单提示语规范参考图

图4-30交互提示语规范参考图

图4-31错误提示产品原型示例

1.17 动态面板

1.17.1 描述

动态面板是产品原型设计中，非常重要和常用的元件。动态面板必须命名，推荐使用英文名称或拼音；状态数量超过2个时，必须对状态进行命名；同一个页面动态面板数量推荐控制在3个以内；同一个动态面板，状态层级数量推荐控制在3层以内。

1.17.2 示例

图4-32动态面板示例

1.18 母版设计

1.18.1 描述
页面通用模块/组件，建议使用母版制作。包括但不限于：页面头部和底部、功能菜单、属性面板等版式固定的区域。
温馨提示：各种元件包括动态面板支持与母版嵌套使用。

4.18.2 示例

图4-33母版示例

03. 输出

产品原型设计活动中，产品经理负责输出高保真原型，必要时还需输出低保真原型。高保真产品原型设计流程和规范应遵循本规范。

04. 质量与评价

对产品原型设计活动进行测量，并将测量结果用于确定软件研发活动的状态和产品经理考核。产品原型测量依据：

1.需求符合度：评判产品原型表达的需求和功能与需求文档定义一致性或符合程度；

2.产品原型设计质量：参照本规范和产品原型设计模板对比产品经理输出的产品原型源文件，评判其规范符合度以及设计质量；

3.产品原型设计效率：综合考虑产品原型的页面数量、控件数量、交互复杂度等，对比产品原型设计的时长进行考量；

4.产品原型体验满意度：体验产品原型输出的HTML页面，评价用户满意度。

以上就是今天的分享