B端页面类型总结

界面作为企业或组织使用的载体，也是围绕增删改查而设计。主要的典型页面类型包含几种：

• 表盘：主要展示统计数据和图表的页面
• 列表：用于大量同类数据的条目，包括对它们进行排序和筛选等
• 表单：主要用于添加、修改数据对象的操作型页面，会包含多个表单控件的处理
• 详情：用于展示某个数据对象详细内容、数据的页面
• 结果&缺省：完成操作后单独页面的结果反馈&页面数据为空或系统错误的特殊反馈
• 登录&注册：用户访问的第一个页面

1.表盘

表盘页是核心数据统计、信息集合的页面，最核心的内容就是图表和表格。在表盘类主页设计前，都主要先从业务角度出发，视情况而定。确定包含的主页呈现的业务信息，然后再开始对内容区域进行划分和布局。

1.1 数据型表盘页

主要以展示总数据统计，数据图表为主。这类页面的布局要从业务角度出发先了解页面需要展示哪些数据，并使用什么图表，要确保数据的展示能符合实际使用需要。并且在视觉表现力上是值得着手发力的页面。

1.2 主页型表盘页

应用于整个B端产品主页的工作台概览页面，不是单纯的数据图表聚合页，而是会包含大量不同的核心模块和核心信息，对于页面内容的权重表现和布局比例要求较高。

除了数据图表外，还根据业务可以呈现信息列表、轮播图、公告、日历、留言板等信息模块，也需要花较多的时间来处理视觉美观度，通过主页设计从而传达产品设计调性。

2.列表

列表是对于罗列数据进行展示的统称，通常由筛选操作项、不同列表类型、分页控件三部分组成。而不同列表类型也有很多种，除提到的一般列表页、表格列表页、卡片列表页，表格列表同时也可以细分为带筛选条件列表、可横向滚动列表、带操作列表等不同情况。

B端列表页的设计应根据业务需求、数据特性和用户操作习惯来定制。不同类型的列表页可以提供不同的用户体验和操作效率。设计时，应考虑如何最有效地展示数据，并提供必要的交互功能，以支持用户获取信息数据。

2.1 基础列表页

最基础的纵向排列一行一条的展示一系列数据项。最简单直接的列表展示方式，适用于数据量不大、无需复杂操作的场景。

2.2 表格列表页

以横、纵轴的排列规则的表格形式展示数据，支持对表格内数据进行操作：排序、筛选、搜索和添加新数据等。适用于需要对数据进行详细对比和分析的情况。与基础列表不同的是，有表头是表格列表，没表头的就是基础列表。

2.3 卡片列表页

将每个数据对象使用卡片的形式展示，对于不需要上下数据进行对比，每个数据对象都是比较独立的个体的话，那么卡片的模式会比表格更合理，包含更多视觉信息，如图片、图标。提供更丰富的视觉展示，适合需要突出数据项特点的场景。

3.表单

表单页是用户与系统交互的重要部分，用于收集、输入、编辑和提交数据。

表单页的设计应考虑用户的操作习惯、数据的复杂性以及业务需求。不同类型的表单页可以提供不同的用户体验和操作效率。设计时，应考虑如何最有效地引导用户输入数据，并提供必要的反馈和帮助信息，以支持用户完成其任务。

3.1 基础列数表单

包含基本的输入字段和行动按钮，如文本框、选择框等，而其表单列数可能视情况不同而不同，有可能呈现1-4列表单的情况。通过表单的形式向用户提问，从而获取需要的业务数据。

3.2 分类表单

在基础分列表单的类型上，单个表单根据业务关系进行分类或分组，从而把同类信息的归类为一个组别。

3.3 分步表单

在基础表单的形式上会将表单分解成多个步骤或页面，用户需要按顺序逐步完成。如果完成表单之前要回答的问题分散在多个网页，那么通过步骤来显示填表进展情况是很有用的。适用于复杂的数据输入，可以减少用户一次性需要填写的信息量。

3.4 流程表单

因业务需求，团队组织会有多人审批的流程，通过分流程引导用户完成复杂的审批任务，每一步都专注于单一用户需要关注的当下特定任务。从而帮助用户理解和完成复杂的流程。

4.详情

详情页是用来展示某个数据对象的具体内容、数据、信息的页面，根据业务需求和所展示信息的不同，页面的做法也有不同，比如商品详情、文章详情、工单详情等，都会形成不同的设计。

其设计应根据所展示数据的特性、用户的使用场景和业务需求来定制。不同类型的详情页可以提供不同的用户体验和信息展示方式。设计时，应考虑如何最有效地组织和展示信息，以及如何提供必要的交互功能，以支持用户完成其任务。

4.1 基础详情

基础详情页和表单页类似，需要整理要展示的信息、字段，对它们进行归类和摆放，主流的详情页设计就是把内容根据顺序依次排列出来。只读展示信息，不允许用户进行编辑或修改。适用于仅大多数需要展示详细信息的场景，不需要用户交互的情况。

4.2 高级详情

除了展示信息，还允许用户在页面上执行操作，如编辑、删除或启动某个流程。提供了更多的用户参与和交互。

4.3 弹窗&抽屉详情

把一般详情页使用弹窗或抽屉的形式表现出来，可以进行上下的滚动。多用于表格、列表场景中点击数据对象后弹出，不用进行页面跳转。

5.结果&缺省

结果页分为不同结果情况：成功/失败/异常页，是完成对应操作后用一个独立页面来反馈操作结果的页面。

缺省页分为不同情况：异常/空页面，是对系统错误、页面数据为空的状态用特殊的页面。

5.1 结果页

成功/错误/异常页：完成对应操作后用一个独立页面来反馈操作结果的页面

5.2 缺省页

异常/空页面：是对系统错误、页面数据为空的状态用特殊的页面。

6.登录&注册

登录页面虽然包含的要素不多，但是是所有产品体验的第一步。设计登录&注册其主要目标更多是通过提高登录注册的操作效率，从而提高登录注册的转化率。

6.1 登录&注册

通过用户填写表单从而进行登录&注册。而其需要填写的表单设计形式可能是居中、居左、居右等多种布局设计模式。不管以什么模式，其主要目的还是围绕提高登录注册操作效率为主。

Powered by Froala Editor