前言

在 B 端設(shè)計中，表單設(shè)計是常見的需求設(shè)計，對于 B 端來說，表單的信息復雜程度會根據(jù)業(yè)務的實際情況而定，常見的簡單表單設(shè)計只需要將表單的字段平鋪在頁面中，用戶輸入相關(guān)信息即可完成表單的任務。但是在 B 端的實際業(yè)務中，表單的需求有簡單也有非常復雜的場景，如果都采用簡單的平鋪方式，必定會讓表單填寫任務變得難以操作。對于不同的表單模式使用的業(yè)務場景不同，表單的呈現(xiàn)方式也具有多種選擇，并且適用的場景也不同。下面我總結(jié)了三種不同的表單展示方式，四種表單的呈現(xiàn)方式以及應用場景。

表單設(shè)計的 3 大模式

1. 平鋪

平鋪：指的是將表單信息完整的排版在界面中。

無論是在 B 端還是 C 端設(shè)計中，平鋪的表單設(shè)計是最常見的，這樣的表單用戶可以一覽看全所有表單的信息（但是對于表單字段多且復雜的場景，平鋪也不能一覽所有）。所以對于平鋪的表單設(shè)計而言，一般是針對表單信息簡單且字段信息較少的情況，如果字段信息小于兩屏且字段信息強相關(guān)，那么我們可以選擇采用平鋪的表單設(shè)計方式。

例如：飛書的審批表單頁面設(shè)計就是采用平鋪的設(shè)計方式

2. 分組

表單的第二種設(shè)計方式是分組，分組的排版方式又可以細分為三種方式。分別是：折疊分組、區(qū)域分組、標題分組。下面分別介紹了三種分組的詳情。

折疊分組

折疊分組：指的是將表單信息分類顯示，通過點擊按鈕展開和收起表單的具體信息。

在 B 端設(shè)計中，會存在很多設(shè)置類表單設(shè)計，最常見的圖表數(shù)據(jù)和樣式外觀設(shè)置，對于一個圖表而言，會讓用戶自定義圖表的各種信息設(shè)置，并且需要在一個表單中顯示完整圖表設(shè)計所涉及到的范圍，所以大多數(shù)都會采用折疊分組的形式。

折疊分組用戶可以一眼看全表單所涉及到的大范圍，用戶鎖定某個標題范圍后，再展開去完善對應的具體表單信息，這樣用戶就可以不用在龐大的表單信息中去尋找自己需要完成的表單信息。折疊表單一般會包含一些默認的數(shù)值，用戶可不做調(diào)整，不調(diào)整也不會影響功能的使用。如果說表單信息需要用戶手動完整的填寫或者確認，那么最好不要選擇這種表單的設(shè)計方式。

例如：Grafana 的自定義 BI 圖表設(shè)置信息就采用了折疊的表單形式

區(qū)域分組

區(qū)域分組：指的是將表單信息分類顯示，通過矩形背景劃分區(qū)域，形成小組表單信息。

在 B 端設(shè)計中，一些復雜的表單會通過區(qū)域分組的形式排版設(shè)計，可以將一個表單的信息通過信息的關(guān)聯(lián)關(guān)系劃分不同的區(qū)域形成小組信息，這樣有利于信息的歸類以及信息的填寫。用戶在看到復雜表單的時候不會被龐大的表單迷惑，可以更好的找到表單字段，也可以讓用戶填寫表單更有秩序、更清晰。區(qū)域分組的使用場景，一般也是針對復雜表單且具有強相關(guān)的信息關(guān)系。

例如：下面是我在工作中所運用的一個區(qū)域分組的表單設(shè)計方式。

標簽分組

標簽分組：指的是將表單信息分組標簽化，形成獨立的小表單信息，分為上下結(jié)構(gòu)和左右結(jié)構(gòu)。

上下結(jié)構(gòu)

左右結(jié)構(gòu)

復雜的表單可以采用區(qū)域分組的形式，還可以采用標簽分組的設(shè)計形式。標簽分組可以一眼看全所有分組大類信息，對于一個表單涉及到多種信息字段的情況，并且每個組的字段信息都是獨立的，不是強相關(guān)的，那么我們就可以采用標簽分組的形式。標簽分組可以直接點擊標簽快速定位到想要查看和填寫的表單區(qū)域，這樣使用戶操作更加快速便捷。并且也讓龐大的表單信息得到更好的整理，讓用戶使用更方便，可降低用戶對于龐大表單信息的焦慮感。

下面可以看一下在 B 端產(chǎn)品中我對于一些復雜表單標簽分組的設(shè)計方式。

3. 分頁

分頁：指的是將整個表單信息通過多頁的形式展示。

分頁表單設(shè)計一般會針對具有步驟前后順序關(guān)系的表單。也就是指需要先完成上一步表單信息才能進入到下一步的表單頁面，形成一個完整的閉環(huán)流程才能使表單信息提交成功。

同樣的，下面截圖為 B 端實際業(yè)務工作中的一個分頁表單設(shè)計頁面，因為業(yè)務的保密性，所以就不做太多的業(yè)務信息，只需要看到分頁表單的一個實際設(shè)計場景即可。

表單的 4 大呈現(xiàn)方式及使用場景

1. 彈窗（對于信息較少的表單）

