編輯導(dǎo)語(yǔ)：B端產(chǎn)品往往由于業(yè)務(wù)體量龐大，導(dǎo)致信息復(fù)雜，同時(shí)對(duì)業(yè)務(wù)的性的要求很高；服務(wù)于B端的業(yè)務(wù)，不能夠出信息錯(cuò)誤，填錯(cuò)一個(gè)信息，就會(huì)引發(fā)巨大的問(wèn)題。本文結(jié)合筆者自己的工作經(jīng)驗(yàn)，總結(jié)了大型B端業(yè)務(wù)中表單的設(shè)計(jì)方法，供小伙伴參考。

一、表單的定義

表單是信息添加、錄入的通用形式；其作為獲取用戶輸入的重要交互方式，也承擔(dān)著將問(wèn)題和答案進(jìn)行配對(duì)的角色。

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

設(shè)計(jì)原則是任何一種解決方案的指路燈，它們體現(xiàn)解決方案應(yīng)包含的基本目標(biāo)。

針對(duì)互聯(lián)網(wǎng)表單設(shè)計(jì)，我倡導(dǎo)的原則如下：

1. 盡量減少痛苦；
2. 說(shuō)明填寫完成路徑；
3. 考慮情境；
4. 確保一直溝通。

三、表單的結(jié)構(gòu)

我們先看看表單的結(jié)構(gòu)，表單主要由5部分組成：

1. 標(biāo)題：這個(gè)元素幫助用戶引導(dǎo)完成表單填寫的整個(gè)過(guò)程，尤其在你對(duì)信息進(jìn)行分組方便用戶填寫時(shí)，特別有用。
2. 標(biāo)簽：告訴用戶相對(duì)應(yīng)的輸入字段的含義。
3. 輸入域：包含了文本框、密碼框、多行文本框、復(fù)選框、單選框、下拉選擇框和文件上傳框等。
4. 提示信息：包含幫助信息、占位符和反饋信息提示。
5. 操作按鈕：包括提交按鈕、保存按鈕、復(fù)位按鈕和一般按鈕；用于將表單數(shù)據(jù)傳送到服務(wù)器上。

四、表單的表現(xiàn)形式

1. 標(biāo)簽

標(biāo)簽根據(jù)標(biāo)簽與輸入域的位置關(guān)系，分為：左對(duì)齊、右對(duì)齊、頂部對(duì)齊、內(nèi)聯(lián)標(biāo)簽、圖標(biāo)標(biāo)簽和浮動(dòng)標(biāo)簽。

每種標(biāo)簽樣式都有自身的優(yōu)點(diǎn)與局現(xiàn)性，根據(jù)不同的場(chǎng)景選擇適合的標(biāo)簽樣式，能提高用戶閱讀效率，同時(shí)還能降低信息填寫時(shí)的錯(cuò)誤率。

1）頂部對(duì)齊：根據(jù)Matteo Penzo 發(fā)布的關(guān)于標(biāo)簽放置的文章表明：采用頂部對(duì)齊的標(biāo)簽樣式，瀏覽表單所需的時(shí)間最短；如果希望用戶能快速掃描填寫表單，頂部對(duì)齊的標(biāo)簽是一個(gè)不錯(cuò)的選擇。

頂部對(duì)齊的結(jié)構(gòu)，使得能放下更長(zhǎng)的標(biāo)簽；但對(duì)于縱向空間是一個(gè)挑戰(zhàn)，當(dāng)填寫信息過(guò)多時(shí)，表單就會(huì)很長(zhǎng)。

• 優(yōu)點(diǎn)：有最快的瀏覽和處理速度，同時(shí)標(biāo)簽長(zhǎng)度彈性大。
• 缺點(diǎn)：非常占縱向空間。

2）左對(duì)齊：左對(duì)齊標(biāo)簽，文字開(kāi)頭按閱讀視線對(duì)齊，符合人們的閱讀習(xí)慣，是有利于閱讀的。

