表單是一個(gè)包含了若干表單控件、組件的合集，其中包含的所有表單都具有一定的聯(lián)系和共性。那么如何才能做好表單的具體設(shè)計(jì)？這篇文章詳細(xì)分析了關(guān)于表單設(shè)計(jì)框架、輸入框控件、按鈕和標(biāo)簽、單選和多選、下拉菜單類控件、復(fù)雜的表單組件這六個(gè)部分的設(shè)計(jì)方法，推薦給設(shè)計(jì)行業(yè)的童鞋們閱讀。

表單系列第一篇：B端表單系列開啟｜從表單的基本認(rèn)識(shí)開始剖析

表單系列第二篇：B端表單｜表單的主要分類和相關(guān)控件認(rèn)識(shí)

3.1 表單的設(shè)計(jì)框架解析

表單是一個(gè)包含了若干表單控件、組件的合集，其中包含的所有表單都具有一定的聯(lián)系和共性。所以當(dāng)我們展開表單內(nèi)容的設(shè)計(jì)時(shí)，就要先構(gòu)建整體的框架，確定表單間聯(lián)系和共性，再進(jìn)行細(xì)節(jié)的設(shè)計(jì)。

首先，我們要先完成標(biāo)題、內(nèi)容、操作區(qū)域的布局，標(biāo)題和操作欄通常高度尺寸是固定的，內(nèi)容的高度待定，但要確定內(nèi)間距的數(shù)值。

然后，再構(gòu)思內(nèi)容區(qū)域內(nèi)的數(shù)據(jù)項(xiàng)布局形式。常規(guī)的數(shù)據(jù)項(xiàng)布局形式有兩種，一種是單列，一種是多列。

它們有各自的應(yīng)用場(chǎng)景，如果表單內(nèi)容的收集有連續(xù)性，比如個(gè)人資料、商品信息、產(chǎn)品數(shù)據(jù)，具備從第一個(gè)開始逐一向后輸入的邏輯，那么主要使用單列設(shè)計(jì)。

每行填寫單一或同0類數(shù)據(jù)項(xiàng)，則填寫的過(guò)程會(huì)更流暢、清晰，這在成熟產(chǎn)品設(shè)計(jì)中隨處可見。

而多列布局，主要應(yīng)用在填寫內(nèi)容是無(wú)序、隨機(jī)的，具有高度不確定性的表單中，那么這類表單就傾向于將數(shù)據(jù)項(xiàng)更密集的羅列出來(lái)，讓用戶可以更快找到目標(biāo)對(duì)象，常見于篩選模塊中。

至于表單是否支持響應(yīng)式也盡量在這個(gè)階段確認(rèn)，單列式的表單很少會(huì)完整支持響應(yīng)式的場(chǎng)景，因?yàn)檩斎腠?xiàng)所需空間一般都很小，只需要設(shè)計(jì)合適的尺寸，就沒(méi)有去拉伸、縮放它們的必要。

而多列式的則可能根據(jù)頁(yè)面的寬度，采用流體的邏輯進(jìn)行列數(shù)的變更，讓顯示效果更緊湊合理。

之后，就要設(shè)計(jì)單個(gè)數(shù)據(jù)項(xiàng)的基本布局形內(nèi)容了，包含數(shù)據(jù)項(xiàng)區(qū)域的內(nèi)間距，標(biāo)題的文本區(qū)域的布局和對(duì)齊形式，內(nèi)容排版區(qū)域等。

包含以下三種常見的形式：

數(shù)據(jù)項(xiàng)的高度是由內(nèi)容和內(nèi)邊距相加而成，在后續(xù)排列中可以使用0間距緊貼，也可以增加固定的間距。這才是表單項(xiàng)布局的正確方法，而不是每個(gè)數(shù)據(jù)項(xiàng)設(shè)計(jì)后再 “憑感覺(jué)” 排列。

完成上面工作后，就可以展開對(duì)單個(gè)數(shù)據(jù)項(xiàng)的設(shè)計(jì)了。

