表單元素或者模塊，在現實生活中的產品設計里十分常見，那么，你有留意過表單設計都有哪些常見的交互形式和布局樣式嗎？作為一名設計師，你要怎么做好表單布局，并選擇適合目標用戶操作習慣的交互方式？一起來看看作者的分析和總結。

上一篇我們聊了關于表單設計的基礎知識點。接下來我們來聊聊表單系列的第二篇，表單常見的布局樣式和交互形式。

將我自己踩過的坑整理出來，目的是為了幫助那些剛邁入職場的設計師，對表單能有一個更好的了解，從而避免在工作中進入誤區，也希望能給PM們提供一些思路。

三、表單的布局形式

1. 常見的表單布局

在表單設計中，通常需要根據信息的容量來選擇合理的內容形式來組織表單的內容形式，以此來確保信息屏效比和用戶的操作效率。

其中所謂“屏效”比是一個關于界面設計的一個概念，最初起源于諧音“坪效”，“坪效”指的是每坪的面積可以產出多少營業額（營業額/專柜所占總坪數），是一個市場營銷領域的概念，而界面設計中的“屏效”則是指屏幕單位時間、單位面積內的信息可以帶來多少商業效益/效率的提升。

依據表單的組織方式可以將其分為表單的組織形式分為三種，分別為：基礎布局、分組布局、分步驟布局。

1）基礎布局

基礎平鋪是最簡單的表單組織形式，將所有需要填寫的表單內容項直接羅列在頁面上。主要針對表單內容項較少且項目之間無邏輯關系不能按照一定的相關性進行分組的表單。

• 優勢：相對簡潔、便于操作，比較適用于完成一個簡單快捷的任務；
• 劣勢：表單項數量較大時一次性展示全部信息加重了用戶的操作負擔，填寫效率較低。
• 使用場景：當需要完成一個簡單快速的任務（表單條目數在7個內），比如：輸入少量信息即可完成創建、注冊登陸表單。

依據表單的尺寸或列數，可將平鋪方式分為單列平鋪和多列平鋪。

① 單列平鋪

• 優勢：路徑清晰，由上至下，填寫效率高、體驗好，操作順暢；
• 劣勢：占用縱向空間。

② 多列平鋪

• 優勢：節省頁面縱向空間，信息承載量較大，能夠放置更多的控件單元。
• 劣勢：“Z”字型的視覺動線較為復雜，填寫體驗不好，易出錯易遺漏。

2）分組表單

分組歸納是基礎平鋪的演進方式，也是基于基礎平鋪上的交互設計四法則之一“組織”的應用，在基礎平鋪的基礎上將表單項中相關聯的項目進行分組，顯得更有規律和組織性，即使表單項較多也不會顯得雜亂和壓抑，用戶在填寫表單時的心理壓力和視覺疲勞也會得到緩解，操作體驗也會更好。

依據視覺樣式可以有三種形式，分別為：標題分組、卡片分組和標簽分組。

• 優勢：將表單內容進行了分類歸組，便于快速定位，能夠減輕用戶填寫表單時的焦慮感和心理壓力；
• 劣勢：分組標題的添加進一步增加了頁面的垂直空間占用；
• 使用場景：適用于表單條目數在7個以上，且表單項之間存在關聯關系，具備分類歸納的基礎條件。

① 標題分組

標題分組是用文字標題對表單項進行分類，當表單的數據信息超過7個輸入域，同時關聯性沒有那么強且可以被分組時，用分組的方式幫用戶設置幾個休息點，讓用戶把要填寫表單的大任務拆解成幾個小任務來完成；緩解用戶在輸入上的心理壓力與視覺疲勞。

注意：分組內設置項要有強關聯性，否則不能歸為一組，不能因為字段多為了分組去分組。

標題分組對應的詳情展示：一項一項上下鋪出來，但如果表單詳情信息過長，可以考慮將錨點定位，點擊錨點定位的標題即可自動定位到該區域，方便用戶快速定位瀏覽位置。

② 卡片分組

卡片分組是在標題分組的基礎上給每個分組加上背景做成卡片的形式進行分組。

需要滿足數據內容體量很大（7-15個設置項）且超過一屏，關聯性更強、數據信息可被分類歸納時，用標題分組不足以給信息做層級區分，為了讓用戶在操作時更聚焦，同時也需要給用戶更明確的操作引導，可通過卡片分組的形式展示，對單獨的卡片進行命名。