瀏覽表單所需時(shí)間最長(zhǎng)，但是緩慢完成率并不總是一件壞事——如果表單要求敏感數(shù)據(jù)(例如提供駕駛證、身份證、銀行卡號(hào)等，可以故意減緩用戶的填寫速度，來(lái)確保填寫的準(zhǔn)確性）。

左對(duì)齊的結(jié)構(gòu)需要更多的橫向空間，因此在移動(dòng)端的呈現(xiàn)上可以是個(gè)問(wèn)題。

此外，在屏幕空間有限的情況下，也會(huì)一定程度上限制了標(biāo)簽和輸入框的長(zhǎng)度。

• 優(yōu)點(diǎn)：文字開(kāi)頭按閱讀視線對(duì)齊，方便閱讀，節(jié)約縱向空間。
• 缺點(diǎn)：填寫速度慢，標(biāo)簽長(zhǎng)度和輸入框彈性小。

3）右對(duì)齊：右對(duì)齊使得標(biāo)簽和輸入之間的距離固定，有明確的視覺(jué)關(guān)聯(lián)。

對(duì)于簡(jiǎn)短的表格，右對(duì)齊的標(biāo)簽可以有很快的完成時(shí)間；但由于標(biāo)簽長(zhǎng)短不同，左邊緣參差不齊，整體掃讀表單的時(shí)候不容易了解全部信息。

與左對(duì)齊類似，在屏幕空間有限的情況下，也會(huì)一定程度上限制了標(biāo)簽和輸入框的長(zhǎng)度。

• 優(yōu)點(diǎn)：時(shí)間較短，節(jié)約縱向空間。
• 缺點(diǎn)：整體可讀性低，標(biāo)簽長(zhǎng)度和輸入框彈性小。

4）內(nèi)聯(lián)標(biāo)簽：內(nèi)聯(lián)標(biāo)簽由于它對(duì)空間的占比很小，往往運(yùn)用于移動(dòng)端的界面設(shè)計(jì)中；但如果在交互上處理不好，會(huì)有很大的缺陷。

內(nèi)聯(lián)標(biāo)簽是用作提示性文字，來(lái)告訴用戶應(yīng)該填寫什么內(nèi)容，但用戶在填寫的適合，它就會(huì)消失；因此用戶無(wú)法仔細(xì)檢查他們是否寫下了所要求的內(nèi)容，這增加了錯(cuò)誤的可能性。

另外一個(gè)問(wèn)題是：用戶可能會(huì)把占位符文本誤認(rèn)為預(yù)填數(shù)據(jù)，因此忽略它（正如尼爾森諾曼集團(tuán)的眼動(dòng)追蹤研究所證實(shí)的）。

• 優(yōu)點(diǎn)：空間占比小。
• 缺點(diǎn)：在增加錯(cuò)誤的可能性。

5）圖標(biāo)標(biāo)簽：圖標(biāo)標(biāo)簽是內(nèi)聯(lián)標(biāo)簽的一種演化形式，在一定程度上緩解用戶的困惑和自我懷疑的心理。

但就圖標(biāo)而言，用戶需要時(shí)間來(lái)反應(yīng)它所代表的意思——若表意性不強(qiáng)或者并不是常見(jiàn)的圖標(biāo)樣式，用戶就要思考和猜測(cè)它的含義。

此外，輸入項(xiàng)一多，還得記憶那個(gè)圖標(biāo)所對(duì)應(yīng)的意思。

• 優(yōu)點(diǎn)：空間占比小；在一定程度上緩解用戶的困惑和自我懷疑。
• 缺點(diǎn)：可能造成用戶的認(rèn)知負(fù)擔(dān)，增加用戶記憶成本。

6）浮動(dòng)標(biāo)簽：用戶在輸入時(shí)，內(nèi)部標(biāo)題（提示信息）進(jìn)行浮動(dòng)位移，即節(jié)省了空間，提示性信息依舊在。

但相比其他幾種標(biāo)簽樣式來(lái)說(shuō)，需要一定的開(kāi)發(fā)成本。

• 優(yōu)點(diǎn)：空間占比小，無(wú)需用戶對(duì)標(biāo)簽進(jìn)行記憶
• 缺點(diǎn)：需要一定的開(kāi)發(fā)成本

關(guān)于標(biāo)簽樣式的選擇

2. 輸入域

輸入域是表單的核心主體，包含了文本框、選擇器、開(kāi)關(guān)、復(fù)選框、單選框、步驟條、滑塊、上傳、標(biāo)簽頁(yè)等控件（按類型分）。

選擇適合的控件樣式，能在一定程度上提高表單填寫的效率。

在輸入域中，存在多種控件樣式，那么在設(shè)計(jì)產(chǎn)品的過(guò)程中，我們?cè)撊绾芜x擇，如何取舍呢？

