：点晴OA工作流快速入门手册(含表单模板).rar

前言
一、怎样做好的表单
二、需求一致性设计
　　1、客户需求的一致性
　　2、表单表头、编号和Logo的设计
　　3、对客户需求的提炼和专业性角度优化
　　4、表单打印设置对表单设计的要求
三、表单美观性设计
　　1、表单风格的统一设计
　　2、表单字体、颜色、边框的设计
　　3、表格尺寸的统一规范
四、技术性设计实现
　　1、技术角度对表单内容和位置的调整
　　2、控件的选择和关联
　　3、保证表单控件大小和表格的对齐
总结

前言
　　用过OA系统的人都知道，企业OA的管理，绝大多数都是通过流程来进行规范和实现的，所以流程是OA系统中最常用也是最为核心的内容。而表单设计又是表单流程设计的第一步（流程是第二步），也是最重要和最耗费时间的环节。
　　对于外行人员，可能觉得表单设计不就是一个表格吗，有什么难度？用Excel轻轻松松就可以画出一个表格来了。也有OA厂家的人为了宣传自己的产品牛叉，向客户宣传他的流程表单设计多么简单，图形可视化操作很快就做出来了（其实他心里明白，表单流程设计是OA设计里最花时间的，所以一再强调自己产品在这方面设计起来很简单）。事实上，我们做过OA系统的人都知道，表单设计需要考虑很多方面，想做一个好表单，绝对没有这么简单。下面，就我们的经验，给大家分享一下，希望对您有所帮助。 

一、怎样做好的表单
　　一个好的表单设计，需要考虑客户原始需求的一致性、设计美观性，以及技术性的实现多个方面，后面我们会详细介绍。这里想强调一个观点，永远不要指望表单设计器能够设计出优选的表单。 OA系统自带的表单设计器可以帮助我们进行初步的表单设计，比如设计表格，添加表单的控件，进行控件参数的基本设置，如控件名称，控件的属性和控件间的关联（如时间日期控件与文本控件的关联）等等。但是不要指望表单设计器能够设计出完美的表单，就我们了解的情况，目前的业内的表单设计器都存在一些功能上的不足，比如设计器设计的表格和控件的大小和最后预览、运行的大小不同，无法做到设计和运行的一致性。而且设计器能够调整的参数有限，很多时候还要在表单的HTML代码中修改来达到设计的最终效果。还有一个更为重要的原因，就是没有哪一个OA厂家和表单设计器会给你提供表单设计经验，这个需要通过经验积累并形成表单设计规范，从而指导后来者进行表单设计。所以，设计器的局限性导致了我们很难用他设计出优秀的表单。
　　那么，该通过什么样的工具和方法设计出一个好的表单？就我的个人经验，需要表单设计器、Excel表格、表单HTML代码（在表单设计器中能够看到），以及表单设计经验规范四个方面结合起来。
 
　　下面，我们结合表单设计的几个方面分别介绍该怎样运用工具、代码和规范进行设计。 
 
二、需求一致性设计
1、客户需求的一致性 
　　一切的开始，都是从客户的需求出发的。在需求交流阶段，客户会提出自己的想法，调研各个部门的现有的和有计划还没做的流程表单需求，同时会提供现有的纸件表单给我们，让我们按照其进行设计。请记住，这只是客户的原始需求，他们不懂实现技术，更为专业性的需求和调整还是需要我们后面帮助其挖掘和实现。最后我们收集、整理后再跟客户进行确认。具体的需求交流技巧不是本文想要表述的重点，这里仅以一个具体的表单开始，向大家介绍表单的设计过程。例如，客户让我们做一个客户请假单，原始表单如下图：

2、表单表头、编号和Logo的设计
　　有些客户的原始纸件表单已经包含了表头、编号，甚至有公司的logo，但有的客户并没有这些。我们从信息完整性和规范性的角度，建议客户增加相关的内容。这里，我们增加表头如下：

3、对客户需求的提炼和专业性角度优化
　　为了方便客户使用，清晰的划分提示性文字（标题）和需要申请人员填写的内容，从专业性的角度，我们对表单修改如下：

　　这里，我们把休假的时间范围的内容进行了调整。这样可以更为清晰的区分提示性文字和填写内容区域。而且，为后续在表格中添加文本和日期控件提供了独立的空间区域。

4、表单打印设置对表单设计的要求

　　客户提供给我们的纸件表单一般都是A4纸大小范围内能够完整呈现的。但是有的新的表单需求，客户没有现成的纸件，而且表单内容比较多，设计人员往往做出来的表格比较大，实际高度或宽度超出了A4纸的打印范围。客户在使用过程中会发现这个问题，出现一页打不完，或者同一行的表单被分成了多页，打印的效果很难看，不可接受。针对于此，我们给出以下设计原则和设计方法：

