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

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

对于每个功能模块来说，基本上涉及到三种类型的页面：列表页、创建页、详情页。

列表页：展示功能模块的所有数据。一般包括：搜索项、功能按钮、数据列表、统计项、分页等。

创建页面：创建、编辑功能模块数据的页面，一般包含：对象字段、输入项、功能按钮等。

详情页：展示单条数据的详细信息。一般包括：数据详情、功能按钮、相关对象的数据列表等。

②明确各功能的基本交互和逻辑

4）原型设计评审：组织项目相关成员根据已完成的原型进行原型评审

原型设计评审的目的是使项目相关人员（包括需求提出方、开发人员、测试人员等）对项目产品和需求的理解达成一致，避免出现分歧。同时360搜索手机下拉，不同人员基于对需求的理解，对产品的原型设计提出优化设计建议。

对于产品经理来说，产品原型评审不仅仅需要准备产品原型设计稿，还需要准备产品流程描述、复杂功能的功能描述、功能逻辑规则等，以达成对产品原型和需求的共识。

5）优化原型设计：根据原型评审反馈，对原型进行优化调整

产品原型评审后，不同角色的人会对产品原型提出不同的设计建议，产品经理需要整理这些设计建议，优化产品原型的设计，优化设计后可能还需要再次进行补充评审。

值得注意的是，不同人的反馈在这里被称为“建议”。既然是建议，那么可以采纳，也可以不采纳。对于产品经理来说，需要对这些建议进行判断，而不是盲目跟从。产品经理需要对方案和产品负责，任何改动都可能影响整个系统。在采纳修改时，不仅要考虑是否能带来更好的体验，还要考虑是否会影响整体流程。

4. B端产品页绘制技巧

前面提到，对于B端产品，页面一般分为三类（创建页、列表页、详情页）。当然，也有一些特殊的页面，比如：数据分析页、首页等。

下面我们将分享创建页、列表页、详情页、数据分析页的原型设计技巧。

1.创建页面：数据创建及编辑页面

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

1）创建数据时需要填写的信息取决于创建者可以获得/希望获得什么信息，而不是模块有多少信息。

以CRM客户为例，在首次获取客户信息时，我们一般会知道客户的姓名、性别、年龄等信息，那么这些信息在创建客户时就需要数据录入人员填写。但比如客户的创业投资信息、个人习惯等，在第一次接触时可能并不会获得，是否需要在创建客户时填写，则要根据实际业务情况而定。

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

创建主对象时需要考虑是否需要同时创建相关对象信息，例如创建客户时可以同时创建客户的联系方式，创建订单表头时可以同时创建订单详情信息。

3）关键信息必须填写，重要信息放在最顶部。

在创建数据时，可以将关键信息（即必须收集的信息）设置为必填项，强制用户填写。

将必须收集的信息、希望用户填写的信息等重要信息放置在顶部，以引导用户填写信息。不太重要的信息则放置在创建表单的底部附近。

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

在创建数据时，需要灵活应用不同的填写样式，提升用户体验；例如对于单选字段，可以通过下拉列表或者点击数据项（单选样式）完成数据录入，但是下拉列表不够直观，没办法一眼就看出有多少个选项。点击数据项的方式可以直观的看到所有选项，但是比较占用页面空间。对于选项少，收集的字段信息比较重要的数据选项，使用点击数据项的方式，如：客户层级（重点客户、一般客户、非重点客户）；对于选项较多的，使用下拉列表样式，如：客户行业（快速消费品、服务业、制造业、建材业、建筑业等）。

在创建数据时是否设置默认值也是直接影响用户体验的因素。数据默认值可以减少用户需要输入的信息量，提高数据录入效率。但有些场景下，默认值不能随意添加，比如需要收集关键信息，需要用户确认信息的时候。这种情况下，不设置默认值，将其设为强制，可以吸引用户的注意，提高数据录入的准确率。

5）创建大量复杂字段信息时，分层、分类展示。

可以使用子标题将创建页面的字段分层分类展示，使页面井然有序，展示不混乱。

列表页：展示所有功能模块的数据信息

列表页一般包括：搜索项、数据列表、功能按钮、统计项等。搜索项指数据的查询搜索内容，方便查询对象数据；数据列表指展示对象的多条数据及数据字段信息的表格；功能按钮指对象的功能操作按钮，如：创建、提交等；统计项指多条数据的汇总统计，如客户列表中支持统计选择的客户交易总金额等。

1）数据表字段不需要显示对象数据的所有字段，而主要呈现数据的关键信息。

数据列表的表格并不需要展示对象所有的字段信息，一个网页的宽度是有限的，当数据列表显示过多信息时，需要无限拖动水平滚动条，会非常影响用户体验，用户也不愿意一直拖动滚动条。因此，数据列表的表格主要呈现对象数据的关键信息，同时将比较重要的信息展示在最前面，尽量不需要拖动滚动条就能查看。

