中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

一、表單錄入模式

1. 單步錄入

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

適用場景：內容較少、結構簡單；

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

普通形式

引導式

2. 分步錄入

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

二、表單構成

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

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

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

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

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

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

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

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

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

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

三、表單的校驗形式

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

• 前端校驗：校驗輸入的內容格式，例如 用戶名格式、手機號格式等；
• 后端校驗：與數據庫相關，校驗信息正確與否，例如 用戶名是否存在、用戶名密碼是否匹配等；

校驗觸發條件：

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

報錯的方式：

• 即時報錯
• 輸入完成后報錯

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

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

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

缺點：影響一些性能，但是這個影響比較?。蝗绻谳斎胍粋€錯誤率很高的內容，頻繁的給用戶錯誤提示會影響用戶體驗。

優點：減輕后臺數據傳送壓力。

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

2. 失去焦點、即時報錯

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

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

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

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

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

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

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

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

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

四、反饋設計

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

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

反饋機制的設計原則：

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

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

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

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

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

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