1）表单的宽度设计不能超出A4纸的宽度减去左右两边的留白尺寸。

　　我们的经验值是表单宽度不超过540px。如果宽度超出了，必须把一行内的内容放到下一行进行设计，没有人愿意把表格的一行分开打印。
2）表单的高度设计不能超出A4纸的高度减去上下两边的留白尺寸。

　　我们的经验值是表单高度不超过700px。如果表格的高度超出了不多（20%以内），建议通过调整行高尽量缩减到700px大小之内。如果高度超出了不止20%，通过行高调整到一页内比较困难，则可以保留现有的高度设计，不进行调整，最终打印2页罢了。如果多页情况，也可以参考20%原则进行调整，尽量让客户少打印页数，节省时间和纸墨。

3）如何测量表格的尺寸
　　控件的尺寸可以通过设计器的控件参数查看来获知，表格和表单的尺寸主用通过表单的HTML代码进行查看。

三、表单美观性设计
 1、表单风格的统一设计
　　风格的设计如同人的衣服，取决于功能性要求、企业性质和自身喜好，以及表单风格的也进行设计师所能达到的水平。设计是所有表单美观性设计的前提，了下面给出几种常见的风格作为参考：
★没有风格

★政府发文

★旅游地产

★政府国企

★企业合同

 2、表单字体、颜色、边框的设计
　　这里我们选取上面“政府国企”表单的设计风格，基于此给出表单字体、颜色和边框的设计参数。

　　字体：14px16px，加粗13px；
　　表头：宋体，；表名称：微软雅黑，；标题：宋体，

　　控件字体，宋体，13px。
　　文字颜色：均为黑色；

　　背景颜色：浅蓝色（235,245,255）；过渡带，RGB（0,0128）
　　表头和标题：RGB，

　　边框颜色：黑色；

 3、表格尺寸的统一规范

　　表头的行高：40px（若是两行的表头，可设计为50px；表单名称的行高：40px）

　　单行文字内容的行高：28px；两行文字内容的行高：40px；
　　内容描述的行高：56px（默认值，如果内容较多，可以采用28*n的高度）

　　各级领导批示的行高：40px，一般领导意见够用了。
　　过渡带行高：6px；
　　边框粗细：1px；控件边框粗细：无边框设计，0px（无边框的控件，会给人一种控件完全融合于表格的一体化的感觉，这是出于美观性的考虑）
　　如果您问我，为什么设计这些参数值，我想说是经验值，或者兼顾考虑了字体大小，以及一个表单尽量占用少的空间的设计原则来最终确定的吧，因为有的表单内容多，又要考虑各个表单尺寸风格尽量一致，所以在看清楚文字和美观的前提下，尽量少占用空间，让内容多的表单尽量设计在1页A4纸范围内。
　　到此，我们对一个表单的外观设计基本结束了。但是最终这些设计的实现则需要通过技术手段实现。我们前面说过，OA厂家的设计器是不能保证我们设计出理想的表单，而是要结合设计器、Excel表格，表单HTML代码，和设计规范进行实现的。下一节具体讲述如何实现。

四、技术性设计实现
1、技术角度对表单内容和位置的调整

　　前面提到，考虑到表单大小对打印分页的影响，有时候需要把一行中太多的内容调整到下一行，以避免页面太宽，方便打印。这里举一例：
　　原始表单：接待申请单

　　这个表单内容较多，按照原来的表单设计会导致宽度大于了540px，产生分页的情况。通过合理调整内容的位置，并按照美观性设计统一了风格之后，达到如下效果：

　　新的接待申请单，把原来最左侧的一例内容改为了行，这样减小了行的宽度。同时，结合整体风格设计，进行了美化。最终这个表单可以完整的打印在1页A4纸上（客户如果需要打印的话。）
　　那么，上面的这个设计是如何做到的呢？在Excel表格上进行风格统一设计，通过Excel设计成如上效果并不难。难的是最后在OA系统上达到如上效果，后面会介绍。

2、控件的选择和关联

　　把前面在Excel设计的表单拷贝到OA设计器中，下一步就是根据表单内容的要求选择设计器中的控件，并进行控件命名和基本参数设置。关于控件的使用，厂商OA产品有相关说明书，这里不进行讲述。

编辑器中的设计效果

　　大家看到，这个设计效果并不是最终的效果。一方面设计的效果看起来和预览的不一样，另一方面，控件的尺寸还要调整。
我们先把控件的边框去掉吧，这样看起来更有一体化的美观效果。打开编辑器中的HTML编辑功能。在HTML最上面（表单的开头）增加这些内容：

<div>
    <style type="text/css">#GOVTABLE INPUT{border-right:0px ; border-top: 0px ; border-left: 0px ; border-bottom:0px }#GOVTABLE TEXTAREA{border-right:0px ; border-top: 0px ; border-left: 0px ; border-bottom:0px }</style>
