在工作與生活中，我們每天都會接觸到表單，請假要填單，費用報銷要填單，網上購物要填單，申請貸款也要填單，在互聯網迅速發展的今天，我們已經從線下手寫填單轉變到網上填單或者手機上填單。表單主要負責數據採集功能，常常是很多應用賴以生存的關鍵，優秀的表單設計，能夠讓用戶感覺心情舒暢，迅速而輕鬆的完成填寫；糟糕的表單設計，會讓用戶產生挫敗感。
雲之家審批將公司日常行政管理與業務審批流程電子化，通過移動審批進一步提高內部效率。雲之家審批表單特性：線下業務審批場景—線上電子化審批—線下存檔。
審批用戶群體分析
- 企業普通員工：填寫單據，提交審批
- 企業經理人：審核單據，進行決策
- 審批管理員：管理審批模版、配置審批流程、設置節點等
企業日常審批存在的問題
- 員工不知道怎麼填寫審批單
- 審批管理員配置流程門檻高，上手難
目標
- 讓員工迅速並且輕鬆地完成填寫，提高審批效率
- 讓企業管理員能輕鬆還原線下審批場景，快速配置審批流程
解決方案
好的填單體驗來自好的合理的表單元素和填寫流程，我們將表單與用戶進行對話，分析和合理利用表單構成的元素，用適當的錯誤提示、即時校驗等交互方式幫助用戶理解表單內容，快速填寫，從而提高審批效率。
表單的元素
表單通常由以下元素組成：
- 標籤
- 輸入框
- 動作
- 幫助文字
- 錯誤與提示
標籤
標籤的語言應該簡潔明瞭，避免產生歧義。下圖左“是否單選”讓人有歧義，如果未做選擇，其實就是選擇了“多選”，然而卻很不直觀。單選與多選兩個選項是同級且互斥的，把兩個選項都展示出來會更直觀。
輸入框
輸入框是表單的核心。審批表單輸入域包括：單行文本框、多行文本框、單選框、多選框、數字輸入框、金額輸入框、日期、日期區間、人員選擇、部門選擇、圖片、文件等。我們利用“默認值”和“輸入提醒”來幫助用戶完成填寫，避免用戶面對空白的輸入框，避免出錯。
我們對一些複雜輸入框利用輸入組來代表有意義的關聯，比如審批條件規則設置。
動作
web端表單通常包括若干最終動作，分別為主動作和次動作。主動作是完成表單上的最重要行為，例如提交、保存、繼續等。次動作是撤銷輸入的信息，如取消、重置或返回等。次動作通常會造成不良的後果，所以為了避免用戶誤操作，可以減弱次動作的視覺表現，潛在出錯率就會降到最低，從而引導人們成功完成表單填寫。我們用按鈕顏色區分主動作與次動作，並按照填寫順序，將按鈕與輸入框對齊。
幫助文字
用戶填寫審批單據，特別是審批管理員設置審批節點和審批流程，會接觸到很多專業的標籤名，幫助文字內容往往比較多，所以僅僅通過標籤與輸入提示是遠遠不夠的。幫助文字設計方案有很多種，應視情況而定。直接把幫助文字展示在表單中會佔據頁面很大一部分區域，然而人們往往不會去閱讀屏幕上的提示，眼動追蹤研究表明，很多人看到表單會直接跳到第一個輸入框。
我們採用用戶激活的即時幫助系統—懸浮觸發文字提示氣泡。鼠標懸浮問號圖標，在標籤下方出現幫助提示氣泡。鼠標指針移開觸發熱區，則幫助文字消失。
這裡要注意的，氣泡不要遮擋住輸入域，根據用戶從左到右的閱讀習慣，問號應放在標籤右側而不是輸入框旁。
- 這樣做的優勢：把幫助文字放在表單頂部，而不是內部，不會因為幫助文字的內容而導致表單內容下移而跳動。
- 但也存在缺點：只有當指針固定在出發熱點時，幫助文字才會顯示。考慮到審批表單很多時候是以彈窗和側滑窗作為承載，表現區域有限，所以使用即時幫助提示會更好。
錯誤與提示
沒有人真正喜歡填單，用戶會急於完成表單而遺漏必填項直接提交，也會誤解表單意思而出錯，而面對錯誤的首要任務就是告知用戶出錯和如何補救。如何讓用戶第一時間知道錯誤？錯誤提示應該放在對應元素旁邊，並且通過明顯的視覺表現進行強調。
但我們常常犯的錯誤是用模態對話窗口提示錯誤，這在一定程度上干擾了用戶，彈窗覆蓋在出錯表單上，用戶只有先關閉了對話框才能繼續操作。
當表單內容很多，屏幕一屏無法顯示完表單所有信息時，錯誤提示應該置於表單頂部，告知用戶有幾處錯誤，需要修正後才能提交。
表單交互
即時校驗
避免用戶在點擊提交後才開始校驗，讓用戶提前糾正錯誤。實時、動態更新限制文本輸入量。
智能默認
智能默認設置滿足多數人需要的默認選擇，從而幫助用戶填寫單據。下圖是用戶發起審批後進入到的填單頁面，系統會自動獲取用戶姓名、所屬部門和申請日期等數據，為用戶把這些信息填好，減少了用戶的填寫時間。
即時增加
即時增加提供額外輸入框給需要的人，同時不會阻礙不需要的人。審批過程設置默認沒有條件，當用戶需要添加條件時點擊添加條件塊即可。用戶可以根據場景添加多條條件。
總結
表單設計的首要目標是讓人們迅速並且輕鬆地完成填寫。最好的方式是，讓表單以某種隱形方式存在，但又能保證系統和用戶同時獲得想要的東西。所以，表單設計不光是設計外觀，我們還要去解決問題，用不同的視角和方法解決問題。
作者：莫柳毅，雲之家用戶體驗部視覺設計師。一個喜歡挑戰，酷愛運動的80後設計師。
本文來源於人人都是產品經理合作媒體@金蝶雲之家體驗中心（微信ID：UXD-Cloudhub），作者@莫柳毅
題圖來自 Pexels，基於 CC0 協議