商品蓝本绘出是商品副经理必不可少的此基础专业技能，是将商品市场需求转化成风格化的GUI控制系统网页的操作过程。怎样绘出吻合市场需求的商品蓝本呢？责任编辑译者撷取了商品蓝本结构设计的形式形式，一起来自学呵呵吧。

上一则撷取了B端商品业务流程梳理和计划剖析操作过程，结语将撷取商品蓝本结构设计的形式形式。商品蓝本绘出是商品副经理必不可少的此基础专业技能，是将商品市场需求转化成风格化的GUI控制系统网页的操作过程，第一集最终的段落也会撷取许多B端商品蓝本绘出的基本功。

一、甚么是产品蓝本

商品蓝本是商品市场需求软件控制系统的建模抒发。在软件商品实行合作开发前，以较少的天数/物力生产成本，依照商品软件控制系统结构设计商品设计模式，GUI呈现出商品业务流程、机能方法论、网页可视化等关键性重要信息，进而达至校正商品市场需求，对商品最终效用达成一致标准化认知的目地。

1）按蓝本与商品真实世界效用的相近度展开分类

通常情况下：框技术面、低保真蓝本图绘由商品副经理展开绘出；高确保结构草图则由UI结构雕塑家、美工结构雕塑家展开结构设计顺利完成。

2）按商品网络平台展开分类

二、绘出商品蓝本的目地

1）校正、检验商品市场需求与计划

商品蓝本的绘出是将商品市场需求软件控制系统GUI的操作过程，与此同时，也是对商品市场需求软件控制系统“反思”的操作过程。透过蓝本的绘出操作过程更为深入细致的探求商品市场需求软件控制系统，明晰软件控制系统，从而校正计划的必要性及可破冰性，对计划展开强化改良。

2）与市场需求方达成一致市场需求及商品呈现出效用的认知一致

商品蓝本可以辅助与市场需求方顺利完成商品市场需求的沟通与确认。文字描述的商品市场需求、软件控制系统往往只能达成一致意识形态上的认知标准化，然而商品最终是怎样呈现出的，软件控制系统最终是怎样破冰的，没有办法仅透过文字就能达成一致认知一致。即使基于一致的市场需求认知、计划认知，不同的人对于商品未来实现效用的想象也可能大相径庭。

透过建模的商品蓝本设计能够直观地呈现出商品机能及网页可视化，帮助展现商品市场需求未来在商品机能结构设计上是怎样体现的、怎样顺利完成业务流转的，帮助与市场需求方在实际商品效用层面上达成一致认知基本一致。

商品蓝本能够在商品规划阶段帮助拉平各角色人员对于商品市场需求的认知、商品实现效用的期待，减少后期因认知与期待不一致，导致的调整及返工。

3）团队内部高效协同

商品蓝本是团队内部对于商品市场需求和商品实现效用达成一致一致认知的辅助工具。

三、商品蓝本的绘出业务流程

1）明确业务范围：明确业务范围，剖析业务流程，明确业务流程涉及哪些机能模块

对于业务流程的剖析，需要明确业务目标范围，剖析涉及的各业务人员的任务和各任务之前的关系。

详细内容可查看上一则关于商品剖析的撷取。

2）剖析控制系统业务流程：基于业务流程剖析控制系统业务流程，明确控制系统操作业务流程、此基础可视化

基于业务流程剖析控制系统业务流程，明确各角色未来在控制系统中需要顺利完成的动作。

详细内容可查看上一则关于商品剖析的撷取。

3）绘出界面蓝本：明确各机能模块需要的界面、机能方法论、网页可视化等

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

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

② 明确各机能的基本可视化与方法论

4）蓝本设计评审：组织项目相关成员，基于绘出顺利完成的蓝本展开蓝本评审

蓝本结构设计评审目地是为了让项目相关人员（包括市场需求提出方、合作开发人员、测试人员等）对项目商品、市场需求达成一致一致认知，避免产生分歧。与此同时，不同人员基于对市场需求的认知，对于商品的蓝本结构设计提出强化结构设计建议。

对于商品副经理，商品蓝本评审不仅仅只需要准备商品蓝本结构设计稿，为了对商品蓝本、市场需求达成一致认知一致，还需要准备商品业务流程说明、复杂机能的机能说明、机能方法论规则等。

