UX网关和接口标准
1）原则
清晰度先于美丽。含义和动作在1-2秒内显而易见。
每个屏幕一个目标。其他一切-次要或隐藏。
顺序。相同的模式=相同的期望。
默认可用性。对比，焦点，键盘，配音。
上下文。线索和文本恰好是需要的地方。
本地化第一。行长，格式，文化-最初在设计中。
可逆性。任何有风险的行为都可以撤销/确认。
可测量性。每个规则都带有度量（步骤转换，时间，错误）。
2）网格，缩进和节奏
网格：4/8-pt步骤；列：12（桌面）、6（平板电脑）、4（移动）。
内部组件缩进：倍数4；外部-8/ 12/16/24。
垂直节奏：标题→副标题→内容→动作（CTA）。
边界和分隔符：经济的；更喜欢"空气"和印刷层次结构。
3）印刷厂
Cegley量表：16/20/24/32/40 12月12日（body 16）。
行高度：1。4–1.桉文6，1。2–1.3标题。
字符串长度：45-75个字符（桌面）,35-55（移动）。
分配：粗体用于语义重音；caps-仅在标签中。
大声朗读：歌词听起来应该自然。
4）颜色和对比
语义："success/info/warning/error/neutral"。
对比度：最低WCAG 2。1 AA（桉文/背景≥ 4。5:1;主要≥ 3：1）。
颜色≠唯一的信号。添加图标/文本/形状。
焦点环：始终可见（不要在CSS中断开连接）。
5）导航和信息架构
用户路径："我在哪里?这里有什么？ 接下来是什么？-很明显。
菜单层次结构：在主导航中≤ 2个级别。
面包屑：用于深部分。
搜索：在复杂的目录上全局可用；热键"/"。
导航状态：活动选项卡/页面以令牌突出显示。
6）组件和模式
使用设计系统的组件（没有"自制"）。
每个屏幕一个主要CTA；其余的是中级/中级。
状态：default/hover/focus/active/disabled/loading-在每个交互中都是强制性的。
空状态：上下文值+CTA（+次要链接）。
常见的Alerta：每个屏幕一个页面警报+本地入线提示。
7）形式，验证和错误
该标签具有约束力。Placeholder是格式而不是替换的示例。
在blur上进行入线验证，在submit上进行总结错误。
错误消息：什么不是+如何修复+限制/格式。
自动滚动并关注第一个错误；"aria-invalid"，"aria-describedby"。
掩码和格式：提示但不中断输入（可能有步骤）。
数据保护：在重新启动/错误时,我们不会丢失任何内容。
8）状态和支线
成功：敬酒2-4，中性积极基调，CTA"接下来会发生什么"。
信息/通知：软横幅/tultip,不会阻止流量。
警告/错误/批评：视觉/语义层次结构；关键的是调制解调器/带有明显动作的横幅。
下载：skeleton>微调器；估计等待时间>3秒。
9）内容和微型
三个答案的规则：发生了什么→为什么→接下来要做什么。
CTA：动作动词+宾语（"保存更改"，"通过验证"）。
数字/日期/货币：本地格式。
语气：友好；在压力步骤（付款/安全）-中性。
10）可用性（A11y）
从键盘完全导航；禁忌的逻辑顺序。
角色和"aria-"用于互动，live区域用于敬酒/状态。
对比度，焦环，交互尺寸≥ 44 × 44 px。
图标/图像中的文本替代品；带有"th"/"scope"的表。
检查：自动（linter/scanner）+手动屏幕阅读器脚本。
11）本地化与国际化
所有行均以上下文为i18n键。
"长语言"测试（DE/TR），RTL模式。
数字/货币/时间是格式化实用程序。
Tone-map：按场景划分的形式/情感程度（讨价还价/付款/安全）。
12）可恢复性和适应性
Breakpoints： 360 / 768 / 1024/1280+。
移动第一：关键路径是单手可用的，CTA在拇指区域。
手势和键盘：手势用按钮复制；在桌面上-hotkeys。
密度：在桌面上-空中，在移动上-在不影响可点击性的情况下节省垂直。
13）黑暗主题
WCAG的对比仍然存在；避免背景的"纯黑色"（深灰色）。
发光/阴影-衰减；对比焦环。
插图和徽标-带有反向版本。
转换策略：我们保留用户选择（system/light/dark）。
14）动画和运动
持续时间：120-200 ms（小），200-300 ms（过渡）。
加速功能是自然的（具有轻度减速的cubic-bezier）。
动画不应阻止线程并降低可读性。
尊重"prefers-reduced-motion"。
15）表演
LCP ≤ 2.5 c，TTI/TBT在绿区；分解代码；懒惰的媒体下载。
长列表虚拟化；数据积压。
Skeleton用于感知速度；最小化布局的"jank"。
16）安全性和隐私在UI
对查询原因的明确解释（相机，KYC，地理）。
透明的时限/佣金/限制；如果可能出现延误，则没有"即时"。
敏感数据-"显示/隐藏"显式掩码。
对不可逆转行动的确认；活动/登录通知日志。
17） UX质量指标
步骤转换和完成时间。
字段/步骤和时间到修复的错误率。
CTR通过CTA和脚本的可重复性。
错误后/加载后>N秒。
按主题提出的支持请求（在修改之前/之后）。
发布的A11 y缺陷（目标为0关键）。
18）支票单
发布前的屏幕
- 一个主要目标和一个primary-CTA。
- 导航和"我在哪里"的状态是显而易见的。
- 内容简短：每组1-2个报价。
- 状态：loading/empty/error/success覆盖。
［A11y］：AA对比，焦点可见，"aria-"在互动上。
- 本地化：已验证行长度/格式/RTL。
- 表演：没有必要就没有"沉重"的障碍。
发布前的表格
- 存在标签和示例格式。
- 内联验证+submit上的摘要。
- 滚动到第一个错误，焦点在现场。
- 来文：为什么/为什么/为什么；没有用户500/400代码。
- 数据不会在错误/重新启动时丢失。
19）反模式
"OK"作为语义步骤上的CTA。
播放器代替标签。
颜色是唯一的状态信号。
旋转器没有时间评估，也没有选择。
模态窗口没有焦点敲击和ESC关闭。
混合样式/图标，在设计系统中复制组件。
关键场景中的幽默/表情符号（付款/安全）。
20）"之前/之后"示例"
表单错误
之前： "错误400"
之后： "日期格式不正确。使用DD。MM。GGGG"
空状态
之前： "这里是空的"
之后： "第一次补给后的操作历史将在这里出现。［补充帐户］"
成功消息
之前： "完成"
之后： "已接受付款。资产负债表已更新。［查看历史］"
导航
前： 不清楚用户在哪里
后： active选项卡+面包屑+显式页面标题
21）设计评论模板
屏幕框架
标题→简要说明→内容/列表→提要/状态→操作。
形状框架
标题→字段→提示（标签+帮助+错误）→ CTA →次要动作→注释（佣金/时限）。
Microcopy模板
标题（opz.）
1-2句： 背景+下一步
CTA： 动作+对象
辅助链接： 帮助/规则
22）流程和标准维护
Done的定义（UX）：布局+文本+状态++A11y+i18n+度量。
公关中的UX评论：第18-21节的支票清单。
文档：每个字段都在wiki/Storybook中添加/更新海德。
每季度审核一次：内容，A11y，表演，一致性。
最终的spargalka
一个目标，一个主要CTA。
预先设计了状态和支脚。
A11y和本地化-从头开始，而不是"然后"。
颜色更少-语义和节奏更多。
测量：转换，错误，时间，处理。
一切都通过设计系统：相同的规则→相同的期望→可预测的UX。
我可以为您的关键场景（注册/KUS，存款/退出，奖金/锦标赛）添加现成的模板来补充此海德，并根据您的咆哮过程收集支票单。