如何绘制贴合需求的产品原型

如何绘制贴合需求的产品原型

上一篇分享了B端产品业务流程梳理以及方案梳理过程，本章将分享产

品原型设计的方式方法。产品原型绘制是产品经理必备的基础技能，是

将产品需求转换成具象的图形化系统页面的过程，本篇最后的章节也会

分享一些B端产品原型绘制的技巧。

一、什么是产品原型

产品原型是产品需求解决方案的可视化表达。在软件产品实施开发前,

以较少的时间/人力成本，根据产品解决方案设计产品概念模型，图形

化呈现产品流程、功能逻辑、页面交互等关健信息，从而达到验证产品

需求,对产品最终效果达成统一理解的目的。

产品原型分类：

1）按原型与产品真实效果的相似度分类

按与产品真

通过较短的时间成本和较低的人力成本，以更加生动形身

设协同，对产品

线框图低

原型的展示效果、交？

低

通过线框+文字等简单的形式，表通过一部分视

现产品所需的基本功能生动地形式展

验证产品需

12:00

0

•订单:

MABS

|雄索分配

线拿王先生

|线索领迸

■选方式

■速记事

下次■透时

■■

一般情况下：框线图、低保真原型图会由产品经理进行绘制；高保证设

计图则由UI设计师、美工设计师进行设计完成。

2）按产品平台分类

按平台分

手机就电脑端

适用于手机叩p、小程序、H5应用适用于网页端、客户端等

等平台的产品原型型设计

11：53M♦C

・・

tt&KBUMHD

•o・・1A

g«l63-6*QK*个△*・-&，«*«ft

tt«iSEW6,

n.2«Bara.■关幡・求

■MI>.

B■双十一,MWWIORra

•J・■♦・，

I力95闲户籍a**】■产M

i«anw!«Haa

Q

M

二、绘制产品原型的目的

1）验证.检测产品需求与方案

产品原型的绘制是将产品需求解决方案图形化的过程，同时，也是对产

品需求解决方案〃自省〃的过程。通过原型的绘制过程更加深入的探究

产品需求解决方案，细化解决方案，从而验证方案的合理性及可落地性,

对方案进行优化改进。

2）与需求方达成需求及产品呈现效果的理解一致

产品原型可以辅助与需求方完成产品需求的沟通与确认。文字描述的产

品需求、解决方案往往只能达成意识形态上的理解统一，然而产品最终

是如何呈现的，解决方案最终是如何落地的，没有办法仅通过文字就能

达成理解一致。即使基于一致的需求理解、方案理解，不同的人对于产

品未来实现效果的想象也可能大相径庭。

通过可视化的产品原型设计能够直观地呈现产品功能及页面交互，帮助

展现产品需求未来在产品功能设计上是如何体现的、如何完成业务流转

的，帮助与需求方在实际产品效果层面上达成理解基本一致。

产品原型能够在产品规划阶段帮助拉平各角色人员对于产品需求的理

解、产品实现效果的期待，减少后期因理解与期待不一致，导致的调整

及返工。

3）团队内部高效协同

产品原型是团队内部对于产品需求以及产品实现效果达成一致理解的

辅助工具。

•设计团队：基于产品原型（低保证原型、框线图）了解产品界面

以及基础交互，辅助完成产品UI设计、产品交互设计。

•开发团队：基于产品原型了解产品功能，产品流程，明确产品需

求。

•测试团队：基于产品原型了解产品功能需求，产品交互行为，辅

助梳理产品测试内容。

三、产品原型的绘制流程

产品原型绘1

2.梳理系统流程

基于业务流程植理系统流程，明确

系统操作流程、系统基础交互等

L明确业务范围3.绘制界面J

明确业务范围，梳理业务流程，明明确各功能模块需要B

确业务流程涉及哪些功能模块逻辑、页面交

1）明确业务范围：明确业务范围，梳理业务流程，明确业务流程涉及

哪些功能模块