注意：一個表單項不要分過多的卡片分組，不能每兩項做一個分組，這反而會造成用戶視覺壓力和操作負擔。

③ 標簽分組

當表單數據信息之間沒有特定的關聯性，可以并列單獨處理，且每個設置項都包含多個輸入域，且多個輸入域都使用了標題分組，為減少加載時間將表單分頁展現的情況下，布局就可以采用標簽頁布局進行展示操作。

標簽分組是以tab標簽頁的形式將不同分組的表單項進行并列分組的方式；這種方式一般比較少用，也不推薦，因為頁面上只能看到一個分組的內容，比較容易遺漏。

注意事項：

1. tab標簽的填寫沒有先后順序的規則，標簽頁彼此之間沒有特定的關聯性，可獨立去設置。也就是說先填寫tab1還是先填寫tab2，對表單的其他tab項沒有任何影響，不存在聯動關系。
2. 對表單信息的分類可以有效的降低視覺噪音，幫助用戶關注重要的填寫內容，根據表單數據信息的優先級進行分類，將優先級高的放在表單前面，優先級低的放在表單后面，或進行折疊收起。

具體該如何選擇呢？

1. 如果每個組之間有邏輯先后順序，那么推薦使用分步表單。
2. 如果每個組之間關聯性較強，就不適合分開，推薦使用錨點定位。
3. 如果每個組既沒有邏輯先后順序，也沒有關聯性時，推薦使用標簽分組。

3）基礎分步表單

步驟引導是將需要填寫的表單信息按照線性流程進行組織，配備步驟條告知用戶完整的流程和進度，在全部步驟表單填寫完整后確認信息，流程結束后給予用戶操作的結果及反饋。

• 優勢：任務流程清晰，明確當前用戶目標，減少用戶負擔；及時的反饋校驗，也避免填寫完成后才發現中間的表單填寫有誤，降低用戶的犯錯成本。
• 劣勢：無法通覽全部內容，每一步的回溯成本較高
• 適用場景：適用于具有明確線性邏輯的任務場景。

4）高級表單

高級表單適用于內容項復雜，多任務嵌套使用的場景，常見有動態表單、動態表格、折疊面板、彈窗/抽屜編輯等。

① 動態可編輯表單

表單內容項是不固定的，用戶可以按照實際業務需求對某些內容項進行動態增減。常見形式有一個固定的表單，通過增減按鈕可以設置表單數目，一般動態表單數目≤3，并且每個輸入框不需要單獨的標題使用。

② 可編輯表格

和動態表單的交互邏輯基本一致，外觀上是以表格形式展示，增減的動態數據數目建議3~6個。

建議條目表單數2~5項時使用，以使得每行內容可被完整呈現。

③ 折疊面板編輯

折疊面板：適用于表單中明顯嵌套子任務的模式，收起狀態下只讀子任務設置，展開狀態則可以對子任務的設置進行編輯修改。

建議條目表單數在6~8項時使用。

④ 規則樹

應用于規則編輯場景。適用于頁面中需要添加一個或多個對象，且每個對象都需要添加或編輯多組數據的情況。

⑤ 語句式表單

讓用戶在預設的結構來完成語句，常用于設置、編輯規則類表單，表單讀起來更友好更人性化。

2. 影響表單布局的要素

影響表單布局與構成元素選擇的幾個要素：

內容數量：內容的多少會影響設計所選擇的容器、內容布局；如果內容較多，除了布局還要考慮采用分組、分步等形式去有序組織信息。

復雜程度：表單邏輯也是伴隨內容的多少而同比增加的，內容少則關系相對簡單，內容多則關系復雜。

邏輯結構：常見的有串行結構（各表單內容之間是線性關系）、并列結構（有多組表單，各組是并列關系）、更復雜的甚至有串行與并行嵌套結合的結構。

所處容器：表單內容所處的容器有頁面、抽屜、彈窗、氣泡，容器所能承載內容的多少也在逐步減少。在設計中我們根據打斷感、與上一級關聯程度、內容復雜度進行容器選擇。

來源頁面關聯：如果與來源頁面關聯強，則建議使用彈窗、抽屜等容器，可以停留在之前操作頁面上，缺點則是用戶操作的沉浸感偏弱；如果與來源頁面關聯弱且信息量較大，則建議使用頁面，同時在頁面中填寫表單的沉浸感也會更強。

3. 如何判斷采用哪種布局方式

