错误层次结构和优先级突出显示

1）为什么需要错误层次结构

• 解释出了什么问题，
• 说明为什么这很重要，
• 建议接下来要做什么，
• 优先考虑一些错误。
• 错误层次结构降低了认知负担，加快了修复速度，并提高了步骤转换（注册，支付，KYC）。

2）临界水平模型（Severity）

1.Info（通知）-"配置文件不完整,可以稍后填写。"不锁定。

2.通知（注意）-"极限几乎用尽了"。我们建议采取行动。

3.警告（警告）-"格式不匹配,部分保存数据"。可能会干扰。

4.Error（错误）-"不正确格式/必填字段为空"。阻止特定动作。

5.批评（关键）-"付款被拒绝/安全风险"。锁定脚本,需要立即采取行动。

• 一个屏幕-一个主状态。
• 对于多个错误：我们从上方显示关键,并始终滚动到第一个错误。

3）优先重点突出原则

1.视觉层次结构：颜色/图标/厚度/对比度随临界值而增加。
2.空间接近度：相关字段/区域附近的错误。
3.焦点和滚动：自动滚动到第一个错误+焦点到问题领域。
4.一个主要呼叫：关于关键问题的常见横幅/警报器+本地提示。
5.令牌序列：Info/Warning/Error的颜色/图标/字体在整个产品中保持不变。
6.生活时间：局部错误-尚未修复；横幅-在关闭/修复之前。
7.不要溷淆状态："空"≠"错误"，"等待"≠"错误"。

4）视觉语言（UI令牌）

• Info-中性蓝色/灰色，
• 通知是琥珀色/黄色，
• 警告是橙色的，
• 错误是红色，
• Critical是饱和的红色+对比度背景。
• 图标：inf ⓘ o, notice, error/, success.

• 字段下方的Inline消息（最小边框）。
• 每行/卡的排名。
• Page alert（横幅）-常见/关键。
• 微动画：柔和的外观，没有"抽搐"布局。

5）错误文本： 公式和示例

公式：不是+如何修复+（为什么/限制）。

"日期格式不正确。以DD格式输入。MM。GGGG"

"文件太大（最大10 MB）.下载较小的文件"

"验证水平不足。通过KYC-需要~ 2分钟"

"这笔款项被银行拒绝。尝试另一种方法或联系银行"

反模式："错误400"，"出了问题"，幽默在压力步骤。

6）复杂形式的层次结构（注册/KUS/付款）

1.在blur上进行入线验证：立即捕获局部错误。
2.在submit上进行全局检查：我们显示"修复标记字段"横幅和列表/锚点。
3.错误导航：键盘/制表,"跳到错误#1/#N"。
4.修复顺序：首先是阻塞（Error/Critical）,然后是警告/通知。
5.保存上下文：输入的数据不会因错误而丢失。

7）情景细节

7.1付款/结算

批评：供应商/银行拒绝，可疑活动。
错误：地图/IBAN字段，总和/频率限制。
警告：网络缓慢/超时等待。

文字： "付款被银行拒绝。尝试另一种方法或联系银行。委员会没有注销"

7.2 KUS/安全

批判：伪造的文档/被阻止的国家/多帐户。
错误：不可读文件/日期不匹配。

文字： "文件的照片模煳。在良好的照明下下载更清晰的图像"

7.3搜索/过滤器

这不是错误，而是零结果。

文本： "没有结果"{query}。移除"提供程序：X"过滤器或尝试"{alt}。"［重置过滤器］"

8）可用性（A11y）和技术要求

错误声明给屏幕阅读器：aria-live=关键的"assertive"，其他的"polite"。
错误字段：aria-invalid="true"，aria-describedby到消息。
焦点转移到第一个错误；制表顺序保留逻辑。
WCAG AA的对比；图标不会取代文字。
文本必须大声朗读，而不会失去意义。

9）本地化和法律准确性

避免行话和文化隐喻。
商定术语（词汇表）："付款被拒绝"，"限制超过"，"验证"。
以本地格式指定时间和限制："最多15分钟"，货币/日期。

10）质量指标

字段/步骤的错误率（遇到错误的用户比例）。
修复时间（修复第一个错误之前的平均时间）。
错误发生后（有多少人在没有纠正的情况下离开）。
每个用户/会话的错误重复性（记录）。
按错误类型请求支持。
在层次结构更改之前或之后转换步骤。

• 自动滚动和焦点vs仅颜色/文本。
• 原因vs的确切表述是常见的。
• 背光顺序（首先是横幅→直线）vs（仅限直线）。
• 在错误旁边添加"显示要求"链接。

11）发行前的支票清单

• 每个错误都有级别（Info/Notice/Warning/Error/Critical）。
• 颜色/图标/容器对应于水平。
• 有滚动到第一个错误和焦点转移。
• 消息解释了什么/如何/原因。
• 术语与术语表相同；已验证本地化。
• 可用性：aria属性，对比，可读性大声。
• 数据不会因错误而丢失。
• "零结果"和"等待"状态不构成错误。

12）"之前/之后"示例"

日期表

之前： "错误400"

之后： "日期格式不正确。使用DD。MM。GGGG"

付款

之前： "付款没有通过"

之后： "付款被银行拒绝。尝试另一种方法或联系银行。委员会没有注销"

KYC

之前： "未通过文件"

之后： "无法识别文档。下载照片没有眩光，可以看到角度和文字"

零搜索（不是错误!）

之前： "错误：找不到任何东西"

之后： ""live roulette"没有结果。移除High limit过滤器或尝试roulette。［重置过滤器］"

13）设计系统组件

``

Пропсы: `message`, `severity`, `ariaDescribedBy`, `compact`.

渲染：文本+图标，颜色为"severity"。

``

Пропсы: `title`, `description`, `severity`, `actions[]`.

选项："inf | o notice |警告| error | critical"。

``

锚点到字段的错误列表,键盘导航,"跳到第一"。

"（逻辑）

字段/形式/步骤，优先级，模式（例如JSON-Schema）上的规则，消息本地化。

14）快速短语模板

15）嵌入过程

与验证逻辑同时设计文本。
将行存储在组件旁边的i18n中,进行转换。
在PR支票表中：水平匹配，aria属性的存在，正确的本地化。
定期对指标和支持反馈进行错误评论。

最终的spargalka

分级：Info →Critical。
在视觉和焦点上显示优先级。
简短而具体地解释更正。
不要称空虚为错误。

测量和改进： error rate, Time-to-Fix, drop-off.