起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識B端UI交互界面基礎(chǔ)組件：表單
編輯導(dǎo)讀：在前一篇文章《B端UI界面交互基礎(chǔ)組件-表格》中，一起學(xué)習(xí)了B端“表格”組件UI設(shè)計規(guī)范，其中包括“基礎(chǔ)表格”、“分屏加載表格”、“分頁加載表格”；并從表格組件的需求場景、內(nèi)容布局以及交互方式等方面對以上組件進(jìn)行了詳盡的規(guī)范描述；今天我們繼續(xù)介紹了B端“表單”組件的交互規(guī)范。
一、基礎(chǔ)表單
1.1 需求場景
需要用戶進(jìn)行相關(guān)數(shù)據(jù)配置，并完成相應(yīng)數(shù)據(jù)提交。
1.2 內(nèi)容布局
根據(jù)功能需要，分為表單配置項區(qū)域，配置匯總、操作按鈕：
常規(guī)配置表單內(nèi)容區(qū)域根據(jù)實際內(nèi)容進(jìn)行排布，相應(yīng)布局遵循文本、標(biāo)準(zhǔn)空間相應(yīng)規(guī)范
表單配置項層級分為：配置分類標(biāo)簽、配置項、配置項子級
配置分類標(biāo)簽：標(biāo)簽文本局左對齊，一般在長表單中盡量使用配置分類
配置項：在表單中存在配置分類標(biāo)簽時，配置項內(nèi)容換行縮進(jìn)顯示；配置項文本標(biāo)簽居左對齊：
配置項子級：配置項子級配置內(nèi)容與配置項配置內(nèi)容區(qū)域左對齊，配置項子級配置標(biāo)簽居左對齊，以縱向最配置標(biāo)簽占位最長的寬度為準(zhǔn)：
表單配置匯總需要根據(jù)業(yè)務(wù)需要與內(nèi)容項數(shù)量確定是否需要顯示，一般在常規(guī)約定的最小正常顯示的分辨率下，無法通過一屏將所有配置項內(nèi)容展示?的表單，建議提供配置匯總展示：
配置匯總內(nèi)容局左顯示，不同配置分類下的配置項用一定的視覺表現(xiàn)進(jìn)行分組顯示（如使用橫線）
表單項操作按鈕布局根據(jù)表單所處外部環(huán)境需要進(jìn)行調(diào)整，常規(guī)內(nèi)容如下:
表單有配置分類項：
表單無配置分類項：
1.3 交互行為
表單初始狀態(tài)下，表單所有配置項均不執(zhí)行格式合法性檢查提示，表單配置下發(fā)按鈕默認(rèn)設(shè)置為禁用狀態(tài)。
表單中存在必填項未填寫會配置項未通過合法性檢查時，表單配置下發(fā)按鈕置為禁用狀態(tài)。
當(dāng)表單中所有必填配置項完成配置且通過格式合法性檢查，表單配置下發(fā)按鈕置為可用狀態(tài)。
通過后臺數(shù)據(jù)有效性校驗返回為未通過時，對應(yīng)配置項狀態(tài)標(biāo)注為合法性檢查未通過，配置下發(fā)按鈕為不可用狀態(tài)。
點擊表單配置下發(fā)操作時，執(zhí)行表單合法性校驗，如表單中有合法性檢查未通過配置項，則自動跳轉(zhuǎn)到順序第一個不合法配置項，操作下發(fā)終止。
二、全頁表單
2.1 需求場景
- 需要用戶進(jìn)行相關(guān)數(shù)據(jù)配置，并完成像一個數(shù)據(jù)提交。
- 表單配置項較多，信息量較大。
- 表單有較大的可用空間防止內(nèi)容。
2.2 內(nèi)容布局
整體區(qū)域分布與基礎(chǔ)表單分布相同。
在整體區(qū)域表單橫向區(qū)域空間較大時，合法性校驗規(guī)則或補充說明說明可以放置到輸入框右側(cè)顯示：
表單初始狀態(tài)下，不執(zhí)行合法性檢查，表單數(shù)據(jù)下發(fā)操作按鈕默認(rèn)設(shè)置為可用狀態(tài)：
當(dāng)表單輸入項光標(biāo)移除時，或點擊數(shù)據(jù)下發(fā)或操作按鈕時，進(jìn)行合法性檢查，標(biāo)注下不合法配置項，并將光標(biāo)自動定位到第一個不合法的輸入項，操作按鈕保持可用狀態(tài)：
存在合法性炎癥未通過的表單，表單數(shù)據(jù)不允許下發(fā)。
三、總結(jié)
關(guān)于B端基礎(chǔ)交互組件“表單”的相關(guān)分享就到這里，下一章我們介紹“會話框”包括基礎(chǔ)信息會話框、提示信息會話框、行為確認(rèn)會話框、配置會話框的相關(guān)交互規(guī)范。
本文由 @云計算產(chǎn)品汪 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自 unsplash，基于 CC0 協(xié)議
好多錯別字，閱讀不順暢