以下是我在日常工作中的一些摸索，也包括借鑒前輩的一些經(jīng)驗(yàn)。供大家參考。

1）文本框

文本框包含了單行文本框和多行文本框。

針對(duì)單行文本框的設(shè)計(jì)建議：

a. 選擇適合的大小，它的寬度應(yīng)該向用戶暗示所需輸入內(nèi)容的長(zhǎng)度來(lái)減輕判斷負(fù)擔(dān)。

如下圖即一典型案例，一個(gè)實(shí)際不需要花多少錢的金額輸入框在左圖中進(jìn)行等寬處理的話，容易誤導(dǎo)用戶對(duì)所需輸入金額的判斷，造成極大不安全感。

b. 采用字段掩碼，自動(dòng)匹配特定數(shù)字的輸入格式。

例如：電話、身份證、銀行卡等；按照7加減二法則，根據(jù)用戶的記憶結(jié)構(gòu)來(lái)最大化提升閱讀體驗(yàn)。

c. 彈出鍵盤應(yīng)與需要輸入的文本類型相匹配（移動(dòng)端）。

d. 涉及到金額輸入時(shí)，當(dāng)用戶輸入的金額超過(guò)千時(shí)，出現(xiàn)最高分位提示，每多輸入一位，最高分位隨之增加。

e. 文字輸入最好有自動(dòng)補(bǔ)全、自動(dòng)建議功能，減少不必要的文字輸入，減少出錯(cuò)。

例如：填寫地址欄通常是表單中最成問(wèn)題的部分，像地址自動(dòng)填充（基于用戶的定位和輸入提供準(zhǔn)確的建議）的工具使用戶能以更少打字量完成輸入。

f. 有限制輸入時(shí)，給予用戶明確的提示，增加用戶感知，減少出錯(cuò)率。

知識(shí)擴(kuò)展：什么是7加減二法則？

早在19世紀(jì)中葉，愛(ài)爾蘭哲學(xué)家漢米爾頓觀察到，有一個(gè)神奇的7±2效應(yīng)；意思就是人們的短時(shí)記憶的信息量是7個(gè)，可能會(huì)上下浮動(dòng)2個(gè)。

針對(duì)多行文本框的設(shè)計(jì)建議：

使用可拉伸的文本框比固定框更好，從使用體驗(yàn)講，可變化的文本框使頁(yè)面整體效果更統(tǒng)一。

固定文的文本框當(dāng)輸入文本超過(guò)其設(shè)置的寬度，會(huì)出現(xiàn)內(nèi)滾動(dòng)條，當(dāng)頁(yè)面上出現(xiàn)兩個(gè)滾動(dòng)條時(shí)（大頁(yè)面的滾動(dòng)條），在使用操作上會(huì)帶來(lái)一定的混亂。

2）選擇框

包括下拉列表、選框、開(kāi)關(guān)、日期選擇器等。

對(duì)于選擇框有如下幾個(gè)建議：

a. 避免設(shè)置默認(rèn)值：除非您認(rèn)為大部分用戶將選擇該值，尤其是必填字段。

為什么？

因?yàn)槟憧赡軙?huì)增加錯(cuò)誤，用戶會(huì)快速掃描表單，所以他們可能會(huì)跳過(guò)一些已經(jīng)有默認(rèn)值的字段。

但是這個(gè)規(guī)則不適用于智能的默認(rèn)值，也就是根據(jù)用戶的信息設(shè)置的默認(rèn)值；因?yàn)橹悄艿哪J(rèn)值可以使表單更快，更準(zhǔn)確地完成。

