單設(shè)計(jì)不僅僅是把不同類型的輸入框排排版、標(biāo)清楚必填非必填、哪些表單比較復(fù)雜適當(dāng)?shù)募觽€(gè)說明就完了，也需要有需求的支撐、嵌套使用情境、考慮用戶的心理模型。我們將在本系列文章中了解到從表單的產(chǎn)生到表單在頁(yè)面上如何呈現(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ī)范？超長(zhǎng)表單該怎么設(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)生到表單在頁(yè)面上如何呈現(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)知印象中，表單則是一類包含輸入框、下拉選擇框等常見控件的組合形式的頁(yè)面才屬于表單。

表單的本質(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ù)，提高效率并簡(jiǎn)化填寫流程。

另外表單中組件的選擇需要依據(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)，通過合理的信息輸入組件與頁(yè)面布局和交互方式可以使用戶快速完成表單頁(yè)的信息填寫任務(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)為頁(yè)面標(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)：文字上要求盡量簡(jiǎn)潔明了，避免出現(xiàn)有歧義、冗長(zhǎng)且難以理解的標(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è)頁(yè)面的時(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)容長(zhǎng)度可以分為單行文本框和多行文本域，前者適用于輸入文本字符總數(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、選擇適合的長(zhǎng)度

輸入框的大小應(yīng)該向用戶暗示所需輸入內(nèi)容的長(zhǎng)度，所以長(zhǎng)度和內(nèi)容長(zhǎng)度需要相匹配，一定程度上可以減輕用戶的操作負(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ì)使頁(yè)面出現(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、表格選擇器

單一維度信息無(wú)法讓用戶做出選擇，需要為用戶呈現(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)擊頁(yè)面上的上傳按鈕才能完成上傳動(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)先考慮選擇代替鍵盤輸入，一方面簡(jiǎn)化操作，另一方面也減輕用戶認(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í)候，無(wú)法直接下拉展示的時(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：有效提示

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

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

注意：必不可少

長(zhǎng)期的占位符已經(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ò)誤消息讓用戶知道無(wú)法繼續(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)度等。快速反饋，直接提醒用戶錯(cuò)誤內(nèi)容，讓用戶及時(shí)知曉并更改。與數(shù)據(jù)庫(kù)無(wú)關(guān)。
• 后端校驗(yàn)：唯一性驗(yàn)證、驗(yàn)證碼、敏感詞等，觸發(fā)校驗(yàn)請(qǐng)求后系統(tǒng)會(huì)去數(shù)據(jù)庫(kù)查詢校驗(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ò)率較低的表單頁(yè)面，給出所有不合規(guī)則的表單信息，根據(jù)具體的提示內(nèi)容可以是單項(xiàng)提示也可以全局提示；

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

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

六、動(dòng)作按鈕

操作按鈕常規(guī)意義上指的是“完結(jié)”表達(dá)操作的按鈕，常見在一些較簡(jiǎn)單的表單場(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è)頁(yè)面只保留一個(gè)主按鈕。

1、按鈕位置

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

1.1 表單頂部/表單底部

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

1.2 跟隨表單項(xiàng)

需要滾動(dòng)條滾動(dòng)到底部顯示操作按鈕，一般用于大部分表單都可以一頁(yè)顯示的情況，為了避免編輯后忘記點(diǎn)確定就跳轉(zhuǎn)頁(yè)面，會(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)作。

如果無(wú)法移除表單中的次動(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í)間最長(zhǎng)，這是因?yàn)槿藗兤谕粹o按照垂直視線左側(cè)排列，而不是四處尋找按鈕。方案C中，很多人誤點(diǎn)擊了取消按鈕。

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

8、微文案

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

小結(jié)

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

因?yàn)槠^于長(zhǎng)，剩下的三個(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.woshipm.com/pd/4147841.html

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

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

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

該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。

單是什么

表單是一個(gè)包含表單元素的區(qū)域，使用表單標(biāo)簽（<form>）定義。

表單元素是允許用戶在表單中輸入信息的元素，主要負(fù)責(zé)數(shù)據(jù)采集功能。

表單頁(yè)通常用來執(zhí)行登錄、注冊(cè)、預(yù)定、下單、評(píng)論等任務(wù)，是產(chǎn)品中數(shù)據(jù)錄入必不可少的頁(yè)面模式。因此，舒適的表單設(shè)計(jì)，可以引導(dǎo)用戶高效地完成表單背后的工作流程。——ANT Design

五大要素：標(biāo)簽，輸入框，輸入反饋，動(dòng)作，幫助信息

1. 標(biāo)簽：告訴用戶表單問題是什么，要填寫什么類型的信息；占位符文本（Placeholder text）—提示文本，位于表單文本框內(nèi)，一般用于提示用戶填寫，開始輸入時(shí)自動(dòng)消失；
2. 輸入框：供給用戶填寫答案信息，收集用戶輸入的信息，每個(gè)字段包含著某一類型的信息（如姓名、性別等）；
3. 反饋：針對(duì)用戶輸入給出反饋；
4. 動(dòng)作：點(diǎn)擊一個(gè)按鈕或鏈接，執(zhí)行提交表單操作；
5. 幫助：為如何填寫表單提供幫助。

• 關(guān)鍵：產(chǎn)品核心價(jià)值，最快得到所需
• 結(jié)果：表單簡(jiǎn)短，精簡(jiǎn)問題

為什么要簡(jiǎn)化表單

• 減少認(rèn)知負(fù)荷；
• 對(duì)使用屏幕閱讀器的用戶更友好；處理錯(cuò)誤、更改細(xì)節(jié)更容易，降低用戶放棄的可能性；
• 頁(yè)面加載更快；
• 易于追蹤行為和過程，為分析提供數(shù)據(jù)；
• 滾動(dòng)操作減少，甚至被消滅；
• 用戶對(duì)數(shù)據(jù)更有掌控力。

如何設(shè)計(jì)表單

在填寫表單之前：

給用戶明確期望的進(jìn)程提示，表單起始頁(yè)提示用戶要做什么準(zhǔn)備，比如身份證、駕照、護(hù)照、銀行卡等，不要等到后期發(fā)現(xiàn)缺失必要信息而無(wú)法繼續(xù)。

宏觀排序：

1. 按邏輯排序，條理清晰組織字段區(qū)域，如按時(shí)間，首字母。
2. 由易至難，讓用戶適應(yīng)提問的氛圍，逐步融入再仔細(xì)思考較難問題。
3. 與當(dāng)前情境最相關(guān)的問題優(yōu)先，可選問題放在最后，減少侵略性，這些問題可能會(huì)得到更多照顧。

一．標(biāo)簽

Tips：

1. 避免將標(biāo)簽作為占位符，占位符不可替代字段標(biāo)簽，建議使用浮動(dòng)（或自適應(yīng)）標(biāo)簽floating labels，占位符文本（提示文本）一般來說它弊大于利。標(biāo)簽作為占位符文本，輸入時(shí)提示文本自動(dòng)消失，容易造成用戶短期記憶的壓力以及錯(cuò)誤；

NN Group的研究表明空字段對(duì)比有文字的字段更吸引用戶注意，用戶更可能跳過那些有提示文本的字段，因?yàn)閽呙枋降臑g覽很容易誤會(huì)框內(nèi)已經(jīng)被輸入了文字。

占位符文本可以使用比普通的文本更淺的顏色，但容易導(dǎo)致對(duì)比度不符合W3C Web內(nèi)容的可訪問性指南（正常文本比4.5:1）。此外，占位符文本不支持輔助殘疾人的設(shè)計(jì)（如屏幕閱讀器），這會(huì)讓這部分用戶填寫表單變得很困難。

（浮動(dòng)標(biāo)簽樣式）

2.標(biāo)簽的命名要易于用戶閱讀和理解，避免模糊的描述給用戶造成困擾；正確區(qū)分必填字段和選填字段；

3.選擇合適的對(duì)齊方式；

右對(duì)齊方式標(biāo)簽的表單瀏覽時(shí)間僅次于頂部對(duì)齊標(biāo)簽的表單，網(wǎng)頁(yè)高度有限的話推薦這種對(duì)齊方式。采用左對(duì)齊標(biāo)簽方式的表單是三者之中瀏覽時(shí)間最長(zhǎng)的，卻能放慢用戶的速度閱讀，讓其仔細(xì)考慮。

（對(duì)齊方式概覽）

二．輸入框

Tips：

1. 關(guān)聯(lián)標(biāo)簽和輸入框，給出具體的輸入要求或特殊格式規(guī)范；內(nèi)容長(zhǎng)度和輸入框長(zhǎng)度保持對(duì)應(yīng)，利用可供性暗示填寫方式，為用戶提供有意義的暗示；更大的文字輸入框、適度的留白空間會(huì)讓人更有填寫的欲望。避免一些不必要的輸入，減少用戶對(duì)不必要問題的反感，提高用戶滿意度，降低操作的錯(cuò)誤率。

2. 自由填寫支持靈活多樣的格式，提高容錯(cuò)率。

• 輸入掩碼（Input Masks）掩碼字段能在用戶填寫時(shí)自動(dòng)編排輸入的文本格式，將關(guān)注的重點(diǎn)放在填寫信息和查錯(cuò)上，適用于手機(jī)號(hào)、卡號(hào)等；
• 郵件地址字段中提供常見的域名，輸入@的時(shí)，出現(xiàn)常見的域名。

輸入字段（Input Fields）觸發(fā)對(duì)應(yīng)鍵盤類型，如手機(jī)號(hào)、日期、郵編、卡號(hào)等彈出數(shù)字鍵盤

（自動(dòng)編排數(shù)字組合）

3. 選擇填充的表單格式（除了常規(guī)的文字框Text Field輸入）可提供搜尋功能的下拉式選單，輸入內(nèi)容即時(shí)進(jìn)行篩選、智能聯(lián)想，輸入與點(diǎn)選結(jié)合，快速方便。

• 常規(guī)選擇填充方式：下拉框（dropdown list）、單選框（radio button）、復(fù)選框（checkbox）；
• 衍生填充方式：滑塊（Range/slider）、微調(diào)步進(jìn)器（Stepper）、開關(guān)鈕（Toggle switch）、Tab選框、搜索框等。

tips：

TAB選項(xiàng)一次點(diǎn)選，效率高，選項(xiàng)低于6個(gè)可全部呈現(xiàn)；選擇值只有2-3個(gè)時(shí)避免使用下拉框，建議使用單選樣式。下拉框操作需點(diǎn)擊兩次，但包含多項(xiàng)選擇時(shí)更節(jié)省空間。

（時(shí)間選擇器）

4. 填寫效率：自動(dòng)填充 > 選擇填充 > 自由填充

預(yù)填充（Pre-Fills）設(shè)計(jì)時(shí)可考慮：默認(rèn)值、可選值、常用值、歷史值、上次填充值

tips：

• 自動(dòng)填寫，利用瀏覽器保存并列舉用戶以前填寫過的值，以實(shí)現(xiàn)自動(dòng)個(gè)性化默認(rèn)填寫，敏感數(shù)據(jù)除外；
• 智能補(bǔ)充，根據(jù)地址得到郵編，根據(jù)身份證號(hào)碼推測(cè)出生日；
• 基于定位，自動(dòng)獲取地理位置信息，這種預(yù)填充方式要允許用戶進(jìn)行微調(diào)和修改；
• 從更多的渠道搜集數(shù)據(jù)，第三方的帳號(hào)用戶授權(quán)；
• 自動(dòng)更正輸入的拼寫錯(cuò)誤，特殊字段除外；
• 自動(dòng)首字母大寫，適用于填寫姓名；

智能默認(rèn)，設(shè)置滿足多數(shù)人需要的默認(rèn)選擇，能為用戶節(jié)省時(shí)間，提供參考意見保證默認(rèn)選項(xiàng)符合大多數(shù)用戶利益，比如默認(rèn)用戶同意條款。

（默認(rèn)勾選）

三．動(dòng)作

• 主動(dòng)作：完成表單上最重要行為（完成表單）的動(dòng)作。
• 次動(dòng)作：與完成表單這一目標(biāo)相悖的動(dòng)作，比如撤銷、返回、重置、刪除等，當(dāng)用戶無(wú)意誤操作時(shí)容易造成不可挽回的負(fù)面影響。

Tips：

1. 表述清晰的行為動(dòng)作按鈕；主要操作（主動(dòng)作）和次要操作（次動(dòng)作）可使用差異化的設(shè)計(jì)來，當(dāng)表單中不可避免出現(xiàn)次動(dòng)作時(shí)，應(yīng)該盡量弱化次動(dòng)作的視覺表現(xiàn)，將潛在出錯(cuò)率降到最低，引導(dǎo)用戶完成任務(wù)流；
2. 流程閉環(huán)，避免用戶在中途跳出； 提供Tab快捷鍵跳轉(zhuǎn)下一行；避免重置按鈕和清空表單按鈕，如果表單中含用戶財(cái)務(wù)信息之類的敏感字段，可以提供一個(gè)“取消”按鈕，讓用戶自行決定是否放棄表單填寫。

（主、次動(dòng)作區(qū)隔）

四．幫助

作用：有效說服用戶填寫表單，剔除負(fù)面干擾，消除用戶疑問，在隱私保密或安全方面獲取信任

Tips：

1. 不要隱藏基本的幫助文本，保證幫助文字簡(jiǎn)單簡(jiǎn)潔；
2. 合理地拆分步驟減輕填寫的心理壓力，相關(guān)信息分組；
3. 自動(dòng)即時(shí)幫助，在幫助信息最合適的時(shí)間和位置顯示幫助信息；用戶控制打開/關(guān)閉彈層，幫助文字區(qū)域體現(xiàn)相關(guān)性的同時(shí)不能遮蓋其余的表單元素；
4. 適當(dāng)?shù)谋Ａ艨臻g可視化圖形作為引導(dǎo)，配合有趣的動(dòng)畫。

