表單設(shè)計(jì)不僅僅是把不同類型的輸入框排排版、標(biāo)清楚必填非必填、哪些表單比較復(fù)雜適當(dāng)?shù)募觽€(gè)說明就完了，也需要有需求的支撐、嵌套使用情境、考慮用戶的心理模型。我們將在本系列文章中了解到從表單的產(chǎn)生到表單在頁面上如何呈現(xiàn)，再到使用表單時(shí)與表單之間的交互該如何思考。先進(jìn)入到上篇：聊聊關(guān)于表單的基礎(chǔ)內(nèi)容。

表單作為B端產(chǎn)品中最基礎(chǔ)通用組件，也是在各個(gè)B端產(chǎn)品中出現(xiàn)頻率最高的元素之一。表單的設(shè)計(jì)特別考驗(yàn)設(shè)計(jì)師綜合能力和設(shè)計(jì)細(xì)節(jié)的。一定程度上，表單設(shè)計(jì)的好壞也決定了產(chǎn)品的成敗。

當(dāng)我被陷入一堆表單設(shè)計(jì)中時(shí)，我開始思考，表單設(shè)計(jì)到底要遵循什么樣的規(guī)律，在設(shè)計(jì)上如何去做取舍？表單該怎么布局？表單的組成元素有哪些？表單有什么交互規(guī)范？超長表單該怎么設(shè)計(jì)？

接下來跟大家聊一聊我對(duì)表單設(shè)計(jì)的研究及日常工作經(jīng)驗(yàn)總結(jié)。將我自己踩過的坑整理出來，目的是為了幫助那些剛邁入職場(chǎng)的設(shè)計(jì)師，對(duì)表單能有一個(gè)更好的了解，從而避免在工作中進(jìn)入誤區(qū)，也希望能給PM們提供一些思路。

如果你認(rèn)為表單就是指的把一些不同類型的輸入框排排版、標(biāo)清楚必填非必填、哪些表單比較復(fù)雜適當(dāng)?shù)募觽€(gè)說明就完了。

其實(shí)不是，表單設(shè)計(jì)遠(yuǎn)遠(yuǎn)不止這些，表單本身也是一個(gè)小產(chǎn)品，它也需要有需求的支撐、也需要嵌套使用情境、也需要考慮用戶的心理模型；從表單的產(chǎn)生到表單在頁面上如何呈現(xiàn)，再到使用表單時(shí)與表單之間的交互，每一步都需要投入大量的思考來做好表單。

PART 1 表單的基礎(chǔ)理論

一、表單基礎(chǔ)概念

表單的概念并非互聯(lián)網(wǎng)原創(chuàng)，在傳統(tǒng)行業(yè)中，紙質(zhì)化的表單就占據(jù)了非常重要的工具地位；

B端產(chǎn)品通過為表單增加屬性，使得一個(gè)個(gè)任務(wù)表單能夠在動(dòng)作——狀態(tài)機(jī)中流轉(zhuǎn)，就能夠?qū)崿F(xiàn)業(yè)務(wù)的線上化開展和管理。

從廣義的定義來講，表單是指用于數(shù)據(jù)錄入的一切形式。

從狹義上來講，表單在大家更廣泛的認(rèn)知印象中，表單則是一類包含輸入框、下拉選擇框等常見控件的組合形式的頁面才屬于表單。

表單的本質(zhì)核心是提交數(shù)據(jù)，所以凡是具備采集數(shù)據(jù)并完成采集后提交數(shù)據(jù)的交互形式均可稱之為表單。

二、表單的應(yīng)用場(chǎng)景

在B端產(chǎn)品中，表單是用戶向系統(tǒng)傳遞和修改數(shù)據(jù)信息的主要方式，同時(shí)也是系統(tǒng)獲取用戶數(shù)據(jù)、響應(yīng)反饋結(jié)果的主要方式，可以說表單是人機(jī)交互中重要的數(shù)據(jù)媒介。

想要做好表單設(shè)計(jì)首先要搞清楚表單的應(yīng)用場(chǎng)景，在商業(yè)產(chǎn)品應(yīng)用的平臺(tái)上，表單使用場(chǎng)景可以粗略的歸為3大類：數(shù)據(jù)錄入、數(shù)據(jù)校驗(yàn)反饋、數(shù)據(jù)展示。

三、表單設(shè)計(jì)原則與目標(biāo)

1、表單設(shè)計(jì)目標(biāo)

表單的設(shè)計(jì)必須優(yōu)先考慮為用戶減負(fù)，提高效率并簡化填寫流程。

另外表單中組件的選擇需要依據(jù)具體的數(shù)據(jù)類型和具體的業(yè)務(wù)場(chǎng)景進(jìn)行合理正確的選用，為用戶提供高效的數(shù)據(jù)錄入表單，降低用戶操作成本、認(rèn)知負(fù)擔(dān)，并提高數(shù)據(jù)采集效率才是表單設(shè)計(jì)的根本目的。

2、表單設(shè)計(jì)原則

賈里德·斯普爾曾經(jīng)有一個(gè)經(jīng)典案例：修改按鈕為網(wǎng)站年收入增加3億美元。聽起來好像是天方夜譚的事情，但是它確實(shí)是事實(shí)。

