中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

目錄

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

三、復雜表單布局要考慮關聯性

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

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

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

1）當條目數在7個內時，仍然使用基礎布局，比如網易互客的企業信息資料新增：

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

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

PS：弱分組也可和區域內分組和卡片分組組合使用，從而提高屏效。

② 當條目數在7-15個內時，相關性較強時，使用區域內分組較為適合，比如網易七魚的新建在線質檢模版：

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

四、表單視覺可以不平衡

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

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

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

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

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

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

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

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

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

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

五、標簽對齊方式要選對

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

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

1. 操作效率

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

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

2.?標簽長度

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

3. 屏效

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

4. 視覺對齊

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

如何錯落有致呢？有什么規則嗎？

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

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

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

八、畫重點

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

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

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

參考引文：

《且曼B端產品設計之表單設計》

人眼的視角

http://t.hk.uy/Chp

Label Placement in Forms

http://t.hk.uy/Chr

淺談B端表單設計

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

Ant Design 表單設計規范

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 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議