（簡(jiǎn)潔的幫助提示文本）

五．反饋

Tips：

1.給予恰當(dāng)?shù)妮斎胂拗疲拗朴脩舻男袨椋ㄈ缭陬A(yù)定機(jī)票時(shí)返回時(shí)間無(wú)法選擇出發(fā)時(shí)間之前的日期，出發(fā)城市不能跟到達(dá)城市一樣等），將表單填寫規(guī)則標(biāo)注在明顯區(qū)域，或提供自動(dòng)修正來預(yù)防犯錯(cuò)；

2.用戶填寫完后即時(shí)校驗(yàn)，進(jìn)行有效的拼寫檢查，名稱，地址等特殊字段忽略此功能；指明出錯(cuò)的內(nèi)容，讓用戶能及時(shí)修改、補(bǔ)充缺漏的信息，采用高亮且精準(zhǔn)的錯(cuò)誤呈現(xiàn)形式，如粗邊框、粗體文字提醒、下劃線、斜體，不局限于色彩這一元素；若包含多個(gè)錯(cuò)誤反饋，可另外在頂部增加橫幅統(tǒng)一列出全部提示；

（錯(cuò)誤反饋）

3. 可將動(dòng)作按鈕、跳轉(zhuǎn)過程、出錯(cuò)提示/完成狀態(tài)提醒設(shè)計(jì)成合一的多態(tài)按鈕，簡(jiǎn)潔實(shí)用。