2）数据表字段不仅仅显示当前对象的字段信息，还可以显示关联对象的字段信息、数据统计等。

数据列表中显示的字段信息不仅限于当前对象的字段信息，还可以显示关联对象的字段信息、关联对象的统计汇总信息等。例如，合同列表除了显示合同的基本信息外，还可以显示合同客户的客户信息，如：客户编号、客户名称等，是否方便浏览者同时查看；客户列表除了显示客户的基本信息外，还可以显示客户关联对象的统计信息，如：客户下单总金额、签订合同总金额、客户最近一次来访日期等。

3）数据搜索项必须有效支持用户方便地搜索相关数据。

数据搜索项的设置并不是简单的将对象字段设置为搜索项，而是要考虑业务场景中用户可能出现的搜索场景，再设置搜索项，以有效帮助用户检索数据。例如，在搜索客户数据时，除了查询客户名称、客户电话等信息外，用户可能还希望能够方便地检索到自己有哪些重点客户、哪些客户很久没有跟进、哪些客户还有未清偿的债务等。基于这些场景，客户可能需要按客户层级进行搜索、按最近跟进日期进行搜索、按未清偿债务统计金额进行搜索。

4）预定义类别列表可以提高用户体验。

对于数据列表，可以预先定义列表类别，方便用户查询数据，无需搜索。例如，除了展示所有客户数据列表外，还可以预先设置一些方便的数据列表，如：我的重点客户列表、7天以上未跟进的客户列表、欠款客户列表、待签约客户列表等。

5）功能按钮需要考虑为单选按钮或者批量按钮。

数据列表页上的按钮一般可以放在列表顶部，也可以放在数据列表的操作栏中，操作栏中一般只放单选按钮，点击后可以对相应的数据记录进行操作，如：编辑、删除等。列表顶部的按钮可能是单选按钮、批量按钮、不选择数据即可直接点击的按钮，如新建等。

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

需要展示的内容和风格可以按照个人喜好来。但一般情况下详情页会包含：单条数据记录的详细信息，以及相关对象的数据信息。

1）数据的关键信息被突出显示并易于访问。

数据的关键信息应突出显示，以便用户一目了然地获取，包括关键字段信息、统计摘要信息等。例如，在客户信息详情中，客户姓名、手机号等关键信息应在详情页清晰可见，客户标签和统计信息（如交易金额、客户等级等）也可突出显示，方便用户查看。

2）主对象的关联对象信息可以以单独的标签形式展示，方便用户查看与数据关联的相关信息。

主对象的关联对象信息以标签形式展示，方便查看关联数据信息。例如CRM中经常提到的客户360视图，是指在客户详情中，可以查看当前客户相关的所有业务信息，包括客户的合同、订单、联系人、报价、沟通跟进历史等。

3）适当添加统计分析数据，有助于展示详细的数据信息。

详情页首页可以适当添加一些数据分析统计报表来辅助展示数据详情信息，可以更加直观生动的展示数据文件。例如合同详情可以添加合同订单发货情况、合同收款情况的统计分析，并用可视化的图表进行呈现，让用户更加便捷的查看当前的合同信息。

4.统计分析页：统计分析数据的直观展示

统计分析页面也是一个比较灵活的页面，可以根据个人喜好和需要呈现的内容进行自定义。下面是我经常使用的推荐统计分析样式，主要包括三大元素：统计大数、图形统计报告、详细数据列表。

1）大统计数据：显示报告中的关键信息。

统计报表数据最关键的信息，通过一些统计大图，方便用户查看。一般统计大图数量不要超过5个，以保证不拖拽横向滚动条就能完整展示一页。以客户分析报表为例，统计大图展示的是客户的销售信息、重点客户数量、流失客户数量等。

统计大数还可以和一些图形样式结合呈现，例如在展示某个部门的绩效时，可以结合进度条展示绩效目标达成情况，用户可以看到绩效金额，直观的看到绩效目标是否达成。

2）图形统计报表：直观展示数据的统计情况，灵活运用折线图、条形图、饼图等图表进行展现。

报告中的关键数据可以以可视化图表的形式呈现，方便查看数据变化趋势等信息。以客户分析报告为例，可以通过折线图展示客户绩效的月变化情况，可以直观的让用户了解绩效变化趋势。可以通过条形图展示绩效排名前五的客户，让用户轻松知道哪些主要客户需要重点关注。可以通过饼图展示不同层级客户的绩效贡献，让用户了解不同层级客户的绩效贡献。

因此，图形报表的灵活应用可以提高用户获取信息的效率。

3）详细数据列表：详细数据以详细数据表的形式呈现，供用户查看和导出。

统计分析报告底部可放置详细数据表格，方便用户及时查看、核实数据，并支持用户导出详细数据进行二次处理。