關于使用何種布局方式的判斷，應從信息的復雜度和關聯性兩個維度去梳理。根據信息的復雜度和相關性模型，選用相應的信息呈現方式，選用合理的布局方案來承載詳情頁的內容。

下圖是為了能更直觀的讓設計師明確面對不同復雜程度的表單如何設計，根據信息的復雜度和相關性模型來進行選擇。

（來源：Ant Design）

四、表單的交互形式

在B端產品中，大致可以將表單操作的交互方式分為6種，依據使用頻率從低到高分別為：原位編輯、側邊抽屜、氣泡卡片、新開頁面、浮層彈窗、頁面跳轉，在選擇交互方式的時候需要根據使用場景和業務需求。

1. 原位編輯

原位編輯是一種由內容展示演變而來的狀態，其編輯內容也為展示內容，單擊的時候切換為編輯狀態，可編輯內容，屬于輕量型的信息采集表單。

一般出現在表格或者卡片內，單個的字段展示（例如新建文檔標題等）也可能出現，正常情況下就是展示狀態，當鼠標懸浮時hover時提示可編輯，點擊字段內容或特定操作按鈕即激活為可編輯狀態。

• 優勢：快捷易操作，隨時啟用與退出，主流程的操作流暢度高。
• 劣勢：編輯狀態較為隱蔽，不宜被察覺，特殊狀態才會被觸發。
• 適用場景：適用于輸入內容較少，適用于頻率較低，同時屬于主流程分支的場景。

2. 氣泡卡片

氣泡卡片是一種類似于彈窗的對話框，但是比彈框要輕量很多，屬于超輕量的對話框，氣泡卡片內通常只包含一個輕量化的操作，允許用戶在當前界面快速對某一個操作進行編輯同時不需要打斷主任務流，可以隨取隨用，通常是非模態的，不對主頁面流程和操作具有阻斷性。

觸發生效機制可以是設置項點擊即生效，也可以多個設置項選擇后，觸發操作按鈕生效（操作按鈕建議不超過2個），觸發機制可以根據項目實際需求而定。

• 優勢：簡單快捷易操作、主流程的操作流暢度高。
• 劣勢：擴展性不強，承載的信息不易過多。
• 適用場景：適用于快速編輯和輸入的場景。常用于條件篩選的設置，點擊或hover后顯示氣泡卡片內容（建議不超過5個設置項）。

3. 抽屜編輯

抽屜彈窗也被稱為側彈窗，彈窗抽屜和彈窗很類似，使用場景和親密度都是一樣的。相比彈窗，抽屜的側邊彈出的交互方式，其操作成本和用戶使用心理負擔會小很多，流暢性次于原位編輯與氣泡卡片交互但但優于頁面跳轉。

通常在主視窗的局部位置滑動出現，占用整個窗口高度，抽屜的承載能力大于彈窗，根據數據信息選擇彈窗或抽屜，允許承載較長的表單內容。

和模態一樣，滑出的內容是與上下文存在關系的，允許用戶在主視窗中查看參考信息，建議條目表單數>8項時使用。

注意事項：如果系統大部分用的彈窗，就優先選用彈窗，如果表單內增加了更多字段，可以換成抽屜彈窗。

• 優勢：承載的信息量有較大的彈性空間。
• 劣勢：由于信息集中在一側，導致視覺焦點不穩定，如果長時間工作，會產生不平衡的感覺。
• 適用場景：適用于當前任務流中插入臨時任務的場景。

4. 新開頁面

新開頁面指的是保持當前頁面不變，在主頁面進行操作后在瀏覽器中新開標簽頁用以展示新頁面，瀏覽器停留的頁面可以是當前頁面也可以是新開的標簽頁。

• 優勢：頁面之間相互獨立，互補不干擾。
• 劣勢：用戶的焦點丟失，注意力分散（因為系統中大部分的操作在同一個頁面中完成）。
• 適用場景：適用于需要參照一些文檔來幫助用戶完成表單錄入操作的場景。

5. 窗口式表單（浮層彈窗）

彈窗交互是表單交互比較常見的交互方式，也具有較強的信息承載能力，同時拓展性也更強，在原位編輯與氣泡卡片無法滿足交互時選擇彈窗/抽屜交互，用戶在不離開當前頁面的情況下進行插入性操作，用戶也可隨時退出操作。

依據主頁面交互阻斷性可將彈窗分為模態彈窗和非模態彈窗兩種形式。

1）模態彈窗

