：點晴OA工作流快速入門手冊(含表單模板).rar

前言
一、怎樣做好的表單
二、需求一致性設計
　　1、客戶需求的一致性
　　2、表單表頭、編號和Logo的設計
　　3、對客戶需求的提煉和專業(yè)性角度優(yōu)化
　　4、表單打印設置對表單設計的要求
三、表單美觀性設計
　　1、表單風格的統(tǒng)一設計
　　2、表單字體、顏色、邊框的設計
　　3、表格尺寸的統(tǒng)一規(guī)范
四、技術性設計實現(xiàn)
　　1、技術角度對表單內(nèi)容和位置的調(diào)整
　　2、控件的選擇和關聯(lián)
　　3、保證表單控件大小和表格的對齊
總結

前言
　　用過OA系統(tǒng)的人都知道，企業(yè)OA的管理，絕大多數(shù)都是通過流程來進行規(guī)范和實現(xiàn)的，所以流程是OA系統(tǒng)中最常用也是最為核心的內(nèi)容。而表單設計又是表單流程設計的第一步（流程是第二步），也是最重要和最耗費時間的環(huán)節(jié)。
　　對于外行人員，可能覺得表單設計不就是一個表格嗎，有什么難度？用Excel輕輕松松就可以畫出一個表格來了。也有OA廠家的人為了宣傳自己的產(chǎn)品牛叉，向客戶宣傳他的流程表單設計多么簡單，圖形可視化操作很快就做出來了（其實他心里明白，表單流程設計是OA設計里最花時間的，所以一再強調(diào)自己產(chǎn)品在這方面設計起來很簡單）。事實上，我們做過OA系統(tǒng)的人都知道，表單設計需要考慮很多方面，想做一個好表單，絕對沒有這么簡單。下面，就我們的經(jīng)驗，給大家分享一下，希望對您有所幫助。 

一、怎樣做好的表單
　　一個好的表單設計，需要考慮客戶原始需求的一致性、設計美觀性，以及技術性的實現(xiàn)多個方面，后面我們會詳細介紹。這里想強調(diào)一個觀點，永遠不要指望表單設計器能夠設計出優(yōu)選的表單。 OA系統(tǒng)自帶的表單設計器可以幫助我們進行初步的表單設計，比如設計表格，添加表單的控件，進行控件參數(shù)的基本設置，如控件名稱，控件的屬性和控件間的關聯(lián)（如時間日期控件與文本控件的關聯(lián)）等等。但是不要指望表單設計器能夠設計出完美的表單，就我們了解的情況，目前的業(yè)內(nèi)的表單設計器都存在一些功能上的不足，比如設計器設計的表格和控件的大小和最后預覽、運行的大小不同，無法做到設計和運行的一致性。而且設計器能夠調(diào)整的參數(shù)有限，很多時候還要在表單的HTML代碼中修改來達到設計的最終效果。還有一個更為重要的原因，就是沒有哪一個OA廠家和表單設計器會給你提供表單設計經(jīng)驗，這個需要通過經(jīng)驗積累并形成表單設計規(guī)范，從而指導后來者進行表單設計。所以，設計器的局限性導致了我們很難用他設計出優(yōu)秀的表單。
　　那么，該通過什么樣的工具和方法設計出一個好的表單？就我的個人經(jīng)驗，需要表單設計器、Excel表格、表單HTML代碼（在表單設計器中能夠看到），以及表單設計經(jīng)驗規(guī)范四個方面結合起來。
 
　　下面，我們結合表單設計的幾個方面分別介紹該怎樣運用工具、代碼和規(guī)范進行設計。 
 
二、需求一致性設計
1、客戶需求的一致性 
　　一切的開始，都是從客戶的需求出發(fā)的。在需求交流階段，客戶會提出自己的想法，調(diào)研各個部門的現(xiàn)有的和有計劃還沒做的流程表單需求，同時會提供現(xiàn)有的紙件表單給我們，讓我們按照其進行設計。請記住，這只是客戶的原始需求，他們不懂實現(xiàn)技術，更為專業(yè)性的需求和調(diào)整還是需要我們后面幫助其挖掘和實現(xiàn)。最后我們收集、整理后再跟客戶進行確認。具體的需求交流技巧不是本文想要表述的重點，這里僅以一個具體的表單開始，向大家介紹表單的設計過程。例如，客戶讓我們做一個客戶請假單，原始表單如下圖：