表單內(nèi)容設(shè)計(jì)之后:

視覺角度Tips：

1. 建立清晰的視覺線性流和完成路徑，將所有字段如標(biāo)簽、輸入框、主要?jiǎng)幼靼粹o排成一個(gè)垂直單列，不要在表單中使用垂直分欄（列），多列布局會(huì)打斷用戶自上而下的閱讀習(xí)慣；醒目的提交或完成按鈕，放在用戶的瀏覽線的終點(diǎn)更有利于用戶的完成操作；
2. 將有關(guān)聯(lián)的標(biāo)注和字段在視覺上進(jìn)行分組，保障可瀏覽性，專注當(dāng)前表單任務(wù)；
3. 填寫表單的界面，應(yīng)該減少噪音，強(qiáng)調(diào)文字和背景對(duì)比，避免背景廣告干擾，減少其他任務(wù)路徑，避免用戶退出表單填寫。

（背景干擾）

極端場(chǎng)景角度Tips：

保存表單進(jìn)度。當(dāng)表單過長(zhǎng)，一些特殊原因?qū)е卤韱侮P(guān)閉，如網(wǎng)頁(yè)崩潰、用戶誤操作，提供保存表單進(jìn)度功能，再訪問表單時(shí)保留上一次的填寫進(jìn)度。

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

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