最常見的表單呈現(xiàn)方式即彈窗，無論是在 C 端還是 B 端，我們都隨處可見彈窗形式的表單。彈窗表單一般呈現(xiàn)在屏幕中間，底部有暗色遮罩層，將底部信息與彈窗表單隔離，使用戶專注于表單的填寫。彈窗模式的表單一般是針對表單信息較少的情況，并且填寫表單不需要關(guān)注底部頁面的信息。用戶可以在彈窗表單中順利地完成表單的任務。

案例：

2. 抽屜（內(nèi)容信息較多，且與底部信息強關(guān)聯(lián)）

抽屜形式的表單一般是針對表單信息較多且與底部信息具有強相關(guān)的關(guān)系。用戶在填寫表單時需要根據(jù)底部信息的輔助完成，或者需要同時操作底部面板中的相關(guān)信息，來協(xié)助完成表單信息及讓交互使用更方便。

抽屜形式的表單展示方式是從屏幕右側(cè)彈出，有時候也會有從底部彈出的情況。這里主要分享從右側(cè)彈出的抽屜表單模式，抽屜模式還分為三種模式：有遮罩層的抽屜模式、無遮罩層的抽屜模式、擠壓模式。

下面分別介紹這三種模式的區(qū)別以及使用場景。

有遮罩層的抽屜模式

有遮罩層的抽屜模式指的是抽屜底部有暗色遮罩層，將抽屜表單信息與底部頁面信息隔離，這里的遮罩層與上面彈窗中的遮罩層是同樣的作用。那么就有人有疑問了，既然都是有遮罩層具有同樣的隔離作用，那為什么要從右側(cè)彈出，而不直接和彈窗一樣展示在屏幕中間呢？

有遮罩層的右側(cè)抽屜模式的表單具有以下特點：

01：右側(cè)抽屜出現(xiàn)位置在屏幕的右側(cè)，雖然有遮罩層，但是仍然可以看到遮罩層底部頁面的相關(guān)信息，如果在填寫表單的同時需要關(guān)注底部信息，并為填寫表單做輔助，那么右側(cè)抽屜表單模式比常規(guī)的彈窗模式更適合。

02：右側(cè)抽屜模式的表單面積更大，更適用于復雜表單的呈現(xiàn)，可以展示更多的信息。

案例：

無遮罩層的抽屜模式

無遮罩層的抽屜模式指的是抽屜底部沒有暗色遮罩層，抽屜直接浮在底部內(nèi)容之上，一般通過對抽屜背景做投影來區(qū)分底部內(nèi)容與抽屜內(nèi)容，讓兩者之間能更清晰地辨別使用。

無遮罩層的右側(cè)抽屜模式的表單具有以下特點：

01：與有遮罩層的模式一樣具有可根據(jù)底部信息輔助完成表單信息的填寫的特點。

02：適用于復雜表單且可以展示更多的字段信息。

03：另外有一個更加重要的特點是：由于底部內(nèi)容是沒有遮擋層，所以用戶還可以同時操作底部頁面，使用戶切換信息更便捷，使用效率得到提高。

案例：

3. 擠壓模式

擠壓模式指的是表單信息從右側(cè)出現(xiàn)，將原本畫布的內(nèi)容區(qū)域?qū)挾葴p小，從而展示右側(cè)表單。這樣的展示方式界面需要做適配，做到畫面中的元素自動適配畫布大小，以滿足正常的閱讀和使用。

擠壓模式與上面的無遮罩層的抽屜模式具有相同的特點，另外擠壓模式還具有可以完整看到原本界面中的內(nèi)容，右側(cè)表單可以自由展開和收起。

但是對于表單信息龐大且復雜的業(yè)務情況就不太適用于右側(cè)擠壓的模式，因為表單寬度占據(jù)太多會影響原本界面內(nèi)容的展示，原本內(nèi)容會因為寬度區(qū)域太小而布局錯亂的問題，如果因為右側(cè)擠壓的表單出現(xiàn)而改變原有界面內(nèi)容的布局，對于用戶而言使用也不太友好。

案例：

4. 頁面（單獨表單填寫，且信息量較多）

當表單信息龐大且與原界面無強相關(guān)的可以直接采用新頁面呈現(xiàn)。使表單單獨成頁更好地展示表單信息減少其它信息的干擾。

案例：

總結(jié)

B 端的業(yè)務比較復雜，不同的表單信息的復雜程度有所不同，需要根據(jù)實際業(yè)務的情況合理地選擇表單的展示方式，也需要考慮用戶的使用場景以及業(yè)務表單的關(guān)聯(lián)關(guān)系。

簡單且不具有強相關(guān)的表單可選擇平鋪，呈現(xiàn)方式可選擇彈窗；復雜且具有強相關(guān)的表單可選擇區(qū)域分組，呈現(xiàn)方式可選擇無遮罩層抽屜/擠壓；復雜且不具有強相關(guān)的可選擇標簽分組，呈現(xiàn)方式可選擇有遮罩層抽屜；具有先后順序的則選擇分頁，表單信息獨立可選擇分頁的呈現(xiàn)方式（并非強制的表單設(shè)計選擇方式，需要合理考慮業(yè)務哦?。?

作者：設(shè)計小余