這篇文章作者主要從表單類(lèi)型的發(fā)展起源、主動(dòng)輸入型表單控件、一般選擇型表單、進(jìn)階組合型表單四個(gè)維度進(jìn)行講解，帶你了解表單的主要分類(lèi)和相關(guān)控件。推薦對(duì)交互設(shè)計(jì)、B端表單設(shè)計(jì)感興趣的朋友們閱讀。

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

在 Ant、TDesign、Arco 等開(kāi)源系統(tǒng)中，表單的控件羅列、解釋都已經(jīng)非常全面了，即使是新手完整的看一遍（這可不能偷懶～）， 也能對(duì)表單相關(guān)控件有個(gè)大致的認(rèn)識(shí)了。

之所以還要更新今天這篇內(nèi)容，就是因?yàn)橹豢凑故局懈鶕?jù)字母順序的排列的控件，是很難梳理其中關(guān)聯(lián)，并獲得更深入認(rèn)識(shí)的，所以今天我要從一個(gè)不同的角度，解釋表單相關(guān)控件的內(nèi)容。

2.1 表單類(lèi)型的發(fā)展起源

前面我們說(shuō)過(guò)，表單是用來(lái)收集數(shù)據(jù)的一種形式。隨著互聯(lián)網(wǎng)的發(fā)展，產(chǎn)品對(duì)收集數(shù)據(jù)的場(chǎng)景、類(lèi)型、要求越來(lái)越多，從而設(shè)計(jì)出了越來(lái)越復(fù)雜的表單控件。

但根據(jù)28原則，占少數(shù)的 20% 應(yīng)用在了80%的場(chǎng)景中，剩下的80%使用在20%的場(chǎng)景里。越基礎(chǔ)簡(jiǎn)單的控件使用得越多，越后期復(fù)雜的控件應(yīng)用得越少。

所以那些不常用的表單控件重要性就不高了嘛？

恰恰相反，如果一個(gè)項(xiàng)目中出現(xiàn)無(wú)法使用最基礎(chǔ)表單控件完成的情況，就證明這個(gè)場(chǎng)景具有一定的特殊性，往往涉及到一些關(guān)鍵的業(yè)務(wù)流程或環(huán)節(jié)。而越是這種特殊的場(chǎng)景，對(duì)設(shè)計(jì)師專(zhuān)業(yè)能力的依賴程度也就越高。

但問(wèn)題是，復(fù)雜的表單應(yīng)用場(chǎng)景要求各不相同，不僅匹配現(xiàn)有的復(fù)雜控件，或者設(shè)計(jì)一個(gè)全新的類(lèi)型都很燒腦，要怎么掌握這種駕馭復(fù)雜的能力？這就必須要理解表單設(shè)計(jì)的起源和規(guī)律。

前面也講過(guò)，電子表單是從紙質(zhì)清單的形式上發(fā)展而來(lái)的，再加上早期系統(tǒng)、性能的局限性，表單中可操作對(duì)象和紙質(zhì)一樣都是全部可見(jiàn)的，幾乎全由按鈕、輸入框和單選、多選組成。隨后，又陸續(xù)增加了計(jì)算機(jī)系統(tǒng)獨(dú)有的滑塊和隱藏菜單。

• 按鈕：執(zhí)行一個(gè)針對(duì)該數(shù)據(jù)項(xiàng)預(yù)設(shè)好的程序，如檢查數(shù)據(jù)、篩選內(nèi)容、上傳附件、切換格式
• 輸入框：讓用戶主動(dòng)選擇并通過(guò)鍵鼠輸入字符數(shù)據(jù)的操作區(qū)域
• 多選/單選：包含多個(gè)既定的選項(xiàng)，讓用戶從中選擇一個(gè)或多個(gè)的控件
• 滑塊：通過(guò)鼠標(biāo)拖拽來(lái)控制某個(gè)范圍內(nèi)具體數(shù)值的控件
• 隱藏菜單：默認(rèn)隱藏，需要通過(guò)交互來(lái)展開(kāi)更多操作內(nèi)容的控件

這五種控件形式是組成絕大多數(shù)表單控件和組件的基石，通過(guò)對(duì)它們進(jìn)行優(yōu)化、調(diào)整、組合來(lái)形成新的樣式類(lèi)型。比如下方的標(biāo)簽選擇器，就是輸入框、下拉菜單和按鈕的結(jié)合。

所以，為了更好的對(duì)表單做出區(qū)分，我把它們分成3個(gè)大類(lèi)：

• 主動(dòng)輸入
• 數(shù)據(jù)選擇
• 進(jìn)階組合

2.2 主動(dòng)輸入型表單控件

主動(dòng)輸入型就是系統(tǒng)要獲取完全由用戶定義的數(shù)據(jù)內(nèi)容，最核心的控件就是輸入框。輸入框作為最基礎(chǔ)的計(jì)算機(jī)控件之一，所要滿足的需求自然就數(shù)不勝數(shù)。

比如增加特定輸入內(nèi)容格式的適配，如網(wǎng)址、郵箱、座機(jī)、姓名等。

還有根據(jù)數(shù)據(jù)本身類(lèi)型的特性進(jìn)行優(yōu)化，如數(shù)量、小數(shù)、價(jià)格、密碼等。

