【B端設(shè)計(jì)】表單設(shè)計(jì)的模式及使用場(chǎng)景

2022-4-17 ui設(shè)計(jì)分享達(dá)人

一：平鋪

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

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

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

二：分組

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

01：折疊分組

折疊分組：指的是將表單信息分類(lèi)顯示，通過(guò)點(diǎn)擊按鈕展開(kāi)和收起表單的具體信息。

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

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

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

02：區(qū)域分組

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

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

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

03：標(biāo)簽分組

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

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

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

復(fù)雜的表單可以采用區(qū)域分組的形式，還可以采用標(biāo)簽分組的設(shè)計(jì)形式。標(biāo)簽分組可以一眼看全所有分組大類(lèi)信息，對(duì)于一個(gè)表單涉及到多種信息字段的情況，并且每個(gè)組的字段信息都是獨(dú)立的，不是強(qiáng)相關(guān)的，那么我們就可以采用標(biāo)簽分組的形式。

標(biāo)簽分組可以直接點(diǎn)擊標(biāo)簽快速定位到想要查看和填寫(xiě)的表單區(qū)域，這樣使用戶操作更加快速便捷。并且也讓龐大的表單信息得到更好的整理，讓用戶使用更方便，可降低用戶對(duì)于龐大表單信息的焦慮感。

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

三：分頁(yè)

分頁(yè)：指的是將整個(gè)表單信息通過(guò)多頁(yè)的形式展示。

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

同樣的，下面截圖為B端實(shí)際業(yè)務(wù)工作中的一個(gè)分頁(yè)表單設(shè)計(jì)頁(yè)面，因?yàn)闃I(yè)務(wù)的保密性，所以就不做太多的業(yè)務(wù)信息，只需要看到分頁(yè)表單的一個(gè)實(shí)際設(shè)計(jì)場(chǎng)景即可。

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

一：彈窗（對(duì)于信息較少的表單）

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

案例：

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

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

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

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

有遮罩層的抽屜模式

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

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

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

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

案例：

無(wú)遮罩層的抽屜模式

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

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

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

02:適用于復(fù)雜表單且可以展示更多的字段信息。

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

案例：

三：擠壓模式

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

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

但是對(duì)于表單信息龐大且復(fù)雜的業(yè)務(wù)情況就不太適用于右側(cè)擠壓的模式，因?yàn)楸韱螌挾日紦?jù)太多會(huì)影響原本界面內(nèi)容的展示，原本內(nèi)容會(huì)因?yàn)閷挾葏^(qū)域太小而布局錯(cuò)亂的問(wèn)題，如果因?yàn)橛覀?cè)擠壓的表單出現(xiàn)而改變?cè)薪缑鎯?nèi)容的布局，對(duì)于用戶而言使用也不太友好。

案例：

四：頁(yè)面（單獨(dú)表單填寫(xiě)，且信息量較多）

上一期已經(jīng)分享過(guò)關(guān)于分頁(yè)展示的表單模式，其實(shí)和這里的頁(yè)面展示類(lèi)似，當(dāng)表單信息龐大且與原界面無(wú)強(qiáng)相關(guān)的可以直接采用新頁(yè)面呈現(xiàn)。使表單單獨(dú)成頁(yè)更好地展示表單信息減少其它信息的干擾。

案例：