例如：根據(jù)定位數(shù)據(jù)預(yù)先選擇用戶所在的國(guó)家/地區(qū)。

不過(guò)，請(qǐng)謹(jǐn)慎使用。

b. 當(dāng)選項(xiàng)很多時(shí)，提供檢索功能。

c. 提示信息要明確，要讓用戶明確自己選擇的是什么。

3）單選框與復(fù)選框

a. 按一定的邏輯進(jìn)行選項(xiàng)排序，例如根據(jù)發(fā)生的可能性、難易程度、風(fēng)險(xiǎn)大小來(lái)排序。

b. 選項(xiàng)應(yīng)該易于理解，容易區(qū)分。

c. 盡可能提供默認(rèn)選項(xiàng)。

4）關(guān)于控件的選擇

a. 選擇框優(yōu)于輸入框。

任何高密度的操作，都會(huì)引起用戶的不適；因此，在輸入項(xiàng)的選擇時(shí)，用選擇來(lái)代替鍵盤輸入。

• 一方面：簡(jiǎn)化用戶的操作，點(diǎn)擊次數(shù)遠(yuǎn)小于輸入，減少用戶的操作密度；
• 另一方面：減輕用戶的認(rèn)知、記憶負(fù)擔(dān)。

相較于輸入框，選擇操作步驟少，相對(duì)來(lái)說(shuō)效率較高；同時(shí)，用戶用思考輸入值，也不用承擔(dān)輸入錯(cuò)誤要重新輸入的風(fēng)險(xiǎn)。

用戶可以通過(guò)選擇項(xiàng)，清晰明確的知道有哪些值可以選擇，對(duì)于一些無(wú)關(guān)緊要，或者用戶較難理解的輸入項(xiàng)，可以預(yù)制默認(rèn)值，可以照顧到各階段的用戶。

b. 單選框與下拉選擇框。

單選框較為適合選項(xiàng)較少（少于五個(gè)），同時(shí)選擇項(xiàng)之間較為類似，需要強(qiáng)調(diào)或?qū)Ρ葧r(shí)，可以優(yōu)先考慮單選框。

另外，當(dāng)選項(xiàng)能見(jiàn)度和快速響應(yīng)優(yōu)先時(shí)，也建議優(yōu)先考慮單選框。

因?yàn)橄噍^于下拉選擇，用戶可以通過(guò)展示出來(lái)的選項(xiàng)，直接選中目標(biāo)選項(xiàng)，提升輸入效率。

下拉選擇框較為適合選項(xiàng)較多（超過(guò)五個(gè)），有默認(rèn)選項(xiàng)或者選擇項(xiàng)之間有較大差異，同時(shí)下拉選擇，最好不要引起隨后輸入項(xiàng)數(shù)量以及頁(yè)面的變化；否則下拉選擇的收起以及頁(yè)面的變化，易引起用戶不適。

若選項(xiàng)過(guò)多，超過(guò)二十個(gè)，最好引入模糊匹配以及一定排序規(guī)則（首字母排序、數(shù)字排序等），方面用戶提前預(yù)知選項(xiàng)的大致位置，或通過(guò)模糊檢索找到相應(yīng)的選項(xiàng)。

5）關(guān)于必填項(xiàng)

大多數(shù)情況下，所有字段都是必填項(xiàng)，只有幾個(gè)字段是可選的，一般用“*”標(biāo)記必填字段。

但星號(hào)并不適合所有類型的用戶，記得之前客戶問(wèn)星號(hào)是什么意思？

它是頁(yè)面中的標(biāo)簽還是描述中的標(biāo)簽；同時(shí)，并且紅色會(huì)從用戶方面引起負(fù)面關(guān)聯(lián)，因?yàn)榧t色表示錯(cuò)誤。

為了避免這種誤解，可采用文本框內(nèi)暗提示。

它也是一個(gè)比較清晰標(biāo)志必填項(xiàng)的方式，并且還很節(jié)省空間，也能在一定程度上起到視覺(jué)降噪的作用。

3. 提示信息

提示信息可以分為引導(dǎo)性提示（幫助文字、輸入框提示、錯(cuò)誤提示信息）和反饋性提示兩種。

