編輯導(dǎo)語：表單頁用于信息的添加和錄入，它在企業(yè)中臺中無處不在。本文作者對B端的基礎(chǔ)通用組件表單進行了總結(jié)，并對其中一些高頻問題作出了解答，感興趣的小伙伴們一起來看一下吧。

表單頁是B端產(chǎn)品中的典型頁面，用于信息的添加和錄入，表單頁在企業(yè)中臺中無處不在，如創(chuàng)建直播、新增客戶、新建商品、中獎設(shè)置、報銷申請、職位發(fā)布等，有些小伙伴在設(shè)計B端表單時，不知道需要注意哪些問題，本文對B端基礎(chǔ)通用組件表單進行了總結(jié)，帶你全面了解在設(shè)計表單過程中需要了解的知識和遵循的原則，希望能給到小伙伴一些啟發(fā)和幫助。

一、表單的作用

后臺產(chǎn)品的本質(zhì)是針對數(shù)據(jù)的增、刪、改、查，其中增、改、查都可以用表單來完成，系統(tǒng)本身是沒有信息的，表單是用戶和數(shù)據(jù)庫之間的媒介，在網(wǎng)頁中主要負(fù)責(zé)數(shù)據(jù)采集的功能。

相對于其他頁面而言，當(dāng)用戶進到表單頁時使用阻力和操作阻力是很大的，因為用戶完成任務(wù)時有思考成本和操作成本，很多時候用戶會因為填寫信息太過繁瑣，從而放棄了對該產(chǎn)品的使用。

因此在設(shè)計錄入表單時，合適的表單才能提高錄入任務(wù)的完成度和滿意度。

二、 表單的構(gòu)成

1）標(biāo)簽/Lable

說明：通常放置在表單字段之外或者字段內(nèi)，對輸入項或設(shè)置項的解釋說明，可用文字或圖標(biāo)表示。

作用：提示用戶要輸入什么內(nèi)容，幫助用戶快速理解每一項字段的作用。

2）表單域/Formfield

說明：包含了輸入框、下拉框、日期選擇器、時間選擇器、開關(guān)、上傳等等。

作用：用來收集用戶輸入的信息，每個字段包含著某一類型的信息，是形成表單的核心內(nèi)容。

3）提示信息/Promptinformation

說明：包含占位符、幫助信息、校驗信息，后面會詳細(xì)講到。

作用：幫助用戶有效正確填寫信息的引導(dǎo)內(nèi)容或反饋內(nèi)容。

4）操作按鈕/operatingbutton

說明：當(dāng)用戶完成信息錄入時，暗示可點擊性，必須讓用戶一眼看出這個是可點擊的交互區(qū)域，一般情況占據(jù)最高的層次關(guān)系，暗示整個界面的唯一目的和操作。

作用：提交內(nèi)容到服務(wù)器，對表單內(nèi)容進行校驗、提交或者進行下一步操作。

1. 標(biāo)簽

指明用戶需在此表單上要填寫什么類型的信息，通常放置在表單文本框之外居左或上方的位置，極少數(shù)情況下也會放置于文本輸入框內(nèi)，可用文字或圖標(biāo)展示，標(biāo)簽的對齊方式一般分為左標(biāo)簽、頂標(biāo)簽、行內(nèi)標(biāo)簽。

在Matteo Penzo《Label Placement in Forms》文章中有分享過關(guān)于表單標(biāo)簽放置的研究，他分別對標(biāo)簽左對齊、右對齊以及頂部對齊做了用戶眼動追蹤實驗，下圖是此測試的眼動數(shù)據(jù)。

Matteo Penzo-根據(jù)表單標(biāo)簽對齊方式研究出來的時間表：

單從效率角度看，頂對齊標(biāo)簽>右對齊>左對齊，但是根據(jù)應(yīng)用場景，效率快并不是我們選擇標(biāo)簽對齊方式的唯一的指標(biāo)，還是要根據(jù)用戶需求和實際業(yè)務(wù)場景提供不同的解決方案。

1）左對齊標(biāo)簽