良好的設(shè)計(jì)如何能為商業(yè)創(chuàng)造價(jià)值，這是設(shè)計(jì)團(tuán)隊(duì)一直在思考的問題。有一點(diǎn)是可以肯定的，我們用客觀的數(shù)據(jù)與嚴(yán)謹(jǐn)?shù)膶?shí)驗(yàn)，去證明我們?cè)O(shè)計(jì)原則與設(shè)計(jì)模式，讓它們的設(shè)計(jì)價(jià)值最大化，達(dá)到為商業(yè)創(chuàng)造價(jià)值的目標(biāo)。

a、減少操作，效率為先

為用戶減負(fù)為目標(biāo)，在完成數(shù)據(jù)采集任務(wù)的時(shí)候盡量給用戶帶來最小的操作負(fù)擔(dān)；表單效率是衡量表單設(shè)計(jì)優(yōu)劣的重要指標(biāo)，通過合理的信息輸入組件與頁面布局和交互方式可以使用戶快速完成表單頁的信息填寫任務(wù)。

b、準(zhǔn)確傳達(dá)，目標(biāo)明確

表單能夠讓用戶快速定位重要信息和目標(biāo)選項(xiàng)，表單標(biāo)題、選項(xiàng)和提示等內(nèi)容準(zhǔn)確傳達(dá)含義，表意明確；不要讓你傳達(dá)的信息產(chǎn)生歧義。

c、保持對(duì)話，及時(shí)反饋

信息反饋與提示對(duì)表單來說是一種很重要的保證用戶正確填寫數(shù)據(jù)的方式，對(duì)用戶的輸入及時(shí)給予反饋，及時(shí)告知用戶行為的結(jié)果，讓用戶及時(shí)感知不同操作的前因后果，并及時(shí)響應(yīng)相關(guān)操作；

d、安全可靠，操作可控

表單需要有一定的容錯(cuò)性，對(duì)用戶的錯(cuò)誤操作具備一定的包容性，有合理的操作后果保證機(jī)制，不至于由于意外的錯(cuò)誤操作造成不可控的嚴(yán)重后果，針對(duì)復(fù)雜表單提供分布或即時(shí)保存機(jī)制，對(duì)不同場(chǎng)景任務(wù)提供返回、重置、取消、清空、撤銷等容錯(cuò)性功能；

PART 2 表單的基礎(chǔ)構(gòu)成

一、基礎(chǔ)構(gòu)成

表單在設(shè)計(jì)上的結(jié)構(gòu)有：

1. 標(biāo)題；
2. 表單標(biāo)簽；
3. 占位符；
4. 表單域；
5. 提示信息；
6. 操作按鈕；

二、表單的形式

1、標(biāo)題

表示用戶錄入和編輯信息的所屬層級(jí)，主要位于表單的左上方或者居中位置。

• 第一類：普通表單中就是對(duì)表單輸入信息的概括，是典型的表單標(biāo)題，通常表現(xiàn)為頁面標(biāo)題或彈窗標(biāo)題；
• 第二類：在信息分組輸入的表單中出現(xiàn)的分組標(biāo)題，表現(xiàn)為信息分組標(biāo)題，源于對(duì)輸入信息的分組管理，是對(duì)分組字段的概括。

關(guān)于標(biāo)題的設(shè)計(jì)，分為三種樣式：

2、標(biāo)簽

標(biāo)簽指每個(gè)數(shù)據(jù)輸入域前的解釋文本，用于告知用戶相對(duì)應(yīng)的數(shù)據(jù)輸入字段的具體含義；

注意點(diǎn)：文字上要求盡量簡潔明了，避免出現(xiàn)有歧義、冗長且難以理解的標(biāo)簽，用詞方面盡量貼近用戶的使用場(chǎng)景或業(yè)務(wù)場(chǎng)景，在同一個(gè)產(chǎn)品系統(tǒng)內(nèi)或業(yè)務(wù)系統(tǒng)內(nèi)盡量保持相同標(biāo)簽的一致性。

在做標(biāo)簽的時(shí)候，我們需要給標(biāo)簽的行高和寬度統(tǒng)一。因?yàn)殚_發(fā)在寫這個(gè)頁面的時(shí)候，是把每一個(gè)元素放在一個(gè)class統(tǒng)一的div或者span標(biāo)簽內(nèi)。因此我們?cè)谧鲈O(shè)計(jì)稿的時(shí)候，需要把換行元素考慮進(jìn)去，即使只有一個(gè)字，避免以后二次設(shè)計(jì)和開發(fā)。

對(duì)標(biāo)簽的對(duì)齊方式又包含：頂對(duì)齊，左對(duì)齊，右對(duì)齊，這個(gè)部分后面會(huì)詳細(xì)地展開說明。

3、表單域或輸入域

可交互輸入域，是構(gòu)成表單的核心內(nèi)容，是表單用來采集數(shù)據(jù)的入口。輸入?yún)^(qū)是用戶交互最多也是最能影響使用體驗(yàn)的區(qū)域，不同類型數(shù)據(jù)選擇與之相應(yīng)的錄入方式，對(duì)提高表單操作效率和用戶體驗(yàn)大有裨益。

3.1 文本錄入

文本錄入是表單中最常見的和最基礎(chǔ)的信息輸入方式，為用戶提供提供自定義文本信息的輸入接口。

