表單是什么？

表單是一個(gè)包含表單元素的區(qū)域，使用表單標(biāo)簽（<form>）定義。

表單元素是允許用戶在表單中輸入信息的元素，主要負(fù)責(zé)數(shù)據(jù)采集功能。

表單頁(yè)通常用來執(zhí)行登錄、注冊(cè)、預(yù)定、下單、評(píng)論等任務(wù)，是產(chǎn)品中數(shù)據(jù)錄入必不可少的頁(yè)面模式。因此，舒適的表單設(shè)計(jì)，可以引導(dǎo)用戶高效地完成表單背后的工作流程?！狝NT Design

五大要素：標(biāo)簽，輸入框，輸入反饋，動(dòng)作，幫助信息

1.標(biāo)簽：告訴用戶表單問題是什么，要填寫什么類型的信息；占位符文本（Placeholder text）—提示文本，位于表單文本框內(nèi)，一般用于提示用戶填寫，開始輸入時(shí)自動(dòng)消失；

2.輸入框：供給用戶填寫答案信息，收集用戶輸入的信息，每個(gè)字段包含著某一類型的信息（如姓名、性別等）；

3.反饋：針對(duì)用戶輸入給出反饋；

4.動(dòng)作：點(diǎn)擊一個(gè)按鈕或鏈接，執(zhí)行提交表單操作；

5.幫助：為如何填寫表單提供幫助。

關(guān)鍵：產(chǎn)品核心價(jià)值，最快得到所需

結(jié)果：表單簡(jiǎn)短，精簡(jiǎn)問題

為什么要簡(jiǎn)化表單？

減少認(rèn)知負(fù)荷；對(duì)使用屏幕閱讀器的用戶更友好；處理錯(cuò)誤、更改細(xì)節(jié)更容易，降低用戶放棄的可能性；頁(yè)面加載更快；易于追蹤行為和過程，為分析提供數(shù)據(jù)；滾動(dòng)操作減少，甚至被消滅；用戶對(duì)數(shù)據(jù)更有掌控力。

如何設(shè)計(jì)表單？

在填寫表單之前：

給用戶明確期望的進(jìn)程提示，表單起始頁(yè)提示用戶要做什么準(zhǔn)備，比如身份證、駕照、護(hù)照、銀行卡等，不要等到后期發(fā)現(xiàn)缺失必要信息而無(wú)法繼續(xù)。

宏觀排序：

1）按邏輯排序，條理清晰組織字段區(qū)域，如按時(shí)間，首字母。

2）由易至難，讓用戶適應(yīng)提問的氛圍，逐步融入再仔細(xì)思考較難問題。

3）與當(dāng)前情境最相關(guān)的問題優(yōu)先，可選問題放在最后，減少侵略性，這些問題可能會(huì)得到更多照顧。

一．標(biāo)簽

Tips：

1. 避免將標(biāo)簽作為占位符，占位符不可替代字段標(biāo)簽，建議使用浮動(dòng)（或自適應(yīng)）標(biāo)簽floating labels，占位符文本（提示文本）一般來說它弊大于利。標(biāo)簽作為占位符文本，輸入時(shí)提示文本自動(dòng)消失，容易造成用戶短期記憶的壓力以及錯(cuò)誤；

NN Group的研究表明空字段對(duì)比有文字的字段更吸引用戶注意，用戶更可能跳過那些有提示文本的字段，因?yàn)閽呙枋降臑g覽很容易誤會(huì)框內(nèi)已經(jīng)被輸入了文字。

占位符文本可以使用比普通的文本更淺的顏色，但容易導(dǎo)致對(duì)比度不符合W3C Web內(nèi)容的可訪問性指南（正常文本比4.5:1）。此外，占位符文本不支持輔助殘疾人的設(shè)計(jì)（如屏幕閱讀器），這會(huì)讓這部分用戶填寫表單變得很困難。

浮動(dòng)標(biāo)簽樣式

2.標(biāo)簽的命名要易于用戶閱讀和理解，避免模糊的描述給用戶造成困擾；正確區(qū)分必填字段和選填字段；

3.選擇合適的對(duì)齊方式；

右對(duì)齊方式標(biāo)簽的表單瀏覽時(shí)間僅次于頂部對(duì)齊標(biāo)簽的表單，網(wǎng)頁(yè)高度有限的話推薦這種對(duì)齊方式。采用左對(duì)齊標(biāo)簽方式的表單是三者之中瀏覽時(shí)間最長(zhǎng)的，卻能放慢用戶的速度閱讀，讓其仔細(xì)考慮。

