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

引言：

交互主要指人機(jī)交互，說的是人與機(jī)器之間的互動(dòng)，而這個(gè)機(jī)器又特指計(jì)算機(jī)；人對機(jī)器發(fā)出指令，然后機(jī)器做出反應(yīng)，并通過顯示器反饋給人。

具體到應(yīng)用軟件中，系統(tǒng)一般需要獲取用戶的數(shù)據(jù)，有的是需要用戶手動(dòng)輸入，有的是需要用戶選擇輸入，最終通過提交動(dòng)作，將數(shù)據(jù)傳遞給計(jì)算機(jī)，計(jì)算機(jī)通過處理并反饋給用戶。

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

下面我會(huì)把表單這個(gè)組件層層剖開，細(xì)細(xì)道來。

一、表單所處位置

設(shè)計(jì)一款產(chǎn)品時(shí)，表單會(huì)用的比較多，作為主要的輸入操作的表現(xiàn)形式，會(huì)體現(xiàn)在很多的地方，下面會(huì)對表單所處位置進(jìn)行詳細(xì)講解。

1. 頁面

打開某個(gè)頁面時(shí)，可以看到表單組件，用戶輸入數(shù)據(jù)后，點(diǎn)擊提交按鈕，數(shù)據(jù)傳遞給系統(tǒng)。正常情況下，頁面需要刷新，輸入的數(shù)據(jù)根據(jù)業(yè)務(wù)要求，有的需要保留，有的不需要保留。

在輸入查詢條件搜索后，業(yè)務(wù)上一般是要求保存剛才輸入的查詢條件的，如果要去除掉，可以一個(gè)個(gè)手動(dòng)刪除掉，也可以點(diǎn)擊重置按鈕，清空所有查詢條件。

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

2. 彈窗

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

再開TAB頁又分為在系統(tǒng)內(nèi)開TAB頁和在瀏覽器上開TAB頁，唯一需要注意的就是，數(shù)據(jù)輸入提交后，該TAB頁需要自動(dòng)關(guān)閉掉并同時(shí)刷新最開始操作頁的數(shù)據(jù)。

采用彈窗來承載表單組件的話，頁面層級就會(huì)看起來簡單很多，輸入數(shù)據(jù)提交后，彈窗會(huì)自動(dòng)消失并同時(shí)刷新頁面內(nèi)容。這也是產(chǎn)品設(shè)計(jì)比較常用的方式。

3. 多層彈窗

當(dāng)用彈窗來承載比較復(fù)雜的表單組件時(shí)，為了讓層級更清晰，用戶認(rèn)知屬性更好，可能需要在彈窗上再增加彈窗來承載細(xì)節(jié)的表單組件，這里我姑且稱為多層彈窗吧。

第一個(gè)彈窗一般是作為一個(gè)表單集合的角色，某個(gè)表單元件還需要更細(xì)節(jié)的表單展示，這時(shí)通過點(diǎn)擊再打開一個(gè)彈窗去承載細(xì)節(jié)的表單組件。

輸入數(shù)據(jù)點(diǎn)擊提交后，細(xì)節(jié)彈窗會(huì)自動(dòng)關(guān)閉，并將數(shù)據(jù)傳到第一個(gè)彈窗對應(yīng)的表單元件內(nèi)，在這個(gè)彈窗內(nèi)點(diǎn)擊提交后，彈窗也會(huì)自動(dòng)關(guān)閉，并自動(dòng)刷新頁面展示數(shù)據(jù)。

二、表單元件

表單組件是由很多個(gè)元件組成的，下面我會(huì)詳細(xì)談?wù)劤Ｓ玫囊恍┰?/p>

1. 標(biāo)簽

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

例如：標(biāo)簽叫名稱，右側(cè)放一個(gè)文本框。

PC端的標(biāo)簽一般是放在輸入元件的左側(cè)；而移動(dòng)端的標(biāo)簽除了可以放在左側(cè)，有時(shí)候也會(huì)放在頭部或者放在輸入元件內(nèi)，例如文本框內(nèi)。

當(dāng)輸入元件信息量很大時(shí)，你也可以把標(biāo)簽理解為標(biāo)題。一組單選框，數(shù)量大概4個(gè)，這時(shí)一般會(huì)用到一個(gè)標(biāo)簽，作為這組單選框的標(biāo)題。

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

2. 文本框

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

文本域比較典型的是線上簡歷中的自我評價(jià)，一般會(huì)有字?jǐn)?shù)限制，限制提示一般放在右下位置，格式為0/150，左側(cè)代表輸入的字?jǐn)?shù)，右側(cè)代表最多能輸入的字?jǐn)?shù)。

如下圖所示：

單層文本框，針對輸入內(nèi)容，一般分為字符文本框和數(shù)值文本框。字符文本可以隨便輸入，系統(tǒng)默認(rèn)都當(dāng)成字符串來處理。

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

3. 日期時(shí)間

日期時(shí)間元件一般也用文本框樣式，只是一般框內(nèi)右側(cè)會(huì)放一個(gè)日期圖標(biāo)，點(diǎn)擊文本框，彈出日期時(shí)間控件，有的業(yè)務(wù)上也要求可以手動(dòng)輸入日期，固定好格式就行了，例如：20201202。

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

如果是時(shí)間范圍，則會(huì)有一些明顯的校驗(yàn)要考慮：

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

另外說明一點(diǎn)，時(shí)間范圍如果輸入同一時(shí)刻，則代表沒有范圍，只有這一時(shí)刻。

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

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

4. 單選框

