表單在UI設(shè)計(jì)中的出現(xiàn)場(chǎng)景還是比較多的州刽，尤其是在一些To B的產(chǎn)品設(shè)計(jì)中蓝角。最近自己有做大量web 表單設(shè)計(jì)级遭，就想把自己學(xué)到的一些關(guān)于表單設(shè)計(jì)的知識(shí)點(diǎn)分享給大家～
一芬位、什么是表單？
表單在網(wǎng)頁(yè)中的主要功能是負(fù)責(zé)采集數(shù)據(jù)以及向服務(wù)器傳送數(shù)據(jù)的笼呆。表單是采集用戶信息數(shù)據(jù)重要的途徑熊响。好的表單設(shè)計(jì)能提升信息采集的效率與成功率。不好的表單設(shè)計(jì)會(huì)影響用戶心情诗赌，體驗(yàn)差汗茄，導(dǎo)致信息采集不成功甚至帶來(lái)利益的損失。
二境肾、表單的構(gòu)成
表單通常由標(biāo)簽剔难、輸入域、操作按鈕奥喻、這三部分構(gòu)成偶宫。
標(biāo)簽
標(biāo)簽我們可以把它理解為標(biāo)題，告訴用戶該表單需要填寫(xiě)什么信息环鲤、該表單需要采集什么內(nèi)容纯趋。標(biāo)簽通常出現(xiàn)在輸入域的左邊、頂部冷离、或者輸入域內(nèi)吵冒。
標(biāo)簽按所填信息的必要性分為必填項(xiàng)和非必填項(xiàng)，一般我們會(huì)在必填項(xiàng)的標(biāo)簽內(nèi)容加上＊號(hào)西剥。＊號(hào)的的擺放位置有下面兩種情況：
1.當(dāng)標(biāo)簽與輸入域居中對(duì)齊時(shí)痹栖，建議把＊號(hào)放在標(biāo)簽左側(cè)。
因?yàn)椋?hào)比較顯目瞭空，用戶往往第一眼會(huì)先看到它揪阿，然后按照用戶從左往右的閱讀習(xí)慣，視覺(jué)落點(diǎn)分別為文字標(biāo)簽咆畏、輸入域南捂。考慮到表單的填寫(xiě)效率旧找，＊號(hào)位于左側(cè)的表單閱讀起來(lái)會(huì)更加順暢溺健。所以當(dāng)標(biāo)簽與輸入域居中對(duì)齊時(shí)，把＊號(hào)放在標(biāo)簽左側(cè)會(huì)更好钮蛛。
2.當(dāng)標(biāo)簽與輸入域左對(duì)齊時(shí)鞭缭，建議把＊號(hào)放在標(biāo)簽右側(cè)。
由于人們縱向的閱讀習(xí)慣魏颓，視線會(huì)成F型缚去。＊號(hào)在左側(cè)還是在右側(cè)并不會(huì)對(duì)用戶視覺(jué)落腳點(diǎn)造成太多困擾，另外考慮到對(duì)齊的形式琼开，＊號(hào)放在標(biāo)簽右側(cè)會(huì)更好易结。
輸入域
輸入域是錄入用戶各種類(lèi)型信息的重要交互區(qū)域。輸入域包含了文本框、密碼框搞动、隱藏域躏精、多行文本框、復(fù)選框鹦肿、單選框矗烛、下拉選擇框、和文件上傳框等等箩溃。
不知道這些輸入域的區(qū)別的小伙伴可以去ant design官網(wǎng)學(xué)習(xí)一下瞭吃，傳送門(mén)：
https://ant.design/components/overview-cn/
因?yàn)檩斎胗蚴卿浫胄畔⒑苤匾慕换^(qū)域，在設(shè)計(jì)時(shí)我們應(yīng)該考慮用戶輸入的多種場(chǎng)景去設(shè)計(jì)涣旨。我們可以將用戶的輸入過(guò)程分為輸入前歪架、輸入中、輸入后霹陡。根據(jù)每一種場(chǎng)景中細(xì)化我們的設(shè)計(jì)和蚪。比如在輸入中：我們要考慮光標(biāo)的設(shè)計(jì)、輸入文字信息的設(shè)計(jì)烹棉，信息提示等攒霹，在輸入后：我們要考慮信息輸入錯(cuò)誤應(yīng)該給予怎樣的視覺(jué)反饋等〗矗總之考慮得越細(xì)致催束，越能提高信息錄入的成功率。
操作按鈕
操作按鈕是在用戶填寫(xiě)完表單各項(xiàng)內(nèi)容后伏社，所要進(jìn)行的操作動(dòng)作泣崩，來(lái)完成或者結(jié)束當(dāng)前操作流程。操作按鈕分為全局操作按鈕與局部操作按鈕洛口。全局操作按鈕控制整個(gè)表單，比如提交凯沪、發(fā)送等操作按鈕第焰。局部操作按鈕是對(duì)某一范圍的內(nèi)容起作用，比如編輯妨马、刪除操作挺举。
三、表單設(shè)計(jì)常見(jiàn)問(wèn)題
1.標(biāo)簽采用哪種對(duì)齊方式更好烘跺？
在我們的實(shí)際項(xiàng)目中湘纵，通常會(huì)因?yàn)槲陌傅拈L(zhǎng)短不一，導(dǎo)致我們不知道該采用哪種對(duì)齊方式滤淳。標(biāo)簽的處理原則就是要要盡量對(duì)齊梧喷，采用哪種對(duì)齊方式應(yīng)考慮具體的制約因素和目標(biāo)來(lái)定。
左對(duì)齊
當(dāng)標(biāo)簽采用左對(duì)齊的方式的時(shí)，因?yàn)槲淖謽?biāo)簽的長(zhǎng)度不統(tǒng)一铺敌，導(dǎo)致標(biāo)簽與輸入框的間距是不可控的汇歹。這就會(huì)造成設(shè)計(jì)的通用性不強(qiáng)，以及橫向空間的浪費(fèi)偿凭。
如果采用左對(duì)齊的形式产弹，就要盡量去保持文字標(biāo)簽的長(zhǎng)度一致，比如通過(guò)字距的調(diào)整讓文字標(biāo)簽的長(zhǎng)度保持一致或者通過(guò)留足留白空間弯囊，這樣設(shè)計(jì)上會(huì)更統(tǒng)一痰哨。以簡(jiǎn)書(shū)為例，采取左對(duì)齊形式匾嘱，但是它留足了文字標(biāo)簽與輸入域之間的距離斤斧，讓表單看上去更統(tǒng)一和諧，不足的就是造成了部分空間的浪費(fèi)奄毡。
頂對(duì)齊
采用頂對(duì)齊的形式折欠，會(huì)讓標(biāo)簽和輸入域垂直顯示，縱向布局的信息呈現(xiàn)效果會(huì)更好吼过，從而提高用戶填寫(xiě)的效率锐秦。頂對(duì)齊因?yàn)榇怪迸挪迹瑫?huì)造成縱向空間的浪費(fèi)盗忱，但在橫空間上比較節(jié)省酱床，比較適用于橫向?qū)挾容^窄的頁(yè)面。
?頂對(duì)齊
右對(duì)齊
右對(duì)齊跟左對(duì)齊一樣會(huì)因?yàn)闃?biāo)簽長(zhǎng)度不可控趟佃。導(dǎo)致設(shè)計(jì)的通用性不強(qiáng)扇谣，以及橫向空間的浪費(fèi)，但節(jié)約了縱向空間闲昭。
?右對(duì)齊
在這幾種對(duì)齊方式中罐寨，用戶瀏覽信息的速率頂對(duì)齊>右對(duì)齊>左對(duì)齊。頂對(duì)齊形式適合簡(jiǎn)易表單序矩、右對(duì)齊與左對(duì)齊表單適合復(fù)雜表單鸯绿。
2.操作按鈕應(yīng)該用哪種設(shè)計(jì)形式比較好？
對(duì)于全局的操作按鈕會(huì)用常規(guī)的按鈕樣式簸淀，全局按鈕分為主按鈕與次按鈕瓶蝴。
主按鈕
主按鈕是界面中比較重要的功能操作按鈕，比如提交租幕、保存等一些正向的操作舷手。主按鈕在視覺(jué)層級(jí)上最高，能夠引導(dǎo)用戶很快的找到核心的操作并點(diǎn)擊劲绪。主按鈕通常是純文本或圖文結(jié)合的面性形式男窟。圖文結(jié)合的形式能吸引用戶注意盆赤，也幫助用戶理解該按鈕的操作含義。
次按鈕
次按鈕的層級(jí)相對(duì)于主按鈕層級(jí)要弱一些蝎宇，通常采用線性形式弟劲。在一個(gè)頁(yè)面中可以出現(xiàn)多個(gè)次按鈕。
對(duì)于局部操作按鈕的設(shè)計(jì)形式可以是文字按鈕姥芥、圖標(biāo)按鈕兔乞，也可以是圖標(biāo)＋文字的形式。至于應(yīng)該應(yīng)用哪種形式就要結(jié)合具體端場(chǎng)景去考慮凉唐。
圖標(biāo)按鈕
圖標(biāo)按鈕就是用圖標(biāo)來(lái)代表該操作的含義庸追，能夠直觀的表達(dá)按鈕的功能。在設(shè)計(jì)的時(shí)候我們需要注意圖標(biāo)是易于理解的台囱、是用戶熟悉的淡溯。圖標(biāo)按鈕的設(shè)計(jì)通常都會(huì)配上懸浮框設(shè)計(jì)，也就是當(dāng)用戶鼠標(biāo)停留在該圖標(biāo)按鈕上會(huì)出現(xiàn)對(duì)該按鈕的文字釋義的懸浮框簿训。以微信公眾號(hào)為例，當(dāng)鼠標(biāo)停留在編輯圖標(biāo)那時(shí)會(huì)出現(xiàn)黑色的懸浮框?qū)ζ溥M(jìn)行解釋强品，讓用戶理解此按鈕的意義膘侮，讓用戶放心操作。
在web設(shè)計(jì)中的榛，由于按鈕的種類(lèi)與使用場(chǎng)景比較多琼了，建議局部的操作按鈕使用線性圖標(biāo)，讓它的層級(jí)相對(duì)其他按鈕要弱化一些夫晌。
文字按鈕
文字按鈕通常出現(xiàn)在列表的操作項(xiàng)中雕薪。文字的顏色通常是品牌色或者藍(lán)色，因?yàn)樗{(lán)色在用戶的認(rèn)知中通常是可點(diǎn)擊的晓淀。
圖標(biāo)＋文字 按鈕
圖文結(jié)合的按鈕相對(duì)于純文字按鈕會(huì)更加直觀所袁，也能更吸引用戶注意。
3.輸入框應(yīng)該設(shè)計(jì)幾種狀態(tài)凶掰？
考慮的狀態(tài)越多燥爷，設(shè)計(jì)就會(huì)越細(xì)，能夠及時(shí)的反饋信息給用戶锄俄，從而提高表單填寫(xiě)效率。在考慮輸入框的設(shè)計(jì)狀態(tài)時(shí)勺拣，遵循及時(shí)反饋的設(shè)計(jì)原則去考慮奶赠。
為了避免用戶填寫(xiě)完所有信息后，才反饋有錯(cuò)誤药有，會(huì)造成時(shí)間浪費(fèi)毅戈，表單填寫(xiě)效率低苹丸。通常會(huì)把輸入框線變成紅色，同時(shí)出現(xiàn)紅色的說(shuō)明文案苇经，來(lái)引起用戶的注意赘理。
?及時(shí)反饋錯(cuò)誤信息
在設(shè)計(jì)中我們還需要考慮自動(dòng)校驗(yàn)的成功與警告狀態(tài)。顏色通常為綠色與橙色扇单。
輸入框到底應(yīng)該設(shè)計(jì)幾種狀態(tài)我們也需要根據(jù)我們表單的復(fù)雜情況去考慮商模，對(duì)于簡(jiǎn)單的表單設(shè)計(jì)過(guò)于細(xì)化的狀態(tài)是沒(méi)有必要的。
寫(xiě)在最后的話
表單設(shè)計(jì)看起來(lái)簡(jiǎn)單蜘澜，但實(shí)際在設(shè)計(jì)過(guò)程中還是有大量的點(diǎn)值得我們?nèi)W(xué)習(xí)與研究的施流。在這次做表單的過(guò)程中，覺(jué)得作為設(shè)計(jì)師我們不應(yīng)該去挑活鄙信，不要覺(jué)得表單設(shè)計(jì)是一個(gè)很小的設(shè)計(jì)就不動(dòng)腦的照著別人的設(shè)計(jì)規(guī)范抄一遍瞪醋。像這種看似枯燥但又很重要的模塊設(shè)計(jì)，我們?cè)谇捌陂_(kāi)始設(shè)計(jì)之前可以從交互層去考慮装诡，再?gòu)囊曈X(jué)層面去考慮怎樣的表單設(shè)計(jì)能讓用戶填得舒心又高效银受。在看別人的設(shè)計(jì)規(guī)范比如ant design的組件規(guī)范時(shí)，我們可以去留意他們的設(shè)計(jì)細(xì)節(jié)鸦采，比如表單上下之間的間距留的是多少宾巍？有什么規(guī)律嗎？按鈕的上下邊距與左右邊距有什么關(guān)系嗎蜀漆？通過(guò)這些思考，然后去觀察總結(jié)确丢，并轉(zhuǎn)化為自己的小技巧吐限，到下一次設(shè)計(jì)表單的時(shí)候鲜侥，我們就會(huì)做得很好了。
往期解析