模態彈窗以頁面對話框的形式呈現，體現頁面和彈窗之間的一種層級關系，激活彈窗時，用戶不能離開主頁面的流程，對主頁面的交互具有一定的阻斷性，不能繼續主頁面中的操作，必須關閉彈窗后才能繼續主頁面的操作。

• 優勢：簡單易操作，承載的信息量有較大的彈性空間
• 缺點：浮層彈窗給主操作流程造成較強的割裂，降低輸入的流暢度。
• 適用場景：適用于主流程步驟中需要分支任務的場景。

2）非模態彈窗

非模態彈窗指的是用戶在不離開主頁面的情況下，可在當前頁面中打開多個浮層彈窗并對其內容進行編輯；

激活彈窗時，用戶可以離開當前的主頁面及相關流程對彈窗內容進行編輯，同時隨時可以回到主頁面及相關流程繼續操作，和模態彈窗的主要區別是對主頁面流程沒有阻斷性。

• 優勢：同時進行多個操作，阻斷性弱。
• 劣勢：學習成本高，容易產生混亂，誤操作概率高。
• 適用場景：適用于多任務處理情況有較高的要求的場景。

6. 頁面跳轉

新頁面為當前頁面的分支流程，不會干涉用戶對于主頁面的操作，頁面功能是獨立的。

如果是初始化類型操作，超出了彈窗/抽屜的承載量，涉及錄入內容比較多的時候，有大量的信息要一項一項審核，就建議跳轉到頁面再進行新的操作，跳轉頁面體量較大，頁面更加穩定。

• 優勢：信息承載能力強；有利于用戶對業務流程有更清晰的認識，從而使得主流程的操作流暢度高。
• 劣勢：輸入字段較多，難于給予及時性反饋。
• 適用場景：適用于特別重要的功能表單的填寫場景。

7. 如何選擇表單交互方式

首先第一原則：不濫用表單的交互形式。

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

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

根據內容的多少及親密程度來決定，我們設計時應選用哪種交互方式，或者可以直接根據內容承載量做判斷也是可以的，從少到多依次為：氣泡卡片 – 原位編輯 – 彈窗 – 抽屜 – 頁面跳轉- 新開頁面。

具體選擇：

1. 當信息復雜度低，同時相關性高時，我們可以選擇原位編輯/氣泡卡片、彈窗的交互方式。
2. 當信息復雜度高，但關聯性也較高時，我們可以使用抽屜、全屏彈窗的交互方式。
3. 當信息復雜度高或信息獨立時，我們可以使用頁面的交互方式。

關于不同交互方式的特點：

• 氣泡卡片：承載內容比較少，直觀，即見即所得。
• 彈窗：通過小面積的彈窗進行輕量化的編輯，方便快速進行增、刪、改、查；輸入項較少，一般不會有滾動條。
• 抽屜：與彈窗式相似，通過小面積的側邊欄進行編輯；可承載比彈窗更復雜一些的表單內容，可以有滾動條。
• 頁面跳轉：最常用方式，適用于絕大部分的表單，支持構建復雜的表單。

五、最后

1. 表單頁面要考慮適配方式

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

1）固定適配

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

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

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

1）間距適配

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

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

2. 總結

關于表單設計其實還有很多可以深挖的空間，不管是To C 還是To B，都是為了實現用戶的需求、幫用戶解決問題。

我自己剛接觸B端產品的時候，還是習慣性的希望能把產品做的美觀，“高大上”。后來在工作中慢慢地發現每個項目的背后思考更為重要，把更多的精力投入到沉淀行業知識、研究產品架構、梳理交互方式和創新視覺表現上，輔助業務挖掘，為誰而設計很重要，從趨于相同的表象中找到產品獨有的閃光點，從而切實解決問題。

以上便是個人對表單設計經驗總結和方法沉淀，以及對部分問題的理解和分析，有不足或疏漏的地方的歡迎交流或留言補充。

長達16000+字，文章很長，感謝您的耐心閱讀。希望能夠通過這篇文章給到大家更多的啟發。文章中如果有不嚴謹、錯誤的地方希望大家給予指正。

下期預告：全方位解析在表單設計中，常見的設計疑問？

參考文獻：

1. 來源鏈接：https://ant.design/docs/spec/research-form-cn（來源：Ant Design）
2. 表單設計需要注意 http://t.cn/EhMmZPf
3. 表單設計http://www.aharts.cn/pd/4147841.html
4. 《Ant Design表單設計》來源鏈接：https://ant.design/docs/spec/research-form-cn
5. 《web表單設計》