表單設(shè)計不光是設(shè)計外觀，我們還要去解決問題，用不同的視角和方法解決問題。

在工作與生活中，我們每天都會接觸到表單，請假要填單，費(fèi)用報銷要填單，網(wǎng)上購物要填單，申請貸款也要填單，在互聯(lián)網(wǎng)迅速發(fā)展的今天，我們已經(jīng)從線下手寫填單轉(zhuǎn)變到網(wǎng)上填單或者手機(jī)上填單。表單主要負(fù)責(zé)數(shù)據(jù)采集功能，常常是很多應(yīng)用賴以生存的關(guān)鍵，優(yōu)秀的表單設(shè)計，能夠讓用戶感覺心情舒暢，迅速而輕松的完成填寫；糟糕的表單設(shè)計，會讓用戶產(chǎn)生挫敗感。

審批表單設(shè)計思考

云之家審批將公司日常行政管理與業(yè)務(wù)審批流程電子化，通過移動審批進(jìn)一步提高內(nèi)部效率。云之家審批表單特性：線下業(yè)務(wù)審批場景—線上電子化審批—線下存檔。

審批用戶群體分析

1. 企業(yè)普通員工：填寫單據(jù)，提交審批
2. 企業(yè)經(jīng)理人：審核單據(jù)，進(jìn)行決策
3. 審批管理員：管理審批模版、配置審批流程、設(shè)置節(jié)點(diǎn)等

企業(yè)日常審批存在的問題

1. 員工不知道怎么填寫審批單
2. 審批管理員配置流程門檻高，上手難

目標(biāo)

1. 讓員工迅速并且輕松地完成填寫，提高審批效率
2. 讓企業(yè)管理員能輕松還原線下審批場景，快速配置審批流程

解決方案

好的填單體驗(yàn)來自好的合理的表單元素和填寫流程，我們將表單與用戶進(jìn)行對話，分析和合理利用表單構(gòu)成的元素，用適當(dāng)?shù)腻e誤提示、即時校驗(yàn)等交互方式幫助用戶理解表單內(nèi)容，快速填寫，從而提高審批效率。

表單的元素

表單通常由以下元素組成：

1. 標(biāo)簽
2. 輸入框
3. 動作
4. 幫助文字
5. 錯誤與提示

標(biāo)簽

標(biāo)簽的語言應(yīng)該簡潔明了，避免產(chǎn)生歧義。下圖左“是否單選”讓人有歧義，如果未做選擇，其實(shí)就是選擇了“多選”，然而卻很不直觀。單選與多選兩個選項(xiàng)是同級且互斥的，把兩個選項(xiàng)都展示出來會更直觀。

輸入框

輸入框是表單的核心。審批表單輸入域包括：單行文本框、多行文本框、單選框、多選框、數(shù)字輸入框、金額輸入框、日期、日期區(qū)間、人員選擇、部門選擇、圖片、文件等。我們利用“默認(rèn)值”和“輸入提醒”來幫助用戶完成填寫，避免用戶面對空白的輸入框，避免出錯。

我們對一些復(fù)雜輸入框利用輸入組來代表有意義的關(guān)聯(lián)，比如審批條件規(guī)則設(shè)置。

動作

web端表單通常包括若干最終動作，分別為主動作和次動作。主動作是完成表單上的最重要行為，例如提交、保存、繼續(xù)等。次動作是撤銷輸入的信息，如取消、重置或返回等。次動作通常會造成不良的后果，所以為了避免用戶誤操作，可以減弱次動作的視覺表現(xiàn)，潛在出錯率就會降到最低，從而引導(dǎo)人們成功完成表單填寫。我們用按鈕顏色區(qū)分主動作與次動作，并按照填寫順序，將按鈕與輸入框?qū)R。

幫助文字

