#### **3.1.1 扁平化电脑端视图制作** 如今的互联网时代，扁平化的页面视图日渐流行。要制作出扁平化的电脑端视图页面，对于表单设计器而言并无难度。 **1. 页面布局** 使用表格布局，插入的表格通常为**24、30、36列**，每列均为**36像素**，视图宽度分别为864、1080、1296像素。 表格行数则根据需要增减，标题栏行高**24像素**，其余行高均为**36像素**。 **2\. 页面样式** * 单元格边距：表格内单元格的上下左右边距一般为**0像素**，部分顶部对齐的单元格需要设置上边距，部分单元格需要设置左边距（如存放复选框的单元格、部分存放特定文字的单元格）。 * 字体字号：通常表单标题为**微软雅黑\*\*\*\*24像素**（视需要可加粗），表格中标题栏（划分区块）为**微软雅黑14像素**（视需要加粗），表格中的文字内容为**微软雅黑12像素**。 * 文字颜色：表单标题和标题栏为**黑色**（建议#000000），表格中的控件左侧标签文字为**灰色**（#999999），填写提示类文字为**浅绿色**（#008000），警示性文字为**红色**（#ff0000）。 * 文字对齐：表单标题单元格**左对齐**与**垂直\*\*\*\*居中对齐**，控件（文本域和流程处理意见除外）左侧的标签文字单元格**右对齐**与**垂直居中对齐**，文本域和流程处理意见控件及其左侧的标签文字单元格**右对齐**与**顶部对齐**（单元格上边距为8像素），其余存放控件或文字的单元格一般左对齐与垂直居中对齐。 * 背景色：页面整体可不着色或着浅色，标题栏着**浅蓝色**（#ddefff）且与整体背景色进行区分。 * 表格边框：通常**无边框线**，专门用于打印的视图可根据需要设置必要的边框线。 **3\. 单元格合并与拆分** 在每一行中，根据实际需要合并单元格来存放相关的文字内容和控件。文字大小为12像素时，合并2个单元格可存放5-6个汉字与全角标点，或者存放8－10个数字、英文字母与半角标点，以此类推。 **4\. 明细表样式** 明细表单独占位，不内嵌到表格布局中。列数根据需要确定，表头一般存放列的标题文字，通常是一行；明细区主要存放控件；表尾一般也存放控件，主要用户对明细区的数值进行汇总，通常是一行。明细表的样式除下述内容外，其余与页面样式相同。 * 单元格边距：表格内所有单元格的上下边距均为**0像素**，存放控件（序号控件除外）的单元格左右边距为**6像素**或**3像素**（列较多时可选择3像素），不存放控件的单元格和存放序号的单元格左右边距为**0像素**。 * 表头颜色：**浅灰色**（#f8f8f8）。 * 列宽：根据需要设置，当左右边距为6像素时，宽度计算公式为**12X＋14像素**；当左右边距为3像素时，宽度计算公式为**12X＋8像素**，其中X为该列显示的最少汉字数量。 * 行高：表头行高为**24像素**，明细区、表尾视具体情况可以为**24像素**或**36像素**（行数很多且单元格中的数据不换行时才使用24像素）。 **5. 控件标签文字** 为了方便页面展示，一般在控件左侧显示控件标签文字（复选框除外），该标签文字的作用与控件标题相同，但排版更加灵活、样式更容易调整。控件的标签提示通常使用2－4个汉字以全角冒号结尾（需合并相邻的两个单元格存放），这样显示更整齐划一。对于超过4个汉字的标签提示，则需合并更多的单元格来存放。 在一个视图页面中，通常左侧的第2、3列的单元格均合并用于存放标签文字，其后的标签文字存放本着够用、美观的原则，尽可能地将控件标签提示纵向有序陈列，按冒号对齐。标签文字左侧一般预留一个空白的单元格。 **6\. 控件样式** (1) 字体字号：通常为**微软雅黑12像素**（视需要ke 加粗）。 (2) 文字颜色：通常可不设置，必要时根据需要设置（如红色，可提示使用者）。 (3) 文字对齐：通常为左对齐，明细表中的文本控件可设置所在单元格居中对齐（如计量单位），明细表中的数字控件可设置所在单元格右对齐（便于小数点对齐）。 (4) 标题显示：均设置“无标题”。 (5) 边框：通常选择“下边框”，必要时根据需要设置。 (6) 宽度：根据存放的文字内容、大小、数量，通过合并相邻的单元格来确定。一般标准如下。 * 文本、文本域控件按文字数量，量多时可占用1行（合并第3-24列）； * 数字控件按大小（含小数位），每3位合并1个相邻单元格； * 下拉控件按枚举内容中最大的文字数量； * 单选控件按选择项的多少； * 复选框只需1个单元格存放即可，其右侧的单元格合并适当的数量存放提示性标签文字； * 日期、日期时间控件在默认显示格式下分别合并3个、4个相邻单元格，其他显示格式下酌加； * 流程处理意见控件通常占用1行； * 组织机构控件中，一般选人控件需合并3－5个相邻单元格，选岗位、选部门、选职务级别矿建需合并4－6个相邻单元格，选单位控件需可并7－9个相邻单元格，多选的则根据需要处理。 实例如下。