同時(shí)，還有根據(jù)輸入內(nèi)容的數(shù)量和顯示區(qū)域，使用單行、多行、滾動(dòng)式輸入框。

對(duì)于這些細(xì)分類(lèi)型，相信大家不需要我一個(gè)個(gè)解釋過(guò)去，都是由對(duì)應(yīng)的輸入場(chǎng)景中拓展而來(lái)，即簡(jiǎn)單又便捷。

除此以外，它還有一個(gè)非常重要的價(jià)值，就是表單控件參數(shù)的 “錨點(diǎn)”。

因?yàn)樵?“統(tǒng)一性原則” 驅(qū)動(dòng)之下，設(shè)計(jì)師要盡量確保控件間的設(shè)計(jì)細(xì)節(jié)保持一致，而輸入框在多數(shù)設(shè)計(jì)表單中使用頻率最高，且有大量表單控件的樣式是根據(jù)輸入框拓展而來(lái)。所以輸入框的參數(shù)應(yīng)用就不僅僅關(guān)乎它自身，而是成為后續(xù)設(shè)計(jì)的重要參考依據(jù)。

這會(huì)在后面的章節(jié)中進(jìn)一步說(shuō)明。

2.3 一般選擇型表單

一般選擇類(lèi)型表單，就是用戶從系統(tǒng)已經(jīng)準(zhǔn)備好的數(shù)據(jù)選項(xiàng)中選出一到多項(xiàng)，并提交給系統(tǒng)。所以選擇型表單的首要任務(wù)，就是讓用戶看見(jiàn)系統(tǒng)準(zhǔn)備了哪些數(shù)據(jù)選項(xiàng)。

展示的方式包含陳列式和隱藏式，陳列式即將數(shù)據(jù)選項(xiàng)全部展示出來(lái)，可以直接進(jìn)行選擇，隱藏式則是隱藏起來(lái)，需要額外的操作進(jìn)行展開(kāi)。

陳列式的選擇中，帶有圓形、矩形框的選擇表單最常見(jiàn)，但并不代表單選或多選的設(shè)計(jì)只能使用這兩個(gè)樣式。

比如下面這些都是可以作為單選和多選的陳列式表單樣式：

而隱藏式選擇表單包含的類(lèi)型就更多了，最常見(jiàn)的類(lèi)型就是下拉選擇器（Select）了，通過(guò)點(diǎn)擊展開(kāi)隱藏菜單，并在里面進(jìn)行選擇。

樹(shù)狀選擇器（TreeSelect）和選擇器作用差一致，區(qū)別是樹(shù)狀選擇器展開(kāi)的內(nèi)容是會(huì)占用頁(yè)面實(shí)際空間的，而下拉選擇器則是使用浮層不受背景干擾。

除此之外，滑塊、開(kāi)關(guān)、步近器等控件，本質(zhì)上也是隱藏選擇的一種，選擇系統(tǒng)已經(jīng)劃好范圍的數(shù)據(jù)條目。

2.4 進(jìn)階組合型表單

和一般表單不同的是，進(jìn)階組合表單的操作方式、流程、內(nèi)容會(huì)更復(fù)雜。比較常用的復(fù)雜表單類(lèi)似顏色選擇器（ColorPicker）、集聯(lián)選擇（Cascader）、附件上傳（Upload）等。

根據(jù)行業(yè)和產(chǎn)品的不同，表單采集數(shù)據(jù)的需求多種多樣，這就需要依靠設(shè)計(jì)師的個(gè)人判斷和經(jīng)驗(yàn)，構(gòu)思對(duì)應(yīng)的表單形式。

分類(lèi)字段設(shè)置表單

任務(wù)路線圖設(shè)置表單

頁(yè)面模塊設(shè)置表單

這些進(jìn)階組合中的每個(gè)表單項(xiàng)，都不僅僅是輸入或選中一類(lèi)數(shù)據(jù)，而會(huì)關(guān)聯(lián)其它數(shù)據(jù)。如上圖為頁(yè)面添加一個(gè)模塊項(xiàng)，系統(tǒng)不僅要獲取模塊的名稱(chēng)，同時(shí)要獲取這個(gè)模塊所處位置的序號(hào)進(jìn)行排序。

這些復(fù)雜的表單需求無(wú)窮無(wú)盡，在我們的設(shè)計(jì)生涯中也很難設(shè)計(jì)出兩個(gè)完全一樣的進(jìn)階組合表單。

所以不要陷入 “找參考” 的陷進(jìn)中，我們很難從市面上找到完全一樣的參考對(duì)象。需要設(shè)計(jì)師熟練掌握和運(yùn)用前兩種表單類(lèi)型，才能在遇到這些復(fù)雜需求時(shí)根據(jù)實(shí)際情況對(duì)它們進(jìn)行組合和優(yōu)化。

結(jié)尾

以上就是對(duì)表單類(lèi)型的基本區(qū)分，后續(xù)在合并修訂版本中會(huì)再做一次優(yōu)化。了解完類(lèi)型，下一篇內(nèi)容就會(huì)展開(kāi)具體的表單設(shè)計(jì)說(shuō)明了。