依據(jù)文本內(nèi)容長度可以分為單行文本框和多行文本域，前者適用于輸入文本字符總數(shù)較少的場(chǎng)景，后者適用于輸入文本字符總數(shù)較多或者不確定的場(chǎng)景。

3.1.1 文本框

結(jié)合不同業(yè)務(wù)場(chǎng)景及相關(guān)經(jīng)驗(yàn)，文本輸入在不同的業(yè)務(wù)場(chǎng)景下有一些注意點(diǎn)：

a、選擇適合的長度

輸入框的大小應(yīng)該向用戶暗示所需輸入內(nèi)容的長度，所以長度和內(nèi)容長度需要相匹配，一定程度上可以減輕用戶的操作負(fù)擔(dān)；

b. 復(fù)合輸入框

輸入內(nèi)容需帶單位，或可以選擇單位，使用特定前/后綴的復(fù)合輸入框。

c. 特殊格式自動(dòng)匹配

對(duì)于某些特有格式的輸入內(nèi)容，自動(dòng)匹配內(nèi)容的特有格式，例如電話號(hào)碼、密碼和銀行卡號(hào)等；

根據(jù)米勒定律（對(duì)短時(shí)記憶能力進(jìn)行了定量研究，他發(fā)現(xiàn)人的短時(shí)記憶能力廣度為7±2個(gè)信息塊，記憶信息超過了該范圍就容易出錯(cuò)），通過用戶的記憶結(jié)構(gòu)來提升用戶的閱讀體驗(yàn)。

d.特殊數(shù)值自動(dòng)提示

對(duì)于金融類產(chǎn)品，在輸入金額數(shù)字的時(shí)候，當(dāng)數(shù)據(jù)較大的時(shí)候，建議自動(dòng)提示數(shù)量級(jí)及單位，能夠方便用戶識(shí)別數(shù)值，降低出錯(cuò)率。

e. 智能補(bǔ)全

對(duì)于一些關(guān)聯(lián)性很強(qiáng)的文本輸入，可以通過智能補(bǔ)全的方式來減少用戶不必要的文字輸入，提高填寫速度又能減少出錯(cuò)，例如地址輸入。

3.1.2 文本域

多行輸入框在 Ant design 中被定義為文本域。結(jié)合不同業(yè)務(wù)場(chǎng)景及相關(guān)經(jīng)驗(yàn)，文本域在不同的業(yè)務(wù)場(chǎng)景下有一些注意點(diǎn)：

a、明確提示限制條件

對(duì)于有輸入限制的文本輸入，給予用戶明確的輸入提示，增加用戶感知，降低用戶出錯(cuò)率；

b、文本域自適應(yīng)

對(duì)于多行文本框建議使用可拉伸的自適應(yīng)高度的文本域，比固定高度的內(nèi)滾動(dòng)文本域要好，

從用戶體驗(yàn)講，可變化的文本框適用于各種用戶的閱讀習(xí)慣。同時(shí)，因?yàn)楣潭ㄎ谋究虺３?huì)出現(xiàn)滾動(dòng)條，會(huì)使頁面出現(xiàn)多個(gè)滾動(dòng)條，給用戶的使用操作上帶來一定困擾。

在做表單域的行內(nèi)信息換行時(shí)，我們需要給出橫向字?jǐn)?shù)寬度，和上下左右的間距。超出部分是自適應(yīng)高度，還是顯示滾動(dòng)條，需要標(biāo)注出來，并且要指定最小行數(shù)，和最大行數(shù)。

3.2 選擇錄入

選擇錄入是為用戶預(yù)先提供了一定的選擇范圍，指定范圍中選擇目標(biāo)選項(xiàng)進(jìn)行錄入，依據(jù)選項(xiàng)類型可分為：

單選、多選、選擇器（常用的有下拉單選/多選）、級(jí)聯(lián)選擇（多層級(jí)聯(lián)動(dòng)選擇）、樹選擇、穿梭框、開關(guān)。

a、單選框、復(fù)選框

一般用于選項(xiàng)不多且相對(duì)固定的情況，選項(xiàng)控制在6個(gè)以內(nèi)為宜，用戶可以一眼看到所有內(nèi)容。

單選框只能是其中一個(gè)選項(xiàng)，一般會(huì)默認(rèn)一個(gè)選項(xiàng)選中。多選框則可以選擇其中一個(gè)或多個(gè)選項(xiàng)。

b、開關(guān)

使用開關(guān)控件的條件是選項(xiàng)的性質(zhì)互斥（例如：是和否、打開和關(guān)閉、開啟和禁用等）；

c、選擇器

根據(jù)選擇類型，可以分為單選擇器、多選擇器、級(jí)聯(lián)選擇器以及樹選擇器4種類型。

優(yōu)勢(shì)：占用空間小，在展開所有選項(xiàng)后，可以按重要程度排列。

劣勢(shì)：當(dāng)選項(xiàng)過多時(shí)需要滾動(dòng)，會(huì)放慢用戶輸入速度；不點(diǎn)擊下拉，用戶不知道選項(xiàng)都有什么，不方便比較。

適用場(chǎng)景：適用于選項(xiàng)個(gè)數(shù)較多（5個(gè)以上）的場(chǎng)景和有默認(rèn)選項(xiàng)的場(chǎng)景；

