横向滚动条样式 js横向滚动条样式

产品原型绘制是产品经理必备的基本功，是将产品需求转化为图形系统页面的过程。如何画出符合要求的产品原型？本文作者分享了产品原型设计的方法和手段。让我们一起学习。

上篇分享了B端产品的业务流程梳理和方案梳理流程，本章将分享产品原型设计的方式方法。产品原型是产品经理必备的基本功，是将产品需求转化为图形系统页面的过程。本文最后一章也会分享一些B端产品原型制作的技巧。

一、什么是产品原型

产品原型是产品需求解决方案的可视化表达。在软件产品开发之前，根据花费较少时间/人力成本的产品解决方案设计产品的概念模型，并将产品流程、功能逻辑、页面交互等关键信息图形化呈现，从而验证产品需求，达成对产品最终效果的统一认识。

1)根据产品原型与真实效果的相似程度进行分类。

一般情况下；框架图和低保真原型图由产品经理绘制；高保证设计图纸由UI设计师和美工设计。

2)按产品平台分类

二、绘制产品原型的目的1)验证和测试产品需求和解决方案。

产品原型的绘制是一个图形化产品需求解决方案的过程，同时也是一个产品需求解决方案的“自省”过程。通过原型的绘制过程，更深入地挖掘产品需求解决方案，提炼解决方案，从而验证解决方案的合理性和可行性，优化解决方案。

2)认同需求方对需求和产品呈现效果的理解。

产品原型可以辅助与需求方进行产品需求的沟通和确认。用文字描述的产品需求和解决方案，只能达到思想上的理解和统一。但是，仅仅通过文字是没有办法达成理解和一致的。即使是基于对需求和解决方案的一致理解，不同的人对产品未来效果的想象也可能大相径庭。

可视化产品原型设计可以直观地呈现产品功能和页面交互，有助于展示未来产品需求如何在产品功能设计中体现以及如何完成业务流程，帮助需求方对实际产品效果水平达成基本一致。

产品原型可以帮助在产品规划阶段拉平各角色对产品需求的理解和对产品实现效果的期望，减少后期因理解和期望不一致而导致的调整和返工。

3)团队内部的高效协作

产品原型是团队对产品需求和产品实现效果达成共识的辅助工具。

设计团队：基于产品原型（低保证原型、框线图）了解产品界面以及基础交互，辅助完成产品UI设计、产品交互设计。开发团队：基于产品原型了解产品功能，产品流程，明确产品需求。测试团队：基于产品原型了解产品功能需求，产品交互行为，辅助梳理产品测试内容。三、产品原型的绘制流程1)明确业务范围:明确业务范围，梳理业务流程，明确业务流程涉及哪些功能模块。

梳理业务流程，需要明确业务目标的范围，梳理所有业务人员参与的任务以及每项任务前的关系。

具体可参考之前的产品梳理文章。

2)梳理系统流程:根据业务流程梳理系统流程，定义系统运行流程和基本交互。

根据业务流程梳理系统流程，定义每个角色未来需要在系统中完成的动作。

具体可参考之前的产品梳理文章。

3)绘制界面原型:定义各功能模块所需的界面、功能逻辑和页面交互。

(1)明确每个模块需要哪些页面，每个页面需要哪些元素。

对于每个功能模块，基本上有三种类型的页面:列表页面、创建页面和详细信息页面。

列表页：展示功能模块的全部数据。一般包含：搜索项、功能按钮、数据列表、统计项、分页等。创建页：功能模块的新建、编辑数据的页面。一般包含：对象字段、输入项、功能按钮等。详情页：展示单条数据的详细信息。一般包含：数据详细信息、功能按钮、关联对象的数据列表等。

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

页面的跳转逻辑：功能模块各个页面如何能够跳转切换，如：如何从列表页进入详情页，如何进入数据编辑页等。按钮的功能逻辑：点击按钮后需要实现什么效果，如：点击按钮后跳转页面、点击按钮后更新数据等。页面排版：页面涉及的各种元素如何排布能够达到较好的交互效果、特殊的逻辑控制，如：将重要的字段置于上方，引导用户优先填写。

4)原型设计评审:根据绘制的原型，组织项目相关成员进行原型评审。

原型设计评审的目的是使项目的相关人员(包括需求方、开发方、测试方等。)对项目的产品和需求达成共识，避免分歧。同时，不同的人基于他们对需求的理解，对产品的原型设计提出优化设计建议。

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

5)优化原型设计:根据原型评审的反馈对原型进行优化和调整。

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

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

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

前面说过，对于B端产品，页面一般分为三类(创建页、列表页、详情页)，当然也有一些特殊的页面，比如数据分析页、首页。

下面将分享创建页面、列表页面、详细页面、数据分析页面的原型化技巧。

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

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

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

以CRM的客户为例。第一次获取客户信息时，一般可以知道客户的姓名、性别、年龄等信息，所以这些信息需要在创建客户时由录入人员填写。比如客户的创投信息和个人习惯，第一次接触可能没有，所以创建时是否需要填写，要看实际业务情况。

2)在创建对象数据时，考虑是否需要同步创建相关的对象信息。

在创建主对象时，需要考虑是否需要同步创建相关的对象信息。例如，在创建客户时，可以同步创建客户的联系信息，在创建订单标题时，可以同步创建订单详细信息。

3)关键信息要有要求，重要信息放在最上面。

创建数据时，可以根据需要设置关键信息(即必须采集的信息)，强制用户填写。

重要信息，如必须收集的信息和人们希望填写的信息，应放在考试的顶部，以引导用户有限地填写。越不重要的信息，越接近创建形态的底部。

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

