原文：公眾號：產(chǎn)品秘閣-B端產(chǎn)品設計
‖前言
表單是建立用戶與數(shù)據(jù)庫聯(lián)系的橋梁可岂，通過引導用戶填寫信息及設置后提交給后臺。在收集用戶數(shù)據(jù)信息的同時涩盾，還可以通過表單向用戶展示數(shù)據(jù)信息十饥。用戶在進行表單填寫/提交時，我們還需要進行輸入內(nèi)容校驗并及時反饋漂洋，確保用戶提交信息的完整性遥皂。
本篇簡單概述了常見的"表單錄入模式"、"表單構成"刽漂、"表單的校驗形式"以及對校驗結(jié)果進行"反饋"四個內(nèi)容演训。
01 表單錄入模式
1.單步錄入
單步錄入指的是在一個頁面即可完成內(nèi)容輸入。
適用場景：內(nèi)容較少贝咙、結(jié)構簡單样悟；
常見的形式有：普通形式?和?引導式。
普通形式
引導式
2.分步錄入
適用場景：內(nèi)容較多颈畸、錄入內(nèi)容的方式差異較大乌奇；
一般通過添加分步導航展示內(nèi)容。
02?表單構成
表單通常由"表單類別"眯娱、"標簽/標題"礁苗、"輸入域"、"提示"徙缴、"操作按鈕"等構成试伙。
①標簽：告知用戶此項輸入的內(nèi)容。按需求分為"必填項"（不填寫則無法進行后續(xù)操作）于样、"選填項"（不填寫也不會影響后續(xù)操作）疏叨、"不填項"（系統(tǒng)自動生成，無需填寫）穿剖；
②輸入域：用于采集用戶信息蚤蔓。常見的輸入域有4種形式："輸入框"、"文件上傳"糊余、"選擇內(nèi)容"（單選/多選秀又、開關单寂、級聯(lián)選擇器等）、"時間選擇"（日期吐辙、時間）宣决、"數(shù)值選擇"（步進器/滑動輸入條）；
③提示：幫助用戶快速昏苏、準確地理解輸入域操作/輸入內(nèi)容尊沸，可分為"輸入前"、"輸入中"贤惯、"輸入后" 三個階段進行提示洼专。
a."輸入前"的提示被稱為"引導提示"，"引導提示"一般分為 '全局提示'&'單項提示'：
'全局提示' 位于整個表單開始孵构，告知用戶填寫表單的用途/注意事項/用戶信息安全性告知等壶熏，是對整個表單的解釋說明；
'單項提示' 定位精準浦译，只對此項輸入域進行解釋說明；
b."輸入中"/"輸入后"被稱為"反饋提示"溯职，提醒用戶當前輸入的內(nèi)容是否符合填寫規(guī)則精盅。
④操作按鈕：表單填寫完成后要進入的動作，例如 "完成"/"提交"谜酒。有的表單當信息必填項未填寫完整時叹俏，提交/完成 按鈕為灰色狀態(tài)，僅當必填信息填寫完成后按鈕變?yōu)楦吡练娇蛇M行下一步僻族；有的表單不使用前者方式粘驰，而是始終顯示高亮，但在用戶提交時校驗述么，并對表單進行單項提示蝌数。
03?表單的校驗形式
填寫表單過程中的"輸入中"/"輸入后"被稱為"反饋提示"，針對反饋信息的精準性度秘，通過有兩種校驗方式：前端校驗和后端校驗顶伞。
前端校驗：校驗輸入的內(nèi)容格式，例如 用戶名格式剑梳、手機號格式等唆貌；
后端校驗：與數(shù)據(jù)庫相關，校驗信息正確與否垢乙，例如 用戶名是否存在锨咙、用戶名密碼是否匹配等；
校驗觸發(fā)條件：
輸入時追逮，進行校驗酪刀；
輸入完成粹舵、失去焦點時，進行校驗蓖宦；
輸入完成齐婴、繼續(xù)操作（保存/提交/下一步）時進行校驗；
報錯的方式：
即時報錯
輸入完成后報錯
由于校驗觸發(fā)條件的不同和報錯方式的不同稠茂，可以組成下面幾種方式：
1柠偶、輸入時驗證、即時報錯：
在用戶輸入的時候進行實時驗證睬关，獲取焦點的時候顯示提示诱担，隨著輸入的過程，符合要求后已與用戶通過驗證的反饋电爹。
缺點：影響一些性能蔫仙，但是這個影響比較小丐箩；如果在輸入一個錯誤率很高的內(nèi)容摇邦，頻繁的給用戶錯誤提示會影響用戶體驗。
優(yōu)點：減輕后臺數(shù)據(jù)傳送壓力屎勘。
常用于：檢測數(shù)據(jù)類型施籍，注冊頁面的密碼檢驗（輸入是否符合規(guī)則）。
2概漱、失去焦點丑慎、即時報錯：
用戶輸入完成后，鼠標點擊非輸入框的其他位置進行校驗瓤摧，并且如果有錯誤進行報錯竿裂。
缺點：如果輸入有誤，用戶需要多一步操作照弥，點擊會有錯誤的輸入框進行修改腻异，稍微影響用戶體驗。
優(yōu)點：為用戶修改錯誤節(jié)省時間这揣、避免出現(xiàn)很多錯誤需要改正的情況捂掰。
常用于：輸入驗證碼、注冊等功能曾沈。
3这嚣、操作 保存/提交/下一步 時全部報錯：
在用戶全部輸入完成以后，點擊下一步操作的時候?qū)⑺绣e誤提示都展示給用戶塞俱。
缺點：用戶不能及時看到反饋姐帚，及時進行修改，如果表單過長的話障涯，一定程度上會影響用戶體驗罐旗；
優(yōu)點：減少后端服務器壓力膳汪，提高頁面性能；
常用于：登錄賬號時檢測輸入內(nèi)容是否合法九秀。
04?反饋設計
在尼爾森十大可用性原則中遗嗽，第一原則就是系統(tǒng)狀態(tài)的可見性，即系統(tǒng)狀態(tài)反饋給用戶鼓蜒，不能讓用戶因?qū)顟B(tài)的未知而產(chǎn)生焦慮痹换。
系統(tǒng)狀態(tài)的可見性 包括“用戶知道自己在做什么”、“系統(tǒng)在做什么”都弹、“系統(tǒng)進行到了哪一步”娇豫、“用戶當前所處環(huán)節(jié)”等。應當始終為用戶提供適當且及時的反饋畅厢，避免用戶執(zhí)行錯誤操作冯痢。
反饋機制的設計原則：
①輕量。遵循【告知但不打擾】的基本原則框杜；
②清晰的文案浦楣。反饋內(nèi)容需要明確表達目的及操作后果，錯誤提示需要說清錯誤原因及改正方式咪辱；
③保持系統(tǒng)中所有相同事件反饋方式一致椒振，利于培養(yǎng)用戶使用習慣和心理預期。
④就近原則梧乘。反饋出現(xiàn)在操作點最近的地方時，最容易被注意到且容易被操作的庐杨。