3.2.1 下拉選擇

即下拉列表，其允許用戶從預(yù)定的列表中選擇一個(gè)或多個(gè)選項(xiàng)，為用戶在選項(xiàng)的數(shù)量上提供更多的可能性。這里注意一些 特殊類型的選擇器。

a、自定義多選選擇器

允許用戶自定義添加選項(xiàng)，例如在允許用戶添加自定義標(biāo)簽類場(chǎng)景中使用。

b、彈框型選擇器

列表選項(xiàng)過多，在下拉面板中展示體驗(yàn)感差，那么就可以選擇彈框型選擇器的彈框來承載更多的數(shù)據(jù)信息。

c、搜索型選擇器

用戶的記憶程度不同，一部分用戶可以通過主動(dòng)搜索獲取選項(xiàng)，一部分用戶可以通過在彈窗中直接選擇獲取選項(xiàng)。

d、表格選擇器

單一維度信息無法讓用戶做出選擇，需要為用戶呈現(xiàn)更多的數(shù)據(jù)信息才能讓用戶做出合理判斷時(shí)，使用可以展示更多數(shù)據(jù)信息的表格選擇器。

對(duì)于選擇錄入，結(jié)合不同業(yè)務(wù)場(chǎng)景及相關(guān)經(jīng)驗(yàn)，選擇錄入在不同的業(yè)務(wù)場(chǎng)景下有如下設(shè)計(jì)要點(diǎn)和使用建議：

避免默認(rèn)：盡量避免列表設(shè)置默認(rèn)值，除非業(yè)務(wù)場(chǎng)景中絕大部分用戶將選擇該默認(rèn)選項(xiàng)，尤其是必填字段，因?yàn)橛心J(rèn)值的表單，用戶一般會(huì)快速掃描瀏覽，過程中可能會(huì)跳過默認(rèn)項(xiàng)，進(jìn)而增加犯錯(cuò)幾率；

多項(xiàng)搜索：當(dāng)下拉選項(xiàng)列表中選項(xiàng)較多的時(shí)候建議增加關(guān)鍵字聯(lián)想檢索功能，方便查找目標(biāo)選項(xiàng)；

提示明確：提示信息要明確，避免模糊的提示文本，讓用戶明確知道自己選擇的是什么；

3.2.2 日期/時(shí)間/日期時(shí)間選擇器

日期及時(shí)間選擇：分為日期選擇、時(shí)間選擇、日期時(shí)間選擇，可以是單個(gè)時(shí)間，也可以是時(shí)間區(qū)間；

日期時(shí)間選擇：相當(dāng)于將日期和時(shí)間這兩個(gè)選擇項(xiàng)集為一身，在同一個(gè)選擇器里選擇（年月日時(shí)分秒）；相當(dāng)于兩個(gè)下拉框切換使用，步驟1先彈出日期選擇框選擇年月日，選擇好日期后點(diǎn)擊“確定按鈕”旁邊的“選擇時(shí)間”，則切換為步驟2的時(shí)間選擇框。

時(shí)間段選擇：為用戶提供了一種可視化的方式去瀏覽和選擇一個(gè)日期、一個(gè)時(shí)間、一個(gè)日期時(shí)間或日期范圍。

3.2.3 級(jí)聯(lián)選擇、樹選擇

二者都屬層級(jí)選擇，區(qū)別在于級(jí)聯(lián)選好選項(xiàng)后框內(nèi)顯示的是含層級(jí)的內(nèi)容選項(xiàng)，且只能選擇需最子集選項(xiàng)（例如：廣東省/廣州市市/天河區(qū)，不能選擇廣東省，因?yàn)榍懊娴倪x項(xiàng)只為導(dǎo)航至最子集）

而樹選擇框內(nèi)展示的是單個(gè)選項(xiàng)的內(nèi)容，不展示層級(jí)，但可以選擇任何層級(jí)（例如：天河區(qū)）

如何選擇呢？

1. 層級(jí)不深，在2-3級(jí)之間。一級(jí)節(jié)點(diǎn)在5個(gè)節(jié)點(diǎn)左右，二、三級(jí)節(jié)點(diǎn)個(gè)數(shù)相對(duì)較少，使用具有樹形結(jié)構(gòu)的樹選擇器。
2. 層級(jí)不深，在2-3級(jí)之間。一、二、三級(jí)節(jié)點(diǎn)個(gè)數(shù)都相對(duì)較多，使用樹選擇器縱向展示不利于用戶查找，建議使用節(jié)點(diǎn)分開展示的級(jí)聯(lián)選擇器。

3.2.4 滑塊選擇

滑動(dòng)型輸入器，展示當(dāng)前值和可選范圍，通過拖動(dòng)滑塊在一個(gè)固定區(qū)間內(nèi)進(jìn)行選擇。

滑塊選擇這種交互特點(diǎn)使得在設(shè)置音量、亮度等某一個(gè)維度的強(qiáng)弱等級(jí)的時(shí)候是一個(gè)比較好的方案，依據(jù)數(shù)值特點(diǎn)可以分為三種類型，分別為單點(diǎn)連續(xù)滑塊、區(qū)間連續(xù)滑塊和單點(diǎn)間續(xù)滑塊。

