产品原型设计(项目原型设计)

产品原型的标准化旨在清晰表达产品设计理念、功能交互和执行逻辑，提高产品、R&D、UI和业务部门之间的沟通效率。主要讲解产品原型设计的一些标准和规范，以及实际操作方法，与大家分享。

01制定产品原型设计规范的目的和意义目的:产品原型的标准化旨在清晰表达产品设计理念、功能交互和执行逻辑，提高产品、R&D、UI和业务部门之间的沟通效率，避免因信息不对称和信息传递的遗漏和不足而导致整个项目进度的延误。

让开发和设计团队提高设计开发质量及工作效率。统一设计规则，降低各方沟通成本。进行模块式的设计，降低开发成本和减少开发时间，加快产品迭代上线的速度。改善交互设计的水平，提升用户的使用体验。

对于个人来说，标准的产品原型图可以提高自己的专业水平、标准和统一性，团队和协作单位内部的沟通成本也可以降低，可以减少扯皮、重复沟通等纠纷，花更多的时间思考产品，避免不必要的纠纷。

02 原型保真度比较1. 评价维度

一般来说，有五个维度来衡量原型的保真度。

一、视觉精细化的程度

原型和最终产品有多相似？低逼真度的样机可能是手绘稿，而高逼真度的样机会精确到像素，看起来和真的产品没什么区别。

b、功能的广度

原型可以包含多少功能？一个低保真度的原型关注最重要的任务，而一个高保真度的原型会有更详细的任务。

c、函数的深度

每个函数可以原型化到什么程度？一个低保真的原型，可以从一个页面跳到另一个页面，在已有典型数据的情况下，告诉你大致的用户流程。高保真原型允许您输入数据，并知道在进行不同输入时影响输出的差异。

互动的丰富性

原型中会有多少交互？低保的真实原型可能相当简单，用户使用时没有任何反馈。高保真原型将考虑动画效果、表单验证以及所有用户和产品之间的直接细节交互。

E.数据模型的丰富性

您的原型中应用的数据有多丰富？最低保证原型使用有限的典型数据设置，显示最常见的用例。高保真原型会包括边缘情况，比如很长的用户名(用户名长度要减少)、没有数据(提供默认头像)、第一次使用(使用空白态)、或者数据量特别大(使用翻页或者过滤)。

根据还原程度，即与最终成本的保真度，产品原型设计大致可分为低保真度、中保真度和高保真度原型。我过去基本做到了保真，这也是大部分公司的要求。不同的团队，不同的个人，对保真的理解可能不一样，只是为了个人观点。

2. 保真度

一、低保真实原型

展示软件的关键功能和基本交互流程，使用简单的线框进行加工。具有制造成本低、速度快、修改方便的优点，在功能简单、团队沟通顺畅的情况下使用。

中等保真度原型

保真度适中的产品加入了更多的细节，把软件的交互设计得更加细致。比如照片中有对应的内容照片，标签页中有具体的内容，差异化的按钮颜色，动态模拟。大多数情况下，保真度适中的原型就足够了，既能展现软件的功能特点和交互过程，又有一定的界面细节。除此之外，用户可以充分体验最终的产品，这可以验证产品的可行性，并确保在后期的开发过程中不会发现重大错误。缺点是会花更多的时间。

C.高保真原型

几乎完全按照最终产品做出来的原型细节丰富，包括产品的所有功能和详细的交互细节。做一个高保真的原型，可以显著降低沟通成本，原型更加精准精致。但是保真度越高，开发的时间和精力就越多，一旦修改就更费时间。

d、总结各种保真的优缺点

03主流设计工具墨刀:设计界面原型和交互(目前使用)。墨刀在线协作优势更明显。在保密方面，公司可以统一购买账号，尽量避免使用私人账号，并对权限进行一定的限制；

Axure:更加保密和强大，但在线协作稍差。

Xmind:绘制功能结构图(main)；

Visio:绘制用户使用流程、系统业务流程、功能架构等。

字:写PRD当开发周期允许时；

Excel:项目时间计划管理，项目会议纪要输出；

04原型大纲一个完整项目的产品原型需要有一个“大纲”，它包含以下内容:

1. 产品的版本概况

一、版本记录

清楚地记录对原型的添加、删除和更改的内容和日期，

B.功能点列表

列出原型图的功能点，明确开发任务和优先级。对于分阶段开发，但原型已经完成，标记不同功能开发的阶段，如“第一阶段”和“第二阶段”。

2.功能结构图a .用xmind绘图可以让开发人员了解整个功能框架和信息架构，有利于预估开发时间。

B.功能结构图中使用的功能和页面名称应与“功能列表”一致。

示例:

05界面原型及逻辑解释A、原型界面设计

画产品原型的时候，按照思维导图的产品规划，先搭建框架，做主页面菜单。菜单支持多级，每个页面的层级关系需要清晰，但一般不要超过3级到4级。等级太多意味着用户使用层次深，这不是一个好办法。。