2、表單表頭、編號和Logo的設計
　　有些客戶的原始紙件表單已經(jīng)包含了表頭、編號，甚至有公司的logo，但有的客戶并沒有這些。我們從信息完整性和規(guī)范性的角度，建議客戶增加相關的內(nèi)容。這里，我們增加表頭如下：

3、對客戶需求的提煉和專業(yè)性角度優(yōu)化
　　為了方便客戶使用，清晰的劃分提示性文字（標題）和需要申請人員填寫的內(nèi)容，從專業(yè)性的角度，我們對表單修改如下：

　　這里，我們把休假的時間范圍的內(nèi)容進行了調(diào)整。這樣可以更為清晰的區(qū)分提示性文字和填寫內(nèi)容區(qū)域。而且，為后續(xù)在表格中添加文本和日期控件提供了獨立的空間區(qū)域。

4、表單打印設置對表單設計的要求

　　客戶提供給我們的紙件表單一般都是A4紙大小范圍內(nèi)能夠完整呈現(xiàn)的。但是有的新的表單需求，客戶沒有現(xiàn)成的紙件，而且表單內(nèi)容比較多，設計人員往往做出來的表格比較大，實際高度或?qū)挾瘸隽薃4紙的打印范圍?？蛻粼谑褂眠^程中會發(fā)現(xiàn)這個問題，出現(xiàn)一頁打不完，或者同一行的表單被分成了多頁，打印的效果很難看，不可接受。針對于此，我們給出以下設計原則和設計方法：

1）表單的寬度設計不能超出A4紙的寬度減去左右兩邊的留白尺寸。

　　我們的經(jīng)驗值是表單寬度不超過540px。如果寬度超出了，必須把一行內(nèi)的內(nèi)容放到下一行進行設計，沒有人愿意把表格的一行分開打印。
2）表單的高度設計不能超出A4紙的高度減去上下兩邊的留白尺寸。

　　我們的經(jīng)驗值是表單高度不超過700px。如果表格的高度超出了不多（20%以內(nèi)），建議通過調(diào)整行高盡量縮減到700px大小之內(nèi)。如果高度超出了不止20%，通過行高調(diào)整到一頁內(nèi)比較困難，則可以保留現(xiàn)有的高度設計，不進行調(diào)整，最終打印2頁罷了。如果多頁情況，也可以參考20%原則進行調(diào)整，盡量讓客戶少打印頁數(shù)，節(jié)省時間和紙墨。

3）如何測量表格的尺寸
　　控件的尺寸可以通過設計器的控件參數(shù)查看來獲知，表格和表單的尺寸主用通過表單的HTML代碼進行查看。

三、表單美觀性設計
 1、表單風格的統(tǒng)一設計
　　風格的設計如同人的衣服，取決于功能性要求、企業(yè)性質(zhì)和自身喜好，以及表單風格的也進行設計師所能達到的水平。設計是所有表單美觀性設計的前提，了下面給出幾種常見的風格作為參考：
★沒有風格

★政府發(fā)文

★旅游地產(chǎn)

★政府國企

★企業(yè)合同

 2、表單字體、顏色、邊框的設計
　　這里我們選取上面“政府國企”表單的設計風格，基于此給出表單字體、顏色和邊框的設計參數(shù)。

　　字體：14px16px，加粗13px；
　　表頭：宋體，；表名稱：微軟雅黑，；標題：宋體，

　　控件字體，宋體，13px。
　　文字顏色：均為黑色；

　　背景顏色：淺藍色（235,245,255）；過渡帶，RGB（0,0128）
　　表頭和標題：RGB，

　　邊框顏色：黑色；

 3、表格尺寸的統(tǒng)一規(guī)范