優(yōu)勢(shì)：便于用戶快速瀏覽大量的選項(xiàng)，提供流暢的用戶體驗(yàn)。

劣勢(shì)：數(shù)值選擇具有較強(qiáng)的不準(zhǔn)確性，難以精準(zhǔn)操作

使用場(chǎng)景：適用于輸入結(jié)果相對(duì)模糊或不準(zhǔn)確的業(yè)務(wù)場(chǎng)景。

用戶可以在一個(gè)連續(xù)或非連續(xù)的區(qū)間內(nèi)，通過滑動(dòng)錨點(diǎn)來選擇一個(gè)合適的數(shù)值或范圍。需求精度要求不高的場(chǎng)景下使用「連續(xù)滑塊」可得到更靈活便捷的操作；需求精度要求高的場(chǎng)景下可配合「數(shù)字輸入」使用。

3.3 步進(jìn)器

也稱為計(jì)數(shù)器，僅允許輸入自定義范圍內(nèi)標(biāo)準(zhǔn)的數(shù)字值，上下按鈕也不是每點(diǎn)擊一次數(shù)值±1，可以設(shè)置每點(diǎn)擊一次±N，N可以為任何數(shù)字，也可以為小數(shù)。

3.4 穿梭框

穿梭框較列表選擇的區(qū)別在于其將備選和已選分別置于選擇面板的左右兩欄，能夠以很直觀的方式在兩欄中移動(dòng)元素完成選擇行為。

• 優(yōu)點(diǎn)：能夠展示更多的可選項(xiàng)，方便用戶對(duì)比已選項(xiàng)與未選項(xiàng)以及更改已選內(nèi)容，
• 缺點(diǎn)：控件較大，選擇面板占用空間較大
• 適用場(chǎng)景：備選項(xiàng)較多且為多選的，需要在多個(gè)可選項(xiàng)中進(jìn)行多選；

兩種特殊類型的穿梭框：

1. 帶排序穿梭框：允許用戶將常用或者重要的元素靠前排序，自由調(diào)整元素順序。
2. 樹/表格穿梭框：元素的展現(xiàn)形式不同，使用不同的穿梭框形態(tài)。樹形結(jié)構(gòu)使用樹穿梭框，表格類數(shù)據(jù)使用表格穿梭框。

3.5 評(píng)分

當(dāng)需要為內(nèi)容進(jìn)行評(píng)分時(shí)使用。

三、文件上傳

文件上傳為用戶提供將本地文件上傳到系統(tǒng)服務(wù)器上的入口，依據(jù)上傳方式可劃分為點(diǎn)擊上傳、縮略圖上傳、拖拽上傳三種形式

1、直接上傳

即點(diǎn)擊后通過桌面系統(tǒng)彈窗選擇文件并上傳，多用于EXCEL數(shù)據(jù)表文件、WORD文件等形式；一般用于不需要預(yù)覽效果的文件上傳，文件上傳需要提供明確的文件大小和文件格式。這種情況是上傳圖片和文件合在一個(gè)上傳控件里。

分為需要手動(dòng)點(diǎn)擊頁面上的上傳按鈕才能完成上傳動(dòng)作和自動(dòng)上傳兩種

2、顯示縮略圖上傳

一般用于需要顯示預(yù)覽效果的文件上傳，同時(shí)選擇文件后直接完成上傳動(dòng)作。文件上傳需要提供明確的文件大小和文件格式，多用于圖片、PDF等文件，一般還可以直接在縮略圖片上賦予其他的交互 (查看、刪除等)。

3、拖拽上傳

用戶拖拽文件到指定區(qū)域即可完成上傳，也支持點(diǎn)擊上傳。文件上傳需要提供明確的文件大小和文件格式。

四、關(guān)于控件選擇

1、選擇框優(yōu)于輸入框

選擇框?yàn)橛脩籼峁┝藗溥x的選項(xiàng)，用戶只需要點(diǎn)擊即可完成數(shù)據(jù)錄入，而輸入框則需要用戶手動(dòng)自定義輸入，操作復(fù)雜度和成本明顯高于選擇框，所以優(yōu)先考慮選擇代替鍵盤輸入，一方面簡化操作，另一方面也減輕用戶認(rèn)知和記憶負(fù)擔(dān)；

2、量少對(duì)比優(yōu)選單/復(fù)選框

單/復(fù)選框較適用于選項(xiàng)較少（5個(gè)以內(nèi)），同時(shí)選項(xiàng)之間較為類似需要強(qiáng)調(diào)對(duì)比時(shí)，可以優(yōu)先選擇單/復(fù)選框，此外當(dāng)選項(xiàng)能見度和要求快速響應(yīng)的時(shí)，也可以優(yōu)先考慮單/復(fù)選框，能夠直白地提供待選選項(xiàng)，直接選中目標(biāo)選項(xiàng)，提升輸入效率；

3、量大優(yōu)先下拉選擇

當(dāng)選項(xiàng)較多的時(shí)候，超過10個(gè)，甚至更多的時(shí)候，無法直接下拉展示的時(shí)候建議提供模糊匹配和排序規(guī)則，方便用戶提前預(yù)知選項(xiàng)位置或通過關(guān)鍵字模糊檢索目標(biāo)選項(xiàng)；

