表單是什么？
表單是一個包含表單元素的區(qū)域，使用表單標簽（<form>）定義。
表單元素是允許用戶在表單中輸入信息的元素，主要負責(zé)數(shù)據(jù)采集功能。
表單頁通常用來執(zhí)行登錄、注冊、預(yù)定、下單、評論等任務(wù)，是產(chǎn)品中數(shù)據(jù)錄入必不可少的頁面模式。因此，舒適的表單設(shè)計，可以引導(dǎo)用戶高效地完成表單背后的工作流程。——ANT Design
五大要素：標簽，輸入框，輸入反饋，動作，幫助信息
1.標簽：告訴用戶表單問題是什么，要填寫什么類型的信息；占位符文本（Placeholder text）—提示文本，位于表單文本框內(nèi)，一般用于提示用戶填寫，開始輸入時自動消失；
2.輸入框：供給用戶填寫答案信息，收集用戶輸入的信息，每個字段包含著某一類型的信息（如姓名、性別等）；
3.反饋：針對用戶輸入給出反饋；
4.動作：點擊一個按鈕或鏈接，執(zhí)行提交表單操作；
5.幫助：為如何填寫表單提供幫助。
關(guān)鍵：產(chǎn)品核心價值，最快得到所需
結(jié)果：表單簡短，精簡問題
為什么要簡化表單？
減少認知負荷；對使用屏幕閱讀器的用戶更友好；處理錯誤、更改細節(jié)更容易，降低用戶放棄的可能性；頁面加載更快；易于追蹤行為和過程，為分析提供數(shù)據(jù)；滾動操作減少，甚至被消滅；用戶對數(shù)據(jù)更有掌控力。
如何設(shè)計表單？
在填寫表單之前：
給用戶明確期望的進程提示，表單起始頁提示用戶要做什么準備，比如身份證、駕照、護照、銀行卡等，不要等到后期發(fā)現(xiàn)缺失必要信息而無法繼續(xù)。
宏觀排序：
1）按邏輯排序，條理清晰組織字段區(qū)域，如按時間，首字母。
2）由易至難，讓用戶適應(yīng)提問的氛圍，逐步融入再仔細思考較難問題。
3）與當(dāng)前情境最相關(guān)的問題優(yōu)先，可選問題放在最后，減少侵略性，這些問題可能會得到更多照顧。
一．標簽
Tips：
1. 避免將標簽作為占位符，占位符不可替代字段標簽，建議使用浮動（或自適應(yīng)）標簽floating labels，占位符文本（提示文本）一般來說它弊大于利。標簽作為占位符文本，輸入時提示文本自動消失，容易造成用戶短期記憶的壓力以及錯誤；
NN Group的研究表明空字段對比有文字的字段更吸引用戶注意，用戶更可能跳過那些有提示文本的字段，因為掃描式的瀏覽很容易誤會框內(nèi)已經(jīng)被輸入了文字。
占位符文本可以使用比普通的文本更淺的顏色，但容易導(dǎo)致對比度不符合W3C Web內(nèi)容的可訪問性指南（正常文本比4.5:1）。此外，占位符文本不支持輔助殘疾人的設(shè)計（如屏幕閱讀器），這會讓這部分用戶填寫表單變得很困難。
2.標簽的命名要易于用戶閱讀和理解，避免模糊的描述給用戶造成困擾；正確區(qū)分必填字段和選填字段；
3.選擇合適的對齊方式；
右對齊方式標簽的表單瀏覽時間僅次于頂部對齊標簽的表單，網(wǎng)頁高度有限的話推薦這種對齊方式。采用左對齊標簽方式的表單是三者之中瀏覽時間最長的，卻能放慢用戶的速度閱讀，讓其仔細考慮。
二．輸入框
Tips：
1. 關(guān)聯(lián)標簽和輸入框，給出具體的輸入要求或特殊格式規(guī)范；內(nèi)容長度和輸入框長度保持對應(yīng)，利用可供性暗示填寫方式，為用戶提供有意義的暗示；更大的文字輸入框、適度的留白空間會讓人更有填寫的欲望。避免一些不必要的輸入，減少用戶對不必要問題的反感，提高用戶滿意度，降低操作的錯誤率。
2. 輸入框三種狀態(tài)：普通狀態(tài)、禁用狀態(tài)（邏輯上先后關(guān)聯(lián)的情況）、輸入狀態(tài)（高亮顯示）。自由填寫支持靈活多樣的格式，提高容錯率。
輸入掩碼（Input Masks）掩碼字段能在用戶填寫時自動編排輸入的文本格式，將關(guān)注的重點放在填寫信息和查錯上，適用于手機號、卡號等；
郵件地址字段中提供常見的域名后綴，輸入@時，自動補充常見的后綴域名。
輸入字段（Input Fields）觸發(fā)對應(yīng)鍵盤類型，如手機號、日期、郵編、卡號等彈出數(shù)字鍵盤
3. 選擇填充的表單格式（除了常規(guī)的文字框Text Field輸入）可提供搜尋功能的下拉式選單，輸入內(nèi)容即時進行篩選、智能聯(lián)想，輸入與點選結(jié)合，快速方便。
常規(guī)選擇填充方式：下拉框（dropdown list）、單選框（radio button）、復(fù)選框（checkbox）；
衍生填充方式：滑塊（Range/slider）、微調(diào)步進器（Stepper）、開關(guān)鈕（Toggle switch）、Tab選框、搜索框等。
tips：TAB選項一次點選，效率高，選項低于6個可全部呈現(xiàn)；選擇值只有2-3個時避免使用下拉框，建議使用單選樣式。下拉框操作需點擊兩次，但包含多項選擇時更節(jié)省空間。
4. 填寫效率：自動填充 > 選擇填充 > 自由填充
預(yù)填充（Pre-Fills）設(shè)計時可考慮：默認值、可選值、常用值、歷史值、上次填充值
tips：
自動填寫，利用瀏覽器保存并列舉用戶以前填寫過的值，以實現(xiàn)自動個性化默認填寫，敏感數(shù)據(jù)除外；
智能補充，根據(jù)地址得到郵編，根據(jù)身份證號碼推測出生日；
基于定位，自動獲取地理位置信息，這種預(yù)填充方式要允許用戶進行微調(diào)和修改；
從更多的渠道搜集數(shù)據(jù)，第三方的帳號用戶授權(quán)；
自動更正輸入的拼寫錯誤，特殊字段除外；
自動首字母大寫，適用于填寫姓名；
智能默認，設(shè)置滿足多數(shù)人需要的默認選擇，能為用戶節(jié)省時間，提供參考意見保證默認選項符合大多數(shù)用戶利益，比如默認用戶同意條款。
三．動作
主動作：完成表單上最重要行為（完成表單）的動作。
次動作：與完成表單這一目標相悖的動作，比如撤銷、返回、重置、刪除等，當(dāng)用戶無意誤操作時容易造成不可挽回的負面影響。
Tips：
1. 表述清晰的行為動作按鈕；主要操作（主動作）和次要操作（次動作）可使用差異化的設(shè)計來區(qū)分，當(dāng)表單中不可避免出現(xiàn)次動作時，應(yīng)該盡量弱化次動作的視覺表現(xiàn)，將潛在出錯率降到最低，引導(dǎo)用戶完成任務(wù)流；表單未全部填寫完時，動作按鈕應(yīng)為禁用狀態(tài)，高亮和點擊動作按鈕也應(yīng)給出相應(yīng)的反饋；
2. 流程閉環(huán)，避免用戶在中途跳出；?提供Tab快捷鍵跳轉(zhuǎn)下一行；避免重置按鈕和清空表單按鈕，如果表單中含用戶財務(wù)信息之類的敏感字段，可以提供一個“取消”按鈕，讓用戶自行決定是否放棄表單填寫。
四．幫助
作用：有效說服用戶填寫表單，剔除負面干擾，消除用戶疑問，在隱私保密或安全方面獲取信任
Tips：
1. 不要隱藏基本的幫助文本，保證幫助文字簡單簡潔；
2. 合理地拆分步驟減輕填寫的心理壓力，相關(guān)信息分組；
3. 自動即時幫助，在幫助信息最合適的時間和位置顯示幫助信息，如多次輸錯密碼時，提示用戶找回密碼；
用戶控制打開/關(guān)閉彈層，幫助文字區(qū)域體現(xiàn)相關(guān)性的同時不能遮蓋其余的表單元素；
4. 適當(dāng)?shù)谋Ａ艨臻g可視化圖形作為引導(dǎo)，配合有趣的動畫。
五．反饋
Tips:
1. 給予恰當(dāng)?shù)妮斎胂拗疲拗朴脩舻男袨椋ㄈ缭陬A(yù)定機票時返回時間無法選擇出發(fā)時間之前的日期，出發(fā)城市不能跟到達城市一樣等），將表單填寫規(guī)則標注在明顯區(qū)域，或提供自動修正來預(yù)防犯錯；
2. 用戶填寫完后即時校驗，進行有效的拼寫檢查，名稱，地址等特殊字段忽略此功能；指明出錯的內(nèi)容，讓用戶能及時修改、補充缺漏的信息，采用高亮且精準的錯誤呈現(xiàn)形式，如粗邊框、粗體文字提醒、下劃線、斜體，不局限于色彩這一元素；若包含多個錯誤反饋，可另外在頂部增加橫幅統(tǒng)一列出全部提示；
3. 可將動作按鈕、跳轉(zhuǎn)過程、出錯提示/完成狀態(tài)提醒設(shè)計成合一的多態(tài)按鈕，簡潔實用。
表單內(nèi)容設(shè)計之后:
視覺角度Tips：
1. 建立清晰的視覺線性流和完成路徑，將所有字段如標簽、輸入框、主要動作按鈕排成一個垂直單列，不要在表單中使用垂直分欄（列），多列布局會打斷用戶自上而下的閱讀習(xí)慣；醒目的提交或完成按鈕，放在用戶的瀏覽線的終點更有利于用戶的完成操作；
2. 將有關(guān)聯(lián)的標注和字段在視覺上進行分組，保障可瀏覽性，專注當(dāng)前表單任務(wù)；
3. 填寫表單的界面，應(yīng)該減少噪音，強調(diào)文字和背景對比，避免背景廣告干擾，減少其他任務(wù)路徑，避免用戶退出表單填寫。
極端場景角度Tips：
保存表單進度。當(dāng)表單過長，一些特殊原因?qū)е卤韱侮P(guān)閉，如網(wǎng)頁崩潰、用戶誤操作，提供保存表單進度功能，再訪問表單時保留上一次的填寫進度。
