把一個表單設計到極緻的感受?編輯導語：表單是連接用戶與數據庫的橋梁，通過引導用戶進行信息的填寫，從而提交數據給後台在用戶填寫提交時，還需要對用戶輸入内容進行校驗與反饋，保證用戶信息填寫的完整度那麼，該如何實現這一過程？作者分享了表單設計與校驗反饋的四個方面，希望對你有所幫助，我來為大家講解一下關于把一個表單設計到極緻的感受?跟着小編一起來看一看吧!

把一個表單設計到極緻的感受

編輯導語：表單是連接用戶與數據庫的橋梁，通過引導用戶進行信息的填寫，從而提交數據給後台。在用戶填寫提交時，還需要對用戶輸入内容進行校驗與反饋，保證用戶信息填寫的完整度。那麼，該如何實現這一過程？作者分享了表單設計與校驗反饋的四個方面，希望對你有所幫助。

表單是建立用戶與數據庫聯系的橋梁，通過引導用戶填寫信息及設置後提交給後台。在收集用戶數據信息的同時，還可以通過表單向用戶展示數據信息。用戶在進行表單填寫/提交時，我們還需要進行輸入内容校驗并及時反饋，确保用戶提交信息的完整性。

本篇簡單概述了常見的“表單錄入模式”、“表單構成”、“表單的校驗形式”以及對校驗結果進行“反饋”四個内容。

1. 單步錄入

單步錄入指的是在一個頁面即可完成内容輸入。

适用場景：内容較少、結構簡單；

常見的形式有：普通形式和引導式。

2. 分步錄入

适用場景：内容較多、錄入内容的方式差異較大；一般通過添加分步導航展示内容。

表單通常由“表單類别”、“标簽/标題”、“輸入域”、“提示”、“操作按鈕”等構成。

①标簽：告知用戶此項輸入的内容。按需求分為“必填項”（不填寫則無法進行後續操作）、“選填項”（不填寫也不會影響後續操作）、“不填項”（系統自動生成，無需填寫）；

②輸入域：用于采集用戶信息。常見的輸入域有4種形式：“輸入框”、“文件上傳”、“選擇内容”（單選/多選、開關、級聯選擇器等）、“時間選擇”（日期、時間）、“數值選擇”（步進器/滑動輸入條）；

③提示：幫助用戶快速、準确地理解輸入域操作/輸入内容，可分為“輸入前”、“輸入中”、“輸入後” 三個階段進行提示。

a.“輸入前”的提示被稱為“引導提示”，“引導提示”一般分為 ‘全局提示’&‘單項提示’：

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

‘單項提示’定位精準，隻對此項輸入域進行解釋說明；

b.“輸入中”/“輸入後”被稱為“反饋提示”，提醒用戶當前輸入的内容是否符合填寫規則。

④操作按鈕：表單填寫完成後要進入的動作，例如 “完成”/“提交”。

有的表單當信息必填項未填寫完整時，提交/完成 按鈕為灰色狀态，僅當必填信息填寫完成後按鈕變為高亮方可進行下一步；有的表單不使用前者方式，而是始終顯示高亮，但在用戶提交時校驗，并對表單進行單項提示。

填寫表單過程中的“輸入中”/“輸入後”被稱為“反饋提示”，針對反饋信息的精準性，通過有兩種校驗方式：前端校驗和後端校驗。

前端校驗：校驗輸入的内容格式，例如 用戶名格式、手機号格式等；

後端校驗：與數據庫相關，校驗信息正确與否，例如 用戶名是否存在、用戶名密碼是否匹配等；

校驗觸發條件：

輸入時，進行校驗；

輸入完成、失去焦點時，進行校驗；

輸入完成、繼續操作（保存/提交/下一步）時進行校驗；

報錯的方式：

由于校驗觸發條件的不同和報錯方式的不同，可以組成下面幾種方式：

1. 輸入時驗證、即時報錯

在用戶輸入的時候進行實時驗證，獲取焦點的時候顯示提示，随着輸入的過程，符合要求後已與用戶通過驗證的反饋。

缺點：影響一些性能，但是這個影響比較小；如果在輸入一個錯誤率很高的内容，頻繁的給用戶錯誤提示會影響用戶體驗。

優點：減輕後台數據傳送壓力。

常用于：檢測數據類型，注冊頁面的密碼檢驗（輸入是否符合規則）。

2. 失去焦點、即時報錯

用戶輸入完成後，鼠标點擊非輸入框的其他位置進行校驗，并且如果有錯誤進行報錯。

缺點：如果輸入有誤，用戶需要多一步操作，點擊會有錯誤的輸入框進行修改，稍微影響用戶體驗。

優點：為用戶修改錯誤節省時間、避免出現很多錯誤需要改正的情況。

常用于：輸入驗證碼、注冊等功能。

3. 操作 保存/提交/下一步 時全部報錯

在用戶全部輸入完成以後，點擊下一步操作的時候将所有錯誤提示都展示給用戶。

缺點：用戶不能及時看到反饋，及時進行修改，如果表單過長的話，一定程度上會影響用戶體驗；

優點：減少後端服務器壓力，提高頁面性能；

常用于：登錄賬号時檢測輸入内容是否合法。

在尼爾森十大可用性原則中，第一原則就是系統狀态的可見性，即系統狀态反饋給用戶，不能讓用戶因對狀态的未知而産生焦慮。

系統狀态的可見性 包括“用戶知道自己在做什麼”、“系統在做什麼”、“系統進行到了哪一步”、“用戶當前所處環節”等。應當始終為用戶提供适當且及時的反饋，避免用戶執行錯誤操作。

反饋機制的設計原則：

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

②清晰的文案。反饋内容需要明确表達目的及操作後果，錯誤提示需要說清錯誤原因及改正方式；

③保持系統中所有相同事件反饋方式一緻，利于培養用戶使用習慣和心理預期。

④就近原則。反饋出現在操作點最近的地方時，最容易被注意到且容易被操作的。

本文由 @産品秘閣 原創發布于人人都是産品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!