五、提示

提示信息是指在用戶輸入信息的過程中提示用戶輸入狀態(tài)的輔助信息，提示信息的設(shè)計(jì)原則：先預(yù)防、后糾錯(cuò)

根據(jù)輸入流程將用戶輸入過程分為輸入前、輸入中、輸入后三個(gè)階段，依據(jù)用戶信息輸入階段，可以將提示信息分為三類：輸入前的引導(dǎo)類提示信息、輸入中/后的反饋類提示信息，前者則包括幫助性提示、輸入性提示，后者則包括錯(cuò)誤性提示、反饋性提示。

1、輸入前-引導(dǎo)信息

一般是在用戶輸入數(shù)據(jù)之前就給予用戶的信息，目的是幫助和引導(dǎo)用戶完成數(shù)據(jù)輸入，防止用戶在輸入時(shí)出錯(cuò)。

1.1 幫助性提示

在用戶填寫表單前對(duì)表單填寫內(nèi)容進(jìn)行解釋說明的提示信息，并將其置于表單或者某一個(gè)輸入域的前面，一般分為全局提示與單項(xiàng)提示。

需要注意的是，表單中應(yīng)盡量減少幫助文字內(nèi)容，不要依賴幫助文字來彌補(bǔ)表單難以理解的缺點(diǎn)，也避免稀釋表單重要信息。幫助文字最適合解釋用戶不熟悉或者需要特定的操作和內(nèi)容。放置的位置通常在毗鄰輸入框的位置。

① 全局提示

全局提示一般位于整個(gè)表單的最開始，是對(duì)整個(gè)表單的解釋說明，包括信息的用途、安全性、保密性等，以此消除用戶不信任。

② 單項(xiàng)提示

單項(xiàng)提示對(duì)應(yīng)單個(gè)輸入域，只對(duì)此項(xiàng)輸入域進(jìn)行解釋說明，根據(jù)格式塔原理，定位精準(zhǔn)便于用戶理解。

單項(xiàng)提示也可以選用不同的布局，分別有提示圖標(biāo)在鼠標(biāo)haver時(shí)氣泡提示、輸入框下方文字提示、輸入框后方文字提示、單機(jī)輸入框氣泡提示4種提示布局。

1.2 輸入性提示

輸入性提示信息即占位符，直接展示在輸入項(xiàng)中，是對(duì)某一個(gè)輸入域的內(nèi)容進(jìn)行提示，當(dāng)用戶輸入時(shí)文本框在獲取焦點(diǎn)后提示文本隱藏，如果是大篇幅的解釋性內(nèi)容應(yīng)放在幫助性文字中。

有示例型占位符和通用型占位符兩種。屬于是一種輕量化的提示信息，與其他提示信息相比，視覺負(fù)擔(dān)較小，占用空間更小，與輸入內(nèi)容的關(guān)聯(lián)性更強(qiáng)。

占位符設(shè)計(jì)時(shí)，需要注意的：

注意1：有效提示

提示文字最好能簡潔明了給出有效的提示信息。讓用戶能在上下文中獲取信息，幫助他完成輸入。

用戶填寫表單時(shí)最容易出現(xiàn)的問題就是不知道填寫什么格式，例如民族填寫“漢族”還是“漢”；生日填寫“1997-06-11”還是“199年6月11日”這里可以提示具體的填寫示例幫助用戶理解。

注意：必不可少

長期的占位符已經(jīng)給用戶培養(yǎng)了使用習(xí)慣，沒有占位符，用戶在輸入的時(shí)候會(huì)抱著試一試的心態(tài)去點(diǎn)擊，會(huì)疑惑是不是應(yīng)該在這里輸入，不夠直接清晰，對(duì)用戶來說是很不友好的。

2、輸入后-反饋信息

反饋提示是在用戶輸入時(shí)或輸入后對(duì)輸入內(nèi)容進(jìn)行的反饋，提示當(dāng)前輸入域所填寫的內(nèi)容是否符合填寫規(guī)則。

系統(tǒng)狀態(tài)的可見性 包括“用戶知道自己在做什么”、“系統(tǒng)在做什么”、“系統(tǒng)進(jìn)行到了哪一步”、“用戶當(dāng)前所處環(huán)節(jié)”等。應(yīng)當(dāng)始終為用戶提供適當(dāng)且及時(shí)的反饋，避免用戶執(zhí)行錯(cuò)誤操作。

反饋機(jī)制的設(shè)計(jì)原則：預(yù)先提示，減少出錯(cuò)；

①輕量。遵循【告知但不打擾】的基本原則；

②清晰的文案。反饋內(nèi)容需要明確表達(dá)目的及操作后果，錯(cuò)誤提示需要說清錯(cuò)誤原因及改正方式；

③保持系統(tǒng)中所有相同事件反饋方式一致，利于培養(yǎng)用戶使用習(xí)慣和心理預(yù)期。

④就近原則。反饋出現(xiàn)在操作點(diǎn)最近的地方時(shí)，最容易被注意到且容易被操作的。

反饋類提示信息包括錯(cuò)誤性提示和反饋性提示，前者專指錯(cuò)誤類的信息提示，后者既可以包括錯(cuò)誤類的反饋提示，也可以包括警告或者正確類的反饋提示。

