B端表單|表單的主要分類和相關控件認識

0 評論 5477 瀏覽 55 收藏 11 分鐘

這篇文章作者主要從表單類型的發展起源、主動輸入型表單控件、一般選擇型表單、進階組合型表單四個維度進行講解,帶你了解表單的主要分類和相關控件。推薦對交互設計、B端表單設計感興趣的朋友們閱讀。

上一篇:B端表單系列開啟|從表單的基本認識開始剖析

在 Ant、TDesign、Arco 等開源系統中,表單的控件羅列、解釋都已經非常全面了,即使是新手完整的看一遍(這可不能偷懶~), 也能對表單相關控件有個大致的認識了。

B端表單|表單的主要分類和相關控件認識

之所以還要更新今天這篇內容,就是因為只看展示中根據字母順序的排列的控件,是很難梳理其中關聯,并獲得更深入認識的,所以今天我要從一個不同的角度,解釋表單相關控件的內容。

2.1 表單類型的發展起源

前面我們說過,表單是用來收集數據的一種形式。隨著互聯網的發展,產品對收集數據的場景、類型、要求越來越多,從而設計出了越來越復雜的表單控件。

但根據28原則,占少數的 20% 應用在了80%的場景中,剩下的80%使用在20%的場景里。越基礎簡單的控件使用得越多,越后期復雜的控件應用得越少。

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

恰恰相反,如果一個項目中出現無法使用最基礎表單控件完成的情況,就證明這個場景具有一定的特殊性,往往涉及到一些關鍵的業務流程或環節。而越是這種特殊的場景,對設計師專業能力的依賴程度也就越高。

B端表單|表單的主要分類和相關控件認識

但問題是,復雜的表單應用場景要求各不相同,不僅匹配現有的復雜控件,或者設計一個全新的類型都很燒腦,要怎么掌握這種駕馭復雜的能力?這就必須要理解表單設計的起源和規律。

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

B端表單|表單的主要分類和相關控件認識

  • 按鈕:執行一個針對該數據項預設好的程序,如檢查數據、篩選內容、上傳附件、切換格式
  • 輸入框:讓用戶主動選擇并通過鍵鼠輸入字符數據的操作區域
  • 多選/單選:包含多個既定的選項,讓用戶從中選擇一個或多個的控件
  • 滑塊:通過鼠標拖拽來控制某個范圍內具體數值的控件
  • 隱藏菜單:默認隱藏,需要通過交互來展開更多操作內容的控件

這五種控件形式是組成絕大多數表單控件和組件的基石,通過對它們進行優化、調整、組合來形成新的樣式類型。比如下方的標簽選擇器,就是輸入框、下拉菜單和按鈕的結合。

B端表單|表單的主要分類和相關控件認識

所以,為了更好的對表單做出區分,我把它們分成3個大類:

  • 主動輸入
  • 數據選擇
  • 進階組合

2.2 主動輸入型表單控件

主動輸入型就是系統要獲取完全由用戶定義的數據內容,最核心的控件就是輸入框。輸入框作為最基礎的計算機控件之一,所要滿足的需求自然就數不勝數。

比如增加特定輸入內容格式的適配,如網址、郵箱、座機、姓名等。

B端表單|表單的主要分類和相關控件認識

還有根據數據本身類型的特性進行優化,如數量、小數、價格、密碼等。

B端表單|表單的主要分類和相關控件認識

同時,還有根據輸入內容的數量和顯示區域,使用單行、多行、滾動式輸入框。

B端表單|表單的主要分類和相關控件認識

對于這些細分類型,相信大家不需要我一個個解釋過去,都是由對應的輸入場景中拓展而來,即簡單又便捷。

除此以外,它還有一個非常重要的價值,就是表單控件參數的 “錨點”。

因為在 “統一性原則” 驅動之下,設計師要盡量確??丶g的設計細節保持一致,而輸入框在多數設計表單中使用頻率最高,且有大量表單控件的樣式是根據輸入框拓展而來。所以輸入框的參數應用就不僅僅關乎它自身,而是成為后續設計的重要參考依據。

這會在后面的章節中進一步說明。

2.3 一般選擇型表單

一般選擇類型表單,就是用戶從系統已經準備好的數據選項中選出一到多項,并提交給系統。所以選擇型表單的首要任務,就是讓用戶看見系統準備了哪些數據選項。

展示的方式包含陳列式和隱藏式,陳列式即將數據選項全部展示出來,可以直接進行選擇,隱藏式則是隱藏起來,需要額外的操作進行展開。

B端表單|表單的主要分類和相關控件認識

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

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

B端表單|表單的主要分類和相關控件認識

而隱藏式選擇表單包含的類型就更多了,最常見的類型就是下拉選擇器(Select)了,通過點擊展開隱藏菜單,并在里面進行選擇。

B端表單|表單的主要分類和相關控件認識

樹狀選擇器(TreeSelect)和選擇器作用差一致,區別是樹狀選擇器展開的內容是會占用頁面實際空間的,而下拉選擇器則是使用浮層不受背景干擾。

B端表單|表單的主要分類和相關控件認識

除此之外,滑塊、開關、步近器等控件,本質上也是隱藏選擇的一種,選擇系統已經劃好范圍的數據條目。

B端表單|表單的主要分類和相關控件認識

2.4 進階組合型表單

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

B端表單|表單的主要分類和相關控件認識

根據行業和產品的不同,表單采集數據的需求多種多樣,這就需要依靠設計師的個人判斷和經驗,構思對應的表單形式。

B端表單|表單的主要分類和相關控件認識

分類字段設置表單

B端表單|表單的主要分類和相關控件認識

任務路線圖設置表單

B端表單|表單的主要分類和相關控件認識

頁面模塊設置表單

這些進階組合中的每個表單項,都不僅僅是輸入或選中一類數據,而會關聯其它數據。如上圖為頁面添加一個模塊項,系統不僅要獲取模塊的名稱,同時要獲取這個模塊所處位置的序號進行排序。

這些復雜的表單需求無窮無盡,在我們的設計生涯中也很難設計出兩個完全一樣的進階組合表單。

所以不要陷入 “找參考” 的陷進中,我們很難從市面上找到完全一樣的參考對象。需要設計師熟練掌握和運用前兩種表單類型,才能在遇到這些復雜需求時根據實際情況對它們進行組合和優化。

結尾

以上就是對表單類型的基本區分,后續在合并修訂版本中會再做一次優化。了解完類型,下一篇內容就會展開具體的表單設計說明了。

作者:酸梅干超人;公眾號:超人的電話亭(ID:Superman_Call)

本文由 @超人的電話亭 原創發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自Unsplash ,基于 CC0 協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!