3.2 輸入框控件的設(shè)計(jì)

上文提到，輸入框就是表單控件設(shè)計(jì)的 “錨點(diǎn)”，除了它自身的使用數(shù)量多以外，還有大量的表單控件是結(jié)合輸入框設(shè)計(jì)的，所以每次開始項(xiàng)目表單的設(shè)計(jì)，優(yōu)先從輸入框開始。

輸入框設(shè)計(jì)的基本原則 ——使用4的倍數(shù)基礎(chǔ)先定高，再定寬。

而應(yīng)該定什么高的數(shù)值合適，這個(gè)并沒(méi)有絕對(duì)準(zhǔn)確的答案。Ant、TDesign、Arco 都給出了不同檔位的高度，分別是：

設(shè)計(jì)師首先要確定一個(gè)常規(guī)的輸入框高度作為標(biāo)準(zhǔn)，這個(gè)數(shù)值通常在 32、36、40 之間選擇，這種選擇依據(jù)主要是輸入文本字號(hào)通常在 13-16之間，這幾個(gè)高度可以保證比較適中的留白，不會(huì)覺(jué)得太空曠或者太局促。

之后在其它特殊場(chǎng)景中，再根據(jù)場(chǎng)景權(quán)重進(jìn)行增大或者縮小，也就是多定幾個(gè)規(guī)格出來(lái)。而不論是什么高度數(shù)值的輸入框，它的寬度制定都需要根據(jù)顯示內(nèi)容的數(shù)量決定。盡量也使用4的倍數(shù)，同時(shí)也多預(yù)留一些空間出來(lái)（即使同字符數(shù)寬度也會(huì)不一致）。

除了高度的設(shè)置，還有圓角的設(shè)置也是重點(diǎn)，一個(gè)穩(wěn)重、專業(yè)的B端項(xiàng)目，圓角尺寸的應(yīng)用通常在1、2、4px之間選擇，大于4px的圓角就會(huì)讓它看起來(lái)過(guò)于圓潤(rùn)，不是風(fēng)格化特別強(qiáng)的SAAS我都建議大家直接忽略4px以上的數(shù)值。

有了基本輸入框的尺寸，同時(shí)建議以它作為標(biāo)準(zhǔn)，定義表單數(shù)據(jù)項(xiàng)的最小高度，后續(xù)單選多選視圖也使用相同的高度數(shù)值。

3.3 表單內(nèi)的按鈕和標(biāo)簽

除了表單操作欄內(nèi)的全局按鈕，表單內(nèi)部也會(huì)有使用按鈕的需求，如查詢、清空、重置輸出框內(nèi)容，上傳附件，或者添加新的數(shù)據(jù)項(xiàng)等。

而在表單內(nèi)的這些按鈕，可以設(shè)計(jì)成兩種尺寸，一種是和輸入框同級(jí)同高，另一種是包含在輸入框中比輸入框小的尺寸。而標(biāo)簽也可以使用相同的設(shè)計(jì)來(lái)完成。

表單內(nèi)只需要這兩種尺寸就可以覆蓋絕大多數(shù)場(chǎng)景，而在表單內(nèi)，按鈕寬度很少會(huì)制定定寬的，通常根據(jù)內(nèi)容進(jìn)行適配。所以，我們分別為兩個(gè)按鈕制定好左右內(nèi)邊距即可。

3.4 單選、多選的設(shè)計(jì)

單選和多選項(xiàng)，最常用的樣式上圖所示的圓形或矩形加上文字的設(shè)計(jì)。

在這里單選和多選可以使用相同的尺寸，寬高控制在 16、18、20 幾個(gè)參數(shù)之內(nèi)。然后再設(shè)置圖形和文字間的間距，通常也就 8、10、12三個(gè)數(shù)值可選。

因?yàn)榘鄠€(gè)選項(xiàng)，我們還要確定選項(xiàng)間的布局，主要形式就兩種，橫排或者豎排。確定好排列形式，然后再給出對(duì)應(yīng)的間距即可。