視線從標(biāo)簽移動到輸入框的時間為500ms ，花費時間很長說明用戶經(jīng)歷了沉重的認(rèn)知壓力，原因是違反了格式塔原理，標(biāo)簽和表單域之前存在負(fù)空間（格式塔原理：距離更近的更容易被看成一個整體）離得遠(yuǎn)用戶就要思索一段時間判斷是否是一個整體所以左對齊表單填寫速度最慢。

• 優(yōu)點：視覺動線符合用戶的閱讀習(xí)慣，因此閱讀效率高。
• 缺點：標(biāo)簽與輸入域負(fù)空間間距長短不一，操作效率低 。

2）右對齊標(biāo)簽（冒號對齊標(biāo)簽）

視線從標(biāo)簽移動到輸入框的時間為240ms。

因為右對齊有鋸齒狀的視覺動線，不利于快速掃視，所以用戶閱讀效率不高，但是符合親密性原則,快速填寫的速度更快，右對齊表單完成時間比左對齊快2倍。

• 優(yōu)點：標(biāo)簽與輸入域有明確的視覺關(guān)聯(lián)，符合親密性原則，操作效率高。
• 缺點：有鋸齒狀的視覺動線，不利于快速掃視，所以用戶閱讀效率不高。

3）頂對齊標(biāo)簽

視線從標(biāo)簽移動到輸入框的時間為50ms。

Matteo Penzo從2006年7月進行眼動研究發(fā)現(xiàn)視線從標(biāo)簽移動到輸入框的時間為50ms， 比左對齊標(biāo)簽方式快了10倍，比右對齊標(biāo)簽方式快2倍，能迅速填完頂對齊標(biāo)簽表單的原因之一，是因為眼球只需要在標(biāo)簽和輸入框之間進行上下單向運動。

• 優(yōu)點： 節(jié)約橫向空間，對齊視覺舒適，對齊方式符合視覺動線，閱讀、操作效率高。
• 缺點：一定程度上占用大量的縱向空間，縱向空間利用率不高。

4）行內(nèi)標(biāo)簽

視線從標(biāo)簽移動到輸入框的時間為10ms。

• 優(yōu)點：最節(jié)約空間，多用于登錄注冊。
• 缺點：輸入狀態(tài)標(biāo)簽消失，用戶會有迷失感。

高頻問題一：表單標(biāo)簽應(yīng)簡潔明了，在哪個位置才是最高效的呢？標(biāo)簽到底是左對齊、右對齊還是頂部對齊呢？

答案是根據(jù)用戶需求和實際業(yè)務(wù)場景提供不同的解決方案。

如果是用于移動端或者國際化的產(chǎn)品（比如國際化的出海產(chǎn)品設(shè)計，可能會適配多種語言，有些單詞翻譯過來就會很長）頂對齊標(biāo)簽是個不錯的選擇。

如果是詳情的陳列（快速掃視的速度更快）或者涉及比較復(fù)雜和敏感需要用戶放慢速度，仔細(xì)思考的場景，可以選用左對齊標(biāo)簽。

右對齊標(biāo)簽雖然與表單域視覺關(guān)聯(lián)強，用戶錄入效率高，不過要考慮好標(biāo)簽長短不一的問題。

2. 輸入域

輸入域是表單的主題與核心，用來收集用戶操作的信息，每個輸入域字段包含一個類型信息，輸入域不僅僅是文本輸入框，從交互組件的角度來看，其包括文本輸入框、單選框、復(fù)選框、開關(guān)、選擇器、步驟條、上傳、Tab切換、滑塊、步驟條等等。

3. 提示信息

幫助用戶有效正確填寫信息的引導(dǎo)內(nèi)容或反饋內(nèi)容，以文字或者圖標(biāo)形式展現(xiàn)在要說明的內(nèi)容旁邊，圖標(biāo)形式的情況鼠標(biāo)hover時顯示全部信息，從提示信息所處的位置和提示出現(xiàn)的時機，提示可分為輸入框內(nèi)提示、輸入框外提示、激活輸入框提示、圖標(biāo)懸停提示及單獨區(qū)域提示等。

1）占位符/Placeholder

說明：通常放置在表單字段之外或者字段內(nèi)，對輸入項或設(shè)置項的解釋說明。
作用：提示用戶要輸入什么內(nèi)容，幫助用戶快速理解每一項字段的作用。

2）幫助信息/Help Information