這里主要想講講錯(cuò)誤提示的設(shè)計(jì)：

1）關(guān)于錯(cuò)誤提示的最佳位置

Javier Bargas-Avila和Glenn Oberholzer對(duì)表單驗(yàn)證的研究發(fā)現(xiàn)——在表單頂部顯示所有錯(cuò)誤信息，會(huì)給用戶的記憶造成較高的認(rèn)知符合，會(huì)強(qiáng)制用戶回憶每個(gè)錯(cuò)誤輸入框中的錯(cuò)誤消息。

錯(cuò)誤信息提示在輸入框行間顯示是減少記憶認(rèn)知負(fù)荷的有效方法。

它可以幫助當(dāng)場(chǎng)識(shí)別錯(cuò)誤而不是靠回憶錯(cuò)誤，縮短反應(yīng)時(shí)間，提高表單填寫效率。

因此，錯(cuò)誤信息提示與錯(cuò)誤的字段鄰近放置可以獲得最佳性能。

下面來(lái)看一個(gè)簡(jiǎn)單的例子，如下圖：

當(dāng)我們?cè)阡浫肟蛻粜畔r(shí)，假設(shè)填寫錯(cuò)誤手機(jī)號(hào)碼，按照上面的論述，錯(cuò)誤提示可以最直觀的顯示在這4個(gè)位置。

哪一個(gè)位置是最佳位置呢？

答案是：右邊。理由如下：

a. 錯(cuò)誤信息提示右邊，符合人們從左到右的閱讀習(xí)慣；用戶視覺(jué)路徑自然流暢，很大程度上減少了用戶的精力和視覺(jué)工作。

放在左邊則恰恰相反，同時(shí)左邊與用戶期望相違背，因?yàn)樽髠?cè)放置更高優(yōu)先級(jí)的元素，是我們的直覺(jué)。

但事實(shí)上用戶需要專注于糾正他們的輸入，因此輸入框應(yīng)該是更重要的元素。

b. 對(duì)于上邊的錯(cuò)誤信息提示，有著更高的認(rèn)知負(fù)荷。

當(dāng)標(biāo)簽頂部對(duì)齊時(shí)，錯(cuò)誤提示和輸入框中的提示這兩個(gè)文本靠得很近會(huì)產(chǎn)生視覺(jué)噪音，用戶注意力被分散，很難專注于其中一個(gè)，并且可能混淆它們。

c. 放置下邊的錯(cuò)誤信息提示，雖然不符合從左到右的閱讀習(xí)慣，但它確與自然的從上倒下的閱讀流程相對(duì)應(yīng)。

手機(jī)屏幕缺少水平空間，把錯(cuò)誤信息提示放置在下方是個(gè)不錯(cuò)的選擇。

雖然它可能會(huì)增加用戶閱讀文本時(shí)的認(rèn)知負(fù)荷（與類比上邊的錯(cuò)誤信息提示），但可以通過(guò)將它們隔開(kāi)足夠的間隔來(lái)防止這種情況。

綜上所述，如果是web端請(qǐng)選擇放置在右邊，如果是移動(dòng)端則放置在下邊。

當(dāng)然，如果開(kāi)發(fā)時(shí)間有限，都選擇放置下邊也可以，方便適配。

2）幫助信息

有時(shí)候需要幫助性信息，來(lái)輔助用戶完成表單填寫。

當(dāng)文本簡(jiǎn)短的時(shí)候，可以直接放在改輸入框的附近。

當(dāng)文案過(guò)長(zhǎng)的時(shí)候，就需要做氣泡框——獲取鼠標(biāo)焦點(diǎn)，則展開(kāi)信息，失去焦點(diǎn)則消失（在氣泡展開(kāi)時(shí)，切忌勿擋住input輸入框）。

也有些產(chǎn)品是將幫助信息放在頁(yè)面頂部，如果是針對(duì)全局幫助性信息，則可以采用這種方式。

如果只是針對(duì)某個(gè)元素提醒，則應(yīng)將兩者放在一起，讓用戶知道當(dāng)前處于什么地方，在針對(duì)什么進(jìn)行引導(dǎo)、輔助。

