編輯導語：每個人生活中，都在和各種表單打交道，而表單在產品中主要負責數據采集功能。表單也是最常用的信息錄入的工具，隨著互聯網興起，特別是最近幾年B端的興起，表單的重要性越來越突出。那么我們應該如何設置表單，才能提高效率呢？

引言：

交互主要指人機交互，說的是人與機器之間的互動，而這個機器又特指計算機；人對機器發出指令，然后機器做出反應，并通過顯示器反饋給人。

具體到應用軟件中，系統一般需要獲取用戶的數據，有的是需要用戶手動輸入，有的是需要用戶選擇輸入，最終通過提交動作，將數據傳遞給計算機，計算機通過處理并反饋給用戶。

以上便是表單的具體使用場景，也是系統常用的獲取用戶數據的手段。我們常說的輸入與反饋，這個輸入也可以簡單理解為表單，例如：登錄注冊信息輸入、查詢條件輸入、新建數據輸入等。

下面我會把表單這個組件層層剖開，細細道來。

一、表單所處位置

設計一款產品時，表單會用的比較多，作為主要的輸入操作的表現形式，會體現在很多的地方，下面會對表單所處位置進行詳細講解。

1. 頁面

打開某個頁面時，可以看到表單組件，用戶輸入數據后，點擊提交按鈕，數據傳遞給系統。正常情況下，頁面需要刷新，輸入的數據根據業務要求，有的需要保留，有的不需要保留。

在輸入查詢條件搜索后，業務上一般是要求保存剛才輸入的查詢條件的，如果要去除掉，可以一個個手動刪除掉，也可以點擊重置按鈕，清空所有查詢條件。

登錄系統時，需要輸入用戶名和密碼，一般用戶名可以保存，并且支持保存所有已經登錄成功過的用戶名，但是密碼是肯定不用保存的。

2. 彈窗

在某個頁面上操作后，還需要用表單組件輸入數據時，可以采用彈窗形式或者再開一個TAB頁的形式。

再開TAB頁又分為在系統內開TAB頁和在瀏覽器上開TAB頁，唯一需要注意的就是，數據輸入提交后，該TAB頁需要自動關閉掉并同時刷新最開始操作頁的數據。

采用彈窗來承載表單組件的話，頁面層級就會看起來簡單很多，輸入數據提交后，彈窗會自動消失并同時刷新頁面內容。這也是產品設計比較常用的方式。

3. 多層彈窗

當用彈窗來承載比較復雜的表單組件時，為了讓層級更清晰，用戶認知屬性更好，可能需要在彈窗上再增加彈窗來承載細節的表單組件，這里我姑且稱為多層彈窗吧。

第一個彈窗一般是作為一個表單集合的角色，某個表單元件還需要更細節的表單展示，這時通過點擊再打開一個彈窗去承載細節的表單組件。

輸入數據點擊提交后，細節彈窗會自動關閉，并將數據傳到第一個彈窗對應的表單元件內，在這個彈窗內點擊提交后，彈窗也會自動關閉，并自動刷新頁面展示數據。

二、表單元件

表單組件是由很多個元件組成的，下面我會詳細談談常用的一些元件。

1. 標簽

標簽其實就是文字標識，一般作為輸入元件的名稱，正常來說是放在輸入元件左側，輸入元件包括文本框、文本域、日期時間、單選框、復選框、下拉框等。

例如：標簽叫名稱，右側放一個文本框。

PC端的標簽一般是放在輸入元件的左側；而移動端的標簽除了可以放在左側，有時候也會放在頭部或者放在輸入元件內，例如文本框內。

當輸入元件信息量很大時，你也可以把標簽理解為標題。一組單選框，數量大概4個，這時一般會用到一個標簽，作為這組單選框的標題。

例如：標簽叫年齡，單選框值分別為18歲以下、18到24歲、25歲到35歲、35歲以上。另外標簽也可以輔助表達必填字段，我一般是把紅色星號放在標簽文字左側。

2. 文本框

文本框也叫單層文本框，就是里面輸入的內容是不能換行的；對應的也有多層文本框，我們叫文本域，里面的內容可以輸入多行。

文本域比較典型的是線上簡歷中的自我評價，一般會有字數限制，限制提示一般放在右下位置，格式為0/150，左側代表輸入的字數，右側代表最多能輸入的字數。

如下圖所示：

單層文本框，針對輸入內容，一般分為字符文本框和數值文本框。字符文本可以隨便輸入，系統默認都當成字符串來處理。

數值文本就是只能輸入數字，一般金額類的字段用的比較多，其他一些帶有單位的也需要用到數值文本框，例如單位為年，文本框肯定只能輸入數值了。為了讓系統更人性化，設計時可能還需要考慮限定字數。

3. 日期時間

日期時間元件一般也用文本框樣式，只是一般框內右側會放一個日期圖標，點擊文本框，彈出日期時間控件，有的業務上也要求可以手動輸入日期，固定好格式就行了，例如：20201202。

日期時間框放一個代表某個時間，如果是放兩個框，則代表時間范圍。一個框表示具體的某個時間，可以是日期也可以是具體的時刻，這個比較好理解。

如果是時間范圍，則會有一些明顯的校驗要考慮：

• 右側日期不能小于左側日期；
• 限定了時間范圍的話，左右兩側日期值不能超過這個范圍；
• 常識性的時間選擇，比如預定酒店選入住時間，不能選今天以前的日期等。