說明：文字形式的表單幫助信息很重要，需要讓用戶必須知曉的一般放在表單字段右側(cè)，圖標(biāo)形式則常用于信息內(nèi)容非用戶必須知曉的，以圖標(biāo)形式隱藏內(nèi)容，在需要時鼠標(biāo)hover顯示。

作用：幫助用戶解釋名詞和引導(dǎo)用戶完成任務(wù)。

3）校驗信息/Check the information

說明：當(dāng)用戶填寫表單的信息無法被錄入時給予反饋、實時提供建議參考或者對錄入內(nèi)容的提示，在錯誤信息顯示在對應(yīng)表單項旁邊，盡量減少用戶記憶和認(rèn)知負(fù)荷。

作用：當(dāng)用戶填寫的信息無法被錄入時給予反饋。

提示一般可分為引導(dǎo)提示和反饋提示兩類。

4）引導(dǎo)提示

發(fā)生在用戶輸入前，引導(dǎo)用戶正確輸入信息或?qū)斎胄畔⒁?guī)則的注釋與說明，輸入框內(nèi)提示、輸入框外提示、激活輸入框提示都可歸為引導(dǎo)提示，引導(dǎo)提示可細(xì)分為全局提示和定位提示。

①全局提示：一般位于表單頂部顯示的注釋與說明，告知用戶填寫表單的注意事項、信息采集的用途以及信息安全性保證等，解除用戶輸入時的顧慮。

②定位提示：適用于表單很長，用戶注意不到自己錯哪兒了，在相應(yīng)錯誤位置進行提示，幫助用戶快速定位到錯誤內(nèi)容。

單項提示也可以選用不同的布局，分別有輸入框內(nèi)提示、在鼠標(biāo)haver時氣泡提示、輸入框下方文字提示、輸入框后方文字提示。

錯誤提示一般停留2-3S后消失。

5）反饋提示

發(fā)生在輸入中或輸入后，頁面系統(tǒng)對用戶的輸入給與校驗，并對校驗結(jié)果予以展示的提示形式，輸入中作用：實時反饋， 輸入后作用：提醒和糾錯。

• 缺點：影響一些性能，但是這個影響比較小，如果在輸入一個錯誤率很高的內(nèi)容，頻繁的給用戶錯誤提示會影響用戶體驗。
• 優(yōu)點：該方式的校驗條件多在本地，不需要實時向服務(wù)器發(fā)命令，以得到反饋，減輕后臺數(shù)據(jù)傳送壓力。

①失去焦點、即時報錯

當(dāng)某項錄入項已錄入完成并失去焦點時，觸發(fā)系統(tǒng)校驗（校驗內(nèi)容存儲在遠(yuǎn)端，程序需要完整的輸入信息到遠(yuǎn)端進行檢驗，并給出反饋）并且盡量采用非模態(tài)反饋的方式，避免打斷當(dāng)前任務(wù)流。

• 缺點：如果輸入有誤，用戶需要多一步操作，點擊會有錯誤的輸入框進行修改，稍微影響用戶體驗。
• 優(yōu)點：降低用戶的問題查找和修改成本，避免出現(xiàn)很多錯誤需要改正的情況。

注意：要清晰地描述錯誤并提供相應(yīng)的解決方案，報錯文案應(yīng)該盡可能簡短，用戶看到一大段文字，很可能會失去了去閱讀的耐心，文案還應(yīng)清晰指出錯誤的原因，對于用戶可自己修復(fù)的問題，應(yīng)告知問題如何修正。

如果彈窗空間足夠，可以直接展示圖片樣式，降低折疊度，避免用戶二次點擊，減少了一步用戶操作。

②操作/保存/提交/下一步 時全部報錯

用戶全部輸入完成以后，點擊下一步操作的時候?qū)⑺绣e誤提示都展示給用戶。

• 缺點：用戶不能及時看到反饋，及時進行修改，如果表單過長的話，會增加用戶的問題查找和修改成本。
• 優(yōu)點：減少后端服務(wù)器壓力，提高頁面性能。

4. 操作按鈕

操作按鈕：表單界面操作的最后一步，填寫完表單各項內(nèi)容后，所要進行的操作動作（eg：保存、取消、提交、確定等）來結(jié)束當(dāng)前操作流程或在流程之中或之后開啟新的功能操作，在視覺上暗示用戶可點擊，提示元素可以是文字或者圖形，例如保存、取消、下一步等。

