表單是B端產(chǎn)品中的一個常見功能，在設(shè)計錄入表單時，應(yīng)盡量減少用戶的思考和理解負(fù)擔(dān)，提高表單的操作效率，降低用戶出錯的概率。本文作者總結(jié)了一些B端表格設(shè)計時的知識點，與你分享。

一、概念

在B端產(chǎn)品中，表單是出現(xiàn)頻率很高的載體。由于B端產(chǎn)品主要目的都是為了使企業(yè)降本增效，便于管理者進(jìn)行管理，由于有一類場景經(jīng)常出現(xiàn)，就是流程表單。流程表單除了填寫端的表單，還需要結(jié)合審批流程，用戶角色也相對復(fù)雜，是B端設(shè)計中的一個重點和難點，所以我會從表單基本結(jié)構(gòu)出發(fā)簡單，給大家整理一下關(guān)于B端流程表單設(shè)計里面我的一些思路。

“錄入”是B端產(chǎn)品常見的任務(wù)場景，常用于向用戶收集或驗證信息。也就是說，大部分起到了數(shù)據(jù)采集功能的模塊，我們都可以稱其為表單。例如：登錄注冊模塊信息采集，評論的編輯頁；OA中的請假流程等。具有數(shù)據(jù)收集、校驗和提交功能的表單，包含復(fù)選框、單選框、輸入框、下拉選擇框等元素。

在設(shè)計錄入表單時，應(yīng)盡量減少用戶的思考和理解負(fù)擔(dān)，提高表單的操作效率，降低用戶出錯的概率，才能提高錄入任務(wù)的完成度和滿意度。

針對不同的用戶數(shù)據(jù)要進(jìn)行不同的表單設(shè)計，以便適用各個場景功能。

二、B端表單構(gòu)成&種類

一個基礎(chǔ)表單由標(biāo)簽 表單域 提示信息 操作按鈕四部分構(gòu)成。除此之外，根據(jù)表單的復(fù)雜程度還會衍生出其他內(nèi)容：校驗提示、幫助信息、占位信息、提示。

1. 標(biāo)簽

標(biāo)簽用于解釋表單項的含義或要錄入/選擇的內(nèi)容，引導(dǎo)用戶進(jìn)行填寫識別內(nèi)容。

合理的標(biāo)簽布局結(jié)構(gòu)，能夠提高用戶的閱讀效率，還能降低信息填寫時的錯誤率。常見的標(biāo)簽布局形式有：左右結(jié)構(gòu)、上下結(jié)構(gòu)、右對齊結(jié)構(gòu)以及內(nèi)部結(jié)構(gòu)。

1）左右結(jié)構(gòu)

左右結(jié)構(gòu)是目前B端產(chǎn)品設(shè)計中常見的表單布局形式，它減少了頁面的垂直占用空間，而增加了橫向占用空間。因PC端的橫向空間很大，當(dāng)錄入項不多時，可以采用該種結(jié)構(gòu)。

從閱讀和填寫效率角度來說，左右對齊表單填寫速度相較于上下和右對齊來說最慢。因為左右對齊表單解析問題時眼球定位次數(shù)最多，用戶一般情況下都能將左對齊布局中的標(biāo)簽和輸入框聯(lián)系起來，只是花費時間較長。根據(jù)馬泰奧·彭佐的研究，典型掃視時間為500毫秒，很長說明用戶經(jīng)歷了沉重的認(rèn)知壓力。

優(yōu)勢：容易游覽標(biāo)簽突出標(biāo)簽；占用垂直空間較少。

劣勢：

• 標(biāo)簽和輸入框的相鄰間距增大且不統(tǒng)一；造成用戶視線瀏覽定位反復(fù)跳動。
• 左右對齊適合于用戶不熟悉表單的內(nèi)容數(shù)據(jù)需要首先定位問題的標(biāo)簽，瀏覽表單會使得用戶更聚焦標(biāo)簽內(nèi)容。用戶只要上上下下閱讀標(biāo)簽左欄，不會被輸入框打斷。

適用場景：

表單中存在較多的復(fù)雜或敏感信息，希望用戶放慢速度、仔細(xì)思考。

2）上下結(jié)構(gòu)

