前言

表單是我們生活中常見的信息添加、錄入的方式之一，如何進行表單的設(shè)計也是 B 端設(shè)計師的必修課。身邊別的部門的同事常常會說：表單不就是幾個輸入框，幾個組件組成的東西么，挺簡單的，有什么好設(shè)計的。但通常情況下，越是簡單的東西，要思考的點卻越多，想要把一個表單做好也是一件不容易的事情。

生活中，大多數(shù)人都不喜歡表單，比如前段時間有一些許久沒有聯(lián)系過的朋友讓我?guī)兔μ顚懸幌抡{(diào)查問卷，作為一個熱心市民的我，自然是選擇點開鏈接幫忙填寫；一鼓作氣填了一段時間后，看著剩下的問題，我不耐煩的放棄了填寫這個調(diào)查問卷。所以作為設(shè)計師，我們應(yīng)該“由內(nèi)而外”而不是“由外而內(nèi)”的去設(shè)計表單，如何讓表單變得更容易讓人接受也是設(shè)計師應(yīng)該考慮的問題。

更多兆日UCD的干貨：

一、什么是表單

表單是一種用于信息添加、錄入的頁面類型。是連接用戶與數(shù)據(jù)庫的橋梁，通過引導(dǎo)用戶進行信息的填寫，從而提交數(shù)據(jù)給后臺。在用戶填寫提交時，還需要對用戶輸入內(nèi)容進行校驗與反饋，保證用戶信息填寫的完整度。

填寫表單是一件麻煩事，當(dāng)我們想做的是投票、網(wǎng)上購物或者添加好友之前，總是會有表單防礙著我們。正因為多數(shù)人不喜歡填寫表單，所以在做表單設(shè)計時，我們的首要目標(biāo)是讓人們迅速輕松的完成填寫，同時獲得系統(tǒng)和用戶想要的東西。

二、如何進行表單設(shè)計

1. 表單拆分

基礎(chǔ)表單中會有以下六個元素：

1. 標(biāo)簽：標(biāo)簽文本主要是解釋輸入項的含義，一般不宜太長，需要簡明扼要，快速讓用戶理解；還有一部分是告知用戶哪些是必填項。

2. 占位提示：直接展示在輸入項中，采用弱提示文本對所需信息描述，當(dāng)用戶輸入信息時即消失。

3. 校驗：對輸入項進行驗證，并給出反饋提示，如：用戶未填寫，格式錯誤、內(nèi)容錯誤等

4. 基礎(chǔ)組件：可交互輸入的區(qū)域，是構(gòu)成表單的核心內(nèi)容，主要有：輸入框、單（復(fù)）選框、上傳、時間選擇器、開關(guān)……

5. 提示：描述該輸入項需要的輸入類型，如：上傳的文件類型

6. 按鈕：用戶完成輸入后，點擊按鈕進行提交、進入下一步等，按鈕一般是跟隨的最后一個輸入項后面，若輸入項超出一屏顯示，建議將按鈕懸浮固定在底部。

當(dāng)我們開始制作某一表單的時候，我們需要強迫自己思考一下每個元素的 UI 問題：

1. 這個元素是什么類型的？
2. 如何處理其他這類東西？
3. 元素之間有什么關(guān)系？
4. 通過合并相同類別元素或者擴展該元素和其他元素之間的關(guān)系，能否簡化設(shè)計？

2. 表單錄入模式

表單根據(jù)錄入模式可以分為：單步表單、分步表單和高級表單

① 單步表單：

單步錄入指的是在一個頁面即可完成內(nèi)容輸入。使用于內(nèi)容較少，結(jié)構(gòu)簡單的場景，我們常見的登錄頁就是典型的單步表單。

② 分步表單：

內(nèi)容較多、錄入內(nèi)容的方式差異較大的情況且業(yè)務(wù)本身具有流程化特性，一般通過添加分步導(dǎo)航展示內(nèi)容。常見的例如銀行轉(zhuǎn)賬，修改密碼等等。

③ 高級表單（分組表單）：

高級表單（分組表單）：主要用于需要一次性錄入大批量數(shù)據(jù)的場景。高級表單與分步表單有點類似，都是為了減輕用戶填寫壓力，將填寫內(nèi)容進行分塊。不同的點在于，分步表單的流程化明顯，后一步填寫的內(nèi)容都是基于前一步來填寫、是前一步反饋。

3. 表單的頁面框架

表單的頁面框架指的是承載著整個表單頁的頁面框架，即：整頁式（新頁面）、彈窗式、側(cè)邊欄式。因為其頁面面積大小不一樣，所以使用情境有所不同。

整頁式（新頁面）：最常用方式，適用于絕大部分的表單，可以支持構(gòu)建復(fù)雜的表單。

彈窗式：通過小面積的彈窗進行輕量化的編輯，方便快速進行增、刪、改、查；輸入項較少，一般不會有滾動條。

側(cè)邊欄式：與彈窗式相似，通過小面積的側(cè)邊欄進行編輯；可承載比彈窗更復(fù)雜一些的表單內(nèi)容，可以有滾動條。

我們在選擇頁面框架時通常需要綜合以下三個因素去考慮：

1. 內(nèi)容數(shù)量 ：內(nèi)容如果較多不適合使用彈窗式
2. 與原頁面關(guān)聯(lián)程度 ：需與原頁面關(guān)聯(lián)強建議使用彈窗式、側(cè)邊欄式
3. 表單的復(fù)雜程度： 一般高級表單、分組表單、分步驟表單、有表格聚合的表單、聯(lián)動表單等都建議采用整頁式的框架來展現(xiàn)。

4. 表單的排列方式

① 布局方式

在制作表單的時候分成兩種排列方式：單列布局和多列布局。我們可以通過以下幾個因素去考慮使用什么布局：

1. 在輸入項不多的情況下，建議采用單列布局，因為單列布局，用戶填寫的路徑就是從上至下的一條直線，十分符合用戶的視覺動線，能夠提高用戶瀏覽與填寫的效率。

2. 多列布局的表單會導(dǎo)致用戶的視覺路徑變長，用戶需以 “Z” 字形的視覺動線掃描表單，會提高瀏覽與填寫的效率，并且多列表單容易造成用戶填寫時的混亂，易填錯，體驗差。

但是有時部分業(yè)務(wù)訴求和某些特性的場景要求，會需要在有限的空間上放入更多的控件來收集用戶的信息，這時就不得不使用多列布局的樣式，因為多列能夠省縱向空間。

單列布局

優(yōu)勢：視覺路徑清晰，填寫效率高，體驗好；

劣勢：垂直空間占用率高。

建議使用場景：表單內(nèi)容較少的情況下使用單列布局

多列布局

優(yōu)勢：省空間，能夠放置更多的控件；

劣勢：視覺路徑模糊，填寫成本高，填寫易出錯。

建議使用場景：關(guān)聯(lián)性強的填寫項橫向排放，且將該列中最重要填寫項的放于最左側(cè)。

② 標(biāo)簽對齊方式

標(biāo)簽的對齊方式有：左對齊、右對齊和頂對齊，除了需要考慮單列式布局還是多列式布局，還有我們也需要考慮標(biāo)簽的對齊方式。

馬泰奧·彭佐在 2006 年 7 月對表單的每種對齊方式做過眼動測試研究，根據(jù)研究結(jié)論做出以下分析：

頂對齊標(biāo)簽：

研究中，從標(biāo)簽移動到輸入框只需 50 毫秒。比左對齊標(biāo)簽快了 10 倍，后者需要 500 毫秒；比右對齊標(biāo)簽方式快 2 倍，后者高達 240 秒。能迅速填完頂對齊標(biāo)簽表單的原因之一，是因為眼球只需要在標(biāo)簽和輸入框之間進行上下單向運動。

優(yōu)勢：眼動測試中移動速度最快，最有利于提高用戶填寫表單的效率。標(biāo)簽字?jǐn)?shù)相比于左右對齊標(biāo)簽可容納更多字?jǐn)?shù)。

