欧美videos另类精品-欧美videos另类极品-欧美vide-欧美va在线视频-欧美va在线观看-欧美va在线播放免费观看

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

2023-8-16 鶴鶴

前言

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

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

一：平鋪

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

無(wú)論是在B端還是C端設(shè)計(jì)中，平鋪的表單設(shè)計(jì)是最常見(jiàn)的，這樣的表單用戶(hù)可以一覽看全所有表單的信息（但是對(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ù)和樣式外觀(guān)設(shè)置，對(duì)于一個(gè)圖表而言，會(huì)讓用戶(hù)自定義圖表的各種信息設(shè)置，并且需要在一個(gè)表單中顯示完整圖表設(shè)計(jì)所涉及到的范圍，所以大多數(shù)都會(huì)采用折疊分組的形式。

折疊分組用戶(hù)可以一眼看全表單所涉及到的大范圍，用戶(hù)鎖定某個(gè)標(biāo)題范圍后，再展開(kāi)去完善對(duì)應(yīng)的具體表單信息，這樣用戶(hù)就可以不用在龐大的表單信息中去尋找自己需要完成的表單信息。折疊表單一般會(huì)包含一些默認(rèn)的數(shù)值，用戶(hù)可不做調(diào)整，不調(diào)整也不會(huì)影響功能的使用。如果說(shuō)表單信息需要用戶(hù)手動(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ě)。用戶(hù)在看到復(fù)雜表單的時(shí)候不會(huì)被龐大的表單迷惑，可以更好的找到表單字段，也可以讓用戶(hù)填寫(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ū)域，這樣使用戶(hù)操作更加快速便捷。并且也讓龐大的表單信息得到更好的整理，讓用戶(hù)使用更方便，可降低用戶(hù)對(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)在屏幕中間，底部有暗色遮罩層，將底部信息與彈窗表單隔離，使用戶(hù)專(zhuān)注于表單的填寫(xiě)。彈窗模式的表單一般是針對(duì)表單信息較少的情況，并且填寫(xiě)表單不需要關(guān)注底部頁(yè)面的信息。用戶(hù)可以在彈窗表單中順利地完成表單的任務(wù)。
案例：

二：抽屜（內(nèi)容信息較多，且與底部信息強(qiáng)關(guān)聯(lián)）
抽屜形式的表單一般是針對(duì)表單信息較多且與底部信息具有強(qiáng)相關(guān)的關(guān)系。用戶(hù)在填寫(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)有遮擋層，所以用戶(hù)還可以同時(shí)操作底部頁(yè)面，使用戶(hù)切換信息更便捷，使用效率得到提高。

案例：

三：擠壓模式

擠壓模式指的是表單信息從右側(cè)出現(xiàn)，將原本畫(huà)布的內(nèi)容區(qū)域?qū)挾葴p小，從而展示右側(cè)表單。這樣的展示方式界面需要做適配，做到畫(huà)面中的元素自動(dòng)適配畫(huà)布大小，以滿(mǎn)足正常的閱讀和使用。
擠壓模式與上面的無(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ì)于用戶(hù)而言使用也不太友好。

案例：

四：頁(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è)更好地展示表單信息減少其它信息的干擾。

案例：