這是《后臺(tái)產(chǎn)品設(shè)計(jì)指南》系列文章的第7篇內(nèi)容，更多精彩可以點(diǎn)擊下方鏈接查看。
表單是由輸入框、文本域、單選框、多選框這些組件組成的，用來保存提交數(shù)據(jù)。后臺(tái)的添加、修改操作都屬于表單操作，本文會(huì)和大家一起梳理下表單設(shè)計(jì)的相關(guān)規(guī)范。
一個(gè)基礎(chǔ)的表單由三部分組成，表單標(biāo)題、表單組件和表單按鈕。其中表單標(biāo)題不是必須的，可以省略；表單按鈕主要包括提交按鈕、保存按鈕、重置按鈕等類型。下面介紹一下表單設(shè)計(jì)常見的規(guī)范。
對(duì)齊方式
表單標(biāo)題對(duì)齊方式分為左對(duì)齊、右對(duì)齊和頂部對(duì)齊三種方式。前面兩種一般出現(xiàn)在web端，因?yàn)閣eb端的空間比較大。內(nèi)容較多時(shí)可以考慮多列，但多列在閱讀體驗(yàn)上不夠順暢，需要謹(jǐn)慎使用。
而頂部對(duì)齊一般適用于移動(dòng)端，因?yàn)橐苿?dòng)端的空間比較小，不適合使用前面兩種方式；需要說明的是頂部對(duì)齊也是可以用于web端的。
表單驗(yàn)證
表單驗(yàn)證分為前端校驗(yàn)和后端校驗(yàn)，前端校驗(yàn)一般使用即時(shí)校驗(yàn)和焦點(diǎn)離開時(shí)校驗(yàn)，年齡輸入框輸入漢字時(shí)提示屬于即時(shí)校驗(yàn)；輸入密碼，再輸入確認(rèn)密碼，光標(biāo)進(jìn)入下一個(gè)表單組件時(shí)提示屬于焦點(diǎn)離開時(shí)校驗(yàn)。后端校驗(yàn)一般在表單提交后，后端校驗(yàn)會(huì)減輕服務(wù)器壓力，對(duì)用戶干擾也比較小。
表單驗(yàn)證的類型包括必填驗(yàn)證、長度驗(yàn)證、類型驗(yàn)證等。
必填驗(yàn)證
表單組件組件哪些是必填項(xiàng)一般需要用特殊的樣式的來區(qū)分，比如紅色的星號(hào)?？梢栽诒韱螛?biāo)題前，也可以在表單標(biāo)題后。
長度驗(yàn)證
比如文章推送標(biāo)題不能超過20字，超出的字不能輸入。
表單組件設(shè)置合理的長度、大小能幫助用戶填寫準(zhǔn)確的內(nèi)容。比如備注信息就不適合用輸入框，而應(yīng)該用文本域組件。
類型驗(yàn)證
比如用戶年齡要輸入數(shù)字而不是漢字、字母；身份證號(hào)碼是18位，手機(jī)號(hào)碼是11位數(shù)字。
業(yè)務(wù)校驗(yàn)
比如優(yōu)惠券發(fā)放后一些內(nèi)容就不能再修改，否在會(huì)出錯(cuò)。如果只是前端層面限制不夠安全，這樣就需要從業(yè)務(wù)層面進(jìn)行校驗(yàn)，保證安全性。
提示文字
占位符
占位符是表單組件里面的說明文字，這個(gè)說明文字要盡可能的簡潔，引導(dǎo)用戶來填寫表單信息。
占位符文字的類型比較多，比如“請(qǐng)輸入賬號(hào)”、“查詢用戶姓名/手機(jī)號(hào)”、“不超過20個(gè)字”。占位符文字盡量不要和表單標(biāo)題一致，比如賬號(hào)，密碼這樣的文字。
谷歌的表單組件在點(diǎn)擊時(shí)占位符文字向上移動(dòng)，相當(dāng)于表單標(biāo)題，同時(shí)交互也很有趣，是一個(gè)非常好的設(shè)計(jì)方式。
框外提示文字
一般在組件后面或者下面，幫助用戶理解組件是做什么的，有哪些限制條件等。比如圖片支持jpg/png格式，大小不能超過5M。
錯(cuò)誤提示
用戶提交表單時(shí)經(jīng)常會(huì)發(fā)生錯(cuò)誤，比如信息沒有填寫，填寫的信息已經(jīng)被占用無法輸入等等。這個(gè)時(shí)候需要在界面上給出合理的提示信息，同時(shí)引導(dǎo)用戶完成正確填寫操作。同時(shí)在給出提示信息時(shí)一定不能丟失當(dāng)前已經(jīng)輸入的信息。
其他規(guī)范
默認(rèn)值
有些選項(xiàng)可以設(shè)置默認(rèn)值，這樣可以節(jié)省用戶的填寫時(shí)間。比如是否推送設(shè)置一般設(shè)置默認(rèn)值為否，這樣避免直接推送打擾用戶。
文案的合理性
我們?cè)跀M定文案時(shí)在簡潔的前提下要盡可能地考慮用戶體驗(yàn)，比如『填寫手機(jī)號(hào)，方便找回密碼』這樣的文案就比『不填寫手機(jī)號(hào)，則無法找回密碼』效果更友好。
支持鍵盤交互
表單提交需要考慮使用鍵盤的場景，比如tab鍵跳轉(zhuǎn)到下一項(xiàng)，使用方向鍵選項(xiàng)下拉列表的選項(xiàng)。
表單是后臺(tái)產(chǎn)品的核心，只有掌握設(shè)計(jì)規(guī)范才能結(jié)合使用場景設(shè)計(jì)出好的表單。建議大家系統(tǒng)地學(xué)習(xí)表單組件和表單設(shè)計(jì)規(guī)范，結(jié)合實(shí)際的案例進(jìn)行拆解分析，這樣才能融會(huì)貫通。
在寫作過程中，如果有意見或者想法，歡迎有興趣的讀者添加我的微信一起交流探索，共同進(jìn)步。