上下結(jié)構(gòu)擁有較強的信息瀏覽和填寫效率，用戶的視覺瀏覽路徑相對左右結(jié)構(gòu)來說較短，是目前B端產(chǎn)品中使用的最多的一種表單對齊方式。該種結(jié)構(gòu)適用于一行需要放置多項錄入項的情況，或標(biāo)簽名稱通常較長的表單。

馬泰奧·彭佐從2006年7月進(jìn)行眼動研究發(fā)現(xiàn)，從標(biāo)簽移動到輸入框只需50毫秒。比左右結(jié)構(gòu)標(biāo)簽快了10倍，后者需要500毫秒；比右對齊標(biāo)簽方式快2倍，后者高達(dá)240秒。能迅速填完頂對齊標(biāo)簽表單的原因之一，是因為眼球只需要在標(biāo)簽和輸入框之間進(jìn)行上下單向運動。

優(yōu)勢：

• 最利于減少表單填寫時間（標(biāo)簽和輸入框位置最為靠近）；
• 用戶視線固定，動線一直向下（清晰的完成路徑）；
• 節(jié)省大量橫向空間（可用于以多種方式組合的相關(guān)輸入框）。

劣勢：

• 占用額外的垂直空間（如果可提供使用的垂直屏幕空間較小，應(yīng)當(dāng)謹(jǐn)慎使用頂對齊標(biāo)簽）；
• 建議使用輸入框50%至75%的高度作為相鄰輸入框間距。

適用場景：

• 希望用戶快速填寫表單，完成任務(wù)；
• 同時，當(dāng)輸入項存在主次之分時，對標(biāo)簽擴(kuò)展性要求高。

3）右對齊結(jié)構(gòu)

右對齊結(jié)構(gòu)與左右結(jié)構(gòu)一樣都在很多B端產(chǎn)品中出現(xiàn)次數(shù)很多，它一樣減少了頁面的垂直占用空間，而增加了橫向占用空間。

右對齊的表單由于標(biāo)簽字?jǐn)?shù)不一致，導(dǎo)致左側(cè)看起來凌亂沒有對齊，一定程度影響了整體表單版式。

如果要盡量減少表單占用垂直屏幕空間，右對齊能提供快速完成時間。馬泰奧·彭佐的眼動研究發(fā)現(xiàn)，專家用戶和新手用戶掃視（眼睛運動）右對齊標(biāo)簽表單的標(biāo)簽和輸入框的平均時間分別在170毫秒和240毫秒，而填寫完成時間比左對齊快2倍。

優(yōu)勢：

• 減少占用縱向空間
• 提高填寫效率

劣勢：

• 右對齊布局造成左側(cè)不齊，可讀性降低；
• 不夠靈活，如果標(biāo)簽需要兩行文字進(jìn)行展示，會導(dǎo)致閱讀困難。

4）內(nèi)部結(jié)構(gòu)

內(nèi)部結(jié)構(gòu)在移動端表單中使用較多，這里對于用戶需要輸入的內(nèi)容，只保留了提示性文字，當(dāng)用戶進(jìn)行輸入時，內(nèi)部的標(biāo)簽/提示性文字就會消失，將導(dǎo)致用戶很難判別輸入的信息是否準(zhǔn)確。這種形式適用于極少輸入項的表單（如登錄）

優(yōu)勢：

• 減少占用橫向空間
• 不用考慮標(biāo)簽長度不一致導(dǎo)致的對齊問題

劣勢：

內(nèi)部標(biāo)簽消失，很難判斷信息

5）如何選擇

操作效率：

具體該如何選擇呢？我們需要從4個方面進(jìn)行考慮：操作效率、標(biāo)簽長度、屏效、視覺對齊。

根據(jù)Matteo Penzo的研究總結(jié)得到的瀏覽時間表發(fā)現(xiàn)，標(biāo)簽移動到輸入框的時間，頂部對齊最快只要50ms，其次是右對齊240ms，左對齊耗費時間最長500ms。

因此當(dāng)表單根據(jù)業(yè)務(wù)需要以操作效率為主時，推薦使用頂對齊的方式。

標(biāo)簽長度：

當(dāng)標(biāo)簽長度超過8個漢字，或者需要考慮國際化中英文雙版本時，推薦使用頂對齊的方式，其容納的標(biāo)簽文字更多，拓展性更好，許多國際化B端產(chǎn)品也都使用頂對齊的方式，比如Ones的建任務(wù)的標(biāo)簽，就采用標(biāo)簽頂對齊的方式：