對(duì)齊方式

二．輸入框

Tips：

1. 關(guān)聯(lián)標(biāo)簽和輸入框，給出具體的輸入要求或特殊格式規(guī)范；內(nèi)容長(zhǎng)度和輸入框長(zhǎng)度保持對(duì)應(yīng)，利用可供性暗示填寫方式，為用戶提供有意義的暗示；更大的文字輸入框、適度的留白空間會(huì)讓人更有填寫的欲望。避免一些不必要的輸入，減少用戶對(duì)不必要問題的反感，提高用戶滿意度，降低操作的錯(cuò)誤率。

可供性暗示

2. 輸入框三種狀態(tài)：普通狀態(tài)、禁用狀態(tài)（邏輯上先后關(guān)聯(lián)的情況）、輸入狀態(tài)（高亮顯示）。自由填寫支持靈活多樣的格式，提高容錯(cuò)率。

輸入掩碼（Input Masks）掩碼字段能在用戶填寫時(shí)自動(dòng)編排輸入的文本格式，將關(guān)注的重點(diǎn)放在填寫信息和查錯(cuò)上，適用于手機(jī)號(hào)、卡號(hào)等；

郵件地址字段中提供常見的域名后綴，輸入@時(shí)，自動(dòng)補(bǔ)充常見的后綴域名。

輸入字段（Input Fields）觸發(fā)對(duì)應(yīng)鍵盤類型，如手機(jī)號(hào)、日期、郵編、卡號(hào)等彈出數(shù)字鍵盤

自動(dòng)編排數(shù)字組合

3. 選擇填充的表單格式（除了常規(guī)的文字框Text Field輸入）可提供搜尋功能的下拉式選單，輸入內(nèi)容即時(shí)進(jìn)行篩選、智能聯(lián)想，輸入與點(diǎn)選結(jié)合，快速方便。

常規(guī)選擇填充方式：下拉框（dropdown list）、單選框（radio button）、復(fù)選框（checkbox）；

衍生填充方式：滑塊（Range/slider）、微調(diào)步進(jìn)器（Stepper）、開關(guān)鈕（Toggle switch）、Tab選框、搜索框等。

tips：TAB選項(xiàng)一次點(diǎn)選，效率高，選項(xiàng)低于6個(gè)可全部呈現(xiàn)；選擇值只有2-3個(gè)時(shí)避免使用下拉框，建議使用單選樣式。下拉框操作需點(diǎn)擊兩次，但包含多項(xiàng)選擇時(shí)更節(jié)省空間。

時(shí)間選擇器

4. 填寫效率：自動(dòng)填充 > 選擇填充 > 自由填充

預(yù)填充（Pre-Fills）設(shè)計(jì)時(shí)可考慮：默認(rèn)值、可選值、常用值、歷史值、上次填充值

tips：

自動(dòng)填寫，利用瀏覽器保存并列舉用戶以前填寫過的值，以實(shí)現(xiàn)自動(dòng)個(gè)性化默認(rèn)填寫，敏感數(shù)據(jù)除外；

智能補(bǔ)充，根據(jù)地址得到郵編，根據(jù)身份證號(hào)碼推測(cè)出生日；

基于定位，自動(dòng)獲取地理位置信息，這種預(yù)填充方式要允許用戶進(jìn)行微調(diào)和修改；

從更多的渠道搜集數(shù)據(jù)，第三方的帳號(hào)用戶授權(quán)；

自動(dòng)更正輸入的拼寫錯(cuò)誤，特殊字段除外；

自動(dòng)首字母大寫，適用于填寫姓名；

智能默認(rèn)，設(shè)置滿足多數(shù)人需要的默認(rèn)選擇，能為用戶節(jié)省時(shí)間，提供參考意見保證默認(rèn)選項(xiàng)符合大多數(shù)用戶利益，比如默認(rèn)用戶同意條款。

默認(rèn)勾選

三．動(dòng)作

主動(dòng)作：完成表單上最重要行為（完成表單）的動(dòng)作。

次動(dòng)作：與完成表單這一目標(biāo)相悖的動(dòng)作，比如撤銷、返回、重置、刪除等，當(dāng)用戶無(wú)意誤操作時(shí)容易造成不可挽回的負(fù)面影響。

Tips：