2.1、錯(cuò)誤性提示

在填寫表單時(shí)，用戶免不了出錯(cuò)。錯(cuò)誤消息讓用戶知道無法繼續(xù)進(jìn)行，并且告知如何改正。

• 視覺表現(xiàn)：采用醒目的色彩和視覺要素來對(duì)比突出。目的只有一個(gè)即：引起關(guān)注。
• 位置：指導(dǎo)文字鄰近產(chǎn)生錯(cuò)誤的輸入框，可以更快更便捷的提供改進(jìn)幫助。
• 時(shí)機(jī)：確保在適當(dāng)時(shí)機(jī)出現(xiàn)，如果過度使用，會(huì)讓人沮喪。例如：在用戶輸入進(jìn)程中停止提示，確保輸入完成才出現(xiàn)。
• 準(zhǔn)確：信息精準(zhǔn)，不要讓用戶產(chǎn)生歧義；例如“用戶名填寫錯(cuò)誤”要提示用戶名具體錯(cuò)誤的原因“用戶名不能添加符號(hào)”“用戶名重復(fù)”“用戶名不能超過8個(gè)字符”等具體原因，讓用戶明確修改意圖。

2.2、反饋類提示信息

反饋提示一般有正確、錯(cuò)誤、警告三種狀態(tài)。其中，正確狀態(tài)通常不給予任何提示，也可采用圖標(biāo)進(jìn)行反饋，讓用戶感受更加直觀；反之當(dāng)用戶錄入的內(nèi)容與規(guī)則不符時(shí)，給予錯(cuò)誤提示信息。警告狀態(tài)往往與文本框相結(jié)合，當(dāng)字?jǐn)?shù)超過規(guī)則的限制時(shí)，給出相對(duì)應(yīng)的反饋。

2.3、校驗(yàn)形式

在產(chǎn)品設(shè)計(jì)中我們還需要了解反饋信息的校驗(yàn)方式，校驗(yàn)方式主要分為：前端校驗(yàn)、后端校驗(yàn)。

• 前端校驗(yàn)：一般校驗(yàn)顯示錯(cuò)誤和格式錯(cuò)誤：必填項(xiàng)、（郵箱、電話號(hào)、地址）格式、密碼強(qiáng)度等?？焖俜答仯苯犹嵝延脩翦e(cuò)誤內(nèi)容，讓用戶及時(shí)知曉并更改。與數(shù)據(jù)庫無關(guān)。
• 后端校驗(yàn)：唯一性驗(yàn)證、驗(yàn)證碼、敏感詞等，觸發(fā)校驗(yàn)請(qǐng)求后系統(tǒng)會(huì)去數(shù)據(jù)庫查詢校驗(yàn)信息，再給予用戶相應(yīng)的反饋。

2.4、觸發(fā)條件

觸發(fā)條件是說檢驗(yàn)的提示信息在什么節(jié)點(diǎn)（填寫時(shí)、失焦時(shí)、點(diǎn)擊提交時(shí)）進(jìn)行提示，這里分為單項(xiàng)觸發(fā)、提交觸發(fā)。

單項(xiàng)觸發(fā)-即時(shí)報(bào)錯(cuò)

觸發(fā)提示的條件是每填寫完一項(xiàng)時(shí)，校驗(yàn)用于輸入項(xiàng)較多，且某個(gè)輸入項(xiàng)有先決條件，會(huì)對(duì)接下來的輸入產(chǎn)生影響；

• 優(yōu)點(diǎn)：避免完整輸入后才反饋信息，為用戶增加犯錯(cuò)成本。
• 缺點(diǎn)：如果輸入有誤，用戶需要多一步操作，點(diǎn)擊會(huì)有錯(cuò)誤的輸入框進(jìn)行修改，稍微影響用戶體驗(yàn)。
• 適用場(chǎng)景：輸入驗(yàn)證碼、注冊(cè)等功能。

提交觸發(fā)-輸入完成后報(bào)錯(cuò)

觸發(fā)條件是填寫完表單點(diǎn)擊“提交”時(shí)統(tǒng)一校驗(yàn)，用于表單體量較小出錯(cuò)率較低的表單頁面，給出所有不合規(guī)則的表單信息，根據(jù)具體的提示內(nèi)容可以是單項(xiàng)提示也可以全局提示；

• 優(yōu)點(diǎn)：減少后端服務(wù)器壓力，提高頁面性能；
• 缺點(diǎn)：用戶不能及時(shí)看到反饋，及時(shí)進(jìn)行修改，如果表單過長的話，一定程度上會(huì)影響用戶體驗(yàn)；
• 適用場(chǎng)景：登錄賬號(hào)時(shí)檢測(cè)輸入內(nèi)容是否合理。

關(guān)于反饋信息的如何選擇位置，我們下一篇詳細(xì)聊聊。

六、動(dòng)作按鈕

操作按鈕常規(guī)意義上指的是“完結(jié)”表達(dá)操作的按鈕，常見在一些較簡單的表單場(chǎng)景，是對(duì)表單內(nèi)容的反饋，包括提交或不提交。

關(guān)于按鈕的分類及各種狀態(tài)：