屏效：

如果只考慮屏效，那么標(biāo)簽左對齊右對齊均可，但是如果還考慮到表單錄入效率，那么推薦使用標(biāo)簽右對齊的方式，比如蜂鳥匯報：

視覺對齊：

一般情況我們在設(shè)計表單，優(yōu)先考慮效率和屏效，但在競品分析中發(fā)現(xiàn)，竟然有50%的表單采用了標(biāo)簽左對齊的方式，因為這樣可以讓標(biāo)簽和其他內(nèi)容保持對齊，比如神策網(wǎng)：

因此，在進(jìn)行標(biāo)簽對齊方式的選擇時，我們首先要清楚以什么為主，什么是可以犧牲的，比如神策網(wǎng)選擇了視覺對齊，而犧牲的是操作效率。

單從效率角度看，頂對齊>右對齊>左對齊，根據(jù)不同的業(yè)務(wù)場景，效率并不是唯一的考慮指標(biāo)。

希望用戶放慢速度，好好考慮每個表單內(nèi)容填寫，那么采用左對齊，適用于填寫重要信息及確認(rèn)；

頂對齊針對標(biāo)簽文字過多或者需要英文時，延展性更好；

右對齊要考慮能否精簡標(biāo)簽內(nèi)容，確定好表單與界面的間距，標(biāo)簽長短差異過大謹(jǐn)慎使用右對齊。

2. 表單域

表單域即表單的輸入?yún)^(qū)域，輸入域是用來采集用戶數(shù)據(jù)信息的核心內(nèi)容，每個輸入域字段都包含一個類型的數(shù)據(jù)信息。

對于用戶來說，表單設(shè)計的時候盡可能減少用戶的思考、理解，選擇合適的輸入域類型，提升表單的輸入效率。

3. 提示信息

提示信息是復(fù)雜表單的必要內(nèi)容，在用戶填寫表單前會對填寫的標(biāo)簽內(nèi)容產(chǎn)生疑問，可以使用Tooltips進(jìn)行說明，讓用戶了解表單內(nèi)容。

還有一種提示信息是用戶是在用戶填寫完該表單域之后出現(xiàn)的校驗提示信息，如我們在填寫手機號碼時的位數(shù)不對，這類提示能夠提前告知用戶可能出現(xiàn)的錯誤，減少下一步操作的出錯概率。

4. 操作按鈕

當(dāng)用戶完成信息錄入時，按鈕能夠?qū)Ρ韱蝺?nèi)容進(jìn)行校驗、提交、保存或者進(jìn)行下一步操作；操作按鈕中有且僅有一個主功能按鈕，其他為次要按鈕；

關(guān)于按鈕順序，最常見的疑問是確定按鈕應(yīng)該在取消按鈕左邊還是右邊，這是一個爭論已久的話題。這里建議使用基于Ant Design 的設(shè)計原則，將規(guī)范定為：左對齊從左往右閱讀，右對齊從右往左閱讀；

5. 表單類型

對于復(fù)雜表單，在設(shè)計時需要對其進(jìn)行合理的歸納簡化，降低表單填寫負(fù)荷。 一般來說，表單可分為基礎(chǔ)表單、分步表單、錨點定位、標(biāo)簽頁這幾類。

1）基礎(chǔ)表單

當(dāng)表單條目數(shù)在7個內(nèi)，表單較為簡單，這時候我們一般直接采用基礎(chǔ)表單，基礎(chǔ)表單樣式如下：

當(dāng)表單條目數(shù)在7個以上，可歸類到復(fù)雜表單，這時候就需要根據(jù)表單的復(fù)雜度、邏輯性、關(guān)聯(lián)性進(jìn)行判斷，選擇合適的分組方式，進(jìn)行歸納簡化，降低表單填寫負(fù)荷。

2）分步表單

如果每個組之間有邏輯先后順序，那么推薦使用分步表單，比如阿里云的購買。

3）錨點定位

如果每個組之間關(guān)聯(lián)性較強，就不適合分開，推薦使用錨點定位，點擊定位可快速定位到相應(yīng)的表單內(nèi)容，比如銷幫幫的編輯銷售機會、新建客戶等表單都是采用錨點定位。

4）標(biāo)簽頁

如果每個組既沒有邏輯先后順序，也沒有關(guān)聯(lián)性時，推薦使用標(biāo)簽頁分組，比如飛書的發(fā)票管理，都是相對獨立的表單。