对于业务流程的梳理,需要明确业务目标范围，梳理涉及的各业务人员

的任务以及各彳壬务之前的关系。

详细内容可查看上一篇关于产品梳理的分享。

2）梳理系统流程：基于业务流程梳理系统流程，明确系统操作流程、

基础交互

基于业务流程梳理系统流程，明确各角色未来在系统中需要完成的动作。

详细内容可查看上一篇关于产品梳理的分享。

3）绘制界面原型：明确各功能模块需要的界面、功能逻辑.页面交互

等

①明确各模块需要哪些页面，各页面需要哪些元素组成。

对于各功能模块，基本会涉及三大类页面：列表页、创建页、详情页。

1.列表页：展示功能模块的全部数据。一般包含：搜索项、功能按

钮、数据列表、统计项、分页等。

2.创建页：功能模块的新建、编辑数据的页面。一般包含：对象字

段、输入项、功能按钮等。

3.详情页：展示单条数据的详细信息。一般包含：数据详细信息、

功能按钮、关联对象的数据列表等。

②明确各功能的基木交互与逻辑

•页面的0牌专逻辑：功能模块各个页面如何能够跳转切换，如：如

何从列表页进入详情页，如何进入数据编辑页等。

•按钮的功能逻辑：点击按钮后需要实现什么效果，如：点击按钮

后跳转页面、点击按钮后更新数据等。

•页面排版：页面涉及的各种元素如何排布能够达到较好的交互效

果、特殊的逻辑控制，如：将重要的字段置于上方，引导用户优

先填写。

4）原型设计评审：组织项目相关成员，基于绘制完成的原型进行原型

评审

原型设计评审目的是为了让项目相关人员（包括需求提出方、开发人员、

测试人员等）对项目产品、需求达成一致理解，避免产生分歧。同时，

不同人员基于对需求的理解，对于产品的原型设计提出优化设计建议。

对于产品经理，产品原型评审不仅仅只需要准备产品原型设计稿，为了

对产品原型、需求达成理解一致，还需要准备产品流程说明、复杂功能

的功能说明、功能逻辑规则等。

5）优化原型设计：基于原型评审反馈对原型进行优化调整

产品原型评审后，不同角色的人员对于产品原型会提出不同的设计建议,

产品经理需要梳理这些设计建议，对产品原型进行优化设计。优化设计

后，可能会需要再做一次补充评审。

值得注意的是：这里将不同人员的反馈均称之为〃建议〃。既然是建议，

那么既可以采纳也可以不采纳，对于产品经理而言，需要对这些建议做

判断，而不是一味地听从。产品经理需要对方案及产品负责，任何改动

都可能牵一发而动全身，采纳修改时，不仅仅考虑是否能带来更好地体

验，更需要考虑对于整体流程是否有影响。

四.B端产品页面的绘制技巧

前面提到，对于B端产品，页面一般分为三大类（创建页、列表页、详

情页）,当然还会有一些特殊页面，比如：数据分析页、首页等。

下面将分享创建页、列表页、详情页、数据分析页的原型绘制技巧，

1.创建页：数据的创建、编辑页面

创建页一般包含数据字段、输入项、功能按钮。数据字段指创建时需要

填写的字段；输入项指填写数据的表单字段样式，如：单行输入、多行

输入等；功能按钮指表单的按钮，如：提交、保存、取消等。

1）数据创建时需要填写哪些信息取决于创建人能获取/希望获取到哪些

信息，而非该模块有多少信息。

以CRM的客户为例，在初次接触获取客户资料时，一般能知道客户的

名称、性别、年龄等信息，那么这些信息在客户创建时则需要由录入人

员完成填写。而比如客户的风险投资信息、个人习惯等仕初次接触时并

不一定能获取，那创建时是否需要填写则视业务实际情况来决定了。

2）对象数据创建时，考虑是否需要同步创建关联对象信息。

主对象创建时，需考虑是否需要同步创建关联对象信息。如：客户创建