用戶填寫審批單據(jù)，特別是審批管理員設(shè)置審批節(jié)點(diǎn)和審批流程，會接觸到很多專業(yè)的標(biāo)簽名，幫助文字內(nèi)容往往比較多，所以僅僅通過標(biāo)簽與輸入提示是遠(yuǎn)遠(yuǎn)不夠的。幫助文字設(shè)計方案有很多種，應(yīng)視情況而定。直接把幫助文字展示在表單中會占據(jù)頁面很大一部分區(qū)域，然而人們往往不會去閱讀屏幕上的提示，眼動追蹤研究表明，很多人看到表單會直接跳到第一個輸入框。

我們采用用戶激活的即時幫助系統(tǒng)—懸浮觸發(fā)文字提示氣泡。鼠標(biāo)懸浮問號圖標(biāo)，在標(biāo)簽下方出現(xiàn)幫助提示氣泡。鼠標(biāo)指針移開觸發(fā)熱區(qū)，則幫助文字消失。

這里要注意的，氣泡不要遮擋住輸入域，根據(jù)用戶從左到右的閱讀習(xí)慣，問號應(yīng)放在標(biāo)簽右側(cè)而不是輸入框旁。

• 這樣做的優(yōu)勢：把幫助文字放在表單頂部，而不是內(nèi)部，不會因?yàn)閹椭淖值膬?nèi)容而導(dǎo)致表單內(nèi)容下移而跳動。
• 但也存在缺點(diǎn)：只有當(dāng)指針固定在出發(fā)熱點(diǎn)時，幫助文字才會顯示?？紤]到審批表單很多時候是以彈窗和側(cè)滑窗作為承載，表現(xiàn)區(qū)域有限，所以使用即時幫助提示會更好。

錯誤與提示

沒有人真正喜歡填單，用戶會急于完成表單而遺漏必填項(xiàng)直接提交，也會誤解表單意思而出錯，而面對錯誤的首要任務(wù)就是告知用戶出錯和如何補(bǔ)救。如何讓用戶第一時間知道錯誤？錯誤提示應(yīng)該放在對應(yīng)元素旁邊，并且通過明顯的視覺表現(xiàn)進(jìn)行強(qiáng)調(diào)。

但我們常常犯的錯誤是用模態(tài)對話窗口提示錯誤，這在一定程度上干擾了用戶，彈窗覆蓋在出錯表單上，用戶只有先關(guān)閉了對話框才能繼續(xù)操作。

當(dāng)表單內(nèi)容很多，屏幕一屏無法顯示完表單所有信息時，錯誤提示應(yīng)該置于表單頂部，告知用戶有幾處錯誤，需要修正后才能提交。

表單交互

即時校驗(yàn)

避免用戶在點(diǎn)擊提交后才開始校驗(yàn)，讓用戶提前糾正錯誤。實(shí)時、動態(tài)更新限制文本輸入量。

智能默認(rèn)

智能默認(rèn)設(shè)置滿足多數(shù)人需要的默認(rèn)選擇，從而幫助用戶填寫單據(jù)。下圖是用戶發(fā)起審批后進(jìn)入到的填單頁面，系統(tǒng)會自動獲取用戶姓名、所屬部門和申請日期等數(shù)據(jù)，為用戶把這些信息填好，減少了用戶的填寫時間。

即時增加

即時增加提供額外輸入框給需要的人，同時不會阻礙不需要的人。審批過程設(shè)置默認(rèn)沒有條件，當(dāng)用戶需要添加條件時點(diǎn)擊添加條件塊即可。用戶可以根據(jù)場景添加多條條件。

總結(jié)

表單設(shè)計的首要目標(biāo)是讓人們迅速并且輕松地完成填寫。最好的方式是，讓表單以某種隱形方式存在，但又能保證系統(tǒng)和用戶同時獲得想要的東西。所以，表單設(shè)計不光是設(shè)計外觀，我們還要去解決問題，用不同的視角和方法解決問題。

作者：莫柳毅，云之家用戶體驗(yàn)部視覺設(shè)計師。一個喜歡挑戰(zhàn)，酷愛運(yùn)動的80后設(shè)計師。

本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@金蝶云之家體驗(yàn)中心（微信ID：UXD-Cloudhub），作者@莫柳毅

題圖來自 Pexels，基于 CC0 協(xié)議