編輯導語：B端表單若設計不好，則容易導致不佳的用戶體驗，無法給用戶有效的信息反饋。那么，應該如何優(yōu)化B端表單設計、提高B端表單的操作效率呢？也許你需要在交互形式、表單頁面、輸入框等方面做好優(yōu)化。本文作者總結了提高B端表單操作效率的7個技巧，不妨來看一下。

一些同學在設計B端表單時，不知道需要考慮哪些問題，直接使用Ant Design提供的表單模版，或者參考競品，上線后用戶反饋難用，產(chǎn)品反饋拓展性低。

那么該如何提高B端表單操作效率呢？這里有7個技巧分享給大家。

目錄

1. 不濫用表單的交互形式；
2. 將復雜表單進行合理的歸納簡化；
3. 復雜表單布局要考慮關聯(lián)性；
4. 表單視覺可以不平衡；
5. 標簽對齊方式要選對；
6. 表單頁面要考慮適配方式；
7. 輸入框不用整齊劃一，可以錯落有致。

一、不濫用表單的交互形式

表單的交互設計，有時候往往會被設計所忽略，或者所有交互都采用彈窗，本可以氣泡卡片一步解決，使用彈窗卻要兩步完成，本需要界面跳轉承載復雜表單，卻使用彈窗不停滾動。

在表單設計時，該如何選擇合適的交互形式呢？首先我們需要了解常用的交互形式有哪些。

常用的交互形式主要有：原位編輯、氣泡卡片、彈窗、抽屜、全屏彈窗、頁面跳轉等。

表單交互方式的選擇，我們可以參考 Ant Design 表單設計規(guī)范，從關聯(lián)性和復雜度進行判斷，在選擇時，我們優(yōu)先考慮信息的復雜度，其次在考慮相關性。

1）當信息復雜度低，同時相關性高時，我們可以選擇原位編輯/氣泡卡片、彈窗的交互方式。

比如釘釘任務詳情頁面的數(shù)據(jù)編輯，相關度極高，同時信息不復雜，那么就可選擇原位編輯，在使用原位編輯時，需要根據(jù)業(yè)務進行判斷，是否有必要進行原位編輯。

而Ones的篩選，其數(shù)據(jù)量相對較多，但是相關性極高，那么就可以選擇氣泡的形式；有贊教育綁定銷售員，采用了彈窗的形式，這里也可采取氣泡的形式。

2）當信息復雜度高，但關聯(lián)性也較高時，我們可以使用抽屜、全屏彈窗的交互方式。

比如神策數(shù)據(jù)，信息量較為復雜，同時有一定相關性，數(shù)據(jù)創(chuàng)建后即可在列表中查看；但是當數(shù)據(jù)特別復雜，同時新增入口位置較多時，可采用全屏彈窗的方式，在CRM行業(yè)較常見，比如銷幫幫。

其優(yōu)勢是，當從詳情頁進行新增或編輯時，編輯完成后，詳情頁數(shù)據(jù)即可展示當前新增的信息，如果是頁面表單，需要刷新數(shù)據(jù)才可以查看到，體驗感較低。

3）當信息復雜度高或信息獨立時，我們可以使用頁面的交互方式。

比如有贊的新增報名，其關聯(lián)性就不像CRM那么強，因此直接采用頁面的交互方式就可以；而阿里巴巴的創(chuàng)建網(wǎng)絡信息復雜度較高，同時相對獨立，因此也適合采用頁面進行交互。

二、將復雜表單進行合理的歸納簡化

對于復雜表單，在設計時需要對其進行合理的歸納簡化，降低表單填寫負荷。

一般來說，表單可分為基礎表單、分步表單、錨點定位、標簽頁這幾類。

1）當表單條目數(shù)在7個內(nèi)，表單較為簡單，這時候我們一般直接采用基礎表單，比如有贊更換負責人頁面：

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

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

② 如果每個組之間關聯(lián)性較強，就不適合分開，推薦使用錨點定位，比如銷幫幫的編輯銷售機會、新建客戶等表單都是采用錨點定位。

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

三、復雜表單布局要考慮關聯(lián)性

上面提到了為復雜表單進行合理的歸納簡化，但是歸納簡化后采用什么布局方式更合適呢？

表單頁面的布局方式，綜合起來可分為普通布局、弱分組、區(qū)域內(nèi)分組、卡片分組這四種。

在選擇時，和表單的交互方式選擇一樣，可參考 Ant Design 表單設計規(guī)范，從關聯(lián)性和復雜度進行判斷，在選擇時，我們優(yōu)先考慮信息的復雜度，其次再考慮相關性。

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

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

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

PS：弱分組也可和區(qū)域內(nèi)分組和卡片分組組合使用，從而提高屏效。

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

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

四、表單視覺可以不平衡