這里要強(qiáng)調(diào)一點(diǎn)，橫排模式下，主要以選項(xiàng)信息的長(zhǎng)度加間距排列，而不是使用等寬模式。只有極少數(shù)情況，如填問(wèn)卷的場(chǎng)景下才會(huì)使用等寬布局。

3.5 下拉菜單類控件設(shè)計(jì)

類似下拉選擇、日期、時(shí)間、集聯(lián)等控件，都是在下拉菜單中展示主要內(nèi)容信息，它們的設(shè)計(jì)方式遵循相同的邏輯，所以我們一起介紹。

在表單中的多數(shù)下拉菜單會(huì)有一個(gè)觸發(fā)對(duì)象，即長(zhǎng)得像輸入框一樣的矩形控件。當(dāng)我們完成輸入框設(shè)計(jì)后，它的基本規(guī)格就和矩形框一致，但是要在右側(cè)增加可展開的提示圖標(biāo)。

然后再制定下方菜單的相關(guān)參數(shù)，包括距離觸發(fā)控件的距離，以及相同的圓角，合適的內(nèi)間距。

正確的下拉菜單設(shè)計(jì)并不是依靠直接指定尺寸的，而是根據(jù)內(nèi)容長(zhǎng)寬加內(nèi)間距得出的。如果內(nèi)容過(guò)多，就會(huì)設(shè)置一個(gè)最大的寬或高，再使用滾輪滑動(dòng)。

然后， 再完成里面的內(nèi)容設(shè)計(jì)，不管是普通列表、日期、時(shí)間還是集聯(lián)，都在完成設(shè)計(jì)后置入到窗口內(nèi)，通過(guò)增加內(nèi)間距完成最后的樣式輸出。

只要理解以上設(shè)計(jì)邏輯，這些基礎(chǔ)的細(xì)節(jié)內(nèi)容設(shè)計(jì)我就不展開了，大家查考下各框架的源文件即可。

3.6 復(fù)雜的表單組件設(shè)計(jì)

掌握以上基礎(chǔ)控件設(shè)計(jì)以后，再去設(shè)計(jì)一些復(fù)雜的組件也就相當(dāng)容易了，因?yàn)樗麄兌际怯蛇@些最基礎(chǔ)的元素組合而成的。

比如穿梭框，選項(xiàng)就是由縱向的多選框和衍生而來(lái)，參數(shù)基本一致。

再看看一些千牛中真實(shí)的表單數(shù)據(jù)項(xiàng)案例，之所以做的效果不好，原因就是每個(gè)數(shù)據(jù)項(xiàng)的設(shè)計(jì)各自為戰(zhàn)，而沒(méi)有根據(jù)我們前面所說(shuō)的定義方式實(shí)現(xiàn)。

復(fù)雜表單組件的主要設(shè)計(jì)門檻在于對(duì)交互方法的制定上，只要確定交互方式和布局，就可以依據(jù)基礎(chǔ)的設(shè)計(jì)進(jìn)行組合和拓展。

遵循這樣的設(shè)計(jì)方法，不管遇到什么樣的特殊組件，還是不同的表單頁(yè)面，我們都能確保它處于同一套設(shè)計(jì)系統(tǒng)之內(nèi)，保證系統(tǒng)的基礎(chǔ)用戶體驗(yàn)不被破壞。

結(jié)尾

表單設(shè)計(jì)的知識(shí)點(diǎn)就介紹到這里，本來(lái)想添加一個(gè)專門解釋交互的章節(jié)，仔細(xì)梳理了一下感覺(jué)內(nèi)容太零碎，所以會(huì)留到以后分篇獨(dú)立進(jìn)行分享，就不在這個(gè)小系列里展開了。

后續(xù)會(huì)挑選對(duì)應(yīng)的案例，并使用前面介紹過(guò)的知識(shí)點(diǎn)和方法，完整的實(shí)現(xiàn)一遍表單頁(yè)面的設(shè)計(jì)，敬請(qǐng)期待。