單選框元件一般用于選項(xiàng)不多的情況，用戶可以一眼看到所有內(nèi)容，對應(yīng)的如果選項(xiàng)內(nèi)容很多，一般用下拉框，原則就是超過5個(gè)選項(xiàng)用下拉框。

單選框里面的選項(xiàng)選擇是互斥的，只能選擇一個(gè)，也就是傳遞給系統(tǒng)的數(shù)據(jù)值只有一個(gè)，當(dāng)選項(xiàng)值只有兩個(gè)時(shí)，也類似于開關(guān)一樣的元件，例如：是和否、打開和關(guān)閉、開啟和禁用等。

這類選項(xiàng)內(nèi)容，除了可以用單選框組件外，也可以使用開關(guān)組件。

這里再補(bǔ)充一點(diǎn)，還有種滑塊組件，也可以代替單選框組件使用，原則也是4個(gè)選項(xiàng)以內(nèi)，我個(gè)人覺得滑塊組件在視覺上會(huì)更美觀一些。

如下圖所示：

5. 復(fù)選框

區(qū)別于單選框組件，復(fù)選框組件就是支持選擇多項(xiàng)內(nèi)容，即傳遞給系統(tǒng)的數(shù)據(jù)值可以是多個(gè)。

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

在早期Widows系統(tǒng)中，開關(guān)也會(huì)用復(fù)選框組件來表達(dá)。

6. 下拉框

下拉框組件除了在選項(xiàng)內(nèi)容很多時(shí)可以代替單選框組件使用，其實(shí)也可以將下拉內(nèi)容換成復(fù)選框，支持一次選擇多個(gè)內(nèi)容。

當(dāng)選擇多個(gè)內(nèi)容后，會(huì)在展示框內(nèi)顯示多個(gè)內(nèi)容，中間用符號(hào)隔開，這個(gè)符號(hào)可以跟開發(fā)去協(xié)商好。

如下圖所示：

當(dāng)然，內(nèi)容很多并且?guī)в幸欢ńM織性時(shí)，我們也可以用樹形組件作為下拉框選項(xiàng)內(nèi)容，同時(shí)也支持多選，根據(jù)業(yè)務(wù)需要而定。

三、表單反饋

從前面我們可以知道，表單主要是讓用戶輸入數(shù)據(jù)的，按照正常的流程，用戶是輸入正確的數(shù)據(jù)，系統(tǒng)給出正確的結(jié)果。

當(dāng)用戶輸入的內(nèi)容有誤時(shí)，系統(tǒng)要及時(shí)做出校驗(yàn)并反饋給用戶，讓用戶及時(shí)改正并輸入正確的數(shù)據(jù)，以便達(dá)到用戶的任務(wù)目標(biāo)。

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

1. 右側(cè)反饋

早期設(shè)計(jì)餐飲行業(yè)CRM系統(tǒng)時(shí)，就是采用的右側(cè)反饋模式，這種模式需要表單元件右側(cè)有足夠的空白區(qū)域，一般用單列來擺放元件。

如下圖所示：

校驗(yàn)觸發(fā)的話，可以是提交時(shí)一起校驗(yàn)，也可以是輸入后即時(shí)校驗(yàn)，我個(gè)人覺得即時(shí)校驗(yàn)效果會(huì)更好點(diǎn)，方便用戶快速發(fā)現(xiàn)問題。

如果是提交時(shí)一起校驗(yàn)，對用戶的情緒是會(huì)有影響的，當(dāng)然原則還是看你們的業(yè)務(wù)需求，畢竟各行各業(yè)的不同產(chǎn)品的業(yè)務(wù)場景都是不一樣的。

2. 底部反饋

當(dāng)表單內(nèi)容很多，需要多列擺放時(shí)，我們就不能使用右側(cè)反饋模式了，我們可以使用底部反饋或者浮層反饋。

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

如下圖所示：

3. 浮層反饋

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

如下圖所示：

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

這里就需要做取舍了，需要根據(jù)實(shí)際的業(yè)務(wù)情況去判斷。

4. 彈窗反饋

彈窗反饋在這里我是作為一個(gè)反面來舉例的，這種模式一般只能是提交時(shí)去統(tǒng)一校驗(yàn)，如果問題很多，需要點(diǎn)擊提交按鈕多次，反復(fù)的修正校驗(yàn)再修正，用戶會(huì)很疲憊，這種模式一般不建議。

以前在對一些老系統(tǒng)做用戶體驗(yàn)優(yōu)化時(shí)，就經(jīng)常遇到這樣反饋的系統(tǒng)，真是不知該如何吐槽好了。用戶在使用時(shí)經(jīng)常會(huì)很煩躁，遇到一些對計(jì)算機(jī)操作不是特別熟的人，會(huì)把這種體驗(yàn)當(dāng)成BUG提出來，是不是讓人很無奈。

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

四、總結(jié)

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

交互設(shè)計(jì)師畫的原型需要包含所有頁面，而視覺設(shè)計(jì)師除了品牌調(diào)性和風(fēng)格以外，只需要把組件設(shè)計(jì)出來。

例如：表單組件中的文本框，下拉框等，默認(rèn)是什么樣，滑過什么樣，點(diǎn)擊什么樣，禁用什么樣，與用戶交互后又該怎么反應(yīng)等，這些細(xì)節(jié)就需要慢慢去打磨了。

作者：D.cheerful，微信號(hào)：dcf8859，微信公眾號(hào)：D哥設(shè)計(jì)。

本文由 @D.cheerful 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 unsplash，基于 CC0 協(xié)議