劣勢：縱向空間占用率高，對于小屏用戶不太友好（設(shè)計前需要考慮用戶使用場景以及使用設(shè)備）

建議使用場景：希望用戶快速完成表單；對標(biāo)簽的擴展性高，有國際化需求（中文轉(zhuǎn)英文，英文會比較長）；更適用于彈窗式、側(cè)邊欄式布局。

右對齊標(biāo)簽：

如果要盡量減少表單占用垂直屏幕空間，右對齊能提供快速完成時間。研究中，專家用戶和新手用戶掃視（眼睛運動）右對齊標(biāo)簽表單的標(biāo)簽和輸入框的平均時間分別在 170 毫秒和 240 毫秒，而填寫完成時間比左對齊快 2 倍。

優(yōu)勢：標(biāo)簽和輸入框位置緊密，更方便填寫

劣勢：右對齊的布局會造成標(biāo)簽的左側(cè)不齊，影響快速閱讀表單的效率問題；如果增加填寫項標(biāo)題字?jǐn)?shù)過多，整體的表單頁都需要修改，右對齊靈活性低。
建議使用場景：適用于需要填寫效率但受到屏幕垂直面積限制的頁面。更適用于整頁式布局。

左對齊標(biāo)簽：

在頂、右、左三種方案中，左對齊表單填寫速度最慢。因為左對齊表單解析問題時眼球定位次數(shù)最多，用戶一般情況下都能將左對齊布局中的標(biāo)簽和輸入框聯(lián)系起來，只是花費時間較長。在研究中，典型掃視時間為 500 毫秒，很長說明用戶經(jīng)歷了沉重的認(rèn)知壓力。

優(yōu)勢：易瀏覽標(biāo)簽；占用縱向空間較少

劣勢：標(biāo)簽和輸入框距離較大，表單填寫效率低

建議使用場景：需要讓用戶認(rèn)真思考后填寫的頁面；更適用于整頁式布局

輸入字段上方的粗體標(biāo)簽

