UX表單設計
1）原則
1.首先是任務，然後是字段。表格-用戶腳本的延續,而不是DB列表。
2.一個屏幕是一個目標。刪除不會導致任務完成的任何內容。
3.永遠不要丟失數據。自動緩存、草稿恢復、安全重播。
4.顯示「如何正確」。錯誤之前的規則和示例；謹慎行事。
5.默認可用性。標簽，焦點，對比，鍵盤導航。
6.可預測的速度。第一個響應≤ 100毫秒，具有明確的狀態和進度。
2）表格信息架構
目標→字段→步驟。從結果（例如「支付」）開始，並突出顯示最小字段集。
分組含義：「個人數據」，「付款」，「確認」。每個組≤ 6個字段。
漸進式披露：根據條件顯示其他字段（toggle/國家選擇）。
字段的順序與用戶的頭部相同：從已知到復雜。
3）布局和網格
一個用於移動和大多數任務的列在外觀和排序上更快。
兩列適用於短互連的字段（日期/時間，名字/姓氏）。
行高度40-48 px，字段8-12 px （相關）/16-24 px（組）之間的距離。
在字段頂部對齊標簽；右邊-對於狹窄的表單,請勿使用。
4）標簽，播放器，輔助器
該標簽具有約束力。播放器是示例而不是替換。
將Helper文本放置在以下字段中：規則、格式、示例引用。
可選字段在必填字段中標記"（可選）"而不是"。
html
<label for = "iban"> IBAN <span class = "muted"> (optional) </span> </label>
<input id="iban" aria-describedby="iban-help">
<small id = "iban-help "> Format A-Z, 0-9; example: DE89 3704 0044 0532 0130 00 </small>5）步驟和進展
多字形式（KUS/付款）：3-5個步驟，明顯進展「步驟2 of 4」。
保持已完成的步驟；允許返回而不會丟失數據。
導航按鈕：Back、Next、最終確認始終位於同一位置。
6）輸入管理
鍵盤和屬性：數據類型下的「類型」，「inputmode」，「autocomplete」。
輕輕使用輸入掩碼（電話、IBAN、PAN、日期）,存儲歸一化值。
不要打破自動填充：正確的"autocomplete="given-name" | "cc-number" | "one-time-code"等。
和數預設/短褲：「+50/+ 100/All」在和字段旁邊。
7）驗證和錯誤
策略：在輸入（幫助器）之前，期間（軟提示），之後（在blur/submit上）。
異步檢查（登錄的唯一性、限制、風險）-使用250-400毫秒的延遲。
錯誤文本：原因→如何糾正→替代方法。
表單上方的摘要面板（Summary Panel）用於多個錯誤+聚焦到第一個錯誤。
Idempotency-Key用於關鍵行動（費率/付款）和安全回程。
8）按鈕和發送
主CTA以顏色/大小突出顯示，可通過Enter訪問。
「Busy」設置並阻止點擊重播；延遲時>3-5 c-「等待確認……」
成功之後-顯式狀態（吐司/屏幕「完成」）+接下來會發生什麼。
9）可用性（A11y）
正確的"標簽→輸入"鏈接，通過"aria-describedby"的錯誤，關鍵是"role="alert"。
可見「：focus-visible」，Tab順序對應於視覺順序。
AA ≥文本/圖標的對比；含義不僅僅是顏色。
支持「prefers-reduced-motion」：最小動畫。
對於無線電提示組，"fieldset/legend"是"role="status"。
10）本地化和國際格式
日期/貨幣/編號-輸入時為本地，存儲為ISO/次要單位。
在名稱/地址中允許不同的字母；不要限制連字符/撇號。
電話存放在E.164中；插入時從「+CC」中明確或選擇一個國家。
11）表演與穩定
第一個視覺響應≤ 100毫秒；異步檢查-不會阻止屏幕。
Skeleton代替「懸掛」旋轉器，固定高度，避免CLS。
虛擬化長列表（例如國家/銀行）。
僅使用「轉換/操作性」動畫,不使用質量模具/陰影。
12）安全和隱私
不要編寫PAN/CVC/護照；不要發送到RUM/控制臺。
掩蓋敏感字段,不要將它們保持在自動駕駛中。
請勿透露帳戶是否存在： 「如果註冊了電子郵件,我們將發送電子郵件。」
存儲-最低要求；顯示為什麼需要KYC。
13）模板場景模式
13.1付款/定金
帶有預設值的總和字段,貨幣明確指定。
PAN帶軟面具，Luhn檢查；CVC是隱藏的；日期「MM/YY」帶有自動的「/」。
旁邊的傭金/截止日期文本,不在tooltip中。
13.2提取資金
步驟：「金額→方法→確認」。
進步和「通常長達N分鐘/小時」（沒有硬承諾）。
按國家劃分的方法變體；限制警告。
13.3 KYC
分步文件加載程序：格式/重量要求,預覽,隱私。
檢查時間和狀態通道（郵件/通知）。
13.4限制和負責任的遊戲
可理解的單位（每天/每周/每月），預工，變更確認，「通過……」生效。
14）反模式
Placeholder代替標簽。
「每個字符」錯誤，沒有刪除。
錯誤時重置表單。
關鍵語句僅隱藏在tooltip中。
硬面具，禁止有效字符/插入。
鎖定整個頁面以檢查一個字段。
發送時沒有明顯的忙碌/進展。
15）實現的嗅探
錯誤摘要+關註第一個問題
js function focusFirstError() {
const el = document. querySelector('[aria-invalid="true"]');
if (el) el. focus({ preventScroll:false });
}具有即時忙碌和偶數功能的按鈕
js btn. addEventListener('click', async () => {
btn. classList. add('is-busy');
try {
const r = await fetch('/api/submit', {
method: 'POST',
headers: { 'Idempotency-Key': crypto. randomUUID() },
body: new FormData(document. querySelector('form'))
});
if (!r.ok) throw new Error();
// success UI
} catch {
// show retry
} finally {
btn. classList. remove('is-busy');
}
});可用無線電提示組的HTML框架
html
<fieldset>
<legend> How to get </legend>
<label><input type="radio" name="method" value="sepa"> SEPA</label>
<label><input type="radio" name="method" value="swift"> SWIFT</label>
</fieldset>16）設計系統令牌（示例）
json
{
"form": {
"gap": 12,
"groupGap": 20,
"labelSize": 14,
"fieldHeight": 44,
"radius": 10
},
"motion": {
"pressMs": 90,
"hoverMs": 160,
"overlayInMs": 240
},
"validation": {
"debounceMs": 300,
"blurFeedbackMs": 100
},
"a11y": {
"focusRing": { "width": 2, "offset": 2 },
"contrastAA": true
}
}CSS預設
css
.form { display:grid; gap:12px; }
.form__group { display:grid; gap:20px; }
label { font-size:14px; }
.input { height:44px; padding:0 12px; border-radius:10px; }
.input:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.field-error { color: var(--role-danger); font-size:.875rem; margin-top:6px; }17）度量與實驗
完成率，時間到完成，字段錯誤率。
Retry Success Rate,拋出的形狀比例,步幅深度。
線索/示例的CTR，自動完成的比例。
A/B：字段順序，和數限制，錯誤文本，分為步驟。
18） QA支票清單
含義和流動
- 字段對應於目標；沒有多余的。
- 小組是合乎邏輯的；每組最多6個字段。
輸入
- 正確的「類型/inputmode/autocomplete」。
- 面具柔軟，插入不會破裂，caret是可預測的。
驗證
- 在輸入之前進行幫助；blur/submit錯誤；250-400毫秒。
- 多重錯誤摘要面板；專註於前者。
可用性
- 標簽相關；≥ AA；'：focus-visible"的對比是可見的。
- 從鍵盤導航；帶有「fieldset/legend」的無線電組。
表演
- 第一次反應≤ 100毫秒；沒有「掛起」旋轉器。
- 沒有CLS；長列表已虛擬化。
安全性
- 沒有敏感字段的標記；PAN/CVC不在車上。
- 包括Idempentity和Safe Retrai。
19） iGaming的細節
投註：總和字段+預期，瞬間「忙碌」，樂觀的確認和undo功能（如果法規允許）。
付款/結論：不只是線索，在現場附近有明確的傭金和時間表；檢查KYC的限制和狀態。
錦標賽：具有最小數據集的註冊表格，規則和可接受的checkbox，沒有「黑暗模式」。
負責任的遊戲：設置限制的形式，可理解的間隔和結果的預覽（「你的日限將從明天開始2000 ₴」）。
簡短摘要
良好的形式是明確的目標，最小的字段集，可理解的錯誤前規則，即時響應和存儲的數據。從腳本中設計結構,尊重可用性和位置,包括安全的retrai和等效性。所以形狀是快速和值得信賴的--尤其是在關鍵的iGaming場景中。