　　表頭的行高：40px（若是兩行的表頭，可設計為50px；表單名稱的行高：40px）

　　單行文字內(nèi)容的行高：28px；兩行文字內(nèi)容的行高：40px；
　　內(nèi)容描述的行高：56px（默認值，如果內(nèi)容較多，可以采用28*n的高度）

　　各級領導批示的行高：40px，一般領導意見夠用了。
　　過渡帶行高：6px；
　　邊框粗細：1px；控件邊框粗細：無邊框設計，0px（無邊框的控件，會給人一種控件完全融合于表格的一體化的感覺，這是出于美觀性的考慮）
　　如果您問我，為什么設計這些參數(shù)值，我想說是經(jīng)驗值，或者兼顧考慮了字體大小，以及一個表單盡量占用少的空間的設計原則來最終確定的吧，因為有的表單內(nèi)容多，又要考慮各個表單尺寸風格盡量一致，所以在看清楚文字和美觀的前提下，盡量少占用空間，讓內(nèi)容多的表單盡量設計在1頁A4紙范圍內(nèi)。
　　到此，我們對一個表單的外觀設計基本結束了。但是最終這些設計的實現(xiàn)則需要通過技術手段實現(xiàn)。我們前面說過，OA廠家的設計器是不能保證我們設計出理想的表單，而是要結合設計器、Excel表格，表單HTML代碼，和設計規(guī)范進行實現(xiàn)的。下一節(jié)具體講述如何實現(xiàn)。

四、技術性設計實現(xiàn)
1、技術角度對表單內(nèi)容和位置的調(diào)整

　　前面提到，考慮到表單大小對打印分頁的影響，有時候需要把一行中太多的內(nèi)容調(diào)整到下一行，以避免頁面太寬，方便打印。這里舉一例：
　　原始表單：接待申請單

　　這個表單內(nèi)容較多，按照原來的表單設計會導致寬度大于了540px，產(chǎn)生分頁的情況。通過合理調(diào)整內(nèi)容的位置，并按照美觀性設計統(tǒng)一了風格之后，達到如下效果：

　　新的接待申請單，把原來最左側(cè)的一例內(nèi)容改為了行，這樣減小了行的寬度。同時，結合整體風格設計，進行了美化。最終這個表單可以完整的打印在1頁A4紙上（客戶如果需要打印的話。）
　　那么，上面的這個設計是如何做到的呢？在Excel表格上進行風格統(tǒng)一設計，通過Excel設計成如上效果并不難。難的是最后在OA系統(tǒng)上達到如上效果，后面會介紹。

2、控件的選擇和關聯(lián)

　　把前面在Excel設計的表單拷貝到OA設計器中，下一步就是根據(jù)表單內(nèi)容的要求選擇設計器中的控件，并進行控件命名和基本參數(shù)設置。關于控件的使用，廠商OA產(chǎn)品有相關說明書，這里不進行講述。

編輯器中的設計效果

　　大家看到，這個設計效果并不是最終的效果。一方面設計的效果看起來和預覽的不一樣，另一方面，控件的尺寸還要調(diào)整。
我們先把控件的邊框去掉吧，這樣看起來更有一體化的美觀效果。打開編輯器中的HTML編輯功能。在HTML最上面（表單的開頭）增加這些內(nèi)容：

<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、保證表單控件大小和表格的對齊

　　表單、表格和控件的尺寸設計和實現(xiàn)是最為困難的部分。下面，我們從尺寸關系、尺寸設計原則，以及如何進行尺寸設計等幾方面進行說明。
1） 控件尺寸和表格、表單尺寸的關系
　　大家知道，一個表單就是一個大表格，為了區(qū)分概念，總體的表格我們統(tǒng)一稱為表單，而表單中每一個標題或需要輸入的空白框我們稱之為表格，有空白區(qū)域的表格里面增加輸入控件，以進行內(nèi)容輸入。所以，總體上來看，表單包含一個個小的單元表格，每個單元表格又分為標題性表格和輸入性表格，輸入性表格包含了輸入控件。既然表單、表格和控件是這種包含關系，就導致了在尺寸設計上存在必然的關系?？丶叽绱罅?，必然撐大表格，表格大了，必然撐大表單。如何做到控件尺寸正好跟表格一樣大，每行的表格寬度之和等于表單寬度，每列的表格高度之和等于表單高度，就需要精確的計算，調(diào)整表單的HTML中相關的元素尺寸。只有這樣，最終的表單才會尺寸可控，內(nèi)部控件和表格嚴絲合縫，沒有空隙。

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

