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场景中。