设置母版，对于产品中的通用功能和模块，设置统一的母版，提高后期原型绘制的便利性，比如统一调用母版，统一修改母版。

B.逻辑交互的解释

包括数据逻辑和操作交互，主要面向开发者和UI设计师。描述应该有利于功能逻辑的实现”，例如，以下两种方式的准确性

一、点击购物车结算按钮，跳转至订单支付页面。

二。点击购物车结算按钮，需要判断商品是否选中，是否有货。a、如果没有选中商品，会弹出一个窗口提醒你“你没有选中商品”。b、如果有选中的商品，会跳转到订单支付页面(针对不同的点击效果，需要针对不同的跳转做多个按钮)，可以进一步说明不同跳转的切换效果，比如左右滑动或者直接跳转。

对比以上两种方式，第二种更清晰，也会降低沟通成本。

c、设计说明

如果对设计有特殊要求，也需要说明。比如这款阿勇的付费色一般比较鲜艳饱和，而专业色一般是蓝色，或者有设计可以参考，配色等。但是如果对设计或者专业知识没有好感，建议尽量让设计师来处理。毕竟专业的事情还是留给专业的人去做。

06 交互用例

为主要的交互控件设置交互用例在墨刀中相对容易实现，比Axure简单，只需要连接即可。完美的互动有助于形成清晰的理解需求。

07 原型详细规范1. 页面层级树及每个页面命名的规则

A.在页面层级树的第一个顶层菜单中设置并填写【产品名称】，下面可以添加更多层级；

B.版本号——子页面用于管理，页面名称命名为:版本号+[版本号]，如版本号v 1 . 1 . 1；；

C.修订记录——子页面用于管理产品当前版本的原型设计的修订记录——这在文章的前一部分已经解释过了；

D.功能列表描述——子页面用于管理，表格用于说明本产品原型中需要的主要内容和功能；

E.正式原型零件:

一、产品页面层次，一般最高不超过4层；

二。产品模块，命名规则为“[序列号]+[产品模块名称]”；

三。产品功能级别页面，命名规则为“[序列号]+[产品页面名称]”；

命名规则类似于文章章节的规则。

2. 墨刀母版制作与引用

详情请参考墨刀大师制作:https://modao.kf5.com/hc/search/results/?. type = kb & amp；关键字=%E6%AF%8D%E7%89%88

重用组件/部件，必须使用主设计，然后将它们添加到页面中。添加母版时，产品背景需要“位置锁定”，防止原型绘制过程中背景频繁变化；

页面母版的名称可自定义设置：“序号+自定义名称”；全局性的母版和局部使用母版，需要在命名规则上做区分，尽可能将众多页面都会使用到的标题（如小程序的头部）、元件（如日历）以及交互组件放置在母版中；3. 页面位置和尺寸规范

a、PC默认尺寸是墨刀的【Web/TV】类别，APP/H5/小程序默认尺寸是iPhone6或者某个特定尺寸，后期原型会用到；

B.APP的框架设计不区分Android和IOS，只在交互用例的设计上；

08 流程制作规范

“流程页”设计制作了用户对该功能的使用流程，一般采用车道流程图，百度搜索即可绘制。总的来说是二维的方式，横轴是作用，纵轴是过程进度。在流程旁边，给出必要的文本注释以进一步阐述流程。

示例:

09页描述1。交互设计和描述要符合产品原型规范的要求，要用能更好表达原型的，这样产品原型上的所有功能块都可以

准备好用户的操作场景，确保所有功能的动态面板交互、点击效果、页面跳转链接等交互效果准确无误。

并准确描述页面的交互效果需求。可以在页面旁边添加“点击交互效果需求”的描述，描述页面中各个功能的操作交互需求。

示例:

2.页面功能和逻辑的标记。为了方便开发者查看和理解，在产品原型中说明了功能的实现逻辑或使用限制。对页面的功能点进行编号，并对相应的编号进行说明和注释。

示例:

3.页面流程图项目的整个页面之间交互的流程逻辑。这在墨刀上有一个工作流程。点击进入后，选择需要显示流向的页面，然后可以选择:A、每个页面与整个页面的交互方式；b、所有控件的交互流程都是通过两种方式自动生成的。第一种方式对于查看页面的主要交互方式更清晰。

这是另一张页面流程交互流程图，按照业务流程划分，哪些页面会按照一个业务流程从头到尾走一遍。下图是一个例子，对于订单相关的流程交互，从进入APP或者网站首页开始，浏览商品，搜索，下单等。，直到最后支付成功，中间还有异常流程需要说明。

以上是《产品管理流程与规范3-产品原型设计》的内容，主要讲解了产品原型设计的一些标准和规范，以及实际操作的方法和手段。

下篇讲讲PRD文档的写作标准和方法。如果你喜欢文章，可以收藏关注。作者水平有限，有错误。请互相讨论。

本文由@markzou原创发布。大家都是产品经理，未经作者允许，禁止转载。

题目来自Unsplash，基于CC0协议。