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个相邻单元格,多选的则根据需要处理。

实例如下。

QQ截图20180503174909.png