編輯導(dǎo)語(yǔ)：表單是連接用戶與數(shù)據(jù)庫(kù)的橋梁，通過引導(dǎo)用戶進(jìn)行信息的填寫，從而提交數(shù)據(jù)給后臺(tái)。在用戶填寫提交時(shí)，還需要對(duì)用戶輸入內(nèi)容進(jìn)行校驗(yàn)與反饋，保證用戶信息填寫的完整度。那么，該如何實(shí)現(xiàn)這一過程？作者分享了表單設(shè)計(jì)與校驗(yàn)反饋的四個(gè)方面，希望對(duì)你有所幫助。

表單是建立用戶與數(shù)據(jù)庫(kù)聯(lián)系的橋梁，通過引導(dǎo)用戶填寫信息及設(shè)置后提交給后臺(tái)。在收集用戶數(shù)據(jù)信息的同時(shí)，還可以通過表單向用戶展示數(shù)據(jù)信息。用戶在進(jìn)行表單填寫/提交時(shí)，我們還需要進(jìn)行輸入內(nèi)容校驗(yàn)并及時(shí)反饋，確保用戶提交信息的完整性。

本篇簡(jiǎn)單概述了常見的“表單錄入模式”、“表單構(gòu)成”、“表單的校驗(yàn)形式”以及對(duì)校驗(yàn)結(jié)果進(jìn)行“反饋”四個(gè)內(nèi)容。

一、表單錄入模式

1. 單步錄入

單步錄入指的是在一個(gè)頁(yè)面即可完成內(nèi)容輸入。

適用場(chǎng)景：內(nèi)容較少、結(jié)構(gòu)簡(jiǎn)單；

常見的形式有：普通形式和引導(dǎo)式。

普通形式

引導(dǎo)式

2. 分步錄入

適用場(chǎng)景：內(nèi)容較多、錄入內(nèi)容的方式差異較大；一般通過添加分步導(dǎo)航展示內(nèi)容。

二、表單構(gòu)成

表單通常由“表單類別”、“標(biāo)簽/標(biāo)題”、“輸入域”、“提示”、“操作按鈕”等構(gòu)成。

①標(biāo)簽：告知用戶此項(xiàng)輸入的內(nèi)容。按需求分為“必填項(xiàng)”（不填寫則無法進(jìn)行后續(xù)操作）、“選填項(xiàng)”（不填寫也不會(huì)影響后續(xù)操作）、“不填項(xiàng)”（系統(tǒng)自動(dòng)生成，無需填寫）；

②輸入域：用于采集用戶信息。常見的輸入域有4種形式：“輸入框”、“文件上傳”、“選擇內(nèi)容”（單選/多選、開關(guān)、級(jí)聯(lián)選擇器等）、“時(shí)間選擇”（日期、時(shí)間）、“數(shù)值選擇”（步進(jìn)器/滑動(dòng)輸入條）；

③提示：幫助用戶快速、準(zhǔn)確地理解輸入域操作/輸入內(nèi)容，可分為“輸入前”、“輸入中”、“輸入后” 三個(gè)階段進(jìn)行提示。

a.“輸入前”的提示被稱為“引導(dǎo)提示”，“引導(dǎo)提示”一般分為 ‘全局提示’&‘單項(xiàng)提示’：

‘全局提示’位于整個(gè)表單開始，告知用戶填寫表單的用途/注意事項(xiàng)/用戶信息安全性告知等，是對(duì)整個(gè)表單的解釋說明；

‘單項(xiàng)提示’定位精準(zhǔn)，只對(duì)此項(xiàng)輸入域進(jìn)行解釋說明；

b.“輸入中”/“輸入后”被稱為“反饋提示”，提醒用戶當(dāng)前輸入的內(nèi)容是否符合填寫規(guī)則。

④操作按鈕：表單填寫完成后要進(jìn)入的動(dòng)作，例如 “完成”/“提交”。

有的表單當(dāng)信息必填項(xiàng)未填寫完整時(shí)，提交/完成 按鈕為灰色狀態(tài)，僅當(dāng)必填信息填寫完成后按鈕變?yōu)楦吡练娇蛇M(jìn)行下一步；有的表單不使用前者方式，而是始終顯示高亮，但在用戶提交時(shí)校驗(yàn)，并對(duì)表單進(jìn)行單項(xiàng)提示。

三、表單的校驗(yàn)形式

填寫表單過程中的“輸入中”/“輸入后”被稱為“反饋提示”，針對(duì)反饋信息的精準(zhǔn)性，通過有兩種校驗(yàn)方式：前端校驗(yàn)和后端校驗(yàn)。