在頂對齊的情況下，設(shè)計師可能會想：如果我們將標(biāo)簽進行加重，這增加了它們的視覺重量，并將它們帶到了布局的最前面，這樣說是不是可以讓用戶更好的去完成表單的填寫呢？但事實卻和設(shè)想相反：粗體標(biāo)簽反而增加了用戶填寫的負(fù)擔(dān)。

粗體標(biāo)簽導(dǎo)致從標(biāo)簽移動到輸入字段的掃視時間增加了近 60% ，從沒有粗體標(biāo)簽的 50 毫秒到有粗體標(biāo)簽的 80 毫秒，更突出的標(biāo)簽沒有明顯優(yōu)勢。粗體標(biāo)簽更難讓用戶閱讀和感知——可能是因為粗體文本和輸入字段的相鄰粗邊框之間存在更多的視覺混淆。

小結(jié)

標(biāo)簽位置：單從效率角度看，頂對齊>右對齊>左對齊，但是根據(jù)應(yīng)用場景，效率快并不是我們選擇標(biāo)簽對齊方式的唯一的指標(biāo)。在大多數(shù)情況下，將標(biāo)簽放在輸入字段上方效果更好，頂對齊的情況下標(biāo)簽的擴展性更高，且用戶不會被迫分開查看標(biāo)簽和輸入字段。需要注意在視覺上將下一個輸入字段的標(biāo)簽與前一個輸入字段分開。

粗體標(biāo)簽：閱讀粗體標(biāo)簽對用戶來說有點困難，因此最好使用純文本標(biāo)簽。但是，當(dāng)使用粗體標(biāo)簽時，可能希望將輸入字段設(shè)置為沒有粗邊框。

三、表單校驗形式

1. 什么是表單的校驗

為了讓用戶準(zhǔn)確的填寫表單，在用戶填寫表單中/填寫表單后，常常會增加我們常說的“反饋提示“，針對反饋信息的準(zhǔn)確性，我們會采用兩種校驗形式：前端校驗和后端校驗。

① 前端校驗：

主要負(fù)責(zé)校驗輸入的內(nèi)容格式是否正確；例如常見的手機號格式是否正確、密碼格式是否符合要求。

② 后端校驗：

與數(shù)據(jù)庫相關(guān)，主要負(fù)責(zé)校驗輸入內(nèi)容是否正確；例如常見的手機號是否存在，密碼是否正確。

③ 校驗觸發(fā)條件：

1. 用戶輸入時進行校驗（例如：注冊輸入密碼時，實時顯示密碼強度）
2. 用戶輸入完成失去焦點時進行校驗（例如：注冊重復(fù)輸入密碼時，密碼與前一次輸入的是否一致）
3. 用戶輸入完成點擊操作按鈕時進行校驗（例如：注冊點擊提交時進行校驗，手機號已被注冊所以未通過注冊）

④ 報錯方式：

1. 即時報錯
2. 輸入完成后點擊 提交/下一步/保存 等操作后報錯

2. 校驗形式

根據(jù)不同的校驗觸發(fā)條件和報錯方式，我們可以組合成以下幾種校驗形式：

① 輸入時即時驗證，即時報錯

用戶在輸入的過程中進行實時驗證，輸入框處于聚焦時開始提示，隨著輸入的過程，符合要求后已與用戶通過驗證的反饋。例如在注冊阿里云賬號時，設(shè)置密碼需要滿足三個條件，這里采取了即時驗證。

優(yōu)點：可以實時告知用戶表單的填寫時候符合規(guī)范

缺點：實時驗證會使用戶分散注意力，也有可能會引起用戶的反感

使用場景：注冊時需要設(shè)置密碼，通過密碼不同的組成，時判斷密碼的強度，比如純數(shù)字密碼符合最低安全要求密碼，但增加大些字母和小寫字母后就形成了更安全的密碼

② 失去焦點后即時報錯

用戶在輸入完成后進行驗證，輸入框失去聚焦后（即用戶點擊輸入框以外的位置后）與用戶進行反饋。例如在注冊網(wǎng)易郵箱時，填寫完畢后即時報錯。

優(yōu)點：為用戶修改錯誤節(jié)省時間、避免出現(xiàn)很多錯誤需要改正的情況。

缺點：如果輸入有誤，用戶需要多一步操作，點擊會有錯誤的輸入框進行修改。

使用場景：注冊用戶名時，取消聚焦后會反饋用戶名是否可用，不可用的情況下是被注冊還是格式有問題。

③ 操作后（保存/提交/下一步）后全部報錯

用戶完成表單填寫后，點擊操作按鈕（保存/提交/下一步），系統(tǒng)將表單統(tǒng)一上傳到后端數(shù)據(jù)庫中進行對比后集中與用戶進行反饋。

優(yōu)點：減少對用戶的打擾，減少后端服務(wù)器壓力，提高效率

缺點：用戶只能點擊按鈕后才可以得到反饋，不能及時修改；若表單過長，用戶返回修改的路徑也將增加。

使用場景：登錄賬號是判斷密碼是否正確