并且對(duì)于每一種按鈕，都可以分為常規(guī)和禁用兩種狀態(tài)。禁用狀態(tài)的出現(xiàn)一般是表單所呈現(xiàn)的內(nèi)容未達(dá)到能夠觸發(fā)按鈕點(diǎn)擊。同時(shí)注意一個(gè)頁面只保留一個(gè)主按鈕。

1、按鈕位置

在復(fù)雜些的表單中，分別會(huì)在header區(qū)、body區(qū)、footer區(qū)放置影響全局屬性、僅影響跟隨對(duì)象、有“完結(jié)流程”屬性的按鈕。

1.1 表單頂部/表單底部

用于放置全局按鈕，兩個(gè)位置的功能按鈕是一樣的，只是出現(xiàn)的條件不同。默認(rèn)顯示表單頂部按鈕，目的在于用戶無需上下滑動(dòng)到固定位置才能對(duì)表單進(jìn)行操作，省時(shí)增效。當(dāng)頂部按鈕因?yàn)轫撁嫔匣徽谏w了，底部按鈕才懸浮在窗口底部。

1.2 跟隨表單項(xiàng)

需要滾動(dòng)條滾動(dòng)到底部顯示操作按鈕，一般用于大部分表單都可以一頁顯示的情況，為了避免編輯后忘記點(diǎn)確定就跳轉(zhuǎn)頁面，會(huì)給表單有修改是否保存的提示彈窗。

1.3 分組底部

對(duì)每個(gè)分組表單進(jìn)行的操作按鈕，常用于只需要查看不需要經(jīng)常編輯的表單。

2、主按鈕禁用策略

對(duì)于主按鈕是否采用默認(rèn)禁用取決于表單的表單項(xiàng)數(shù)量，有兩種策略：禁用策略和校驗(yàn)策略，

當(dāng)表單項(xiàng)較少的時(shí)候，一般在3個(gè)以下時(shí)，主按鈕采用禁用策略，當(dāng)有數(shù)據(jù)錄入的時(shí)候則啟用主按鈕，一來便于用戶理解，二來也是對(duì)用戶操作的一種反饋；

當(dāng)表單項(xiàng)比較多的時(shí)候，一般超過5項(xiàng)，或者有必填項(xiàng)（必填和非必填同時(shí)存在）時(shí)，主按鈕建議采用校驗(yàn)策略。

因?yàn)楸韱雾?xiàng)較多的情況下，往往是必填和選填同時(shí)存在，若采用禁用原則，則必須是所有必填項(xiàng)全部非空才能啟用主按鈕，這時(shí)主按鈕的啟用條件不易被用戶察覺，容易造成用戶困惑，不知道該如何填寫才能啟用主按鈕，采用校驗(yàn)原則可直接告知不具備操作的原因，因此采用提交時(shí)校驗(yàn)反饋的做法更合適這種多表單項(xiàng)的場(chǎng)景。

3、按鈕的主次按鈕如何設(shè)計(jì)

表單的動(dòng)作分為主動(dòng)作和次動(dòng)作。例如提交、保存或者繼續(xù)等完成表單填寫的動(dòng)作屬于主動(dòng)作，取消、重置等允許撤銷輸入的屬于次動(dòng)作。

如果無法移除表單中的次動(dòng)作，我們?cè)谠O(shè)計(jì)時(shí)進(jìn)行視覺區(qū)分，盡量弱化次級(jí)動(dòng)作按鈕的樣式，需要注意的是，在《web表單設(shè)計(jì)》一書中，測(cè)試了幾種主動(dòng)作和次動(dòng)作的組合。

從閱讀順序、按鈕層級(jí)、對(duì)齊方式綜合測(cè)試，結(jié)果表明在幾種設(shè)計(jì)方案中，方案A的眼球固定時(shí)間較短，完成任務(wù)效率更高。方案B，人們的眼球定位時(shí)間最長，這是因?yàn)槿藗兤谕粹o按照垂直視線左側(cè)排列，而不是四處尋找按鈕。方案C中，很多人誤點(diǎn)擊了取消按鈕。

可以發(fā)現(xiàn)，說明完成的路徑很重要。主動(dòng)作和輸入框?qū)R會(huì)減少填寫表單的時(shí)間。所以若無特殊考慮，方案A是最佳選擇。

8、微文案

另外，表單中的微文案也很重要，無論是標(biāo)簽、還是占位符，還是提示性文字，或者反饋性文字……表意都必須清晰易懂，同時(shí)需要消除用戶的疑慮，在整個(gè)流程中，做出更快更準(zhǔn)確的抉擇。

小結(jié)

文章很長，感謝您的耐心閱讀。表單系列第一篇，我們主要聊聊關(guān)于表單的基礎(chǔ)內(nèi)容，希望對(duì)你有所幫助。

因?yàn)槠^于長，剩下的三個(gè)部分我們留在下一篇。

下期預(yù)告：表單基礎(chǔ)知識(shí)之：表單常見的布局樣式和交互形式

參考文獻(xiàn)：

1、《web表單設(shè)計(jì)》

2、來源鏈接：https://ant.design/docs/spec/research-form-cn（來源：Ant Design）

3、表單設(shè)計(jì)需要注意 http://t.cn/EhMmZPf

4、表單設(shè)計(jì)http://www.theventurebank.com/pd/4147841.html

5、《Ant Design表單設(shè)計(jì)》