• 前端校驗(yàn)：校驗(yàn)輸入的內(nèi)容格式，例如 用戶名格式、手機(jī)號(hào)格式等；
• 后端校驗(yàn)：與數(shù)據(jù)庫(kù)相關(guān)，校驗(yàn)信息正確與否，例如 用戶名是否存在、用戶名密碼是否匹配等；

校驗(yàn)觸發(fā)條件：

• 輸入時(shí)，進(jìn)行校驗(yàn)；
• 輸入完成、失去焦點(diǎn)時(shí)，進(jìn)行校驗(yàn)；
• 輸入完成、繼續(xù)操作（保存/提交/下一步）時(shí)進(jìn)行校驗(yàn)；

報(bào)錯(cuò)的方式：

• 即時(shí)報(bào)錯(cuò)
• 輸入完成后報(bào)錯(cuò)

由于校驗(yàn)觸發(fā)條件的不同和報(bào)錯(cuò)方式的不同，可以組成下面幾種方式：

1. 輸入時(shí)驗(yàn)證、即時(shí)報(bào)錯(cuò)

在用戶輸入的時(shí)候進(jìn)行實(shí)時(shí)驗(yàn)證，獲取焦點(diǎn)的時(shí)候顯示提示，隨著輸入的過程，符合要求后已與用戶通過驗(yàn)證的反饋。

缺點(diǎn)：影響一些性能，但是這個(gè)影響比較??；如果在輸入一個(gè)錯(cuò)誤率很高的內(nèi)容，頻繁的給用戶錯(cuò)誤提示會(huì)影響用戶體驗(yàn)。

優(yōu)點(diǎn)：減輕后臺(tái)數(shù)據(jù)傳送壓力。

常用于：檢測(cè)數(shù)據(jù)類型，注冊(cè)頁(yè)面的密碼檢驗(yàn)（輸入是否符合規(guī)則）。

2. 失去焦點(diǎn)、即時(shí)報(bào)錯(cuò)

用戶輸入完成后，鼠標(biāo)點(diǎn)擊非輸入框的其他位置進(jìn)行校驗(yàn)，并且如果有錯(cuò)誤進(jìn)行報(bào)錯(cuò)。

缺點(diǎn)：如果輸入有誤，用戶需要多一步操作，點(diǎn)擊會(huì)有錯(cuò)誤的輸入框進(jìn)行修改，稍微影響用戶體驗(yàn)。

優(yōu)點(diǎn)：為用戶修改錯(cuò)誤節(jié)省時(shí)間、避免出現(xiàn)很多錯(cuò)誤需要改正的情況。

常用于：輸入驗(yàn)證碼、注冊(cè)等功能。

3. 操作 保存/提交/下一步 時(shí)全部報(bào)錯(cuò)

在用戶全部輸入完成以后，點(diǎn)擊下一步操作的時(shí)候?qū)⑺绣e(cuò)誤提示都展示給用戶。

缺點(diǎn)：用戶不能及時(shí)看到反饋，及時(shí)進(jìn)行修改，如果表單過長(zhǎng)的話，一定程度上會(huì)影響用戶體驗(yàn)；

優(yōu)點(diǎn)：減少后端服務(wù)器壓力，提高頁(yè)面性能；

常用于：登錄賬號(hào)時(shí)檢測(cè)輸入內(nèi)容是否合法。

四、反饋設(shè)計(jì)

在尼爾森十大可用性原則中，第一原則就是系統(tǒng)狀態(tài)的可見性，即系統(tǒng)狀態(tài)反饋給用戶，不能讓用戶因?qū)顟B(tài)的未知而產(chǎn)生焦慮。

系統(tǒng)狀態(tài)的可見性 包括“用戶知道自己在做什么”、“系統(tǒng)在做什么”、“系統(tǒng)進(jìn)行到了哪一步”、“用戶當(dāng)前所處環(huán)節(jié)”等。應(yīng)當(dāng)始終為用戶提供適當(dāng)且及時(shí)的反饋，避免用戶執(zhí)行錯(cuò)誤操作。

反饋機(jī)制的設(shè)計(jì)原則：

①輕量。遵循【告知但不打擾】的基本原則；

②清晰的文案。反饋內(nèi)容需要明確表達(dá)目的及操作后果，錯(cuò)誤提示需要說清錯(cuò)誤原因及改正方式；

③保持系統(tǒng)中所有相同事件反饋方式一致，利于培養(yǎng)用戶使用習(xí)慣和心理預(yù)期。

④就近原則。反饋出現(xiàn)在操作點(diǎn)最近的地方時(shí)，最容易被注意到且容易被操作的。

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

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