在创建数据时，需要灵活应用不同的填充样式，提高用户体验；比如单选字段，可以通过点击下拉列表或者时间数据项(单选样式)来完成数据录入，但是下拉列表不直观，一眼看不出有多少选项。点击数据项可以直观的看到所有选项，但是比较占了页面的空。对于数据选项少、采集信息重要的字段，点击数据项，如客户等级(重点客户、一般客户、非重点客户)；对于有许多选项的行业，如客户行业(快速消费品、服务、制造、建筑材料、建筑等),使用下拉列表样式。).

在创建数据时，是否设置默认值也是直接影响用户体验的部分。数据默认值可以减少用户输入的信息量，提高输入效率。但是在某些场景下，不能随意添加默认值，比如需要采集的关键信息，需要用户确认的信息。这种情况下，用户无需设置默认值即可关注，提高数据填写的准确性。

5)当创建的字段信息较多且复杂时，会分层分类显示。

可以用字幕来显示页面的字段，使页面有条理，显示不杂乱。

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

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

数据表不需要显示对象的所有字段信息。网页的宽度是有限的。当数据列表显示信息过多时，需要无限拖动水平滚动条，会极大影响用户体验，用户也不愿意一直拖动滚动条。所以数据列表的表格主要呈现对象数据的关键信息，同时更重要的信息显示在前面，不需要拖动滚动条就可以尽量查看。

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

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

3)数据搜索项应有效支持用户方便地查询相关数据。

数据搜索词的设置不是简单的将对象字段设置为搜索词，而是要站在业务场景，考虑用户可能的搜索场景，然后设置搜索词，有效的帮助用户检索数据。比如在客户资料的搜索中，除了查询客户姓名、客户电话等信息，用户可能还想方便地检索我的重点客户，哪些客户已经很久没有跟进，哪些客户还有未偿还的债务等。基于这些场景，客户可能需要按客户级别、按最新跟进日期以及按欠款统计金额进行搜索。

4)预定义的分类列表可以改善用户的体验。

对于数据列表，可以进行预定义的列表分类，用户无需搜索即可方便地查询数据。如客户列表，除了显示所有客户数据列表，还可以预置一些方便的数据列表，如:我的重点客户列表、超过7天没有跟进的客户、拖欠款项的客户、等待签约的客户。

5)功能按钮要考虑单选按钮或者批量按钮。

数据列表页面上的按钮通常可以放置在列表的顶部或数据列表的操作列中。一般情况下，操作栏中只会放置单选按钮，点击后可以对相应的数据记录进行操作，如编辑、删除等。列表顶部的按钮可能会放置单选按钮、批处理按钮和无需选择数据即可直接单击的按钮，如新建。

3.细节页:单个数据的数据细节应该由显示内容和个人偏好风格决定。但是，一般来说，详细信息页面将包含:单个数据记录的详细信息和关联对象的数据信息。

1)数据的关键信息应突出显示并易于查看。

突出数据的关键信息，让用户可以直观的得到，包括关键字段信息，统计汇总信息等等。比如在客户信息的详情页中，客户姓名、手机号码等关键信息需要在详情页上方便查看，客户标签和统计信息(如交易金额、客户等级)也可以高亮显示，方便查看。

2)主对象的相关对象信息可以分页显示，方便用户查看与数据相关的相关信息。

主对象的相关对象信息以页签形式显示，方便查看相关数据信息。比如CRM中经常提到的客户360°视图，就是在客户明细中，可以查看到与当前客户相关的所有业务信息，比如客户的合同、订单、联系人、报价、沟通跟进历史等等。

3)适当增加统计分析数据，有助于展现数据的详细信息。

在详情页的首页可以适当添加一些数据分析统计报表，帮助显示数据的详细信息，可以更加直观形象的展示数据文件。比如合同明细，可以增加对合同订单交付和合同付款的统计分析，并使用可视化图表来呈现，可以让用户更方便的查看当前合同的信息。

4.统计分析页面:统计分析页面也是一个比较灵活的页面，可以根据个人喜好和要呈现的内容进行定制。这里我推荐一下我常用的统计分析风格，主要包括三个要素:统计大数字、图形化统计报表、详细数据列表。

1)统计:显示报表关键信息的统计。

统计报表数据最关键的信息，用户可以通过一些大的统计数据轻松查看。一般情况下，统计的数量不超过5个，保证你不需要拖动水平滚动条就可以完整显示一个页面。以客户分析报表为例，统计显示客户的销售信息、重点客户数量、流失客户数量等等。

统计数字也可以结合一些图形样式呈现。例如，在呈现部门绩效的同时，用户可以结合进度条查看绩效目标的达成情况，这样用户不仅可以查看绩效金额，还可以直观的查看绩效目标的达成情况。

2)图形化统计报表:可视化数据的统计，灵活运用折线图、柱状图、饼状图等图表进行呈现。

对于报表中的关键数据，可以以可视化图表的形式呈现，方便查看数据变化趋势等信息。以客户分析报告为例，通过折线图展示客户业绩的月度变化，可以让用户直观的了解业绩变化的趋势。通过柱状图展示前五大客户，用户可以很容易的知道哪些大客户需要核心关注。饼状图展示不同级别客户贡献的业绩占比，可以让用户了解不同级别客户的业绩贡献。

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

3)明细数据列表:明细数据以明细数据表的形式呈现，供用户查看和导出。

详细的数据表可以放在统计分析报表的底部，方便用户及时查看和核对数据，也支持用户导出详细数据进行二次处理。

本文由@茶花b原创，大家都是产品经理。未经许可，禁止转载。

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

本文仅代表作者本人，大家都是产品经理。平台只提供信息存储空服务。