时，同步可以创建客户的联系人信息、创建订单头时同步创建订单明细

彳日息、。

3）关键信息要必填，重要信息置于顶部。

数据创建时，关键信息（即：必须收集的信息）可设置成必填，强制要

求用户填写。

重要信息，如：必须收集的信息、希望录入人填写的信息，置于顶部考

前的位置,引导用户有限填写。越次要的信息置于越靠近创建表单底部

的位置。

4）数据填写的表单样式.是否设置默认值等，直接影响用户体验和数

据填写完整度.准确率。

数据创建时，需要灵活应用不同的填写样式，提升用户体验；如单选字

段，通过下拉列表或者时数据项点选（单选样式）的方式均可以完成数

据录入，但是下拉列表不直观，没办法一眼看清楚有多少选项。数据项

点选的方式能直观看到所有选项，但是比较占页面空间。对于数据选项

少且收集的字段信息较为重要，采用数据项点选的方式，如：客户等级

（重点客户、一般客户、非重点客户）；对于选项多的采用下拉列表的

样式，如：客户行业（快消、服务、制造业、建材、建筑等）。

数据创建时，是否设置默认值，也是直接影响用户体验的一环。数据默

认值可以减少用户的信息录入量，提升录入效率。但是有些场景下，并

不能胡乱添加默认值，如：需要收集的关键信息，且该信息需要用户确

认，这种情况下，不设置默认值且必填，可以引起用户重视，提升数据

填写的准确性。

5）创建字段信息多且复杂时，分层分类展示。

通过小标题可对创建页的字段进行分级分类展示，做到页面有条理，展

小不紊

创建页用

客户新堵X

1¥地信息

K户M・：帆•:

■«w°VV

客户分困：V行♦：V

MAAH：*3f1•••客户聚■:V

・:电m：MtA

1开票信息

开户■b:Wh*?：MA

«nA：•仰人号㈣：mx

畜户,像：

J

2.列表页：展示功能模块的全部数据信息

列表页一般包含：搜索项、数据列表、功能按钮、统计项等。搜索项指

数据的查询搜索内容，便捷查询对象数据；数据列表指展示对象多条数

据及数据字段信息的表格；功能按钮指对象的功能操作按钮，如:新建、

提交等；统计项指多条数据的汇总统计，如客户列表上支持统计选择的

客户的交易总金额等。

1）数据表格字段并非对象数据所有字段均需要展示，主要呈现数据的

关键信息。

数据列表的表格并非需要展示对象的所有字段信息，一个网页端页面的

宽度有限，当数据列表展示的信息过多时，需要无限拖动水平滚动条,

这会大大影响用户体验，用户也不愿意一直拖动滚动条。所以，数据列

表的表格主要呈现对象数据的关键信息，同时，越重要的信息展示在越

前方，尽量无需拖动滚动条就可以查看。

2）数据表格字段并非仅仅展示当前对象字段信息，可展示关联对象的

字段信息、数据统计信息等。

数据列表展示的字段信息并不仅局限于当前对象的字段信息，还可以展

示关联对象的字段信息、关联对象的统计汇总信息等。如：合同列表除

了展示合同的基础信息外,还可以展示合同客户的客户信息，如：客户

编号、客户名称等，能否方便查看人同时查看；客户列表除了展示客户

基础信息外，还可以展示客户关联对象的统计信息，如：客户订单的总

金额、合同的签约总金额、客户最近一次拜访日期等。

3）数据搜索项需有效支持用户便捷查询相关数据。

数据搜索项的设置并非简单地将对象字段设置成搜索项即可,而需站在

业务场景下，考虑用户可能存在的搜索场景，再去设定搜索项，有效地

帮助用户检索数据。如：客户数据的搜索，除了查询客户名称、客户电

话等信息，用户可能还会想便捷检索出我的重点客户有哪些，哪些客户

已经长时间未跟进了，哪些客户还有欠款未付等，基于这些场景，可能

客户就需要按客户等级搜索、按最近跟进日期搜索、按统计欠款金额搜