5）强化蓝本结构设计：基于蓝本评审反馈对蓝本展开强化调整

商品蓝本评审后，不同角色的人员对于商品蓝本会提出不同的结构设计建议，商品副经理需要剖析这些结构设计建议，对商品蓝本展开强化结构设计。强化结构设计后，可能会需要再做一次补充评审。

值得注意的是：这里将不同人员的反馈均称之为“建议”。既然是建议，那么既可以采纳也可以不采纳，对于商品副经理而言，需要对这些建议做判断，而不是一味地听从。商品副经理需要对计划及商品负责，任何改动都可能牵一发而动全身，采纳修改时，不仅仅考虑是否能带来更好地体验，更需要考虑对于整体业务流程是否有影响。

四、B端商品网页的绘出基本功

前面提到，对于B端商品，网页通常分为三大类（创建页、列表页、详情页），当然还会有许多特殊网页，比如：数据分析页、首页等。

下面将撷取创建页、列表页、详情页、数据分析页的蓝本绘出基本功。

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

创建页通常包含数据字段、输入项、机能按钮。数据字段指创建时需要填写的字段；输入项指填写数据的表单字段样式，如：单行输入、多行输入等；机能按钮指表单的按钮，如：提交、保存、取消等。

息。

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

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

主对象创建时，需考虑是否需要同步创建关联对象重要信息。如：客户创建时，同步可以创建客户的联系人重要信息、创建订单头时同步创建订单明细重要信息。

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

数据创建时，关键性重要信息（即：必须收集的重要信息）可设置成必填，强制要求用户填写。

重要重要信息，如：必须收集的重要信息、希望录入人填写的重要信息，置于顶部考前的位置，引导用户有限填写。越次要的重要信息置于越靠近创建表单底部的位置。

4）数据填写的表单样式、是否设置默认值等，直接影响用户体验和数据填写完整度、准确率。

数据创建时，需要灵活应用不同的填写样式，提升用户体验；如单选字段，透过下拉列表或者时数据项点选（单选样式）的形式均可以顺利完成数据录入，但是下拉列表不直观，没办法一眼看清楚有多少选项。数据项点选的形式能直观看到所有选项，但是比较占网页空间。对于数据选项少且收集的字段重要信息较为重要，采用数据项点选的形式，如：客户等级（重点客户、通常客户、非重点客户）；对于选项多的采用下拉列表的样式，如：客户行业（快消、服务、制造业、建材、建筑等）。

数据创建时，是否设置默认值，也是直接影响用户体验的一环。数据默认值可以减少用户的重要信息录入量，提升录入效率。但是有些场景下，并不能胡乱添加默认值，如：需要收集的关键性重要信息，且该重要信息需要用户确认，这种情况下，不设置默认值且必填，可以引起用户重视，提升数据填写的准确性。

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

透过小标题可对创建页的字段展开分级展开分类展示，做到网页有条理，展示不紊乱。

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

列表页通常包含：搜索项、数据列表、机能按钮、统计项等。搜索项指数据的查询搜索内容，便捷查询对象数据；数据列表指展示对象多条数据及数据字段重要信息的表格；机能按钮指对象的机能操作按钮，如：新建、提交等；统计项指多条数据的汇总统计，如客户列表上支持统计选择的客户的交易总金额等。

1）数据表格字段并非对象数据所有字段均需要展示，主要呈现出数据的关键性重要信息。

数据列表的表格并非需要展示对象的所有字段重要信息，一个网页端网页的宽度有限，当数据列表展示的重要信息过多时，需要无限拖动水平滚动条，这会大大影响用户体验，用户也不愿意一直拖动滚动条。所以，数据列表的表格主要呈现出对象数据的关键性重要信息，与此同时，越重要的重要信息展示在越前方，尽量无需拖动滚动条就可以查看。

2）数据表格字段并非仅仅展示当前对象字段重要信息，可展示关联对象的字段重要信息、数据统计重要信息等。

数据列表展示的字段重要信息并不仅局限于当前对象的字段重要信息，还可以展示关联对象的字段信息、关联对象的统计汇总重要信息等。如：合同列表除了展示合同的此基础重要信息外，还可以展示合同客户的客户重要信息，如：客户编号、客户名称等，能否方便查看人与此同时查看；客户列表除了展示客户此基础重要信息外，还可以展示客户关联对象的统计重要信息，如：客户订单的总金额、合同的签约总金额、客户最近一次拜访日期等。

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

