住房公积金业务端页面设计规范——典型页面篇

## 一、列表页
### 表单规范讲解：
【1】查询表单 一行四列；
![](/media/202511/2025-11-14_110137_8930640.0683208044803515.png)

【2】对齐方式： 冒号对齐；
![](/media/202511/2025-11-14_110158_3614200.6388461995100247.png)

【3】表头长度默认为126px，当遇到文字特别多的表头，可以放宽表头长度，但是该页面的其他表单也要一起调整，保持冒号对齐；
![](/media/202511/2025-11-14_110249_3827520.02442488285591171.png)

【4】若表头文字过长，可以省略展示，然后将表头的内容写在输入框的提示区域里；
![](/media/202511/2025-11-14_110312_4186390.051069652575847724.png)

【5】查询重置展开按钮整体靠右对齐；
![](/media/202511/2025-11-14_110326_8332260.4807407673634906.png)

### 1、全列表
#### 1.1 全列表(小表格效果)
【1】默认布局：刚进入页面时，若有超过7个（包含7个）查询表单时，默认显示两行，剩余表单折叠；
【2】鼠标滑动浏览页面回归传统方式，列表上方的表单和按钮区域不动，列表内容较多则列表内滚动展示；
【3】列表的对齐方式：
           a. 金融数字和其表头右对齐
           b. 文本内容和操作左对齐
		   
![](/media/202511/2025-11-14_110505_0866460.5082019778638367.png)
![](/media/202511/2025-11-14_110512_2891860.19439378487080627.png)

#### 1.2 带二级Tabs列表页+列表列少(小表格效果)
![](/media/202511/2025-11-14_110552_9332260.24035644255608035.png)

#### 1.3表格内容不满一屏(小表格效果)
列表内容表少的时候，页面下方也没有其他内容了，列表撑满这个页面；
![](/media/202511/2025-11-14_110637_2008750.9501574149883666.png)

#### 1.4 表格数据为空
![](/media/202511/2025-11-14_110703_9628940.221699989059147.png)

#### 1.5 列表双行内容
![](/media/202511/2025-11-14_110724_6101470.2760798719485833.png)

#### 1.6 列表行高尺寸
有两个尺寸：常规列表行高42px，小列表行高37px，没有特殊情况，一般都是使用常规列表的。
【1】常规列表—行高42px（界面效果）
![](/media/202511/2025-11-14_110753_9697910.06845830797530805.png)

【2】小列表行高 37 px
![](/media/202511/2025-11-14_110811_7447280.21554920893535423.png)

### 2、左树右表
#### 2.1 左树右表
【1】 默认将一个页面分成四列，在左树右表结构的页面中，左侧树占25%页面宽度，右侧表占75%的页面宽度，右侧布局中，查询表单一行3列；排列方式：查询表单一行四列；
【2】 如何记忆：查询列表一行4列，左侧树占掉一列空间，查询列表只剩3列；若表头文字过长，可以省略展示，然后将表头的内容写在输入框的提示区域里；
![](/media/202511/2025-11-14_110905_3487990.2529328798379754.png)

![](/media/202511/2025-11-14_110912_3673130.25934101945566246.png)

#### 2.2 左树带tab
![](/media/202511/2025-11-14_130240_2356180.42413023659261506.png)

### 3、左选项右表
![](/media/202511/2025-11-14_130313_0172750.8538519199572593.png)

### 4、左右结构三层嵌套
【1】默认将一个页面分成四列，在左树右表结构的页面中，左侧第一列占25%页面宽度，树占25%页面宽度，右侧表占50%的页面宽度，右侧布局中，查询表单一行2列；
【2】如何记忆：查询列表一行4列，左侧两列内容占掉2列空间，查询列表只剩2列。
![](/media/202511/2025-11-14_130350_7499430.12763290124758275.png)

### 5、上下列表
![](/media/202511/2025-11-14_130413_6441320.86579515620454.png)

### 6、带合计的列表
![](/media/202511/2025-11-14_130430_5439000.21789663454761654.png)

### 7、带通知、合计的列表
![](/media/202511/2025-11-14_130454_2591000.858959252610686.png)

