? ? ? ? 做過中后臺(tái)的人都知道，和前端不一樣一喘，中后臺(tái)的大部分內(nèi)容都由表格和表單組成驱还；表單設(shè)計(jì)直接決定后臺(tái)操作的體驗(yàn)性，下面我們來聊聊后臺(tái)表單應(yīng)該如何設(shè)計(jì)凸克。
一议蟆、表單的構(gòu)成
一個(gè)完整的表單由標(biāo)簽、表單字段萎战、占位符咐容、幫助信息、操作按鈕蚂维、及時(shí)驗(yàn)證等元素構(gòu)成
二戳粒、表單標(biāo)簽的四種對(duì)齊方式
1.右對(duì)齊（Web端主流對(duì)齊方式）
優(yōu)點(diǎn) ：標(biāo)簽與輸入框聯(lián)系較為緊密，較少占用垂直空間
缺點(diǎn)：標(biāo)簽可讀性一般奄妨，瀏覽完表單效率不高
2.左對(duì)齊（不常用苹祟、不推薦）
優(yōu)點(diǎn) ：標(biāo)簽可讀性強(qiáng)
缺點(diǎn)：標(biāo)簽與輸入框聯(lián)系不緊密树枫，視覺跳動(dòng)大，填表不流暢
2.頂對(duì)齊（適用于表單不多的情況）
優(yōu)點(diǎn) ：標(biāo)簽與輸入框聯(lián)系非常緊密，視覺流暢
缺點(diǎn)：大量占用垂直空間舔清，移動(dòng)端可以考慮使用
4杯聚、輸入框內(nèi)標(biāo)簽（移動(dòng)端表單設(shè)計(jì)常用）
優(yōu)點(diǎn) ：標(biāo)簽與輸入框聯(lián)系非常緊密抒痒，視覺流暢故响，空間占用小
缺點(diǎn)：輸入后標(biāo)簽消失，增加用戶記憶成本伪冰，不易復(fù)核
5贮聂、輸入框內(nèi)標(biāo)簽吓懈，輸入時(shí)轉(zhuǎn)換為頂標(biāo)簽
優(yōu)點(diǎn) ：標(biāo)簽與輸入框聯(lián)系非常緊密耻警，視覺流暢，空間占用小腮恩，易復(fù)核
缺點(diǎn)：開發(fā)成本高庆揪，適用于高頻輸入界面（例如登錄注冊(cè)頁面）
三、表單設(shè)計(jì)規(guī)范
1.盡量簡(jiǎn)短
從業(yè)務(wù)上優(yōu)化表單吝羞，刪除不必要表單字段
2.合理分組
當(dāng)表單字段過多時(shí)敦腔，合理運(yùn)用分組恨溜，使表單結(jié)構(gòu)更清晰
3.瀏覽線清晰
清晰的瀏覽線能極大提高表單填寫效率
4.表單驗(yàn)證
表單驗(yàn)證要及時(shí)判族、清晰形帮，不要在提交的時(shí)候才驗(yàn)證表單周叮，建議在用戶鍵入停止1s后仿耽，或光標(biāo)離開后進(jìn)行驗(yàn)證
5.合理使用顏色
由設(shè)計(jì)心理學(xué)色彩對(duì)視覺的影響我們可以知：通知為藍(lán)色项贺，警告為黃色，錯(cuò)誤為紅色晰洒，成功確認(rèn)為綠色谍珊。
6.減少用戶輸入成本
可以通過以下幾種方式：
1）提供默認(rèn)值
2）選擇代替輸入
3）自動(dòng)聯(lián)想侮邀，一鍵填充
7.提供友好的引導(dǎo)
圖片由PS制作绊茧，歡迎轉(zhuǎn)載
原創(chuàng)不易华畏，點(diǎn)個(gè)贊支持一下唄~