　　在點晴OA的設計器中有18種控件，這里不一一詳細舉例。對于文本控件，設計人員需要思考用戶可能需要輸入的內(nèi)容多少，從而決定控件的尺寸，對于專用控件，如日期控件，則需要考慮與之關聯(lián)的單行文本框控件（里面要顯示日期的）的寬度能不能完整顯示整個日期。所以對控件尺寸的控制也是表單設計中需要考慮的重要細節(jié)，設計的原則就是能夠完整展現(xiàn)客戶輸入的內(nèi)容，而且盡量不占用過多的表格空間位置。這里我們給出幾個點晴OA設計中常見的控件尺寸：
　◆ 日期控件關聯(lián)的單行文本框控件，寬度不少于75px，高度不小于25px；
　◆ 時間控件關聯(lián)的單行文本框，寬度不少于30px，高度不小于25px；
　◆ 日期控件、時間控件、系統(tǒng)計算控件自身的圖標都是16px像素見方，建議設計時留出20px寬度用于顯示這些控件（通過與之關聯(lián)的單行文本框控件或控件自身減少20px的寬度），從而保證控件輸入部分+控件圖標不大于表格的寬度，否則控件會把表格撐大，無法精確控制表單大小，也影響美觀性和其他同列的單元格的尺寸。
3） 保證控件大小能夠顯示完整的內(nèi)容
　　這個都能夠理解，不細說了，這里只是提醒注意考慮這一點。
4） 如何精準設計表單、表格和控件的大小
　　表單設計器不能很準確的設計整體尺寸大小，這里強調(diào)的是整體，因為對于控件，表單設計器可以通過控件屬性進行設定高度和寬度，但是設計器不能準確設計表格和表單的尺寸，因為只能用手工拖拉方式。
　　A） 表單和表格的整體精準設計。我們推薦在Excel表格中進行設計，并通過Excel表格的查看表格和表單的準確大小。如圖：

鼠標點中列的邊緣并按住不放，會出現(xiàn)行寬的提示，如上圖中紅色線部分（100像素。這樣，在Excel精準設計表格、表單尺寸后，相應的就可以）計算出控件的大小了。
　　B） 利用Excel表格，可以精確的確定表格、表單和控件的大小要求。下一步就是在編輯器的HTML對于擁代碼中對每一個表格、控件進行尺寸設置。

有眾多表格和控件的表單，這個過程是非常麻煩的，手工的工作量太大。

　　　　HTML代碼中截取的一段。其中width和height就是尺寸的參數(shù)。通過一一設置這些尺寸，就可以實現(xiàn)和Excel表格中一模一樣的表單設計了。
　　C）批量化、自動化表單設計（表單設計器的不足，需要創(chuàng)新性突破）
由于表單編輯器可以通過HTML代碼定義表單，這為我們提供了一種通過自動修改代碼的方式進行自動化和批量化精確設計表單的可能。這樣便可以大大節(jié)省人工時間，提升設計效率。

　　最終設計的表單效果截圖。大家可以看出，每個控件和所在的表格都是嚴絲合縫的對齊（參看請假類型控件的邊框，其他控件無邊框看不出來，并且取消）了控件邊框，讓控件完全融入了表單中了。其中，日期控件的寬度和關聯(lián)的單行文本框的寬度之和，正好等于所在表格的寬度，而且能夠完全呈現(xiàn)日期內(nèi)容。

　　以上，我們介紹完了表單的設計需要考慮的方方面面和一些經(jīng)驗，希望對大家有所幫助。