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

表單是B端產品中的一個常見功能，在設計錄入表單時，應盡量減少用戶的思考和理解負擔，提高表單的操作效率，降低用戶出錯的概率。本文作者總結了一些B端表格設計時的知識點，與你分享。

一、概念

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

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

在設計錄入表單時，應盡量減少用戶的思考和理解負擔，提高表單的操作效率，降低用戶出錯的概率，才能提高錄入任務的完成度和滿意度。

針對不同的用戶數據要進行不同的表單設計，以便適用各個場景功能。

二、B端表單構成&種類

一個基礎表單由標簽 表單域 提示信息 操作按鈕四部分構成。除此之外，根據表單的復雜程度還會衍生出其他內容：校驗提示、幫助信息、占位信息、提示。

1. 標簽

標簽用于解釋表單項的含義或要錄入/選擇的內容，引導用戶進行填寫識別內容。

合理的標簽布局結構，能夠提高用戶的閱讀效率，還能降低信息填寫時的錯誤率。常見的標簽布局形式有：左右結構、上下結構、右對齊結構以及內部結構。

1）左右結構

左右結構是目前B端產品設計中常見的表單布局形式，它減少了頁面的垂直占用空間，而增加了橫向占用空間。因PC端的橫向空間很大，當錄入項不多時，可以采用該種結構。

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

優勢：容易游覽標簽突出標簽；占用垂直空間較少。

劣勢：

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

適用場景：

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

2）上下結構

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

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

優勢：

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

劣勢：

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

適用場景：

• 希望用戶快速填寫表單，完成任務；
• 同時，當輸入項存在主次之分時，對標簽擴展性要求高。

3）右對齊結構

右對齊結構與左右結構一樣都在很多B端產品中出現次數很多，它一樣減少了頁面的垂直占用空間，而增加了橫向占用空間。

右對齊的表單由于標簽字數不一致，導致左側看起來凌亂沒有對齊，一定程度影響了整體表單版式。

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

優勢：

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

劣勢：

• 右對齊布局造成左側不齊，可讀性降低；
• 不夠靈活，如果標簽需要兩行文字進行展示，會導致閱讀困難。

4）內部結構

內部結構在移動端表單中使用較多，這里對于用戶需要輸入的內容，只保留了提示性文字，當用戶進行輸入時，內部的標簽/提示性文字就會消失，將導致用戶很難判別輸入的信息是否準確。這種形式適用于極少輸入項的表單（如登錄）

優勢：

• 減少占用橫向空間
• 不用考慮標簽長度不一致導致的對齊問題

劣勢：

內部標簽消失，很難判斷信息

5）如何選擇

操作效率：

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

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

因此當表單根據業務需要以操作效率為主時，推薦使用頂對齊的方式。

標簽長度：

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

屏效：

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

視覺對齊：

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

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

單從效率角度看，頂對齊>右對齊>左對齊，根據不同的業務場景，效率并不是唯一的考慮指標。

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

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

右對齊要考慮能否精簡標簽內容，確定好表單與界面的間距，標簽長短差異過大謹慎使用右對齊。

2. 表單域

表單域即表單的輸入區域，輸入域是用來采集用戶數據信息的核心內容，每個輸入域字段都包含一個類型的數據信息。

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

3. 提示信息

提示信息是復雜表單的必要內容，在用戶填寫表單前會對填寫的標簽內容產生疑問，可以使用Tooltips進行說明，讓用戶了解表單內容。

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

4. 操作按鈕

當用戶完成信息錄入時，按鈕能夠對表單內容進行校驗、提交、保存或者進行下一步操作；操作按鈕中有且僅有一個主功能按鈕，其他為次要按鈕；

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

5. 表單類型

對于復雜表單，在設計時需要對其進行合理的歸納簡化，降低表單填寫負荷。 一般來說，表單可分為基礎表單、分步表單、錨點定位、標簽頁這幾類。

1）基礎表單

當表單條目數在7個內，表單較為簡單，這時候我們一般直接采用基礎表單，基礎表單樣式如下：

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

2）分步表單

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

3）錨點定位

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

4）標簽頁

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

三、表單布局選擇

表單的布局方式需要考慮到內容之前的關聯度，對復雜表單進行合理的歸納，簡化表單頁面的布局方式，綜合起來可分為普通布局、弱分組、區域內分組、卡片分組這四種。

1. 普通布局

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

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

2. 弱分組

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

3. 區域內分組

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

4. 卡片分組

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

四、表單按鈕位置

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

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

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

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

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

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

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

按鈕設計的目標是指導用戶采取我們希望用戶采取的行動，盡量幫助用戶快速找到需要操作的按鈕，并了解執行該操作的結果，同時盡可能避免誤操作。

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

1）右上角標題欄

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

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

2）跟隨內容

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

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

3）固定底部操作區

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

固定在底部操作區的按鈕會對用戶產生干擾，從而影響用戶忽略表單的內容。

設計策略：應將按鈕放置于用戶瀏覽路徑中，便于被用戶發現，并且應盡量靠近其所控制的對象。

設計指導原則：使用經典的“F”型或”Z”型視覺引導模型。

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

基礎表單單列布局可將操作按鈕跟隨內容放置，復雜表單多列布局超出一屏的情況下可考慮將按鈕固定在底部操作區。

1. 表單內容視覺要平衡嗎

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

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

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

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

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

這兩個產品分別是飛書設置類表單和百度云購買表單。

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

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

五、表單頁面適配方式

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

1. 固定適配

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

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

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

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

2. 間距適配

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

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