## 二、表单页
### 1、基础表单
在详情页、表单页面中，显示信息的表单和输入性表单遵循以下设计规则：
【1】排列方式：一行三列；
![](/media/202511/2025-11-14_130531_0387150.7931999048080017.png)

【2】对齐方式：冒号对齐；
![](/media/202511/2025-11-14_130543_1855250.614672204921594.png)

【3】正文字体：默认#333333；
【4】表头可以修改为#666666，但是结果信息一定是#333333。
![](/media/202511/2025-11-14_130556_0922210.27078764044390125.png)

### 2、左右结构表单
【1】布局：在表单页面中，输入性表单比较少，适合一列布局的时候，输入框区域限制最大宽度320px；
【2】一列表单在页面中居中，表单之间冒号对齐；
【3】对齐方式：冒号对齐。
![](/media/202511/2025-11-14_130623_4345170.7573002277608084.png)

![](/media/202511/2025-11-14_130636_1767420.08256697385900758.png)

## 三、抽屉弹窗
### 抽屉规范讲解：
【1】抽屉的宽度占屏幕的25%，50%。75%，三个比例尺，按照内容进行设置；
【2】抽屉的【关闭】仅保留右上角的关闭图标，没有文字按钮，取消点击左侧自动关闭的设置
![](/media/202511/2025-11-14_130713_5985790.4010783711863065.png)

### 1、单列显示（占比25%-无输入，仅显示信息）
展示的内容不多，并且没有输入表单的时候，使用25%屏幕宽度。
![](/media/202511/2025-11-14_130741_8355960.35367460617585667.png)

![](/media/202511/2025-11-14_130751_8416100.6359367542649087.png)

### 2、双列显示（占比50%）
有大量的表单需要填写，表单呈现两列展示，使用50%屏幕宽度的抽屉。
![](/media/202511/2025-11-14_130807_8480150.9501241071633604.png)

![](/media/202511/2025-11-14_130813_1941030.3924453503257329.png)

### 3、三列显示（占比75%）
【1】有非常大量的表单需要填写，表单呈现三列展示，使用75%屏幕宽度的抽屉。
【2】如果页面内容在75%屏幕宽度的抽屉都放不下，应该考虑做成一个页面而不是一个弹窗。

![](/media/202511/2025-11-14_130832_4952910.07341931930412038.png)

![](/media/202511/2025-11-14_130838_2976160.2052242106998452.png)

## 四、普通弹窗
### 1、小弹窗（消息、通知弹窗）
【1】用于一系列信息提示，弹窗文字内容比较少，选用小弹窗，固定宽度416px；
【2】弹窗高度内容自适应，小弹窗最小高度192px；
![](/media/202511/2025-11-14_130936_5413010.8109949860043771.png)

### 2、中弹窗
#### 2.1 一列布局
【1】弹窗内有输入性表单：若表单不多，就一列排列，表单之间冒号对齐，放在弹窗的居中位置；
【2】表单遵循表头固定宽度126px，输入框最大宽度320px，表单整体最大宽度446px；
【3】一列或者两列表单使用中弹窗，宽度占屏幕宽度的50%；
【4】中弹窗的最大高度占一屏幕高度的75%。

![](/media/202511/2025-11-14_131139_0671790.7245725592506207.png)

![](/media/202511/2025-11-14_131145_0547720.9641271778390746.png)

#### 2.2 两列布局
【1】弹窗内有输入性表单：表单数量略多，单列展示不下，则双列在弹窗内展示；
【2】一列或者两列表单使用中弹窗，宽度占屏幕宽度的50%；
【3】中弹窗的最大高度占一屏幕高度的75%。

![](/media/202511/2025-11-14_132015_3398460.708507250393804.png)

![](/media/202511/2025-11-14_132021_3488290.5622154693104541.png)

### 3、大弹窗
【1】弹窗内有输入性表单：若表单不多，就一列居中展示
【2】一列或者两列表单使用中弹窗，宽度占屏幕宽度的50%；
【3】若有三列表单或者长列表，使用大弹窗，宽度占屏幕宽度的75%；
【4】中弹窗的最大高度占一屏幕高度的75%。
![](/media/202511/2025-11-14_132102_9045350.6811869806960205.png)

![](/media/202511/2025-11-14_132108_1271210.31279946244857926.png)