1. 表述清晰的行為動(dòng)作按鈕；主要操作（主動(dòng)作）和次要操作（次動(dòng)作）可使用差異化的設(shè)計(jì)來區(qū)分，當(dāng)表單中不可避免出現(xiàn)次動(dòng)作時(shí)，應(yīng)該盡量弱化次動(dòng)作的視覺表現(xiàn)，將潛在出錯(cuò)率降到最低，引導(dǎo)用戶完成任務(wù)流；表單未全部填寫完時(shí)，動(dòng)作按鈕應(yīng)為禁用狀態(tài)，高亮和點(diǎn)擊動(dòng)作按鈕也應(yīng)給出相應(yīng)的反饋；

2. 流程閉環(huán)，避免用戶在中途跳出；?提供Tab快捷鍵跳轉(zhuǎn)下一行；避免重置按鈕和清空表單按鈕，如果表單中含用戶財(cái)務(wù)信息之類的敏感字段，可以提供一個(gè)“取消”按鈕，讓用戶自行決定是否放棄表單填寫。

主、次動(dòng)作區(qū)隔

四．幫助

作用：有效說服用戶填寫表單，剔除負(fù)面干擾，消除用戶疑問，在隱私保密或安全方面獲取信任

Tips：

1. 不要隱藏基本的幫助文本，保證幫助文字簡(jiǎn)單簡(jiǎn)潔；

2. 合理地拆分步驟減輕填寫的心理壓力，相關(guān)信息分組；

3. 自動(dòng)即時(shí)幫助，在幫助信息最合適的時(shí)間和位置顯示幫助信息，如多次輸錯(cuò)密碼時(shí)，提示用戶找回密碼；

用戶控制打開/關(guān)閉彈層，幫助文字區(qū)域體現(xiàn)相關(guān)性的同時(shí)不能遮蓋其余的表單元素；

4. 適當(dāng)?shù)谋Ａ艨臻g可視化圖形作為引導(dǎo)，配合有趣的動(dòng)畫。

簡(jiǎn)潔的幫助提示文本

五．反饋

Tips:

1. 給予恰當(dāng)?shù)妮斎胂拗疲拗朴脩舻男袨椋ㄈ缭陬A(yù)定機(jī)票時(shí)返回時(shí)間無(wú)法選擇出發(fā)時(shí)間之前的日期，出發(fā)城市不能跟到達(dá)城市一樣等），將表單填寫規(guī)則標(biāo)注在明顯區(qū)域，或提供自動(dòng)修正來預(yù)防犯錯(cuò)；

2. 用戶填寫完后即時(shí)校驗(yàn)，進(jìn)行有效的拼寫檢查，名稱，地址等特殊字段忽略此功能；指明出錯(cuò)的內(nèi)容，讓用戶能及時(shí)修改、補(bǔ)充缺漏的信息，采用高亮且精準(zhǔn)的錯(cuò)誤呈現(xiàn)形式，如粗邊框、粗體文字提醒、下劃線、斜體，不局限于色彩這一元素；若包含多個(gè)錯(cuò)誤反饋，可另外在頂部增加橫幅統(tǒng)一列出全部提示；

錯(cuò)誤反饋

3. 可將動(dòng)作按鈕、跳轉(zhuǎn)過程、出錯(cuò)提示/完成狀態(tài)提醒設(shè)計(jì)成合一的多態(tài)按鈕，簡(jiǎn)潔實(shí)用。

表單內(nèi)容設(shè)計(jì)之后:

視覺角度Tips：

1. 建立清晰的視覺線性流和完成路徑，將所有字段如標(biāo)簽、輸入框、主要?jiǎng)幼靼粹o排成一個(gè)垂直單列，不要在表單中使用垂直分欄（列），多列布局會(huì)打斷用戶自上而下的閱讀習(xí)慣；醒目的提交或完成按鈕，放在用戶的瀏覽線的終點(diǎn)更有利于用戶的完成操作；

2. 將有關(guān)聯(lián)的標(biāo)注和字段在視覺上進(jìn)行分組，保障可瀏覽性，專注當(dāng)前表單任務(wù)；

3. 填寫表單的界面，應(yīng)該減少噪音，強(qiáng)調(diào)文字和背景對(duì)比，避免背景廣告干擾，減少其他任務(wù)路徑，避免用戶退出表單填寫。

背景干擾

極端場(chǎng)景角度Tips：

保存表單進(jìn)度。當(dāng)表單過長(zhǎng)，一些特殊原因?qū)е卤韱侮P(guān)閉，如網(wǎng)頁(yè)崩潰、用戶誤操作，提供保存表單進(jìn)度功能，再訪問表單時(shí)保留上一次的填寫進(jìn)度。