標(biāo)簽一般為每個輸入項的名稱，按所要填寫信息的必要性又可分為必填項和非必填項。

• 必填項：用戶必須要輸入有效的文本信息，否則，該表單就不能正常提交、保存等操作。
• 非必填項：該項信息用戶可填可不填，根據(jù)用戶的意愿和需求度來自愿選擇填或者不填。

高頻問題二：如果大部分都是必填項，還有必要標(biāo)記必填字段嗎？必填項or非必填項到底有無必要標(biāo)注。

通常設(shè)計師們會覺頁面上每個必填字段都有一個標(biāo)記都有星號會讓頁面視覺噪音太重，讓用戶產(chǎn)生視覺疲勞，原本清清爽爽的頁面看起來low low的。所以一般設(shè)計師逃避星號的三種措施是：

1）給全局提示

缺點：用戶一般會直接忽視這類說明，當(dāng)用戶填寫字段時，用戶視線會更聚焦這項字段本身都什么要求，不太可能閱讀到表單最頂部的填寫說明，用戶會討厭讀各種說明，比如我們?nèi)サ骄皡^(qū)里面，不喜歡讀景區(qū)里面的景區(qū)說明，在公共場合也很容易忽視禁止什么禁止什么的標(biāo)識，用戶很有可能不會注意到表單最頂部的說明。

即使讀了之后會忘記，特別是當(dāng)表單很長或者填寫表單被打斷的時候。讓用戶記得頂部說明，會占用用戶的工作記憶，增加認(rèn)知負(fù)荷，加大用戶填寫表單的阻力，讓本身就具有挑戰(zhàn)性的表單更是難上加難。

2）只標(biāo)記占比較少的可選字段

缺點：用戶必須掃描表單以確定是否為必填字段或選填字段，用戶會掃視表單找到一個標(biāo)記為可選的標(biāo)識，即時找到了那些是非必填也會很容易忘記，看到?jīng)]有標(biāo)星的字段可能會做出假設(shè)。

用戶可能會想：“嗯，工作單位——不需要我的工作單位吧？先空著吧”，即使用戶不留空，也不得不暫停來思考這個字段是否需要填寫，增加了用戶的思考和理解負(fù)擔(dān)。

3、什么都不標(biāo)注

缺點：什么都不做，讓用戶去猜哪個是必填項哪個是非必填項，他們相信用戶自己可以判斷，如果沒有填寫必填項，提交的時候報錯，讓用戶完善填寫信息，當(dāng)給出用戶提示的時候，用戶都很有可能不按照規(guī)則填寫提交的時候出現(xiàn)報錯，毋庸置疑，什么都不提示更加會提高用戶出錯的概率。

用戶會通過必填標(biāo)記來評估工作量，了解輸入信息的最低限度，因此標(biāo)記必填字段是很有必要的，盡量清晰明確的展示每一個必填字段，盡管界面出現(xiàn)大量星標(biāo)時會讓界面看起來不清爽優(yōu)雅，加重界面的視覺噪音，甚至重復(fù)的星號 * 會帶來一些認(rèn)知恐慌和緊張感。但這些負(fù)面影響相對于必填項不標(biāo)星的后果是可以原諒的。

三、交互模式

表單頁面的交互方式分為以下4種：就地編輯、氣泡卡片、彈窗、抽屜、頁面跳轉(zhuǎn)，根據(jù)具體的使用場景選擇合適的頁面交互。

1. 原位編輯

原位編輯是比較輕量型信息采集表單形式，適用于表單內(nèi)容較少，使用頻率較低的場景，同時屬于主功能分支的場景，表單操作后頁面隨即發(fā)生反饋改變，保證用戶對主要功能的高效操作，通過雙擊或點擊特定的操作按鈕即變?yōu)榧せ罹庉嫚顟B(tài)。

優(yōu)點：操作便捷，不會打斷還可單擊空白處隨時退出。

hover下給到一個輸入框來顯示可以原位編輯。