数据搜索项的设置并非简单地将对象字段设置成搜索项即可，而需站在业务场景下，考虑用户可能存在的搜索场景，再去设定搜索项，有效地帮助用户检索数据。如：客户数据的搜索，除了查询客户名称、客户电话等重要信息，用户可能还会想便捷检索出我的重点客户有哪些，哪些客户已经长天数未跟进了，哪些客户还有欠款未付等，基于这些场景，可能客户就需要按客户等级搜索、按最近跟进日期搜索、按统计欠款金额搜索。

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

对于数据列表，可以做预定义的列表展开分类，用户无需搜索即可便捷查询数据。如客户列表，除了展示所有的客户数据列表外，还可以预设置许多便捷的数据列表，如：我的重点客户列表、超过7天未跟进的客户列表、欠款的客户列表、待签约的客户列表等

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

对于数据列表页的按钮，通常可以置于列表顶部或者置于数据列表的操作列中。通常情况下，操作列中只会放置单选按钮，点击后能操作对应的数据记录，如：编辑、删除等。列表顶部的按钮则可能放置单选按钮、批量按钮、无需选择数据直接可点击的按钮，如新建等。

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

要展示内容、个人喜好的样式来决定。但是，通常情况下，详情页会包含：单条数据记录的详细重要信息、关联对象的数据重要信息。

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

，客户标签、统计重要信息（如：交易金额、客户等级等）也可以突出展示，能方便查看。

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

主对象的关联对象重要信息分tab展示，方便查看关联数据重要信息。如：CRM中常提到的客户360视图，即是在客户详情中，可以查看到当前客户相关联的所有业务重要信息，客户的合同、订单、联系人、报价、沟通跟进历史等等。

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

详情页首页可适当增加许多数据分析统计报表，辅助展示数据详情重要信息，可更直观地、形象地展示数据档案，如：合同详情可增加合同订单交付情况、合同回款情况的统计分析，使用建模图表展开呈现出，能够让用户更方便地查看到当前合同的重要信息。

4. 统计分析页：建模展示统计分析数据

统计分析页也是相对灵活的网页，可依照个人的喜好和需要呈现出的内容来个性化定制。下面推荐本人常用的统计分析样式，主要包含3大块元素：统计大数字、GUI统计报表、详细数据列表。

1）统计大数字：展示报表关键性重要信息的统计数。

统计报表数据最关键性的几个重要信息，透过许多大的统计数字能够让用户便捷查看。通常情况下，统计大数字不超过5个，确保一个网页你可以展示完全，无需拖动水平滚动条。以客户分析报表为例，统计大数字展示客户的销售额重要信息，重点客户的客户数量，流失客户数量等。

统计大数字也可以结合许多图形样式展开呈现出，比如：呈现出部门的业绩的与此同时，透过结合进度条呈现业绩目标的达成一致情况，用户既可以查看到业绩金额，与此同时还能直观得查看到业绩目标达成一致。

2）GUI统计报表：建模展示数据的统计情况，灵活应用折技术面、柱状图、饼状图等图表展开呈现出。

对于报表中的关键性数据，可通过建模图表的形式去呈现出，便于用于查看的数据变化趋势等重要信息。以客户分析报表为例，透过折技术面展示客户业绩月度变化，可直观地让用户获知到业绩变化地趋势。透过柱状图展示业绩排名前五的客户，能够让用户轻松获知需要核心关注的大客户有哪些。透过饼状图展示不同等级的客户贡献的业绩占比情况，能够让用户获知不同层级的客户的业绩贡献等。

3）详细数据列表：透过详细数据表格呈现出明细数据供用户查看和导出。

统计分析报表底部可放置详细数据表格，可以方便用户及时查看和核对数据，与此同时还可以支持用户导出明细数据做二次加工。

责任编辑由 @茶话B端 原创发布于人人都是商品副经理，未经许可，禁止转载

题图来自Unsplash，基于CC0协议

该文观点仅代表译者本人，人人都是商品副经理网络平台仅提供重要信息存储空间服务。