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

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

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

三、表單的布局形式

1. 常見的表單布局

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

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

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

1）基礎(chǔ)布局

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

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

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

① 單列平鋪

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

② 多列平鋪

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

2）分組表單

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

依據(jù)視覺樣式可以有三種形式，分別為：標(biāo)題分組、卡片分組和標(biāo)簽分組。

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

① 標(biāo)題分組

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

注意：分組內(nèi)設(shè)置項要有強(qiáng)關(guān)聯(lián)性，否則不能歸為一組，不能因為字段多為了分組去分組。

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

② 卡片分組

卡片分組是在標(biāo)題分組的基礎(chǔ)上給每個分組加上背景做成卡片的形式進(jìn)行分組。

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

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

③ 標(biāo)簽分組

當(dāng)表單數(shù)據(jù)信息之間沒有特定的關(guān)聯(lián)性，可以并列單獨處理，且每個設(shè)置項都包含多個輸入域，且多個輸入域都使用了標(biāo)題分組，為減少加載時間將表單分頁展現(xiàn)的情況下，布局就可以采用標(biāo)簽頁布局進(jìn)行展示操作。

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

注意事項：

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

具體該如何選擇呢？

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

3）基礎(chǔ)分步表單

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

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

4）高級表單

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

① 動態(tài)可編輯表單

表單內(nèi)容項是不固定的，用戶可以按照實際業(yè)務(wù)需求對某些內(nèi)容項進(jìn)行動態(tài)增減。常見形式有一個固定的表單，通過增減按鈕可以設(shè)置表單數(shù)目，一般動態(tài)表單數(shù)目≤3，并且每個輸入框不需要單獨的標(biāo)題使用。

② 可編輯表格

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

建議條目表單數(shù)2~5項時使用，以使得每行內(nèi)容可被完整呈現(xiàn)。

③ 折疊面板編輯

折疊面板：適用于表單中明顯嵌套子任務(wù)的模式，收起狀態(tài)下只讀子任務(wù)設(shè)置，展開狀態(tài)則可以對子任務(wù)的設(shè)置進(jìn)行編輯修改。

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

④ 規(guī)則樹

應(yīng)用于規(guī)則編輯場景。適用于頁面中需要添加一個或多個對象，且每個對象都需要添加或編輯多組數(shù)據(jù)的情況。

⑤ 語句式表單

讓用戶在預(yù)設(shè)的結(jié)構(gòu)來完成語句，常用于設(shè)置、編輯規(guī)則類表單，表單讀起來更友好更人性化。

2. 影響表單布局的要素

影響表單布局與構(gòu)成元素選擇的幾個要素：

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

復(fù)雜程度：表單邏輯也是伴隨內(nèi)容的多少而同比增加的，內(nèi)容少則關(guān)系相對簡單，內(nèi)容多則關(guān)系復(fù)雜。

邏輯結(jié)構(gòu)：常見的有串行結(jié)構(gòu)（各表單內(nèi)容之間是線性關(guān)系）、并列結(jié)構(gòu)（有多組表單，各組是并列關(guān)系）、更復(fù)雜的甚至有串行與并行嵌套結(jié)合的結(jié)構(gòu)。

所處容器：表單內(nèi)容所處的容器有頁面、抽屜、彈窗、氣泡，容器所能承載內(nèi)容的多少也在逐步減少。在設(shè)計中我們根據(jù)打斷感、與上一級關(guān)聯(lián)程度、內(nèi)容復(fù)雜度進(jìn)行容器選擇。

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

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

關(guān)于使用何種布局方式的判斷，應(yīng)從信息的復(fù)雜度和關(guān)聯(lián)性兩個維度去梳理。根據(jù)信息的復(fù)雜度和相關(guān)性模型，選用相應(yīng)的信息呈現(xiàn)方式，選用合理的布局方案來承載詳情頁的內(nèi)容。

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

（來源：Ant Design）

四、表單的交互形式

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

1. 原位編輯

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

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

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

2. 氣泡卡片

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

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

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

3. 抽屜編輯

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

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

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

注意事項：如果系統(tǒng)大部分用的彈窗，就優(yōu)先選用彈窗，如果表單內(nèi)增加了更多字段，可以換成抽屜彈窗。

• 優(yōu)勢：承載的信息量有較大的彈性空間。
• 劣勢：由于信息集中在一側(cè)，導(dǎo)致視覺焦點不穩(wěn)定，如果長時間工作，會產(chǎn)生不平衡的感覺。
• 適用場景：適用于當(dāng)前任務(wù)流中插入臨時任務(wù)的場景。

4. 新開頁面

新開頁面指的是保持當(dāng)前頁面不變，在主頁面進(jìn)行操作后在瀏覽器中新開標(biāo)簽頁用以展示新頁面，瀏覽器停留的頁面可以是當(dāng)前頁面也可以是新開的標(biāo)簽頁。

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

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

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

依據(jù)主頁面交互阻斷性可將彈窗分為模態(tài)彈窗和非模態(tài)彈窗兩種形式。

1）模態(tài)彈窗

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

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

2）非模態(tài)彈窗

非模態(tài)彈窗指的是用戶在不離開主頁面的情況下，可在當(dāng)前頁面中打開多個浮層彈窗并對其內(nèi)容進(jìn)行編輯；

激活彈窗時，用戶可以離開當(dāng)前的主頁面及相關(guān)流程對彈窗內(nèi)容進(jìn)行編輯，同時隨時可以回到主頁面及相關(guān)流程繼續(xù)操作，和模態(tài)彈窗的主要區(qū)別是對主頁面流程沒有阻斷性。

• 優(yōu)勢：同時進(jìn)行多個操作，阻斷性弱。
• 劣勢：學(xué)習(xí)成本高，容易產(chǎn)生混亂，誤操作概率高。
• 適用場景：適用于多任務(wù)處理情況有較高的要求的場景。

6. 頁面跳轉(zhuǎn)

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

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

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

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

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

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

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

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

具體選擇：

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

關(guān)于不同交互方式的特點：

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

五、最后

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

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

1）固定適配

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

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

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

1）間距適配

和移動端類似，間距固定，組件自適應(yīng)。

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

2. 總結(jié)

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

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

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

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

下期預(yù)告：全方位解析在表單設(shè)計中，常見的設(shè)計疑問？

參考文獻(xiàn)：

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