一、開篇：B端表單到底是什么？
表單是B端產(chǎn)品核心數(shù)據(jù)錄入載體，本質(zhì)是把線下紙質(zhì)單據(jù)搬到線上，適配電腦/移動端操作習(xí)慣。核心目標(biāo)：降低填寫成本、減少錯誤、提升效率、提高完成率。
二、表單三大設(shè)計原則
-
表意明確：用對組件：日期用DatePicker、數(shù)字用InputNumber，不混用、不誤導(dǎo)。
-
簡潔高效：信息獲取快、錄入操作快；視覺清爽，不堆砌。
-
安全容錯：操作前：清晰提示輸入規(guī)則；操作中：實時校驗、自動糾錯；操作后：草稿保存、二次確認防誤操作。
三、表單基礎(chǔ)構(gòu)成（必掌握）
基礎(chǔ)表單 = 標(biāo)簽 + 表單域 + 提示信息 + 操作按鈕；高階表單 = 基礎(chǔ) + 校驗提示/幫助提示/占位符/動態(tài)增減。
1. 標(biāo)簽布局（4種，效率排序）
效率：頂對齊 ＞ 右對齊 ＞ 左對齊 ＞ 內(nèi)部標(biāo)簽
-
頂對齊標(biāo)簽：速度最快（50ms定位）、瀏覽填寫雙快、省橫向、占縱向。? 適用：追求快速填寫、標(biāo)簽長短不一、延展性要求高。
-
右對齊標(biāo)簽：填寫快、省縱向、閱讀稍慢。? 適用：要屏效+要速度，標(biāo)簽長度差異小。
-
左對齊標(biāo)簽：閱讀穩(wěn)、填寫慢、省縱向。? 適用：復(fù)雜/敏感信息、需要用戶仔細核對（如注冊）。
- 內(nèi)部標(biāo)簽：省空間、輸入后消失易遺忘。? 適用：移動端極簡表單（≤2項），不建議PC端大量使用。
2. 必填/選填標(biāo)記規(guī)則（統(tǒng)一最關(guān)鍵）
-
全必填：可統(tǒng)一不標(biāo)，保持全局一致即可
-
必+選混合：只標(biāo)必填* 或 只標(biāo)選填，二選一并貫穿全站
-
星號位置：建議放標(biāo)簽左側(cè)，一眼掃完必填項
3. 表單域（輸入核心）
包含：輸入框、選擇器、時間選擇器、數(shù)值選擇器、上傳。
設(shè)計要點：
4. 操作按鈕
四、表單4種布局類型
-
基礎(chǔ)表單：表單項≤7個、結(jié)構(gòu)簡單，直接單列/雙列排布。
-
錨點定位表單：內(nèi)容極多、縱向超長、各組強關(guān)聯(lián)，用錨點快速跳轉(zhuǎn)。
-
標(biāo)簽頁（Tab）表單：內(nèi)容多、各組
無強關(guān)聯(lián)，用Tab分組隔離。
-
分步（Steps）表單：有
先后邏輯順序，給用戶進度預(yù)期。
五、表單5種交互形式（按內(nèi)容量排序）
內(nèi)容由少到多：氣泡卡片 → 原位編輯 → 彈窗 → 抽屜 → 頁面跳轉(zhuǎn)
-
氣泡卡片 Popover：輕描述、輕操作，不打斷流程。
-
原位編輯：展示即編輯，回車保存，極簡錄入。
-
彈窗 Modal：不離開當(dāng)前頁，承載簡單表單。
-
抽屜 Drawer：側(cè)邊滑入，可多層，適合中量內(nèi)容。
-
