筆者有OA系統(tǒng)的設計經(jīng)驗，本系列將分篇章總結(jié)OA中最核心的功能，希望能盡可能全面地記錄筆者的經(jīng)驗，和感興趣的讀者交流分享。

這次我們探討OA系統(tǒng)里另一個重要的功能模塊——表單。表單包括行政類單據(jù)，如請假單、設備申請單、用車申請單等；統(tǒng)計調(diào)查類單據(jù)，如人員信息統(tǒng)計表、團建活動報名表、調(diào)查問卷等。

線下一般有相應的紙質(zhì)單據(jù)，填寫人完成填寫后可能經(jīng)由多級領導審批，最終歸口到某部門或某負責人。每種表單會關聯(lián)一套流程，流程之間可能各不相同。所以表單模塊要和流程模塊緊密合作才能提供完整的線上服務，這也是為什么我會在上一篇的流程模塊之后緊接著寫表單模塊。

下面具體探討一下表單模塊的設計。

一、表單設計頁面

表單設計頁面一般包括控件庫、設計區(qū)、屬性面板。如下圖所示。

宜搭的表單設計頁面

操作方式一般是用鼠標拖拽控件，在設計區(qū)合理地擺放控件，在屬性面板設置控件和頁面的屬性。

二、表單樣式

1. 互聯(lián)網(wǎng)式

這種表單樣式是我們在互聯(lián)網(wǎng)上最常見到的，直接看個例子：

用宜搭創(chuàng)建的表單

對于大部分企業(yè)而言這種表單形式是極好的選擇。它的特點包括繪制簡單，只需要把表單控件有序地向下堆疊即可；表單長度可以隨意延展，多少字段都能放的下；界面簡潔明了，填寫體驗好。

但如果是面向政府單位的政務系統(tǒng)，這種表單不一定被客戶接受，下面的第二種表單樣式更被青睞。

2. 線下表單復刻式

這種表單樣式完全復制線下紙質(zhì)表單的樣式，常常被用于政府單位，原因包括以下兩個方面：

1. 有些政府單位有留檔的需求，線上表單走完流程之后需要打印出來并歸檔，所以線上表單樣式要和線下的盡量保持一致；
2. 政府單位的信息化水平不及長期接觸互聯(lián)網(wǎng)的大眾用戶，所以政府單位更保守，更愿意沿用以往的工作模式。而且政府單位的領導往往年紀較大，他們已經(jīng)習慣了紙質(zhì)表單的樣式，使用線下表單的樣式可以照顧領導的使用體驗。

我們來看下面的例子，來自于致遠政務系統(tǒng)的官網(wǎng)。

致遠-復制線下樣式的線上表單

這種表單的繪制方式有兩種：

（1) 基于XML代碼

在word中繪制好表單，復制表單并解析成XML代碼，在OA系統(tǒng)中根據(jù)XML代碼渲染出來。然后需要布置單選框、文本框等控件，新增控件其實只是增加了一段XML代碼。

當然，這些實現(xiàn)原理是開發(fā)團隊的業(yè)務范疇。

在微調(diào)表單的時候這種方式并不方便，而且根據(jù)調(diào)整操作來修改XML代碼的代碼邏輯比較復雜，有時甚至需要實施人員手動修改XML代碼。

所以產(chǎn)品設計層面需要提供手動修改XML代碼的功能，現(xiàn)場實施人員可以通過修改XML代碼調(diào)整表格的樣式。

（2) 基于圖片

在word中繪制好表單，導出成圖片，把圖片導入到OA系統(tǒng)中作為底圖。然后把表單控件擺放到合適的單元格內(nèi)。

這種方式的好處在于快捷，操作難度低。但問題也很明顯。

大小不一的表單控件需要被完整地放入單元格線框內(nèi)，繪制過程并不愉快。項目實施人員要極為專注地調(diào)整輸入框的大小，像素級精準地調(diào)整輸入框的位置，效率之低可以想象，更可怕的是一個項目中可能要繪制上百個不同的表單。

在布置控件的時候如果可以自動調(diào)整控件大小并吸附到單元格內(nèi)，上面的問題就迎刃而解了。技術上是可實現(xiàn)的，親測使用體驗很爽。

三、表單控件

常見表單控件的種類和關鍵屬性包括：

1. 布局類

• 柵格：適用于互聯(lián)網(wǎng)式的表單，用于設置一行有幾列以及每列的寬度；
• 分隔線：把表單縱向劃分成若干區(qū)域?？稍O置分隔線的名稱。

2. 文本類

• 單行文本框：可提供校驗規(guī)則，比如格式是郵箱、手機號、正則表達式、字符長度等；
• 多行文本框：同上；
• 數(shù)字框：可校驗是整數(shù)、小數(shù)、正數(shù)、負數(shù)等；
• 標簽：可以用作表單字段的名稱，如“姓名”，或備注說明。

3. 選擇類

• 單選框：可自定義選項，調(diào)整選項順序，選項縱向排列或橫向排列；
• 多選框：同上；
• 下拉框：可自定義選項，調(diào)整選項順序，單選或多選；
• 人員選擇：用于選擇單位內(nèi)的用戶。可設置單選或多選；
• 部門選擇：用于選擇部門?？稍O置單選或多選；
• 日期：可設置日期的格式（年月日時分秒的組合），可選范圍；
• 日期區(qū)間：同上；
• 地區(qū)：可設置格式，如省市區(qū)、省市、省等；
• 國家：可設置單選或多選；
• 評分：可設置分值范圍，是否允許半分。

4. 其他

• 上傳圖片：可設置最多上傳數(shù)量，圖片分辨率限制；
• 上傳附件；可設置最多上傳數(shù)量，附件大小限制；
• 添加超鏈接：讓用戶可以添加超鏈接，比如部門團建活動建議收集表要求部門成員提交自己的想法，可以附上關于活動場所介紹的網(wǎng)頁鏈接?？稍O置最多添加數(shù)量；
• 圖片：放置在表單中的圖片。可從本地上傳，或指向某個鏈接地址；
• 超鏈接：用戶點擊后打開對應的網(wǎng)頁?？梢栽O置鏈接地址和顯示的文案，比如“這是一個鏈接”。

幾乎適用于所有控件的通用屬性包括提示文案、默認值。

關于控件是否必填、只讀、可編輯、隱藏等設置，在上一篇文章提過，最好在與表單相關聯(lián)的流程里配置，因為不同流程節(jié)點的要求不同。

#相關文章#

OA系統(tǒng)設計（1）：流程

本文由 @Twincus靚 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自于Pexels，基于Pexels License