另外說明一點，時間范圍如果輸入同一時刻，則代表沒有范圍，只有這一時刻。

例如：在用日期時間元件作為查詢條件時，一般是一個范圍，如果我只想查某一天的怎么辦，便可以兩個框輸入同一天。

我記得以前有開發把日期框設置成可以只輸入左側那一個，代表只查某一天，其實這樣是會給用戶歧義以及造成一些誤操作，體驗并不好，可以查范圍的地方，如果只想查某一天，還是應該輸入兩個一樣的日期。

4. 單選框

單選框元件一般用于選項不多的情況，用戶可以一眼看到所有內容，對應的如果選項內容很多，一般用下拉框，原則就是超過5個選項用下拉框。

單選框里面的選項選擇是互斥的，只能選擇一個，也就是傳遞給系統的數據值只有一個，當選項值只有兩個時，也類似于開關一樣的元件，例如：是和否、打開和關閉、開啟和禁用等。

這類選項內容，除了可以用單選框組件外，也可以使用開關組件。

這里再補充一點，還有種滑塊組件，也可以代替單選框組件使用，原則也是4個選項以內，我個人覺得滑塊組件在視覺上會更美觀一些。

如下圖所示：

5. 復選框

區別于單選框組件，復選框組件就是支持選擇多項內容，即傳遞給系統的數據值可以是多個。

單選框組件在使用時，一般會使用一組單選框；而復選框除了使用一組以外，還可以只使用一個復選框。這個時候也會給人一種互斥的感覺，要么選擇，要么不選擇。

在早期Widows系統中，開關也會用復選框組件來表達。

6. 下拉框

下拉框組件除了在選項內容很多時可以代替單選框組件使用，其實也可以將下拉內容換成復選框，支持一次選擇多個內容。

當選擇多個內容后，會在展示框內顯示多個內容，中間用符號隔開，這個符號可以跟開發去協商好。

如下圖所示：

當然，內容很多并且帶有一定組織性時，我們也可以用樹形組件作為下拉框選項內容，同時也支持多選，根據業務需要而定。

三、表單反饋

從前面我們可以知道，表單主要是讓用戶輸入數據的，按照正常的流程，用戶是輸入正確的數據，系統給出正確的結果。

當用戶輸入的內容有誤時，系統要及時做出校驗并反饋給用戶，讓用戶及時改正并輸入正確的數據，以便達到用戶的任務目標。

下面我將來聊聊表單的反饋：

1. 右側反饋

早期設計餐飲行業CRM系統時，就是采用的右側反饋模式，這種模式需要表單元件右側有足夠的空白區域，一般用單列來擺放元件。

如下圖所示：

校驗觸發的話，可以是提交時一起校驗，也可以是輸入后即時校驗，我個人覺得即時校驗效果會更好點，方便用戶快速發現問題。

如果是提交時一起校驗，對用戶的情緒是會有影響的，當然原則還是看你們的業務需求，畢竟各行各業的不同產品的業務場景都是不一樣的。

2. 底部反饋

當表單內容很多，需要多列擺放時，我們就不能使用右側反饋模式了，我們可以使用底部反饋或者浮層反饋。

底部反饋需要表單元件上下之間有一定的留白空間，如果是有反饋提示時，強行去撐開頁面高度，這種體驗也是很不好的，有種忽閃忽閃的感覺。

如下圖所示：

3. 浮層反饋

浮層反饋模式一般用于表單元件需要多列多行排列時，整體看起來比較緊湊，校驗反饋一般用浮層方式，不會破壞頁面原有的緊湊感。

如下圖所示：

這里有個很尷尬的問題，如果采用浮層反饋模式，并且是需要提交時才去校驗，如果校驗反饋很多，反饋后，整體看著會很亂，滿屏的浮層，互相之間可能還會出現遮擋。

這里就需要做取舍了，需要根據實際的業務情況去判斷。

4. 彈窗反饋

彈窗反饋在這里我是作為一個反面來舉例的，這種模式一般只能是提交時去統一校驗，如果問題很多，需要點擊提交按鈕多次，反復的修正校驗再修正，用戶會很疲憊，這種模式一般不建議。

以前在對一些老系統做用戶體驗優化時，就經常遇到這樣反饋的系統，真是不知該如何吐槽好了。用戶在使用時經常會很煩躁，遇到一些對計算機操作不是特別熟的人，會把這種體驗當成BUG提出來，是不是讓人很無奈。

站在用戶角度而言，也無可厚非，我們本來就是要提供更人性化的產品給用戶使用，實現模型是給程序員用的，用戶還是要更多的使用心理模型。

四、總結

表單元件其實有很多，以上列舉的只是我覺得比較常用的一些，差不多都是屬于結構化數據輸入，其實還有很多非結構化數據的輸入，例如圖片、視頻、文件等。

交互設計師畫的原型需要包含所有頁面，而視覺設計師除了品牌調性和風格以外，只需要把組件設計出來。

例如：表單組件中的文本框，下拉框等，默認是什么樣，滑過什么樣，點擊什么樣，禁用什么樣，與用戶交互后又該怎么反應等，這些細節就需要慢慢去打磨了。

作者：D.cheerful，微信號：dcf8859，微信公眾號：D哥設計。

本文由 @D.cheerful 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 unsplash，基于 CC0 協議