當(dāng)前位置：首頁(yè) >UI設(shè)計(jì) >B端UI交互界面基礎(chǔ)組件:表單

B端UI交互界面基礎(chǔ)組件:表單

發(fā)布時(shí)間：2024-01-18 18:58:07 瀏覽量：237次

編輯導(dǎo)讀：在前一篇文章《B端UI界面交互基礎(chǔ)組件-表格》中，一起學(xué)習(xí)了B端“表格”組件UI設(shè)計(jì)規(guī)范，其中包括“基礎(chǔ)表格”、“分屏加載表格”、“分頁(yè)加載表格”；并從表格組件的需求場(chǎng)景、內(nèi)容布局以及交互方式等方面對(duì)以上組件進(jìn)行了詳盡的規(guī)范描述；今天我們繼續(xù)介紹了B端“表單”組件的交互規(guī)范。

一、基礎(chǔ)表單

1.1 需求場(chǎng)景

需要用戶(hù)進(jìn)行相關(guān)數(shù)據(jù)配置，并完成相應(yīng)數(shù)據(jù)提交。

1.2 內(nèi)容布局

根據(jù)功能需要，分為表單配置項(xiàng)區(qū)域，配置匯總、操作按鈕：

常規(guī)配置表單內(nèi)容區(qū)域根據(jù)實(shí)際內(nèi)容進(jìn)行排布，相應(yīng)布局遵循文本、標(biāo)準(zhǔn)空間相應(yīng)規(guī)范

表單配置項(xiàng)層級(jí)分為：配置分類(lèi)標(biāo)簽、配置項(xiàng)、配置項(xiàng)子級(jí)

配置分類(lèi)標(biāo)簽：標(biāo)簽文本局左對(duì)齊，一般在長(zhǎng)表單中盡量使用配置分類(lèi)

配置項(xiàng)：在表單中存在配置分類(lèi)標(biāo)簽時(shí)，配置項(xiàng)內(nèi)容換行縮進(jìn)顯示；配置項(xiàng)文本標(biāo)簽居左對(duì)齊：

配置項(xiàng)子級(jí)：配置項(xiàng)子級(jí)配置內(nèi)容與配置項(xiàng)配置內(nèi)容區(qū)域左對(duì)齊，配置項(xiàng)子級(jí)配置標(biāo)簽居左對(duì)齊，以縱向最配置標(biāo)簽占位最長(zhǎng)的寬度為準(zhǔn)：

表單配置匯總需要根據(jù)業(yè)務(wù)需要與內(nèi)容項(xiàng)數(shù)量確定是否需要顯示，一般在常規(guī)約定的最小正常顯示的分辨率下，無(wú)法通過(guò)一屏將所有配置項(xiàng)內(nèi)容展示的表單，建議提供配置匯總展示：

配置匯總內(nèi)容局左顯示，不同配置分類(lèi)下的配置項(xiàng)用一定的視覺(jué)表現(xiàn)進(jìn)行分組顯示（如使用橫線）

表單項(xiàng)操作按鈕布局根據(jù)表單所處外部環(huán)境需要進(jìn)行調(diào)整，常規(guī)內(nèi)容如下:

表單有配置分類(lèi)項(xiàng)：

表單無(wú)配置分類(lèi)項(xiàng)：

1.3 交互行為

表單初始狀態(tài)下，表單所有配置項(xiàng)均不執(zhí)行格式合法性檢查提示，表單配置下發(fā)按鈕默認(rèn)設(shè)置為禁用狀態(tài)。

表單中存在必填項(xiàng)未填寫(xiě)會(huì)配置項(xiàng)未通過(guò)合法性檢查時(shí)，表單配置下發(fā)按鈕置為禁用狀態(tài)。

當(dāng)表單中所有必填配置項(xiàng)完成配置且通過(guò)格式合法性檢查，表單配置下發(fā)按鈕置為可用狀態(tài)。

通過(guò)后臺(tái)數(shù)據(jù)有效性校驗(yàn)返回為未通過(guò)時(shí)，對(duì)應(yīng)配置項(xiàng)狀態(tài)標(biāo)注為合法性檢查未通過(guò)，配置下發(fā)按鈕為不可用狀態(tài)。

點(diǎn)擊表單配置下發(fā)操作時(shí)，執(zhí)行表單合法性校驗(yàn)，如表單中有合法性檢查未通過(guò)配置項(xiàng)，則自動(dòng)跳轉(zhuǎn)到順序第一個(gè)不合法配置項(xiàng)，操作下發(fā)終止。

二、全頁(yè)表單

2.1 需求場(chǎng)景

需要用戶(hù)進(jìn)行相關(guān)數(shù)據(jù)配置，并完成像一個(gè)數(shù)據(jù)提交。
表單配置項(xiàng)較多，信息量較大。
表單有較大的可用空間防止內(nèi)容。

2.2 內(nèi)容布局

整體區(qū)域分布與基礎(chǔ)表單分布相同。

在整體區(qū)域表單橫向區(qū)域空間較大時(shí)，合法性校驗(yàn)規(guī)則或補(bǔ)充說(shuō)明說(shuō)明可以放置到輸入框右側(cè)顯示：

表單初始狀態(tài)下，不執(zhí)行合法性檢查，表單數(shù)據(jù)下發(fā)操作按鈕默認(rèn)設(shè)置為可用狀態(tài)：

當(dāng)表單輸入項(xiàng)光標(biāo)移除時(shí)，或點(diǎn)擊數(shù)據(jù)下發(fā)或操作按鈕時(shí)，進(jìn)行合法性檢查，標(biāo)注下不合法配置項(xiàng)，并將光標(biāo)自動(dòng)定位到第一個(gè)不合法的輸入項(xiàng)，操作按鈕保持可用狀態(tài)：