加一個小鉛筆的圖標(biāo)，可以是hover的時候高亮，也可以默認(rèn)放一個小鉛筆，主要看業(yè)務(wù)上編輯的頻次高頻不高頻，編輯和瀏覽那個需求更重要。

2. 氣泡卡片

點擊或者鼠標(biāo)移入彈出氣泡式的卡片浮層。氣泡卡片交互方式也是比較輕量化的形式，氣泡提示共有12種箭頭方向，其對齊方式根據(jù)實際顯示內(nèi)容選擇合適的樣式，所產(chǎn)生的表單頁與當(dāng)前的頁面親密性緊密相關(guān)。

3. 彈窗

彈窗樣式的輸入表單是主要流程步驟中的分支流程，輸入彈窗樣式的表單，輸入內(nèi)容的多少處于頁面跳轉(zhuǎn)和就地編輯兩種樣式之間，用戶在不離開當(dāng)前頁的情況下繼續(xù)操作，是流程步驟中的分支行為，可由用戶選擇是否進行，不不覆蓋用戶已閱讀內(nèi)容。

注意點：

在直播列表頁點擊新增直播或者在工作臺點擊新增直播，彈出的彈窗保持一致， 比如做直播的添加商品彈窗，不管他的入口在任何一個頁面，交互出來的容器要保持一致，如果新增一條規(guī)則，和新增直播這個無關(guān)，規(guī)則里面的內(nèi)容比較多，彈窗容納不下的情況下，是可以用抽屜來承載內(nèi)容的。

4. 抽屜

抽屜交互的表單樣式是比較常見的交互樣式，它的拓展性很強，承載的信息很多，當(dāng)前頁面的分支操作，體現(xiàn)兩頁面之間的層級關(guān)系，信息承載量和頁面比肩，又兼具彈窗的優(yōu)點，同時又有連續(xù)操作的優(yōu)點。

• 內(nèi)容比較多時，可以把彈窗換成抽屜
• 強調(diào)詳情可以連續(xù)查看
• 可以快速切換列表，主要操作流程在一個頁面中展示，保證主要功能的操作的流暢度

5. 頁面跳轉(zhuǎn)

若輸入內(nèi)容特別多，超出了彈窗/抽屜的承載量時，建議使用頁面跳轉(zhuǎn)，頁面跳轉(zhuǎn)的信息承載能力強，對反饋的及時性要求不高也沒有那么強的關(guān)聯(lián)性，常用于崗位發(fā)布、創(chuàng)建直播、初始化入住等復(fù)雜信息的發(fā)布。

頁面跳轉(zhuǎn)包含兩種：新頁面打開和當(dāng)前頁面跳轉(zhuǎn)。

• 新頁面打開：主要流程步驟中的分支流程，頁面功能具有獨立性，不影響用戶對主流程的繼續(xù)操作。
• 當(dāng)前頁面跳轉(zhuǎn)：流程步驟中的關(guān)鍵步驟，提示用戶已進入下一步，關(guān)鍵流程建議在當(dāng)前頁面打開，讓產(chǎn)品主流程更加清晰，建立新頁面會分散用戶注意力增加用戶的迷失感，當(dāng)前頁面跳轉(zhuǎn)則讓用戶更聚焦于當(dāng)前頁面的信息中。

盡量避免頁面跳轉(zhuǎn)，頁面的跳轉(zhuǎn)勢必造成重新加載和刷新，這本身就會耗費一定的時間，此外，跳轉(zhuǎn)還會造成用戶行為的中斷，以及瀏覽的不順暢。

四、內(nèi)容布局

在web頁面中，由于頁面的關(guān)系，導(dǎo)致跳轉(zhuǎn)頁面與彈窗的橫向空間較大，縱向空間不足，若出現(xiàn)較多的輸入內(nèi)容時，且不能采用分模塊、分步驟、高級等交互布局時，有的小伙伴會采用雙列或多列表單，以提高橫向空間的利用，這也是可以的，要注意列與列間距的合理性以及遵守用戶的視覺流暢，可以參照菲茲定律。

但是作為表單，單列表單的瀏覽及填寫效率是最高的，用戶的視覺流較為順暢，可以提升填寫效率，同時能夠減少用戶的疲勞度，因此建議表單多采用單列布局。

1. 標(biāo)題分組

