2023年B端表單｜表單的主要分類和相關(guān)控件認(rèn)識

B端表單｜表單的主要分類和相關(guān)控件認(rèn)識class="size-fullwp-image-899359aligncenter"src="/wp/2023/02/di2m0uPy4qwgx6gDCHF9.png"alt=""/>

上一篇：B端表單系列開啟｜從表單的基本熟悉開頭剖析

在Ant、TDesign、Arco等開源系統(tǒng)中，表單的控件排列、解釋都已經(jīng)特別全面了，即使是新手完整的看一遍（這可不能偷懶～），也能對表單相關(guān)控件有個大致的熟悉了。

之所以還要更新今日這篇內(nèi)容，就是由于只看展現(xiàn)中依據(jù)字母挨次的排列的控件，是很難梳理其中關(guān)聯(lián)，并獲得更深化熟悉的，所以今日我要從一個不同的角度，解釋表單相關(guān)控件的內(nèi)容。

2.1表單類型的進展起源

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

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

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

恰恰相反，假如一個項目中消失無法使用最基礎(chǔ)表單控件完成的狀況，就證明這個場景具有肯定的特別性，往往涉及到一些關(guān)鍵的業(yè)務(wù)流程或環(huán)節(jié)。而越是這種特別的場景，對設(shè)計師專業(yè)力量的依靠程度也就越高。

但問題是，簡單的表單應(yīng)用場景要求各不相同，不僅匹配現(xiàn)有的簡單控件，或者設(shè)計一個全新的類型都很燒腦，要怎么把握這種駕馭簡單的力量？這就必需要理解表單設(shè)計的起源和規(guī)律。

前面也講過，電子表單是從紙質(zhì)清單的形式上進展而來的，再加上早期系統(tǒng)、性能的局限性，表單中可操作對象和紙質(zhì)一樣都是全部可見的，幾乎全由按鈕、輸入框和單選、多選組成。隨后，又間續(xù)增加了計算機系統(tǒng)獨有的滑塊和隱蔽菜單。

按鈕：執(zhí)行一個針對該數(shù)據(jù)項預(yù)設(shè)好的程序，如檢查數(shù)據(jù)、篩選內(nèi)容、上傳附件、切換格式輸入框：讓用戶主動選擇并通過鍵鼠輸入字符數(shù)據(jù)的操作區(qū)域多選/單選：包含多個既定的選項，讓用戶從中選擇一個或多個的控件滑塊：通過鼠標(biāo)拖拽來掌握某個范圍內(nèi)詳細(xì)數(shù)值的控件隱蔽菜單：默認(rèn)隱蔽，需要通過交互來綻開更多操作內(nèi)容的控件這五種控件形式是組成絕大多數(shù)表單控件和組件的基石，通過對它們進行優(yōu)化、調(diào)整、組合來形成新的樣式類型。比如下方的標(biāo)簽選擇器，就是輸入框、下拉菜單和按鈕的結(jié)合。

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

主動輸入數(shù)據(jù)選擇進階組合2.2主動輸入型表單控件

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

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

還有依據(jù)數(shù)據(jù)本身類型的特性進行優(yōu)化，如數(shù)量、小數(shù)、價格、密碼等。

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

對于這些細(xì)分類型，信任大家不需要我一個個解釋過去，都是由對應(yīng)的輸入場景中拓展而來，即簡潔又便捷。

除此以外，它還有一個特別重要的價值，就是表單控件參數(shù)的“錨點”。

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

這會在后面的章節(jié)中進一步說明。

2.3一般選擇型表單

一般選擇類型表單，就是用戶從系統(tǒng)已經(jīng)預(yù)備好的數(shù)據(jù)選項中選出一到多項，并提交給系統(tǒng)。所以選擇型表單的首要任務(wù)，就是讓用戶觀察系統(tǒng)預(yù)備了哪些數(shù)據(jù)選項。

展現(xiàn)的方式包含陳設(shè)式和隱蔽式，陳設(shè)式即將數(shù)據(jù)選項全部展現(xiàn)出來，可以直接進行選擇，隱蔽式則是隱蔽起來，需要額外的操作進行綻開。

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

比如下面這些都是可以作為單選和多選的陳設(shè)式表單樣式：

而隱蔽式選擇表單包含的類型就更多了，最常見的類型就是下拉選擇器（Select）了，通過點擊綻開隱蔽菜單，并在里面進行選擇。

樹狀選擇器（TreeSelect）和選擇器作用差全都，區(qū)分是樹狀選擇器綻開的內(nèi)容是會占用頁面實際空間的，而下拉選擇器則是使用浮層不受背景干擾。

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

2.4進階組合型表單

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

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

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

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

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

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

這些簡單的表單需求無窮無盡，在我們的設(shè)計生涯中也很難設(shè)計出兩個完全一樣的進階組合表單。

所以不要陷入“找參考”的陷進中，我們很難從市面上找到完全一樣