在設計表單時，我們總覺得視覺重心偏左，因此在設計時我們總想讓視覺變得更平衡。

比如京東云，使用大屏電腦看，信息全集中在左邊，感覺視覺有點失衡。而類似飛書的居中設計，視覺會更平衡。

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

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

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

這個結果讓我挺詫異的，但又在情理之中。一個是飛書設置類表單、一個是百度云購買表單。

設置類表單，數(shù)據(jù)項較少，相對比較簡單，使用居中設計可以讓用戶更聚焦。

而百度云的表單，雖然也是視覺居中，但是將側邊欄進行收起，在設計上和我們普通網(wǎng)頁設計方式類似，從而承載更多的信息。

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

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

五、標簽對齊方式要選對

標簽分為左標簽、右標簽、頂標簽三種，不同的對齊方式，使用場景不同。

具體該如何選擇呢？我們需要從3個方面進行考慮：操作效率、標簽長度、屏效、視覺對齊。

1. 操作效率

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

因此當以操作效率為主時，推薦使用頂對齊的方式。

2.?標簽長度

當標簽長度超過8個字，或者需要考慮中英文雙版本時，推薦使用頂對齊的方式，其容納的標簽文字更多，拓展性更好，比如Ones的建任務的標簽，就采用標簽頂對齊的方式：

3. 屏效

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

4. 視覺對齊

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

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

六、表單頁面要考慮適配方式

設計時如果不考慮適配方式，那么前端可能不考慮，可能用他覺得合理的方式，在實際使用時就會導致體驗不好，后面想在調(diào)整就得重新等排期了，因此在設計時就需要把適配方式定好。

表單在設計時一般有2種適配方式，一種是固定適配，一種是間距適配。

1. 固定適配，設計需要注意

設計時，需要保證最小分辨率能夠正常顯示，表單中信息寬度固定，不隨分辨率變化而變化。該方式適合用于表單頁面的適配中。

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

這里最小分辨率大家根據(jù)自己公司情況而定，我在設計時設定1366X768為最小分辨率。

下圖是百度統(tǒng)計流量研究所，大家可以看看數(shù)據(jù)，具體以自身公司而定，因為一些單位可能還在使用1280X720的分辨率，那么就設定1280為最小兼容的分辨率。

2. 間距適配，和移動端類似，間距固定，組件自適應

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

七、輸入框不用整齊劃一，可以錯落有致

表單頁在設計時，我們總是糾結到底整齊排列好，還是錯落排列好，錯落排列又該遵循什么規(guī)則呢，這里推薦大家閱讀Ant_Design的文章《整齊劃一？不如錯落有致》。

文章提到，如果表單跟隨空間自適應會造成不穩(wěn)定的情況，線上效果會呈現(xiàn)以下效果。

同時輸入框的寬度不應該自適應，而需要根據(jù)填寫內(nèi)容的長度來定，減輕判斷負擔。

最后，錯落有致更舒適，整齊劃一在視線上有隱性的截斷，會感覺缺了一塊內(nèi)容。

如何錯落有致呢？有什么規(guī)則嗎？

Ant_Design設定104px 為原子級寬度尺碼 XS，通過倍數(shù)+間距疊加的方式（此處計算間距的原因是為了兼顧組合 input 和單個 input 對齊問題）從小到大去依次推導出更大的四種寬度來擬合前面劃分的尺碼。最終得到如下5種寬度尺碼和對齊關系。

通過對比，我們可以明顯地看到，錯落有致的排列方式更加舒適。

當然，你在設計時，最小原子的寬度不一定設置為104，也可根據(jù)業(yè)務情況將最小原子XS設置為可容納6個中文漢字，然后在通過如下規(guī)則進行換算。

八、畫重點

本文針對如何提高B端表單操作效率，整理了7個技巧：

1. 不濫用表單的交互形式；
2. 將復雜表單進行合理的歸納簡化；
3. 復雜表單布局要考慮關聯(lián)性；
4. 表單視覺可以不平衡；
5. 標簽對齊方式要選對；
6. 表單頁面要考慮適配方式；
7. 輸入框不用整齊劃一，可以錯落有致。

希望通過本文的分享，讓大家有一個更清晰的認知，從而提高表單操作效率。

參考引文：

《且曼B端產(chǎn)品設計之表單設計》

人眼的視角

http://t.hk.uy/Chp

Label Placement in Forms

http://t.hk.uy/Chr

淺談B端表單設計

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

Ant Design 表單設計規(guī)范

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

Ant Design ProForm 高級表單

https://procomponents.ant.design/components/form

QueryFilter / LightFilter 篩選表單

https://procomponents.ant.design/components/query-filter

整齊劃一，不如錯落有致

https://www.zcool.com.cn/article/ZMTIxMzA2OA==.html

作者：風箏KK，公眾號：海鹽社

本文由 @風箏KK 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉載

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