三、表單布局選擇

表單的布局方式需要考慮到內(nèi)容之前的關(guān)聯(lián)度，對復(fù)雜表單進(jìn)行合理的歸納，簡化表單頁面的布局方式，綜合起來可分為普通布局、弱分組、區(qū)域內(nèi)分組、卡片分組這四種。

1. 普通布局

當(dāng)條目數(shù)在7個內(nèi)時，仍然使用普通布局，比如網(wǎng)易互客的企業(yè)信息資料新增：

當(dāng)表單條目數(shù)在7個以上，可歸類到復(fù)雜表單，這時候仍然根據(jù)表單的復(fù)雜度、邏輯性、關(guān)聯(lián)性進(jìn)行判斷，選擇合適的布局方式，提高表單的瀏覽效率和屏效需求。

2. 弱分組

當(dāng)表單空間有限，且相關(guān)性較強時，推薦使用弱分組，將多個組合在一行中，形成分組的暗示。

3. 區(qū)域內(nèi)分組

當(dāng)條目數(shù)在7-15個內(nèi)時，相關(guān)性較強時，使用區(qū)域內(nèi)分組較為適合，比如網(wǎng)易七魚的新建在線質(zhì)檢模版

4. 卡片分組

當(dāng)條目數(shù)在15個以上，推薦使用卡片布局較為合適，比如阿里云服務(wù)購買表單：

四、表單按鈕位置

web端頁面，除去頂部和側(cè)邊導(dǎo)航欄，主要內(nèi)容頁面里的按鈕該如何放置排布呢？我們可以將內(nèi)容頁面分為以下三個部分：

1.標(biāo)題欄(Header)——主要是全局性操作按鈕，例如編輯、新建等；

2.主體內(nèi)容(Body)——有兩種操作按鈕。

第一種，是局部操作按鈕，例如表格內(nèi)部的操作項目；

第二種，是全局性完成按鈕，跟隨在內(nèi)容后的，例如取消、確定、上一步、下一步等；

3.底欄(Footer)——主要是全局性頁面完成按鈕，需要貼底固定性質(zhì)的。例如取消、確定、保存等。

表單按鈕的位置、順序、組織方式、視覺強調(diào)程度是用戶尋找按鈕的線索，通過警告色可引起注意，避免誤操作，準(zhǔn)確的文案則能夠預(yù)告按鈕的執(zhí)行結(jié)果。

按鈕設(shè)計的目標(biāo)是指導(dǎo)用戶采取我們希望用戶采取的行動，盡量幫助用戶快速找到需要操作的按鈕，并了解執(zhí)行該操作的結(jié)果，同時盡可能避免誤操作。

表單按鈕位置有三種類型：頁面右上角、跟隨內(nèi)容、固定底部操作區(qū)。

1）右上角標(biāo)題欄

表單按鈕放置固定在右上角標(biāo)題區(qū)域，不跟隨表單內(nèi)容滾動。將操作按鈕放置在右上角，與固定在底部操作區(qū)相比，能夠進(jìn)一步降低按鈕對表單內(nèi)容的干擾，使用戶能夠更加聚焦表單內(nèi)容進(jìn)行填寫。

操作按鈕放置在右上角，與操作路徑不一致，右上角也是視覺容易忽略的地方，可能會使點擊操作變得更加困難。

2）跟隨內(nèi)容

按鈕跟隨表單內(nèi)容是很常規(guī)的一種設(shè)計方法。用戶填寫完所有表單內(nèi)容下方就是操作按鈕，適用于表單內(nèi)容不超過一屏的基礎(chǔ)表單場景中使用。

在一些超過一屏的復(fù)雜表單中需要手動保存的操作按鈕，可能需要滑到頁面最底部才能點擊保存。

3）固定底部操作區(qū)

復(fù)雜表單中，通常表單內(nèi)容區(qū)域都超過了一屏，填寫的內(nèi)容很多?？煽紤]將操作按鈕固定在底部操作區(qū)，并且可考慮加上手動保存的按鈕。復(fù)雜表單內(nèi)容多，用戶在使用過程中可能會中途中斷退出，這時候保存功能就能夠幫助用戶在下次回來再次編輯的時候使用，繼續(xù)上次填寫的內(nèi)容。