用戶的認(rèn)知成本會少很多，用戶知道自己每填一步在干嘛，而不是密密麻麻一大片，讓用戶完成表單時會有階段感，降低用戶自主歸納的成本，同時用戶可以在填寫好一段內(nèi)容后進行心理上停頓休息，減少視覺疲勞和心理壓力。

• 以必填項劃分：若表單內(nèi)有必填項和非必填項，且各項之前關(guān)聯(lián)度不高，可采用將必填項劃分為一組進行優(yōu)先呈現(xiàn)，該種方式有助于讓用戶快速發(fā)現(xiàn)自己需要錄入的內(nèi)容。
• 以相關(guān)性劃分：若錄入項較多，且各項內(nèi)容之間存在明顯的關(guān)聯(lián)度區(qū)分，可考慮以內(nèi)容相關(guān)性進行信息分組，該種方式有助于讓用戶理解各項內(nèi)容間的邏輯關(guān)系。

2. 標(biāo)題+卡片分組

如果表單里面已經(jīng)完全區(qū)分不同性質(zhì)和類別的時候，可以考慮直接用卡片，輸入組件、分類、分模塊的排版方式讓用戶感覺更好，在視覺樣式上進一步做歸類和區(qū)分，上一個是天然的間距區(qū)分，該種方式有助于讓用戶理解各項內(nèi)容間的邏輯關(guān)系。

3. 標(biāo)簽頁

卡片分組和標(biāo)題分組都用到了，但是表單太多了，三個相對獨立的，那么就用標(biāo)簽頁。

4. 錨點定位

5. 步驟

對于內(nèi)容過多的表單輸入組件，又有著明確的操作先后關(guān)系，可以選用分步驟，一般不超過三步，每屏僅展示該步驟下的表單輸入組件有些場景下，系統(tǒng)只需要用戶錄入簡單的信息，分步表單常用于輸入項較多，業(yè)務(wù)本身具有流程化特性。

為了提高用戶填寫效率，減少用戶心理負(fù)擔(dān)，將一個冗長或用戶不熟悉的表單任務(wù)拆分成多個步驟，一步步指導(dǎo)用戶完成，分步表單的流程化明顯，后一步填寫的內(nèi)容都是基于前一步來填寫、是前一步反饋，分步表單可以緩解用戶需要填寫較多內(nèi)容時候的抵觸情緒，并且通過拆分步驟，聚焦于每次填寫的內(nèi)容，提升用戶在不同模塊間的瀏覽效率。

高頻問題三：這么多不同的組合，那么不同內(nèi)容布局之間的區(qū)別？如何排列組合更合理呢？

1）標(biāo)簽頁和錨點定位的區(qū)別

1. 標(biāo)簽頁是切換不在一個頁面，錨點定位在當(dāng)前頁面
2. 標(biāo)簽頁可以獨立提交數(shù)據(jù)，各提交各的，互不影響

2）標(biāo)簽頁和步驟條的區(qū)別

步驟條更強調(diào)順序，先填什么后填寫什么。

3）錨點定位和步驟條的區(qū)別

錨點定位可以先填第4個再填第2個，錨點定位本質(zhì)上是一個快速的目標(biāo)傳送門，只是告訴你這個表單很長，有一個傳送門可以讓你看到后面的表單節(jié)點，有點像鼠標(biāo)的快速滾輪，讓頁面滾動的的快一點，而步驟條流程化明顯，后一步填寫的內(nèi)容都是基于前一步來填寫、是前一步反饋。

五、結(jié)語

春卷對B端表單設(shè)計的歸納與總結(jié)，把自己學(xué)到的經(jīng)驗分享出來，讓大家有一個更清晰的認(rèn)知，希望對從事B端工作或者對B端知識感興趣的同學(xué)有些幫助。感謝閱讀，歡迎交流～

本文由郝小七指導(dǎo)http://www.codemsi.com/u/917803

參考文獻(xiàn)：

美芳Mia《體驗設(shè)計手冊》：https://www.yuque.com/meifangmia

https://www.yuque.com/weiweiyixiaohennaikan/lmzzoy/ggb9p7

https://mp.weixin.qq.com/s/eKLrUCsm2W12RORNdjqwUA

本文由 @春卷設(shè)計筆記 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于CC0協(xié)議。