需要收集和錄入數據時，表單必不可少，而表單，也是B端設計師的必備能力之一。對此，本文從表單是什么，為什么重要？表單的主要應用場景、表單的主要結構和類型三個方面做了介紹和分析，一起來看看吧。

之前我們已經分享過成套的表格設計思路，接下來我們就聚焦在表單部分的干貨整理和分享中，幫助大家更好的理解和設計表單。

一、表單是什么，為什么重要

表單這個詞匯雖然很常見，但相信不少同學對這個詞匯本身的理解是很陌生的、一知半解的。所以我們首要目標就是認識它是什么，以及它在B端項目中的作用、使用場景。

和表格類似，表單也是現代電子計算機系統中最重要的組成部分之一，但和表格不同的是，從我們9年義務教育開學的第一天，甚至更早，就已經在接觸和使用表單了。

表單就是用來收集和錄入數據的列表清單，是我們過去填寫的試卷、個人資料、業務辦理等紙質清單的數字化應用方式。

比如登陸流程的賬號密碼填寫，注冊流程的郵箱、用戶名等信息填寫，都是表單應用的常見案例，計算機需要通過它來收集用戶指定的數據信息。

輸入框、選擇控件等都是表單的一部分，但要注意的是，表單是一個合集概念，是一個整體的 “清單”，而不是單一的功能控件、組件。比如上圖的登陸表單、注冊表單，都包含了若干的輸入控件。

在軟件編程中，通常也需要先定義出表單的整體對象，再去創建下級的控件。比如 HTML 需要先添加 <Form> 表單標簽，再在它的下級定義相關的輸入框、下拉菜單、選項、按鈕等元素。

<form value=”注冊表單”>

<input type=”text”>用戶名br>

<input type=”password”>密碼br>

<button type=”button”>注冊按鈕</button>

</form>

這和現實邏輯是高度一致的，也就是每個表單都會有相關的頂級目標，不管是收集個人信息、健康狀況、工作經驗亦或消費記錄。然后再根據這個目標所需的具體明細羅列出相關的數據清單，例如個人信息收集所需的姓名、性別、年齡、身高、體重等等。

表單設計，就是根據收集目標，設計若干數據收集控件的合集。

而它之所以重要，就是因為除了使用表格、圖表等模塊查看信息之外，還包含大量的數據錄入需求。有相當一部分項目中所產生的數據，都是通過系統內的表單輸入的，它們會占用用戶大量的精力和時間。

所以優秀的表單設計除了提升基礎的視覺效果外，還可以非常好的提升表單操作過程的體驗和效率，是 B 端設計師的必備能力之一。

二、表單的主要應用場景

表單是用來收集數據的前面我們已經解釋了，但收集數據這個目標并不是只有把你填的內容記錄到數據庫中這一個而已，還包含執行特定程序時的必要數據收集。

所以，我把表單應用的主要場景拆分成4個大類：

1. 數據錄入

就是最基礎的用來將數據收集并保存到數據庫的場景，主要應用在對特定數據對象的創建和編輯上。

2. 數據篩選

即通過若干的條件來篩選出指定的對象和數據內容，常見于表格和列表數據的篩選。

3. 功能設置

通過若干的條件設置來實現對應的功能或服務，比如在 CMS 系統設置推送消息條件，或設置相關的程序、機器的運作執行條件。

4. 數據校驗

即針對特定數據信息進行驗證的場景，例如賬號登陸，非機器人驗證，財務、刪除的二次確認等等。

這4個場景的目標不同，自然在設計的樣式和交互上會有一定的差異，后面我們會分別對它們展開講解，先能理解并分辨它們即可。

三、表單的主要結構和類型

一個完整的表單通常會包含3個要素，標題、數據項、按鈕。

標題就是這個表單的名稱，讓用戶理解填寫數據的目的。數據項則是該表單內每一條要收集的數據對象，根據數據類型和特征會有不同的控件類型和交互形式。按鈕則是針對整個表單的操作（不是針對某個數據項），例如發布、重制、恢復默認等。

數據項是我們要重點探討的對象，每一個數據項都包含三個基礎的要素，數據名稱、數據內容、操作對象。

數據名稱就是該項的命名，讓用戶識別操作的數據是什么，它可以獨立顯示在畫布中，也可以置入到輸入框等操作對象內。

數據內容，則是該數據項中要收集的數據特征，這是最核心的設計需求來源。數據特征是個總稱，里面包含很多要素，比如最基礎的一環 —— 數據類型。

這是一個開發術語，任何數據要被記錄，都會定義它的類型再進行存儲和使用。常見的數據類型包含數值（Number）、字符串（String）、日期（data）三個大類，且每個大類根據具體使用場景還會拆分出細分類型，比如下面的案例：

技術上的概念并不需要太深入理解，只要知道它從屬于哪個大類即可。更進一步，技術上的數據類型劃分在實際應用上仍是有局限性的，比如用戶名和密碼，本質上它們都以字符串的形式保存，但它們從工作中的稱呼、樣式的設計都是全然不同的。

除了數據類型，還有一個特別重要的就是數據內容，每個數據項都會明確想要獲取的數據結果是什么樣的。有可能是用戶手動輸入的，也可能是在已經存在的選項中挑選出來。還有對數據內容的長度、格式、數量、遞進、范圍、過濾的要求等。

在稍微復雜點的項目中，產品經理都會根據業務需要對數據類型進行定義，并在設計表單需求的時候，具體的規劃每個數據項的數據類型，比如創建一個下面的表格來描述。

之所以這個要講這個，因為對數據內容的整理決定了最終應該設計什么樣的——操作對象。

操作對象就是該數據項的具體表現形式，包括了視覺樣式和交互方法。比如上方的商品名，就是一個簡單的輸入框，但是因為商品名動輒字數非常多，這個輸入框的設計肯定不會像用戶名一樣短。

商品分類中，要從既定的選項中選擇，而商品分類庫本身是樹狀結構的，那么這個選擇必然要支持層級的表現，同時還要支持多選，所以應該使用下拉的樹狀選擇菜單。

如果光看上面這個案例，可能覺得太簡單根本不用想那么多背后的需求。但在一些專業性更高，包含數十條復雜數據項的表單中，是必然要做出充分理解和分析，才能確保設計的有效性。

后面我們會從常規表單的控件和組件類型入手，掌握基礎的知識后再學習如何結合數據需求進行有效的設計。