固定在底部操作區(qū)的按鈕會對用戶產(chǎn)生干擾，從而影響用戶忽略表單的內(nèi)容。

設(shè)計策略：應(yīng)將按鈕放置于用戶瀏覽路徑中，便于被用戶發(fā)現(xiàn)，并且應(yīng)盡量靠近其所控制的對象。

設(shè)計指導(dǎo)原則：使用經(jīng)典的“F”型或”Z”型視覺引導(dǎo)模型。

僅有表單時建議采用“F”模型，按鈕位置跟隨內(nèi)容在左；當(dāng)表單被包含在某個容器中，則建議使用“Z”模型，將“確認(rèn)/提交”等行為放在右側(cè)視覺終點處。

基礎(chǔ)表單單列布局可將操作按鈕跟隨內(nèi)容放置，復(fù)雜表單多列布局超出一屏的情況下可考慮將按鈕固定在底部操作區(qū)。

1. 表單內(nèi)容視覺要平衡嗎

在設(shè)計表單時，我們總覺得視覺重心偏左，會使用戶視覺造成不適感，因此在設(shè)計時我們總想讓視覺變得更平衡。

比如京東云，使用大屏電腦看，信息全集中在左邊，右邊卻大片空白，感覺視覺有點失衡。而類似飛書的居中設(shè)計，左右均等的留白區(qū)域視覺會更平衡。 于是我在設(shè)計時也在考慮要不要用居中設(shè)計的方式呢？

但是當(dāng)我繼續(xù)查找資料時發(fā)現(xiàn)，其實在表單的設(shè)計中我們不用過度的追求視覺平衡，首先人的視覺動線遵循F模型，同時根據(jù)行業(yè)相關(guān)信息可讀性研究，眼動舒適角度為30度。

因此當(dāng)表單信息較少，不考慮屏效時，采用從上往下的單列布局方式，據(jù)研究這是能夠最高效完成任務(wù)的布局方式。

為了印證這個結(jié)論，我收集了近50個B端產(chǎn)品的表單，發(fā)現(xiàn)只有2個產(chǎn)品用了視覺重心居中的設(shè)計。

這兩個產(chǎn)品分別是飛書設(shè)置類表單和百度云購買表單。

其他的CRM、ERP、云產(chǎn)品、OA、項目研發(fā)、文檔產(chǎn)品、在線教育、HR、BI等系統(tǒng)產(chǎn)品的錄入類表單均采用的視覺偏左的設(shè)計方式，不管表單拓展多復(fù)雜的信息，都不會影響整體的一致性。

所以，在設(shè)計表單時不用過度追求視覺平衡，而是需要優(yōu)先考慮信息操作效率，信息閱讀效率。

五、表單頁面適配方式

B端設(shè)計師在設(shè)計表單的時候還需要考慮到頁面適配問題，如果設(shè)計不考慮適配，前端就會站在他的角度根據(jù)自己的認(rèn)為合理的方式進(jìn)行適配，在實際使用時就會導(dǎo)致體驗不好，后面想在調(diào)整就得重新等排期了，因此在設(shè)計時就需要把適配方式定好。 表單在設(shè)計時一般有2種適配方式，一種是固定適配，一種是間距適配。

1. 固定適配

表單中信息寬度固定，不隨分辨率變化而變化，要保證最小分辨率能夠正常顯示。

當(dāng)采用弱分組布局時，隨分辨率變小，數(shù)據(jù)項自動掉下來，其他保持不變。列數(shù)根據(jù)屏幕寬度決定。

我在設(shè)計時設(shè)定1366X768為最小分辨率，可保證筆記本電腦的使用。頁面最小分辨率可根據(jù)客戶或公司產(chǎn)品用戶的屏幕分辨率決定，因為一些公司企業(yè)可能還在使用1280X720的分辨率，那么就設(shè)定1280為最小兼容的分辨率。

當(dāng)采用弱分組布局時，隨分辨率變小，數(shù)據(jù)項自動掉下來，其他保持不變。

2. 間距適配

間距適配就是使用固定的左右間距，不跟隨頁面的寬度變化。當(dāng)頁面寬度變大時，組件自適應(yīng)變寬。

該適應(yīng)方式在彈窗、抽屜中較為使用，表單頁中不太推薦使用該方式，因為當(dāng)分辨率變大，眼動的視覺變大，不利于信息瀏覽。