索。

4）预定义的分类列表可以提升用户的体验度。

对于数据列表，可以做预定义的列表分类，用户无需搜索即可便捷查询

数据。如客户列表，除了展示所有的客户数据列表外，还可以预设置一

些便捷的数据列表，如：我的重点客户列表、超过7天未跟进的客户列

表、欠款的客户列表、待签约的客户列表等

5）功能按钮需考虑单选按钮还是批量按钮。

对于数据列表页的按钮，一般可以置于列表顶部或者置于数据列表的操

作列中。一般情况下，操作列中只会放置单选按钮，点击后能操作对应

的数据记录，如：编辑、删除等。列表顶部的按钮则可能放置单选按钮、

批量按钮、无需选提数据直接可点击的按钮，如新建等。

列表页却

XXXCRM系统

A

”用8)冲(2«)叫到・(i2)档皿zio)en®•

A

[|尼■入IIQ■灾1

V@J.Z2.06.QL.AUZJBJ1

A丁

KCM»AHMW用・n・«wn«maAHMMean

AMIO

1Hnt»HMOOt9MSIS2022sM2”MMl

.3rm.

2MTmillJCQOOIMlttis»aoeu2”MMl

>Hmnmooooi1MKIMS15M22M142■■MMt

•xnewiiomiXMCtU皿822■'MMl

3Mnt»H2MOOlMSISTO2MU2mtMMl

。nnmiIMOOOIMSB20220tg2BigMM

?nntwiiomiorimw^cmootM00IS2O22WU2.■MMl

•Mnewi2oooei以3i;・IMMG-M2ft2i(MIS2O22MU23MMl

•Mueniimoo，202101ISA220SU2"MMt

wxneniiwoointuuW^C1208—XM813rnaceue■.MMI

it■a。iaimmmiceilM22W142.■MMl

UMn«27l11000012010011»sMi42maMM

UucuxiW^C1)QM2022CtM23MMl

14wne&ii200001必813I0220M42"MM

nano.ftMMtA・itM■10，•IQ(Ml•<t114>ttt|9■

3.详情页：展示单条数据的数据详细信息

要展示内容、个人喜好的样式来决定。但是，一般情况下，详情页会包

含：单条数据记录的详细信息、关联对象的数据信息。

1）数据的关键信息，突出展示，便捷查看。

对于数据的关键信息，突出展示，方便用户可以直观地一眼获取到，包

括：关键字段信息、统计汇总信息等。如：客户信息详情中，客户名称、

手机号等关键信息需要在详情页可轻松查看到，客户标签、统计信息（如：

交易金额、客户等级等）也可以突出展示，能方便查看。

2）主对象的关联对象信息可分TAB展示，便于用户查看与该数据关联

的相关信息。

主对象的关联对象信息分tab展示，方便查看关联数据信息。如：CRM

中常提到的客户360视图，即是在客户详情中，可以查看到当前客户相

关联的所有业务信息，客户的合同、订单、联系人、报价、沟通跟进历

史等等。

3）适当增加统计分析数据，可辅助展现数据详情信息。

详情页首页可适当增加一些数据分析统计报表，辅助展示数据详情信息,

可更直观地、形象地展示数据档案，如：合司详情可增加合同订单交付

情况、合同回款情况的统计分析，使用可视化图表进行呈现，能够让用

户更方便地查看到当前合同的信息。

详情页科

XXXXXCRM系统

A

I9kCON2208230001•XXXXX有阳公町

•sm-X，MMI：Mate：tMtaaM：—■■■・w

3TWWAM6RV130,000V100,000VM.0002022.0ftIS202X0«.14

・MMTC

▲个人・evms6・产aamw#

1

MAHS'*•1•户：《MM§：

CONA220U3000131S423XXXX，I■公期944M28045302470

B.：mkAN：OAB：

E・含网■无小“小”

V130.000V120ao00V120,000VM^OO

JF••:MM：Mm■:MU*