前言
表單是我們生活中常見(jiàn)的信息添加、錄入的方式之一，如何進(jìn)行表單的設(shè)計(jì)也是 B 端設(shè)計(jì)師的必修課。身邊別的部門(mén)的同事常常會(huì)說(shuō)：表單不就是幾個(gè)輸入框，幾個(gè)組件組成的東西么，挺簡(jiǎn)單的，有什么好設(shè)計(jì)的。但通常情況下，越是簡(jiǎn)單的東西，要思考的點(diǎn)卻越多，想要把一個(gè)表單做好也是一件不容易的事情。
生活中，大多數(shù)人都不喜歡表單，比如前段時(shí)間有一些許久沒(méi)有聯(lián)系過(guò)的朋友讓我?guī)兔μ顚?xiě)一下調(diào)查問(wèn)卷，作為一個(gè)熱心市民的我，自然是選擇點(diǎn)開(kāi)鏈接幫忙填寫(xiě)；一鼓作氣填了一段時(shí)間后，看著剩下的問(wèn)題，我不耐煩的放棄了填寫(xiě)這個(gè)調(diào)查問(wèn)卷。所以作為設(shè)計(jì)師，我們應(yīng)該“由內(nèi)而外”而不是“由外而內(nèi)”的去設(shè)計(jì)表單，如何讓表單變得更容易讓人接受也是設(shè)計(jì)師應(yīng)該考慮的問(wèn)題。
更多兆日UCD的干貨：
表單是一種用于信息添加、錄入的頁(yè)面類(lèi)型。是連接用戶(hù)與數(shù)據(jù)庫(kù)的橋梁，通過(guò)引導(dǎo)用戶(hù)進(jìn)行信息的填寫(xiě)，從而提交數(shù)據(jù)給后臺(tái)。在用戶(hù)填寫(xiě)提交時(shí)，還需要對(duì)用戶(hù)輸入內(nèi)容進(jìn)行校驗(yàn)與反饋，保證用戶(hù)信息填寫(xiě)的完整度。
填寫(xiě)表單是一件麻煩事，當(dāng)我們想做的是投票、網(wǎng)上購(gòu)物或者添加好友之前，總是會(huì)有表單防礙著我們。正因?yàn)槎鄶?shù)人不喜歡填寫(xiě)表單，所以在做表單設(shè)計(jì)時(shí)，我們的首要目標(biāo)是讓人們迅速輕松的完成填寫(xiě)，同時(shí)獲得系統(tǒng)和用戶(hù)想要的東西。
1. 表單拆分
基礎(chǔ)表單中會(huì)有以下六個(gè)元素：
1. 標(biāo)簽：標(biāo)簽文本主要是解釋輸入項(xiàng)的含義，一般不宜太長(zhǎng)，需要簡(jiǎn)明扼要，快速讓用戶(hù)理解；還有一部分是告知用戶(hù)哪些是必填項(xiàng)。
2. 占位提示：直接展示在輸入項(xiàng)中，采用弱提示文本對(duì)所需信息描述，當(dāng)用戶(hù)輸入信息時(shí)即消失。
3. 校驗(yàn)：對(duì)輸入項(xiàng)進(jìn)行驗(yàn)證，并給出反饋提示，如：用戶(hù)未填寫(xiě)，格式錯(cuò)誤、內(nèi)容錯(cuò)誤等
4. 基礎(chǔ)組件：可交互輸入的區(qū)域，是構(gòu)成表單的核心內(nèi)容，主要有：輸入框、單（復(fù)）選框、上傳、時(shí)間選擇器、開(kāi)關(guān)……
5. 提示：描述該輸入項(xiàng)需要的輸入類(lèi)型，如：上傳的文件類(lèi)型
6. 按鈕：用戶(hù)完成輸入后，點(diǎn)擊按鈕進(jìn)行提交、進(jìn)入下一步等，按鈕一般是跟隨的最后一個(gè)輸入項(xiàng)后面，若輸入項(xiàng)超出一屏顯示，建議將按鈕懸浮固定在底部。
當(dāng)我們開(kāi)始制作某一表單的時(shí)候，我們需要強(qiáng)迫自己思考一下每個(gè)元素的 UI 問(wèn)題：
-
這個(gè)元素是什么類(lèi)型的？
-
如何處理其他這類(lèi)東西？
-
元素之間有什么關(guān)系？
-
通過(guò)合并相同類(lèi)別元素或者擴(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)景，我們常見(jiàn)的登錄頁(yè)就是典型的單步表單。
② 分步表單：
內(nèi)容較多、錄入內(nèi)容的方式差異較大的情況且業(yè)務(wù)本身具有流程化特性，一般通過(guò)添加分步導(dǎo)航展示內(nèi)容。常見(jiàn)的例如銀行轉(zhuǎn)賬，修改密碼等等。
③ 高級(jí)表單（分組表單）：
高級(jí)表單（分組表單）：主要用于需要一次性錄入大批量數(shù)據(jù)的場(chǎng)景。高級(jí)表單與分步表單有點(diǎn)類(lèi)似，都是為了減輕用戶(hù)填寫(xiě)壓力，將填寫(xiě)內(nèi)容進(jìn)行分塊。不同的點(diǎn)在于，分步表單的流程化明顯，后一步填寫(xiě)的內(nèi)容都是基于前一步來(lái)填寫(xiě)、是前一步反饋。
3. 表單的頁(yè)面框架
表單的頁(yè)面框架指的是承載著整個(gè)表單頁(yè)的頁(yè)面框架，即：整頁(yè)式（新頁(yè)面）、彈窗式、側(cè)邊欄式。因?yàn)槠漤?yè)面面積大小不一樣，所以使用情境有所不同。
整頁(yè)式（新頁(yè)面）：最常用方式，適用于絕大部分的表單，可以支持構(gòu)建復(fù)雜的表單。
彈窗式：通過(guò)小面積的彈窗進(jìn)行輕量化的編輯，方便快速進(jìn)行增、刪、改、查；輸入項(xiàng)較少，一般不會(huì)有滾動(dòng)條。
側(cè)邊欄式：與彈窗式相似，通過(guò)小面積的側(cè)邊欄進(jìn)行編輯；可承載比彈窗更復(fù)雜一些的表單內(nèi)容，可以有滾動(dòng)條。
我們?cè)谶x擇頁(yè)面框架時(shí)通常需要綜合以下三個(gè)因素去考慮：
-
內(nèi)容數(shù)量 ：內(nèi)容如果較多不適合使用彈窗式
-
與原頁(yè)面關(guān)聯(lián)程度 ：需與原頁(yè)面關(guān)聯(lián)強(qiáng)建議使用彈窗式、側(cè)邊欄式
-
表單的復(fù)雜程度： 一般高級(jí)表單、分組表單、分步驟表單、有表格聚合的表單、聯(lián)動(dòng)表單等都建議采用整頁(yè)式的框架來(lái)展現(xiàn)。
4. 表單的排列方式
① 布局方式
在制作表單的時(shí)候分成兩種排列方式：?jiǎn)瘟胁季趾投嗔胁季帧Ｎ覀兛梢酝ㄟ^(guò)以下幾個(gè)因素去考慮使用什么布局：
1. 在輸入項(xiàng)不多的情況下，建議采用單列布局，因?yàn)閱瘟胁季?，用?hù)填寫(xiě)的路徑就是從上至下的一條直線(xiàn)，十分符合用戶(hù)的視覺(jué)動(dòng)線(xiàn)，能夠提高用戶(hù)瀏覽與填寫(xiě)的效率。
2. 多列布局的表單會(huì)導(dǎo)致用戶(hù)的視覺(jué)路徑變長(zhǎng)，用戶(hù)需以 “Z” 字形的視覺(jué)動(dòng)線(xiàn)掃描表單，會(huì)提高瀏覽與填寫(xiě)的效率，并且多列表單容易造成用戶(hù)填寫(xiě)時(shí)的混亂，易填錯(cuò)，體驗(yàn)差。
但是有時(shí)部分業(yè)務(wù)訴求和某些特性的場(chǎng)景要求，會(huì)需要在有限的空間上放入更多的控件來(lái)收集用戶(hù)的信息，這時(shí)就不得不使用多列布局的樣式，因?yàn)槎嗔心軌蚴】v向空間。
單列布局
優(yōu)勢(shì)：視覺(jué)路徑清晰，填寫(xiě)效率高，體驗(yàn)好；
劣勢(shì)：垂直空間占用率高。
建議使用場(chǎng)景：表單內(nèi)容較少的情況下使用單列布局
多列布局
優(yōu)勢(shì)：省空間，能夠放置更多的控件；
劣勢(shì)：視覺(jué)路徑模糊，填寫(xiě)成本高，填寫(xiě)易出錯(cuò)。
建議使用場(chǎng)景：關(guān)聯(lián)性強(qiáng)的填寫(xiě)項(xiàng)橫向排放，且將該列中最重要填寫(xiě)項(xiàng)的放于最左側(cè)。
② 標(biāo)簽對(duì)齊方式
標(biāo)簽的對(duì)齊方式有：左對(duì)齊、右對(duì)齊和頂對(duì)齊，除了需要考慮單列式布局還是多列式布局，還有我們也需要考慮標(biāo)簽的對(duì)齊方式。
馬泰奧·彭佐在 2006 年 7 月對(duì)表單的每種對(duì)齊方式做過(guò)眼動(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)速度最快，最有利于提高用戶(hù)填寫(xiě)表單的效率。標(biāo)簽字?jǐn)?shù)相比于左右對(duì)齊標(biāo)簽可容納更多字?jǐn)?shù)。
劣勢(shì)：縱向空間占用率高，對(duì)于小屏用戶(hù)不太友好（設(shè)計(jì)前需要考慮用戶(hù)使用場(chǎng)景以及使用設(shè)備）
建議使用場(chǎng)景：希望用戶(hù)快速完成表單；對(duì)標(biāo)簽的擴(kuò)展性高，有國(guó)際化需求（中文轉(zhuǎn)英文，英文會(huì)比較長(zhǎng)）；更適用于彈窗式、側(cè)邊欄式布局。
右對(duì)齊標(biāo)簽：
如果要盡量減少表單占用垂直屏幕空間，右對(duì)齊能提供快速完成時(shí)間。研究中，專(zhuān)家用戶(hù)和新手用戶(hù)掃視（眼睛運(yùn)動(dòng)）右對(duì)齊標(biāo)簽表單的標(biāo)簽和輸入框的平均時(shí)間分別在 170 毫秒和 240 毫秒，而填寫(xiě)完成時(shí)間比左對(duì)齊快 2 倍。
優(yōu)勢(shì)：標(biāo)簽和輸入框位置緊密，更方便填寫(xiě)
劣勢(shì)：右對(duì)齊的布局會(huì)造成標(biāo)簽的左側(cè)不齊，影響快速閱讀表單的效率問(wèn)題；如果增加填寫(xiě)項(xiàng)標(biāo)題字?jǐn)?shù)過(guò)多，整體的表單頁(yè)都需要修改，右對(duì)齊靈活性低。
建議使用場(chǎng)景：適用于需要填寫(xiě)效率但受到屏幕垂直面積限制的頁(yè)面。更適用于整頁(yè)式布局。
左對(duì)齊標(biāo)簽：
在頂、右、左三種方案中，左對(duì)齊表單填寫(xiě)速度最慢。因?yàn)樽髮?duì)齊表單解析問(wèn)題時(shí)眼球定位次數(shù)最多，用戶(hù)一般情況下都能將左對(duì)齊布局中的標(biāo)簽和輸入框聯(lián)系起來(lái)，只是花費(fèi)時(shí)間較長(zhǎng)。在研究中，典型掃視時(shí)間為 500 毫秒，很長(zhǎng)說(shuō)明用戶(hù)經(jīng)歷了沉重的認(rèn)知壓力。
優(yōu)勢(shì)：易瀏覽標(biāo)簽；占用縱向空間較少
劣勢(shì)：標(biāo)簽和輸入框距離較大，表單填寫(xiě)效率低
建議使用場(chǎng)景：需要讓用戶(hù)認(rèn)真思考后填寫(xiě)的頁(yè)面；更適用于整頁(yè)式布局
輸入字段上方的粗體標(biāo)簽
在頂對(duì)齊的情況下，設(shè)計(jì)師可能會(huì)想：如果我們將標(biāo)簽進(jìn)行加重，這增加了它們的視覺(jué)重量，并將它們帶到了布局的最前面，這樣說(shuō)是不是可以讓用戶(hù)更好的去完成表單的填寫(xiě)呢？但事實(shí)卻和設(shè)想相反：粗體標(biāo)簽反而增加了用戶(hù)填寫(xiě)的負(fù)擔(dān)。
粗體標(biāo)簽導(dǎo)致從標(biāo)簽移動(dòng)到輸入字段的掃視時(shí)間增加了近 60% ，從沒(méi)有粗體標(biāo)簽的 50 毫秒到有粗體標(biāo)簽的 80 毫秒，更突出的標(biāo)簽沒(méi)有明顯優(yōu)勢(shì)。粗體標(biāo)簽更難讓用戶(hù)閱讀和感知——可能是因?yàn)榇煮w文本和輸入字段的相鄰粗邊框之間存在更多的視覺(jué)混淆。
小結(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ò)展性更高，且用戶(hù)不會(huì)被迫分開(kāi)查看標(biāo)簽和輸入字段。需要注意在視覺(jué)上將下一個(gè)輸入字段的標(biāo)簽與前一個(gè)輸入字段分開(kāi)。
粗體標(biāo)簽：閱讀粗體標(biāo)簽對(duì)用戶(hù)來(lái)說(shuō)有點(diǎn)困難，因此最好使用純文本標(biāo)簽。但是，當(dāng)使用粗體標(biāo)簽時(shí)，可能希望將輸入字段設(shè)置為沒(méi)有粗邊框。
1. 什么是表單的校驗(yàn)
為了讓用戶(hù)準(zhǔn)確的填寫(xiě)表單，在用戶(hù)填寫(xiě)表單中/填寫(xiě)表單后，常常會(huì)增加我們常說(shuō)的“反饋提示“，針對(duì)反饋信息的準(zhǔn)確性，我們會(huì)采用兩種校驗(yàn)形式：前端校驗(yàn)和后端校驗(yàn)。
① 前端校驗(yàn)：
主要負(fù)責(zé)校驗(yàn)輸入的內(nèi)容格式是否正確；例如常見(jiàn)的手機(jī)號(hào)格式是否正確、密碼格式是否符合要求。
② 后端校驗(yàn)：
與數(shù)據(jù)庫(kù)相關(guān)，主要負(fù)責(zé)校驗(yàn)輸入內(nèi)容是否正確；例如常見(jiàn)的手機(jī)號(hào)是否存在，密碼是否正確。
③ 校驗(yàn)觸發(fā)條件：
-
用戶(hù)輸入時(shí)進(jìn)行校驗(yàn)（例如：注冊(cè)輸入密碼時(shí)，實(shí)時(shí)顯示密碼強(qiáng)度）
-
用戶(hù)輸入完成失去焦點(diǎn)時(shí)進(jìn)行校驗(yàn)（例如：注冊(cè)重復(fù)輸入密碼時(shí)，密碼與前一次輸入的是否一致）
-
用戶(hù)輸入完成點(diǎn)擊操作按鈕時(shí)進(jìn)行校驗(yàn)（例如：注冊(cè)點(diǎn)擊提交時(shí)進(jìn)行校驗(yàn)，手機(jī)號(hào)已被注冊(cè)所以未通過(guò)注冊(cè)）
④ 報(bào)錯(cuò)方式：
-
即時(shí)報(bào)錯(cuò)
-
輸入完成后點(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ò)
用戶(hù)在輸入的過(guò)程中進(jìn)行實(shí)時(shí)驗(yàn)證，輸入框處于聚焦時(shí)開(kāi)始提示，隨著輸入的過(guò)程，符合要求后已與用戶(hù)通過(guò)驗(yàn)證的反饋。例如在注冊(cè)阿里云賬號(hào)時(shí)，設(shè)置密碼需要滿(mǎn)足三個(gè)條件，這里采取了即時(shí)驗(yàn)證。
優(yōu)點(diǎn)：可以實(shí)時(shí)告知用戶(hù)表單的填寫(xiě)時(shí)候符合規(guī)范
缺點(diǎn)：實(shí)時(shí)驗(yàn)證會(huì)使用戶(hù)分散注意力，也有可能會(huì)引起用戶(hù)的反感
使用場(chǎng)景：注冊(cè)時(shí)需要設(shè)置密碼，通過(guò)密碼不同的組成，時(shí)判斷密碼的強(qiáng)度，比如純數(shù)字密碼符合最低安全要求密碼，但增加大些字母和小寫(xiě)字母后就形成了更安全的密碼
② 失去焦點(diǎn)后即時(shí)報(bào)錯(cuò)
用戶(hù)在輸入完成后進(jìn)行驗(yàn)證，輸入框失去聚焦后（即用戶(hù)點(diǎn)擊輸入框以外的位置后）與用戶(hù)進(jìn)行反饋。例如在注冊(cè)網(wǎng)易郵箱時(shí)，填寫(xiě)完畢后即時(shí)報(bào)錯(cuò)。
優(yōu)點(diǎn)：為用戶(hù)修改錯(cuò)誤節(jié)省時(shí)間、避免出現(xiàn)很多錯(cuò)誤需要改正的情況。
缺點(diǎn)：如果輸入有誤，用戶(hù)需要多一步操作，點(diǎn)擊會(huì)有錯(cuò)誤的輸入框進(jìn)行修改。
使用場(chǎng)景：注冊(cè)用戶(hù)名時(shí)，取消聚焦后會(huì)反饋用戶(hù)名是否可用，不可用的情況下是被注冊(cè)還是格式有問(wèn)題。
③ 操作后（保存/提交/下一步）后全部報(bào)錯(cuò)
用戶(hù)完成表單填寫(xiě)后，點(diǎn)擊操作按鈕（保存/提交/下一步），系統(tǒng)將表單統(tǒng)一上傳到后端數(shù)據(jù)庫(kù)中進(jìn)行對(duì)比后集中與用戶(hù)進(jìn)行反饋。
優(yōu)點(diǎn)：減少對(duì)用戶(hù)的打擾，減少后端服務(wù)器壓力，提高效率
缺點(diǎn)：用戶(hù)只能點(diǎn)擊按鈕后才可以得到反饋，不能及時(shí)修改；若表單過(guò)長(zhǎng)，用戶(hù)返回修改的路徑也將增加。
使用場(chǎng)景：登錄賬號(hào)是判斷密碼是否正確
文章來(lái)源：優(yōu)設(shè)網(wǎng) 作者：兆日UCD
