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

表單系列第一篇：B端表單系列開啟｜從表單的基本認識開始剖析

表單系列第二篇：B端表單｜表單的主要分類和相關控件認識

3.1 表單的設計框架解析

表單是一個包含了若干表單控件、組件的合集，其中包含的所有表單都具有一定的聯系和共性。所以當我們展開表單內容的設計時，就要先構建整體的框架，確定表單間聯系和共性，再進行細節的設計。

首先，我們要先完成標題、內容、操作區域的布局，標題和操作欄通常高度尺寸是固定的，內容的高度待定，但要確定內間距的數值。

然后，再構思內容區域內的數據項布局形式。常規的數據項布局形式有兩種，一種是單列，一種是多列。

它們有各自的應用場景，如果表單內容的收集有連續性，比如個人資料、商品信息、產品數據，具備從第一個開始逐一向后輸入的邏輯，那么主要使用單列設計。

每行填寫單一或同0類數據項，則填寫的過程會更流暢、清晰，這在成熟產品設計中隨處可見。

而多列布局，主要應用在填寫內容是無序、隨機的，具有高度不確定性的表單中，那么這類表單就傾向于將數據項更密集的羅列出來，讓用戶可以更快找到目標對象，常見于篩選模塊中。

至于表單是否支持響應式也盡量在這個階段確認，單列式的表單很少會完整支持響應式的場景，因為輸入項所需空間一般都很小，只需要設計合適的尺寸，就沒有去拉伸、縮放它們的必要。

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

之后，就要設計單個數據項的基本布局形內容了，包含數據項區域的內間距，標題的文本區域的布局和對齊形式，內容排版區域等。

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

數據項的高度是由內容和內邊距相加而成，在后續排列中可以使用0間距緊貼，也可以增加固定的間距。這才是表單項布局的正確方法，而不是每個數據項設計后再 “憑感覺” 排列。

完成上面工作后，就可以展開對單個數據項的設計了。

3.2 輸入框控件的設計

上文提到，輸入框就是表單控件設計的 “錨點”，除了它自身的使用數量多以外，還有大量的表單控件是結合輸入框設計的，所以每次開始項目表單的設計，優先從輸入框開始。

輸入框設計的基本原則 ——使用4的倍數基礎先定高，再定寬。

而應該定什么高的數值合適，這個并沒有絕對準確的答案。Ant、TDesign、Arco 都給出了不同檔位的高度，分別是：

設計師首先要確定一個常規的輸入框高度作為標準，這個數值通常在 32、36、40 之間選擇，這種選擇依據主要是輸入文本字號通常在 13-16之間，這幾個高度可以保證比較適中的留白，不會覺得太空曠或者太局促。

之后在其它特殊場景中，再根據場景權重進行增大或者縮小，也就是多定幾個規格出來。而不論是什么高度數值的輸入框，它的寬度制定都需要根據顯示內容的數量決定。盡量也使用4的倍數，同時也多預留一些空間出來（即使同字符數寬度也會不一致）。

除了高度的設置，還有圓角的設置也是重點，一個穩重、專業的B端項目，圓角尺寸的應用通常在1、2、4px之間選擇，大于4px的圓角就會讓它看起來過于圓潤，不是風格化特別強的SAAS我都建議大家直接忽略4px以上的數值。

有了基本輸入框的尺寸，同時建議以它作為標準，定義表單數據項的最小高度，后續單選多選視圖也使用相同的高度數值。

3.3 表單內的按鈕和標簽

除了表單操作欄內的全局按鈕，表單內部也會有使用按鈕的需求，如查詢、清空、重置輸出框內容，上傳附件，或者添加新的數據項等。

而在表單內的這些按鈕，可以設計成兩種尺寸，一種是和輸入框同級同高，另一種是包含在輸入框中比輸入框小的尺寸。而標簽也可以使用相同的設計來完成。

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

3.4 單選、多選的設計

單選和多選項，最常用的樣式上圖所示的圓形或矩形加上文字的設計。

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

因為包含多個選項，我們還要確定選項間的布局，主要形式就兩種，橫排或者豎排。確定好排列形式，然后再給出對應的間距即可。

這里要強調一點，橫排模式下，主要以選項信息的長度加間距排列，而不是使用等寬模式。只有極少數情況，如填問卷的場景下才會使用等寬布局。

3.5 下拉菜單類控件設計

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

在表單中的多數下拉菜單會有一個觸發對象，即長得像輸入框一樣的矩形控件。當我們完成輸入框設計后，它的基本規格就和矩形框一致，但是要在右側增加可展開的提示圖標。

然后再制定下方菜單的相關參數，包括距離觸發控件的距離，以及相同的圓角，合適的內間距。

正確的下拉菜單設計并不是依靠直接指定尺寸的，而是根據內容長寬加內間距得出的。如果內容過多，就會設置一個最大的寬或高，再使用滾輪滑動。

然后， 再完成里面的內容設計，不管是普通列表、日期、時間還是集聯，都在完成設計后置入到窗口內，通過增加內間距完成最后的樣式輸出。

只要理解以上設計邏輯，這些基礎的細節內容設計我就不展開了，大家查考下各框架的源文件即可。

3.6 復雜的表單組件設計

掌握以上基礎控件設計以后，再去設計一些復雜的組件也就相當容易了，因為他們都是由這些最基礎的元素組合而成的。

比如穿梭框，選項就是由縱向的多選框和衍生而來，參數基本一致。

再看看一些千牛中真實的表單數據項案例，之所以做的效果不好，原因就是每個數據項的設計各自為戰，而沒有根據我們前面所說的定義方式實現。

復雜表單組件的主要設計門檻在于對交互方法的制定上，只要確定交互方式和布局，就可以依據基礎的設計進行組合和拓展。

遵循這樣的設計方法，不管遇到什么樣的特殊組件，還是不同的表單頁面，我們都能確保它處于同一套設計系統之內，保證系統的基礎用戶體驗不被破壞。

結尾

表單設計的知識點就介紹到這里，本來想添加一個專門解釋交互的章節，仔細梳理了一下感覺內容太零碎，所以會留到以后分篇獨立進行分享，就不在這個小系列里展開了。

后續會挑選對應的案例，并使用前面介紹過的知識點和方法，完整的實現一遍表單頁面的設計，敬請期待。