前言

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

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

更多兆日UCD的干貨：

一、什么是表單

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

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

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

1. 表單拆分

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

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

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

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

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

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

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

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

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

2. 表單錄入模式

表單根據(jù)錄入模式可以分為：?jiǎn)尾奖韱?、分步表單和高?jí)表單

① 單步表單：

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

② 分步表單：

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

③ 高級(jí)表單（分組表單）：

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

3. 表單的頁(yè)面框架

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

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

彈窗式：通過小面積的彈窗進(jìn)行輕量化的編輯，方便快速進(jìn)行增、刪、改、查；輸入項(xiàng)較少，一般不會(huì)有滾動(dòng)條。

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

我們?cè)谶x擇頁(yè)面框架時(shí)通常需要綜合以下三個(gè)因素去考慮：

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

4. 表單的排列方式

① 布局方式

在制作表單的時(shí)候分成兩種排列方式：?jiǎn)瘟胁季趾投嗔胁季?。我們可以通過以下幾個(gè)因素去考慮使用什么布局：

1. 在輸入項(xiàng)不多的情況下，建議采用單列布局，因?yàn)閱瘟胁季?，用戶填寫的路徑就是從上至下的一條直線，十分符合用戶的視覺動(dòng)線，能夠提高用戶瀏覽與填寫的效率。

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

但是有時(shí)部分業(yè)務(wù)訴求和某些特性的場(chǎng)景要求，會(huì)需要在有限的空間上放入更多的控件來收集用戶的信息，這時(shí)就不得不使用多列布局的樣式，因?yàn)槎嗔心軌蚴】v向空間。

單列布局

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

劣勢(shì)：垂直空間占用率高。

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

多列布局

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

劣勢(shì)：視覺路徑模糊，填寫成本高，填寫易出錯(cuò)。

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

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

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

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

頂對(duì)齊標(biāo)簽：

研究中，從標(biāo)簽移動(dòng)到輸入框只需 50 毫秒。比左對(duì)齊標(biāo)簽快了 10 倍，后者需要 500 毫秒；比右對(duì)齊標(biāo)簽方式快 2 倍，后者高達(dá) 240 秒。能迅速填完頂對(duì)齊標(biāo)簽表單的原因之一，是因?yàn)檠矍蛑恍枰跇?biāo)簽和輸入框之間進(jìn)行上下單向運(yùn)動(dòng)。

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

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

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

右對(duì)齊標(biāo)簽：

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

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

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

左對(duì)齊標(biāo)簽：

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

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

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

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

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

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

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

小結(jié)

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

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

三、表單校驗(yàn)形式

1. 什么是表單的校驗(yàn)

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

① 前端校驗(yàn)：

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

② 后端校驗(yàn)：

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

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

1. 用戶輸入時(shí)進(jìn)行校驗(yàn)（例如：注冊(cè)輸入密碼時(shí)，實(shí)時(shí)顯示密碼強(qiáng)度）
2. 用戶輸入完成失去焦點(diǎn)時(shí)進(jìn)行校驗(yàn)（例如：注冊(cè)重復(fù)輸入密碼時(shí)，密碼與前一次輸入的是否一致）
3. 用戶輸入完成點(diǎn)擊操作按鈕時(shí)進(jìn)行校驗(yàn)（例如：注冊(cè)點(diǎn)擊提交時(shí)進(jìn)行校驗(yàn)，手機(jī)號(hào)已被注冊(cè)所以未通過注冊(cè)）

④ 報(bào)錯(cuò)方式：

1. 即時(shí)報(bào)錯(cuò)
2. 輸入完成后點(diǎn)擊 提交/下一步/保存 等操作后報(bào)錯(cuò)

2. 校驗(yàn)形式

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

① 輸入時(shí)即時(shí)驗(yàn)證，即時(shí)報(bào)錯(cuò)

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

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

缺點(diǎn)：實(shí)時(shí)驗(yàn)證會(huì)使用戶分散注意力，也有可能會(huì)引起用戶的反感

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

② 失去焦點(diǎn)后即時(shí)報(bào)錯(cuò)

用戶在輸入完成后進(jìn)行驗(yàn)證，輸入框失去聚焦后（即用戶點(diǎn)擊輸入框以外的位置后）與用戶進(jìn)行反饋。例如在注冊(cè)網(wǎng)易郵箱時(shí)，填寫完畢后即時(shí)報(bào)錯(cuò)。

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

缺點(diǎn)：如果輸入有誤，用戶需要多一步操作，點(diǎn)擊會(huì)有錯(cuò)誤的輸入框進(jìn)行修改。

使用場(chǎng)景：注冊(cè)用戶名時(shí)，取消聚焦后會(huì)反饋用戶名是否可用，不可用的情況下是被注冊(cè)還是格式有問題。

③ 操作后（保存/提交/下一步）后全部報(bào)錯(cuò)

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

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

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

使用場(chǎng)景：登錄賬號(hào)是判斷密碼是否正確