B端设计除了界面类型数量不多以外，同类型页面形成了相对统一的布局框架标准，即使没有太多设计经验的新手，只要掌握并跟着这些布局框架的方式设计，也能输出专业的B端项目出来。

下面，我们分别解释表盘、列表、表单、详情、登录等主流页面类型的布局框架。

1. 表盘页

表盘页是数据、信息集合的页面，包含的组件类型很多，但最核心的两类组件，就是图表和表格。任何表盘类页面设计前，都要先确定包含的组件数量、类型、权重，然后再开始对内容区域进行划分和布局。

1.1 主页型表盘页

主要应用于主页的表盘页面，不是单纯的表盘聚合页，而是会包含大量不同的信息和模块，对于内容的权重表现和布局比例要求较高。

除了表盘和表格外，还包括信息列表、轮播图、公告、日历、留言板之类特殊的模块，需要花较多的时间来处理版式，尤其是面对作品集输出需要关注美观度，不同模块样式的差异性和设计感。

1.2 数据型表盘页

另一种就是纯粹的表盘页，主要以展示数据图表为主，表格也有但权重不大。这类页面的布局要先了解页面需要展示哪些数据，并使用什么图表，要确保数据的展示能符合实际使用需要。

---

2. 列表页

列表是对于罗列同类数据进行展示的统称，实际上包含多种列表类型，包括表格、卡片、封面、标题信息等。这些样式即使数据相同也可以进行转换，用过 Notion Database 或飞书多维表格的话应该非常熟悉（建议去用用看），也是为什么我没把表格单独拆成一个大类的原因。

2.1 表格页

列表中最基础、常见的就是表格页，使用横、纵轴的排列规则来展示数据信息。不管表格本身有多复杂，它的设计是组件设计的一部分。而表格页面通常会带有针对表格内数据进行筛选的模块，以及添加数据，操作所选数据的功能栏位。

2.2 一般列表

一般列表就是字面意思，最基础的纵向排列一行一条的列表模式。很多人会把列表和表格搞混，因为很多表格设计中并没有把单元格全部画出来，所以看起来很像。区分两者最简单的方法，就是看有没有表头，有表头是表格，没表头的就是列表。

2.3 卡片列表

将每个数据对象使用卡片的形式展示，对于不需要上下数据进行对比，每个数据对象都是比较独立的个体的话，那么卡片的模式会比表格更合理，比如服务器列表、插件列表门店列表、项目列表等。

卡片列表的设计首先要根据响应式的断点决定在不同宽下应该放置几列卡片，然后再对卡片的内部信息进行设计和排版。

2.4 封面列表

本质上也是卡片列表，只是使用了较大的封面图，以图片作为数据对象的主要区分点。包含了封面图，以及标题和其它次要信息，比如员工列表、设计项目列表、设备列表、商品列表（SPU少）等。

---

3. 表单页

表单页是用于填写、编辑数据的页面。在表单页中，通常包含较多的表单控件和选项，要对它们进行归类和整理，给用户提供更好的输入体验。除了分类外，成熟的表单一行填写一类信息，而不会为了填满页面强行把不想关的表单元素并排。

除此以外，表单页面的展现形式有四种，包含响应式、定宽、抽屉、弹窗，需要根据项目实际需要选择，而不是只能用固定的一种。

3.1 响应式表单页

即页面内容区域宽度会根据画布放大，但表单元素的尺寸并不会有变化，通常使用做左对齐，或者居中对齐。

3.2 定宽表单页

因为表单元素本身并没有响应式的需求，所以推导而来表单页面本身往往没有响应式，使用起来会更合理、有效。所以定宽表单页就是内容区域宽度固定的页面类型。

3.3 表单抽屉

即用抽屉的形式放置表单，常用于编辑对象内容的场景，不用打开新页面就能完成修改。

3.4 表单弹窗

还有一种是使用模态弹窗来实现，虽然是弹窗，但这种弹窗可以容纳大量内容，和页面没有太大差异。

3.5 文章编辑页

这是一个比较特殊的表单页面类型，即用于发布内部公告、新闻，或者系统前端的文章等。在这个页面中，主要包含标题输入和图文编辑区，其它的信息则根据需求安排。

---

4. 详情页

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

4.1 一般详情页

一般详情页和表单页类似，需要整理要展示的信息、字段，对它们进行归类和摆放，主流的详情页设计就是把内容根据顺序依次排列出来。

4.2 分区详情页

一般详情页通常是从上到下的排列过程，虽然可以根据分类做模块的拆分，但大体上也是单列的设计。而一些复杂的场景中，会希望使用更高效、功能化的展示形式，所以就会使用类似表盘页面的布局形式，对内容模块分区进行不规则的布局。

4.3 文章详情页

文章详情就是类似一般网站文章页面的类型，很多B端项目内也有发布和直接查看文章的需求，比如企业内部的动态、SaaS官方的新闻、Wiki知识库内容等等。主要包含标题、发布者、时间、图文内容、评论等字段和模块。

图文内容的观看习惯使得它们没有响应式调节的必要，可以在内容区域中定宽居中显示，也可以定一个定宽的内容区域展示。

4.4 详情抽屉

和表单类似，用抽屉的形式来放详情内容，但是使用详情抽屉的频率会比表单高，多用于表格、列表场景中点击数据对象后弹出，不用进行页面跳转。

4.5 详情弹窗

即把一般详情页使用弹窗的形式表现出来，可以进行上下的滚动。

---

5. 登录页面

登录页面虽然包含的要素不多，但是是所有系统的门面，是用户访问的第一个页面，所以还是要有一定的重视度不要随便应付。

对于B端来说，登录页的框架就固定那几种，熟记这些套路就可以很快的完成登录页面的设计。

5.1 居中模式

即登录的表单、内容和LOGO、标语等信息显示在画布中央，是最基础的登录类型。

5.2 卡片模式

卡片模式是将登录的表单内容置入到卡片中，这类设计通常包含比较复杂的背景图，通过卡片悬浮来突出表单内容。通常使用左或右的布局，为另一侧的背景预留较为完整的显示空间。

5.3 左右分区模式

想要表现背景图的话，除了卡片还可以使用分区的设计，即将页面拆分成左右两个区域，一侧放图，一侧放登录信息和对应表单，要选择哪种根据设计的风格决定。

常规的B端项目设计，就是用这些页面类型去组合成整个项目，作为新手只要熟悉这些页面的布局模式，并针对每个页面进行分析、练习，就可以在B端视觉上突飞猛进。

其它的页面类型或者设计，只要在这些基础上发散即可。