作者：Nick (轉(zhuǎn)載已獲得作者授權(quán))?

一、表單的定義

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

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

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

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

盡量減少痛苦；

說明填寫完成路徑；

考慮情境；

確保一直溝通。

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

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

標(biāo)題：這個元素幫助用戶引導(dǎo)完成表單填寫的整個過程，尤其在你對信息進(jìn)行分組方便用戶填寫時，特別有用。

標(biāo)簽：告訴用戶相對應(yīng)的輸入字段的含義。

輸入域：包含了文本框、密碼框、多行文本框、復(fù)選框、單選框、下拉選擇框和文件上傳框等。

提示信息：包含幫助信息、占位符和反饋信息提示。

操作按鈕：包括提交按鈕、保存按鈕、復(fù)位按鈕和一般按鈕；用于將表單數(shù)據(jù)傳送到服務(wù)器上。

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

1. 標(biāo)簽

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

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

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

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

• 優(yōu)點：有最快的瀏覽和處理速度，同時標(biāo)簽長度彈性大。

• 缺點：非常占縱向空間。

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

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

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

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

• 優(yōu)點：文字開頭按閱讀視線對齊，方便閱讀，節(jié)約縱向空間。

• 缺點：填寫速度慢，標(biāo)簽長度和輸入框彈性小。

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

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

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

• 優(yōu)點：時間較短，節(jié)約縱向空間。

• 缺點：整體可讀性低，標(biāo)簽長度和輸入框彈性小。

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

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

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

• 優(yōu)點：空間占比小。

• 缺點：在增加錯誤的可能性。

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

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

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

• 優(yōu)點：空間占比小；在一定程度上緩解用戶的困惑和自我懷疑。

• 缺點：可能造成用戶的認(rèn)知負(fù)擔(dān)，增加用戶記憶成本。

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

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

• 優(yōu)點：空間占比小，無需用戶對標(biāo)簽進(jìn)行記憶

• 缺點：需要一定的開發(fā)成本

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

2. 輸入域

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

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

在輸入域中，存在多種控件樣式，那么在設(shè)計產(chǎn)品的過程中，我們該如何選擇，如何取舍呢？

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

1）文本框

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

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

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

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

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

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

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

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

e. 文字輸入最好有自動補全、自動建議功能，減少不必要的文字輸入，減少出錯。

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

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

知識擴展：什么是7加減二法則？

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

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

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

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

2）選擇框

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

對于選擇框有如下幾個建議：

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

為什么？

因為你可能會增加錯誤，用戶會快速掃描表單，所以他們可能會跳過一些已經(jīng)有默認(rèn)值的字段。

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

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

不過，請謹(jǐn)慎使用。

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

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

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

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

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

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

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

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

任何高密度的操作，都會引起用戶的不適；因此，在輸入項的選擇時，用選擇來代替鍵盤輸入。

• 一方面：簡化用戶的操作，點擊次數(shù)遠(yuǎn)小于輸入，減少用戶的操作密度；

• 另一方面：減輕用戶的認(rèn)知、記憶負(fù)擔(dān)。

相較于輸入框，選擇操作步驟少，相對來說效率較高；同時，用戶用思考輸入值，也不用承擔(dān)輸入錯誤要重新輸入的風(fēng)險。

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

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

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

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

因為相較于下拉選擇，用戶可以通過展示出來的選項，直接選中目標(biāo)選項，提升輸入效率。

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

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

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

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

但星號并不適合所有類型的用戶，記得之前客戶問星號是什么意思？

它是頁面中的標(biāo)簽還是描述中的標(biāo)簽；同時，并且紅色會從用戶方面引起負(fù)面關(guān)聯(lián)，因為紅色表示錯誤。

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

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

3. 提示信息

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

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

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

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

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

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

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

下面來看一個簡單的例子，如下圖：

當(dāng)我們在錄入客戶信息時，假設(shè)填寫錯誤手機號碼，按照上面的論述，錯誤提示可以最直觀的顯示在這4個位置。

哪一個位置是最佳位置呢？

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

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

放在左邊則恰恰相反，同時左邊與用戶期望相違背，因為左側(cè)放置更高優(yōu)先級的元素，是我們的直覺。

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

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

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

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

手機屏幕缺少水平空間，把錯誤信息提示放置在下方是個不錯的選擇。

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

綜上所述，如果是web端請選擇放置在右邊，如果是移動端則放置在下邊。

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

2）幫助信息

有時候需要幫助性信息，來輔助用戶完成表單填寫。

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

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

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

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

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

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

• 客戶1：“單列右側(cè)空白區(qū)域過大，留白多，表單太長啦。”

• 客戶2：“單列縱向占比大，表單太長，我看不到全部內(nèi)容。”

• 客戶3：“怎么不采用多列，多列我能看的內(nèi)容多啊”等等…

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

1. 多列與單列的探索

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

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

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

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

總體上來看，縮減的長圖并不理想。

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

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

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

根據(jù)CXL研究所的發(fā)現(xiàn)：單列表單比多列表單完成得更快一些。在這項研究中，參與測試的人完成單列表單的平均速度比多列表單快15.4秒；多列布局雖然縮減了表單長度，空間利用率也提高了，但整體的填寫效率降低了，這與表單設(shè)計原則相違背。

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

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

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

面臨的問題該如何解決？

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

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

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

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

• a. 采用卡片式布局，區(qū)分內(nèi)容；

• b. 增加引導(dǎo)式的定位錨點；

• c. 在錨處加入微動效反饋，給予用戶確定感。

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

如果你還有什么好的想法和建議，可以在評論里留言討論。

參考文獻(xiàn)：

http://www.woshipm.com/pd/1058591.html

http://www.woshipm.com/pd/4083149.html

http://www.woshipm.com/pd/3854174.html

https://ant.design/docs/spec/research-form-cn

https://medium.com/nextux/form-design-for-complex-applications-d8a1d025eba6#.dw95zpy42

https://www.jianshu.com/p/bcd76917753e

最后歡迎有問題的小伙伴加微信：chanpin628?溝通交流。

此外我們的官方網(wǎng)站也上線了，每日分享高質(zhì)量的文章、原型素材和行業(yè)報告，小伙伴可自行前往索取，支持搜索，需要的小伙伴可點擊底部的閱讀原文直接查看，或者復(fù)制網(wǎng)址：www.dadaghp.com?打開。

更多干貨可關(guān)注微信公眾號：產(chǎn)品劉

想學(xué)習(xí)更多關(guān)于產(chǎn)品、職場、心理、認(rèn)知等干貨，可長按右邊二維碼，關(guān)注我們。

··················END··················

RECOMMEND

推薦閱讀

面試題，如果上司交代的任務(wù)你肯定完成不了，你會怎么處理？

2B產(chǎn)品的核心需求到底是什么？

老司機教你做產(chǎn)品經(jīng)理 7.0

面試中出現(xiàn)這些信號，表明你面試沒戲了

產(chǎn)品經(jīng)理如何做好信息架構(gòu)

點擊“閱讀原文”

查看更多干貨

總結(jié)

以上是生活随笔為你收集整理的B端产品中，Web端表单如何设计的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。