五、復(fù)雜業(yè)務(wù)表單布局結(jié)構(gòu)探索

在復(fù)雜業(yè)務(wù)表單設(shè)計(jì)中采用單列布局，大家有沒(méi)有遇到過(guò)類似的問(wèn)題，例如：

• 客戶1：“單列右側(cè)空白區(qū)域過(guò)大，留白多，表單太長(zhǎng)啦?！?/span>
• 客戶2：“單列縱向占比大，表單太長(zhǎng)，我看不到全部?jī)?nèi)容。”
• 客戶3：“怎么不采用多列，多列我能看的內(nèi)容多啊”等等…

針對(duì)這些問(wèn)題，我們團(tuán)隊(duì)從自身的業(yè)務(wù)出發(fā)，對(duì)復(fù)雜業(yè)務(wù)表單布局進(jìn)行了相應(yīng)的探索。

1. 多列與單列的探索

首先，我們根據(jù)下圖的規(guī)則對(duì)復(fù)雜業(yè)務(wù)的表單布局進(jìn)行多方案的實(shí)驗(yàn)：

方案一：采用4列布局，標(biāo)簽頂對(duì)齊。

那為什么標(biāo)簽不采用右對(duì)齊呢？

四列布局，頁(yè)面已經(jīng)很擁擠，加上標(biāo)簽長(zhǎng)度長(zhǎng)短不一且最大長(zhǎng)度也無(wú)法確定（用戶自定義），所以放置采用了標(biāo)簽頂對(duì)齊。

總體上來(lái)看，縮減的長(zhǎng)圖并不理想。

方案二：三列布局，標(biāo)簽右對(duì)齊的方式。

由于三列布局，頁(yè)面空間較大，嘗試著把標(biāo)簽右對(duì)齊，總體上達(dá)到了縮減表單長(zhǎng)度的目的。

但字段若出現(xiàn)換行，則頁(yè)面信息模塊是混亂的。

根據(jù)CXL研究所的發(fā)現(xiàn)：?jiǎn)瘟斜韱伪榷嗔斜韱瓮瓿傻酶煲恍?。在這項(xiàng)研究中，參與測(cè)試的人完成單列表單的平均速度比多列表單快15.4秒；多列布局雖然縮減了表單長(zhǎng)度，空間利用率也提高了，但整體的填寫效率降低了，這與表單設(shè)計(jì)原則相違背。

同時(shí)從開(kāi)發(fā)效率來(lái)看，單列成本較低（多列需要做響應(yīng)式）；從業(yè)務(wù)承載上看，單列擴(kuò)展性更強(qiáng)，適合復(fù)雜多樣的業(yè)務(wù)場(chǎng)景（多列適合交單一的場(chǎng)景）。

綜上，最后還是采用單列布局。

2. 單列布局在復(fù)雜業(yè)務(wù)中運(yùn)用

面臨的問(wèn)題該如何解決？

我們團(tuán)隊(duì)重新審視了客戶的這些反饋：空白區(qū)域過(guò)大、留白過(guò)大、表單太長(zhǎng)、我看不全、不知道什么時(shí)候可以填完等等。

我們嘗試把這些問(wèn)題翻譯成：我無(wú)法預(yù)知表單的填寫內(nèi)容，我想要是把空白的地方也利用上我是不是就看全了整個(gè)表單。

如果是這樣，用戶的本質(zhì)述求就是想要掌控感。

對(duì)現(xiàn)有的單列布局做了以下幾個(gè)處理：

• a. 采用卡片式布局，區(qū)分內(nèi)容；
• b. 增加引導(dǎo)式的定位錨點(diǎn)；
• c. 在錨處加入微動(dòng)效反饋，給予用戶確定感。

感謝閱讀！本文給表單設(shè)計(jì)提供了一個(gè)基本的指南，在具體項(xiàng)目中，你可能需要根據(jù)產(chǎn)品特性和用戶需求進(jìn)行調(diào)整。

文章來(lái)源：人人都是產(chǎn)品經(jīng)理           作者：@Nick 

藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)