91网首页-91网页版-91网在线观看-91网站免费观看-91网站永久视频-91网站在线播放

：點(diǎn)晴OA工作流快速入門(mén)手冊(cè)(含表單模板).rar

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

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

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

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

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

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

4、表單打印設(shè)置對(duì)表單設(shè)計(jì)的要求

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

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

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

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

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

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

★政府發(fā)文

★旅游地產(chǎn)

★政府國(guó)企

★企業(yè)合同

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

　　字體：14px16px，加粗13px；
　　表頭：宋體，；表名稱(chēng)：微軟雅黑，；標(biāo)題：宋體，

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

　　背景顏色：淺藍(lán)色（235,245,255）；過(guò)渡帶，RGB（0,0128）
　　表頭和標(biāo)題：RGB，

　　邊框顏色：黑色；

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

　　表頭的行高：40px（若是兩行的表頭，可設(shè)計(jì)為50px；表單名稱(chēng)的行高：40px）

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

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

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

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

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

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

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

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

編輯器中的設(shè)計(jì)效果

　　大家看到，這個(gè)設(shè)計(jì)效果并不是最終的效果。一方面設(shè)計(jì)的效果看起來(lái)和預(yù)覽的不一樣，另一方面，控件的尺寸還要調(diào)整。
我們先把控件的邊框去掉吧，這樣看起來(lái)更有一體化的美觀效果。打開(kāi)編輯器中的HTML編輯功能。在HTML最上面（表單的開(kāi)頭）增加這些內(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">

　　通過(guò)代碼分析，這段代碼的意思是對(duì)于INPUT和TEXTAREA類(lèi)的控件，邊框尺寸為 0px（也就是無(wú)邊框設(shè)計(jì)，并把這個(gè)設(shè)計(jì)命名為#GOVTABLE，在表格<table>中引用該id=#GOVTABLE。加入這段代碼后，再看一下效果：

　　INPUT和TEAXAREA開(kāi)頭的控件的邊框都取消了只有請(qǐng)假類(lèi)型的控件還有邊框，因?yàn)樵摽丶拈_(kāi)頭是OPTION，我們認(rèn)為有必要保留它的邊框。

3、保證表單控件大小和表格的對(duì)齊

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

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

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

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

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

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

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

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