</div>
<table id="GOVTABLE" align="center" data-sort="sortDisabled">

　　通过代码分析，这段代码的意思是对于INPUT和TEXTAREA类的控件，边框尺寸为 0px（也就是无边框设计，并把这个设计命名为#GOVTABLE，在表格<table>中引用该id=#GOVTABLE。加入这段代码后，再看一下效果：

　　INPUT和TEAXAREA开头的控件的边框都取消了只有请假类型的控件还有边框，因为该控件的开头是OPTION，我们认为有必要保留它的边框。

3、保证表单控件大小和表格的对齐

　　表单、表格和控件的尺寸设计和实现是最为困难的部分。下面，我们从尺寸关系、尺寸设计原则，以及如何进行尺寸设计等几方面进行说明。
1） 控件尺寸和表格、表单尺寸的关系
　　大家知道，一个表单就是一个大表格，为了区分概念，总体的表格我们统一称为表单，而表单中每一个标题或需要输入的空白框我们称之为表格，有空白区域的表格里面增加输入控件，以进行内容输入。所以，总体上来看，表单包含一个个小的单元表格，每个单元表格又分为标题性表格和输入性表格，输入性表格包含了输入控件。既然表单、表格和控件是这种包含关系，就导致了在尺寸设计上存在必然的关系。控件尺寸大了，必然撑大表格，表格大了，必然撑大表单。如何做到控件尺寸正好跟表格一样大，每行的表格宽度之和等于表单宽度，每列的表格高度之和等于表单高度，就需要精确的计算，调整表单的HTML中相关的元素尺寸。只有这样，最终的表单才会尺寸可控，内部控件和表格严丝合缝，没有空隙。

2） 表单中控件的尺寸控制

　　在点晴OA的设计器中有18种控件，这里不一一详细举例。对于文本控件，设计人员需要思考用户可能需要输入的内容多少，从而决定控件的尺寸，对于专用控件，如日期控件，则需要考虑与之关联的单行文本框控件（里面要显示日期的）的宽度能不能完整显示整个日期。所以对控件尺寸的控制也是表单设计中需要考虑的重要细节，设计的原则就是能够完整展现客户输入的内容，而且尽量不占用过多的表格空间位置。这里我们给出几个点晴OA设计中常见的控件尺寸：
　◆ 日期控件关联的单行文本框控件，宽度不少于75px，高度不小于25px；
　◆ 时间控件关联的单行文本框，宽度不少于30px，高度不小于25px；
　◆ 日期控件、时间控件、系统计算控件自身的图标都是16px像素见方，建议设计时留出20px宽度用于显示这些控件（通过与之关联的单行文本框控件或控件自身减少20px的宽度），从而保证控件输入部分+控件图标不大于表格的宽度，否则控件会把表格撑大，无法精确控制表单大小，也影响美观性和其他同列的单元格的尺寸。
3） 保证控件大小能够显示完整的内容
　　这个都能够理解，不细说了，这里只是提醒注意考虑这一点。
4） 如何精准设计表单、表格和控件的大小
　　表单设计器不能很准确的设计整体尺寸大小，这里强调的是整体，因为对于控件，表单设计器可以通过控件属性进行设定高度和宽度，但是设计器不能准确设计表格和表单的尺寸，因为只能用手工拖拉方式。
　　A） 表单和表格的整体精准设计。我们推荐在Excel表格中进行设计，并通过Excel表格的查看表格和表单的准确大小。如图：

鼠标点中列的边缘并按住不放，会出现行宽的提示，如上图中红色线部分（100像素。这样，在Excel精准设计表格、表单尺寸后，相应的就可以）计算出控件的大小了。
　　B） 利用Excel表格，可以精确的确定表格、表单和控件的大小要求。下一步就是在编辑器的HTML对于拥代码中对每一个表格、控件进行尺寸设置。

有众多表格和控件的表单，这个过程是非常麻烦的，手工的工作量太大。

　　　　HTML代码中截取的一段。其中width和height就是尺寸的参数。通过一一设置这些尺寸，就可以实现和Excel表格中一模一样的表单设计了。
　　C）批量化、自动化表单设计（表单设计器的不足，需要创新性突破）
由于表单编辑器可以通过HTML代码定义表单，这为我们提供了一种通过自动修改代码的方式进行自动化和批量化精确设计表单的可能。这样便可以大大节省人工时间，提升设计效率。

　　最终设计的表单效果截图。大家可以看出，每个控件和所在的表格都是严丝合缝的对齐（参看请假类型控件的边框，其他控件无边框看不出来，并且取消）了控件边框，让控件完全融入了表单中了。其中，日期控件的宽度和关联的单行文本框的宽度之和，正好等于所在表格的宽度，而且能够完全呈现日期内容。

　　以上，我们介绍完了表单的设计需要考虑的方方面面和一些经验，希望对大家有所帮助。