오류 계층 및 우선 순위 강조

1) 오류 계층 구조가 필요한 이유

실수는 "빨간색 텍스트 '가 아니다. "이것은 다음과 같은 제어 된 신호입니다

무엇이 잘못되었는지 설명

왜 중요한지 보여주세요

다음에 할 일을 제안합니다

몇 가지 오류가있는 경우 우선 순위를 정하십시오

오류 계층 구조는인지 부하를 줄이고 수정 속도를 높이며 단계 변환 (등록, 지불, KYC) 을 증가시킵니다.

2) 심각도 모델

알림에서 차단 문제에 이르기까지 5 가지 등급을 권장합니

1. 정보- "프로필이 불완전하고 나중에 완료 할 수 있습니다. "차단하지 않습니다.

2. 공지- "한계가 거의 소진되었습니다. "우리는 행동을 권장합니다

3. 경고- "형식 불일치, 데이터가 부분적으로 저장되었습 "방해 할 수 있습니다.
4. 오류- "잘못된 형식/필요한 필드가 비어 있습니다. "특정 동작을 차단합니다.
5. 중요한- "지불 거부/보안 위험. "스크립트를 차단하고 즉각적인 단계가 필요합니다.

• 하나의 화면-하나의 주요 상태.
• 여러 오류의 경우: 위에서 중요하게 표시하고 첫 번째 오류로 안정적으로 스크롤하십시오.

3) 우선 순위 강조 원리

1. 시각적 계층 구조: 중요도에 따라 색상/아이콘/두께/대비가 증가합니다.
2. 공간 근접: 필드/영역 근처의 오류.
3. 초점 및 스크롤: 첫 번째 오류로 자동 스크롤 + 문제 필드에 초점.
4. 하나의 주요 콜 아웃: 중요한 문제 + 로컬 프롬프트에 대한 일반 배너/경고.
5. 토큰 시퀀스: 정보/경고/오류의 색상/아이콘/글꼴은 제품 전체에서 변경되지 않습니다.
6. 수명: 로컬 오류-아직 수정되지 않았습니다. 배너-폐쇄/수정 전에.
7. 상태를 혼동하지 마십시오: "비어 있으십시오" "오류", "기다리는" "오류".

4) 비주얼 언어 (UI 토큰)

• 정보-중립 파란색/회색,
• 주의-호박색/노란색,
• 경고-오렌지,
• 오류 - 빨간색,
• 비판적-풍부한 빨간색 + 대조적 인 배경.
• 아이콘: 정보 우울증, 알림, 오류/, 성공.

• 필드 아래 인라인 메시지 (최소 프레임).
• 라인/카드 당 행 콜 아웃.
• 일반/중요 페이지 경고 (배너) -
• 마이크로 애니메이션: 레이아웃을 "저킹" 하지 않고 부드러운 외관.

5) 오류 텍스트: 공식 및 예

공식: 무엇이 잘못되었는지 + 고치는 방법 + (왜/제약).

"잘못된 날짜 형식. DD 형식으로 입력하십시오. MM. YYYY "

"파일이 너무 큽니다 (최대 10MB). 더 작은 파일을 다운로드하십시오

"검증 수준이 충분하지 않습니다 KYC를 가져 가십시오-~ 2 분이 걸립니다. "

"은행에 의해 지불이 거부되었습니다. 다른 방법을 시도하거나 은행에 연락하십시

반 패턴: 스트레스가 많은 단계에서 "오류 400", "뭔가 잘못되었습니다".

6) 복잡한 형태의 계층 (등록/ACC/지불)

1. 흐림에 대한 인라인 검증: 즉시 로컬 오류가 발생합니다.
2. 글로벌 제출 확인: "올바른 표시 필드" 배너 및 목록/앵커를 표시하십시오.

3. 오류 탐색: 키보드/탭, "오류 # 1/# N으로 이동"

4. 수정 순서: 첫 번째 차단 (오류/중요), 경고/통지.
5. 컨텍스트 저장-오류가 발생하면 입력이 손실되지 않습니다.

7) 시나리오의 특이성

7. 1 지불/인출

중요: 공급자/은행에 의한 거부, 의심스러운 활동.
오류: 카드/IBAN 필드, 양/주파수 제한.
경고: 느린 네트워크/타임 아웃.

텍스트: "은행에 의해 지불이 거부되었습니다 다른 방법을 사용해 보거나 은행에 연락하십시오 요금이 청구되지 않았습니다 "

7. 2 CCS/안전

