很多設(shè)計師的一部分工作是中后臺管理系統(tǒng)的交互設(shè)計工作或者界面設(shè)計工作，其實大部分的后臺管理系統(tǒng)中百分之八十以上業(yè)務(wù)的表現(xiàn)形式是表單和表格。今天我們談?wù)勗谠O(shè)計表單過程中需要了解的知識和遵循的原則。
表單在網(wǎng)頁中主要負(fù)責(zé)數(shù)據(jù)采集的功能。
一、表單構(gòu)成說明
一個完整的表單由類別、標(biāo)簽、表單字段、占位符、幫助信息、操作按鈕、及時驗證等元素構(gòu)成。
1、類別（Category ）
說明：通常代表整個表單的主要內(nèi)容，或者分組表單中每個小組的主要內(nèi)容
作用：幫助用戶快速理解表單的作用
2、標(biāo)簽（Lable）
說明：通常放置在表單字段之外或者字段內(nèi)；可用文字或圖標(biāo)展示；層級關(guān)系高于表單字段
作用：指明這一欄需要輸入什么內(nèi)容
3、表單字段 （Form field）
說明：表單項表單單元，包含文本框、文本域、單選、多選、日歷等等
作用：用來收集用戶輸入的信息，每個字段包含著某一類型的信息（如文本框、文本域、單選、多選、下拉選擇、日期選擇等）
4、占位符（Placeholder）
說明：又叫提示文本，一般位于表單文本框里面，當(dāng)用戶開始輸入，這些提示文本會自動消失
作用：一般用于提示用戶填寫的內(nèi)容或者要求的規(guī)則
5、幫助信息（Help Information）
說明：以文字或者圖標(biāo)形式展現(xiàn)，具體信息內(nèi)容都隱藏起來，鼠標(biāo)hover時顯示全部信息
作用：幫助用戶解釋名詞、如何回答問題、引導(dǎo)用戶完成任務(wù)
6、提交操作的主按鈕（Primary CTA button）
說明：暗示可點擊性，必須讓用戶一眼看出這個是可點擊的交互區(qū)域；一般情況占據(jù)最高的層次關(guān)系，暗示整個界面的唯一目的和操作
作用：用來提交填寫好的表單內(nèi)容
7、及時驗證（Real-time Validation）
說明：在本頁面清晰明確及時反饋，并且錯誤信息顯示在對應(yīng)表單項旁邊，盡量減少用戶記憶認(rèn)知負(fù)荷，視覺上要明顯突出
作用：當(dāng)用戶填寫的信息無法被錄入時給予反饋
二、表單標(biāo)簽的四種對齊方式
1、右對齊標(biāo)簽
右對齊標(biāo)簽適用于表單占用垂直屏幕空間有限，同時要求快速完成表單填寫，是Web端主流的表單標(biāo)簽樣式。右對齊標(biāo)簽優(yōu)點是輸入框聯(lián)系較為緊密，并且減少占用垂直空間，缺點是標(biāo)簽可讀性不強(qiáng)，降低快速瀏覽完表單的效率。
2、頂對齊標(biāo)簽
頂對齊標(biāo)簽適用于縱向空間充足、水平空間有限的頁面，標(biāo)簽長度靈活多變的情景。這種布局的優(yōu)點是和輸入框聯(lián)系非常緊密，從上至下的視覺路徑清晰流暢，閱讀速度快填寫效率很高；缺點是大量占用垂直空間，不適用于輸入框較多的表單。
3、左對齊標(biāo)簽
左對齊標(biāo)簽一般很少用到，常用在希望用戶填寫速度放慢，并且需要用戶謹(jǐn)慎填寫表單的情景，特別是表單含有大量可選下拉選擇框的情況。左對齊標(biāo)簽的優(yōu)點是標(biāo)簽可讀性強(qiáng)，并且減少占用垂直空間；缺點是和輸入框聯(lián)系不緊密，增加用戶填寫表單的時間。
4、輸入框內(nèi)標(biāo)簽
輸入框內(nèi)標(biāo)簽適用于表單非常短，橫向和縱向空間都有限的情景，例如登錄注冊表單等，一般在移動端產(chǎn)品的表單中經(jīng)常采用這種標(biāo)簽布局。輸入框內(nèi)標(biāo)簽的優(yōu)點是與輸入框聯(lián)系緊密，并且減少占用水平和垂直空間；缺點是標(biāo)簽隨輸入內(nèi)容而消失，復(fù)核表單信息較困難。
三、表單幫助信息
表單的幫助信息目的是幫助用戶解釋名詞或者如何回答問題，以文字或者圖標(biāo)形式展現(xiàn)在要說明的內(nèi)容旁邊，圖標(biāo)形式的情況鼠標(biāo)hover時顯示全部信息，如下圖
文字形式的表單幫助信息較重要，需要讓用戶必須知曉的，建議放在表單字段右側(cè)；圖標(biāo)形式則常用于幫助信息較多，信息內(nèi)容非用戶必須知曉內(nèi)容，以圖標(biāo)形式隱藏內(nèi)容，在需要時鼠標(biāo)hover顯示；建議放在表單標(biāo)簽旁。
四、表單的及時驗證
當(dāng)用戶填寫表單的信息無法被錄入時給予反饋、實時提供建議參考或者對錄入內(nèi)容的提示。建議在本頁面清晰明確及時反饋，并且錯誤信息顯示在對應(yīng)表單項旁邊，盡量減少用戶記憶認(rèn)知負(fù)荷，視覺上要明顯突出。
1、及時確認(rèn)
適用于正確、錯誤、警告提示等，或者有特殊格式要求的問題，例如手機(jī)號、身份證等信息的錄入。
2、及時建議
適用于有大量可供選項的情況，常見于下拉選擇器帶搜索的組件中，例如搜索中的關(guān)鍵詞聯(lián)想。
3、及時質(zhì)量提示
適用于實時驗證用戶輸入內(nèi)容提示，目的是引導(dǎo)用戶更好地回答，例如設(shè)置密碼強(qiáng)度提示。
五、表單設(shè)計原則
1、表單要簡短
表單在設(shè)計過程中只保留必要的字段，做到不重復(fù)；刪掉不必要的字段能減少用戶完成表單耗費(fèi)的精力、提高表單提交率、提高表單與用戶之間的對話效率。我想每個用戶看到一個超過50個字段的表單都會很頭疼，從而放棄填寫。
2、合理組織信息
表單設(shè)計時保證視覺流遵循從左到右、從上到下的閱讀習(xí)慣，提高閱讀速度；對于較為復(fù)雜、填寫項多的表單，如果不對信息進(jìn)行組織，很容易顯得繁雜混亂，讓用戶在一開始就產(chǎn)生抵觸的情緒，甚至選擇放棄，所以建議設(shè)計者在設(shè)計表單時多從信息的組織方面考慮是否采用分步表單或者采用分組表單。合理有層次的組織信息，可以利用框線、空間間隔、顏色的不同，按照不同信息的類別、屬性和相關(guān)性進(jìn)行區(qū)塊的劃分，達(dá)到信息的合理組織。
3、清晰的瀏覽線
合理的標(biāo)簽、提示文字及按鈕的排布，避免不必要的信息重復(fù)出現(xiàn)，能夠降低用戶的視覺負(fù)擔(dān)和物理負(fù)擔(dān)。如下圖中左邊表單設(shè)計視覺流較混亂，很容易打亂用戶的思維，從而降低完成表單的速度。
4、合理運(yùn)用顏色
由設(shè)計心理學(xué)色彩對視覺的影響我們可以知：通知為藍(lán)色，警告為黃色，錯誤為紅色，成功確認(rèn)為綠色。
5、提供友好的引導(dǎo)
清理晦澀的專業(yè)術(shù)語（如數(shù)據(jù)庫錯誤、代碼展示的錯誤信息），試著使用更加親切的語言來引導(dǎo)用戶填寫、告訴用戶錯誤的原因。當(dāng)問題出現(xiàn)時，清楚的說明問題出現(xiàn)的原因并提供有效的解決方案。必要時，除了指導(dǎo)文案以外，還可以添加更加生動的照片或可視化圖形作為引導(dǎo)。