TML是什么？HTML能干什么？HTML怎么用？

C認(rèn)證今天為你帶來（1）HTML常用到的知識(shí)點(diǎn)的使用規(guī)則；（2）獨(dú)立開發(fā)一個(gè)簡(jiǎn)單的響應(yīng)式的頁(yè)面，零基礎(chǔ)介紹HTML，讓你從入門到精通輕松掌握web開發(fā)語(yǔ)言，玩轉(zhuǎn)HTML！

C站（CSDN）軟件工程師能力認(rèn)證上線47天，來自全國(guó)130所高校，自發(fā)組建的學(xué)習(xí)小組當(dāng)前已破百！114個(gè)學(xué)習(xí)小組，基于“明確路徑+任務(wù)領(lǐng)取+刻意練習(xí)+小組學(xué)習(xí)+大咖指導(dǎo)”的學(xué)習(xí)模型，實(shí)現(xiàn)了面向?qū)嵺`、任務(wù)驅(qū)動(dòng)、共同成長(zhǎng)的目標(biāo)。

越來越多的同學(xué)已加入學(xué)習(xí)小組的大家庭，百舸爭(zhēng)流，團(tuán)戰(zhàn)群雄，我們一直在等你！

紅人榜

你的努力+C站的陪伴=pass卡！

現(xiàn)已有四所高校的6位同學(xué)通過C1認(rèn)證考試，在此C站為通過考試的同學(xué)頒發(fā)證書：

南開大學(xué)濱海學(xué)院的郭同學(xué)、吳同學(xué)、朱同學(xué)，河北工程大學(xué)的趙同學(xué)，河南大學(xué)的崔同學(xué)，長(zhǎng)春大學(xué)的董同學(xué)

下面分享這些同學(xué)的高光時(shí)刻，也祝愿大家順利通過接下來的C4考試！

新人榜

今日新建9個(gè)學(xué)習(xí)小組，組名分別是：101、后援團(tuán)、我要進(jìn)華為、汪汪隊(duì)、鎮(zhèn)站之寶、C站1組、Dream Team、天天向上、奇思妙想，歡迎各位新同學(xué)加入C站學(xué)習(xí)小組大家庭！

照例分享新建小組群內(nèi)互動(dòng)精彩瞬間，小組成員共同制定學(xué)習(xí)目標(biāo)和學(xué)習(xí)任務(wù)，互相督促、取長(zhǎng)補(bǔ)短，從而快速掌握任務(wù)核心知識(shí)點(diǎn)。

小組成員遇到困難尋求組內(nèi)大神的幫助，對(duì)于創(chuàng)建的程序提出問題，在群內(nèi)實(shí)時(shí)獲得解答，最終促成任務(wù)的順利完成~

成果榜

今天也有組長(zhǎng)帶頭學(xué)習(xí)、主動(dòng)完成任務(wù)來展示本組的學(xué)習(xí)成果哦~ 這次是IT小團(tuán)隊(duì)的張組長(zhǎng)與允異組的艾組長(zhǎng)發(fā)布博客：

富文本編輯器實(shí)現(xiàn)音頻視頻的插入以及表格隔行換色

HTML和CSS——初步認(rèn)知

問答官

今天，金剛葫蘆娃隊(duì)小組的劉同學(xué)就【HTML】提出相關(guān)的問題，為了解答同學(xué)們的疑惑，小編特地聯(lián)合業(yè)界專家整理了關(guān)于【HTML】的精選文章40篇，快來查收吧！

【HTML零基礎(chǔ)入門教程（詳細(xì)）】

·【Html入門練習(xí) 】

· 【HTML所有知識(shí)點(diǎn)全面復(fù)習(xí)】

·【HTML入門與進(jìn)階以及HTML5】

·【HTML 網(wǎng)頁(yè)制作特殊符號(hào)代碼大全】

·【HTML簡(jiǎn)單網(wǎng)頁(yè)代碼大全，實(shí)用！】

·【HTML全部標(biāo)簽簡(jiǎn)介】

·【html字體顏色】

·【html網(wǎng)頁(yè)字體顏色代碼大全】

·【HTML圖像標(biāo)簽、文本、表格的顏色及其背景色】

·【HTML——tab標(biāo)簽】

·【HTML速寫之Emmet語(yǔ)法規(guī)則】

·【Html獲取Url參數(shù)】

·【HTML網(wǎng)頁(yè)調(diào)用本地Python程序】

·【如何讓在Html中特殊字符不被轉(zhuǎn)義（源碼輸出）】

·【HTML簡(jiǎn)單登錄頁(yè)面代碼】

·【HTML5表單中password輸入框的文字顯示與隱藏實(shí)現(xiàn)】

·【HTML中讓表單input等文本框?yàn)橹蛔x不可編輯的方法】

·【在html頁(yè)面實(shí)時(shí)顯示系統(tǒng)時(shí)間】

·【HTML5新控件 - 日期和時(shí)間選擇輸入】

·【HTML實(shí)現(xiàn)獲取驗(yàn)證碼功能】

·【HTML表格制作】

·【HTML表格跨行、跨列操作(rowspan、colspan)】

·【html實(shí)現(xiàn)動(dòng)態(tài)在線預(yù)覽word、excel、pdf等文件】

·【html頁(yè)面實(shí)現(xiàn)文件上傳】

·【HTML頁(yè)面實(shí)現(xiàn)自動(dòng)刷新的2種方式】

·【HTML中有一個(gè)button,如何讓它點(diǎn)擊后跳轉(zhuǎn)到指定頁(yè)面或動(dòng)作】

·【HTML頁(yè)面-------3秒之后自動(dòng)跳轉(zhuǎn)的3種常用的實(shí)現(xiàn)方式】

·【HTML導(dǎo)航欄的四種制作方法】

·【html怎么在網(wǎng)頁(yè)標(biāo)題欄上添加圖標(biāo)】

·【html頁(yè)面引入公共頭部和尾部】

·【純HTML——寫一個(gè)簡(jiǎn)易的搜索框】

·【HTML中下拉框的簡(jiǎn)單介紹＜Select＞＜o(jì)ption＞】

·【html實(shí)現(xiàn)彈窗】

·【HTML5----響應(yīng)式（自適應(yīng)）網(wǎng)頁(yè)設(shè)計(jì)（自動(dòng)適應(yīng)屏幕大小）】

·【Html設(shè)置網(wǎng)頁(yè)背景圖片】

·【Html筆記——實(shí)現(xiàn)一組圖片循環(huán)且首尾相連的滾動(dòng)效果】

·【html5視頻作為頁(yè)面背景】

·【在html中添加背景音樂】

·【html聊天界面】

————————————————

版權(quán)聲明：本文為CSDN博主「高校俱樂部」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。