중요: 문서 위조/차단 국가/다중 계정.
오류: 읽을 수 없는 문서/날짜 불일치.

텍스트: "문서의 사진이 흐려집니다. 더 선명한 이미지를 좋은 시각으로 업로드하십시

7. 3 검색/필터

이것은 실수가 아니라 결과가 전혀 없습니다.

텍스트: "" {query} "에 대한 결과가 없습니다. "제공자: X" 필터를 제거하거나 "{alt}" 를 사용해보십시오. [재설정 필터] "

8) 가용성 (A11y) 및 사양

오류는 스크리너에게 선언됩니다: aria-live = 다른 사람들을위한 비판적, "정중 한" 에 대한 "주장".
오류가있는 필드: 메시지 당 aria-ununity = "참", aria-descripedby.
초점은 첫 번째 오류로 이동합니다. 탭 순서는 논리를 유지합니다.
WCAG AA에 의한 대조; 아이콘이 텍스트를 대체하지 않습니다.
텍스트는 의미를 잃지 않고 큰 소리로 읽어야합니다.

9) 현지화 및 법적 정확성

전문 용어와 문화적 은유를 피하십시오.
용어집 (용어집) 에 동의하십시오: "지불 거부", "제한 초과", "검증".
로컬 형식으로 이용 약관 지정: "최대 15 분", 통화/날짜.

10) 품질 지표

필드/단계별 오류율.
수정 시간.
오류 후 드롭 오프 (수정하지 않고 남는 금액).
사용자/세션별로 재생됩니다.
오류 유형별 통화를 지원합니다.
계층 구조 변경 전/후 단계 변환.

• 자동 스크롤 및 초점 대 색상/텍스트 만.
• 이유 대 일반의 정확한 문구.
• 백라이트 순서 (배너 → 인라인 우선) vs (인라인 만).
• 오류 옆에 표시 요구 사항 링크를 추가합니다.

11) 시험판 점검표

• 각 오류에는 레벨 (정보/공지/경고/오류/중요) 이 있습니다.
• 색상/아이콘/컨테이너는 레벨에 해당합니다.
• 첫 번째 오류로 스크롤하고 초점 이동합니다.
• 메시지는 무엇/방법/이유를 설명합니다.
• 용어집 일치 용어집; 현지화 확인.
• 가용성: 아리아 속성, 대비, 가독성 큰 소리.
• 오류시 데이터가 손실되지 않습니다.
• "제로 결과" 및 "대기" 상태는 오류로 표시되지 않습니다.

12) 예 전/후

날짜 양식

이전: "오류 400"

이후: "유효하지 않은 날짜 형식. DD를 사용하십시오. MM. YYYY "

지불

이전: "지불 실패"

그 후: "은행에 의해 지불이 거부되었습니다. 다른 방법을 사용해 보거나 은행에 연락하십시오 요금이 청구되지 않았습니다 "

KYC

이전: "문서가 허용되지 않음"

이후: "문서를 인식 할 수 없습니다. 눈부심없이 사진 업로드, 모서리 및 텍스트가 표시됩니다 "

제로 검색 (오류가 아님!)

이전: "오류: 아무것도 발견되지 않았습니다

이후: "결과는 없습니다" 라이브 룰렛. "" 고제한 "필터를 제거하거나 룰렛을 사용해보십시오. "[재설정 필터]"

13) 설계 시스템 구성 요소

''

우선: '메시지', '심각도', 'ariaDescribedBy', '소형'.
렌더: 텍스트 + 아이콘, '심각도' 색상.

''

우선: '제목', '설명', '심각도', '행동 []'.
옵션: 'info | 공지 | 경고 | 오류 | 중요'.

''

앵커 간 필드, 키보드 탐색, "# 1로 이동" 오류 목록.

'' (논리)

필드/폼/스텝 규칙, 우선 순위, 스키마 (예: JSON-Schema), 메시지 현지화.

14) 빠른 문구 패턴

15) 프로세스 임베딩

검증 논리와 동시에 텍스트를 설계하십시오.
구성 요소 옆에 i18n에 라인을 저장합니다.
PR 점검 목록에서 레벨 준수, 아리아 속성, 올바른 현지화.
정기적으로 검토 지표 오류 및 지원 피드백.

최종 치트 시트

디지털화 수준: 정보 → 비판.

시각적으로 그리고 초점에 우선 순위를 표시하십

수정을 간단하고 구체적으로 설명하십시오

공허함을 실수라고 부르지 마십시오.
측정 및 개선: 오류율, 수정 시간, 하차.