다단계 형태 및 상황 보존

1) 원칙

1. 한 가지 목표는 몇 가지 자연스러운 단계입니다. 데이터베이스 테이블이 아니라 사용자 논리: "데이터 → 확인 → 완료" 로 나눕니다.
2. 각 단계는 완전한 의미입니다. 너무 세밀하게 분쇄하지 마십시오: 3-5 단계가 최적입니다.
3. 전환이 컨텍스트를 재설정해서는 안됩 모든 필드, 선택 및 파일이 저장됩니다.
4. 다시 가자. 다시-데이터 손실이 없습니다.
5. 진행 상황을 추적하십시 진행 표시 줄, 단계 헤더 및 명확한 CTA.
6. 사용자는 떠나고 돌아올 수 있습니다. 초안-로컬 또는 서버에서.

2) 다단계 아키텍처

클라이언트 상태: 로컬 상점 (예: 반응 컨텍스트/Redux/Signal) 또는 임시 스토리지 ('sessionStorage', IndexedDB).
서버 상태: 'draft _ id' 로 초안을 작성하고 각 단계 후에 저장하십시오.

보안: 'draft _ id' 는 사용자와 관련이 있으며 N 시간 후에 만료됩니다. 데이터는 정지 상태에서 암호화됩

• '전류 단계' - 현재 단계의 색인;
• '완료 단계' - 완료된 목록;
• '오류' - 단계당 오류;
• '진행 = 현재/총'.

js const formState = {
draftId: "d-84f...",
currentStep: 2,
steps: [ { id: "personal", completed: true }, { id: "kyc", completed: false } ],
data: { name:"", idPhoto:null },
lastSaved: Date. now()
}

3) 단계 및 레이아웃 디자인

구조: 위의 수직 탐색 (데스크톱 )/진행 표시 줄 (모바일).
단계의 눈에 보이는 이름은 "1입니다. 개인 데이터 "", 2. 정체성 증명 ".

• 주요 것은 "다음 "/" 계속" 입니다
• 이차- "뒤".
• 마지막 단계- "완료 "/" 보내기"

• 'aria-흐름 = "단계"' 를 사용하십시오.
• 단계가 고르지 않으면% 를 표시합니다.
• "나중에 다시 올 수 있음" 프롬프트를 추가하십시오

4) 컨텍스트 및 데이터 저장

(PHP 3 = 3.06

@ info: whatsthis

현장 변경 (500-1000 ms의 debunk 포함);

다음 단계로 이동

탭 초점 손실.

• 로컬 ('localStorage '/IndexedDB) -양식이 짧은 경우;
• 서버-CCM/결제/설문지 용.

js const saveDraft = debounce(async (data) => {
await fetch('/api/draft', { method:'POST', body: JSON. stringify(data) });
}, 800);

회복

양식을 열 때 초안 ('draft _ id' 또는 로컬 키) 을 찾으십시오.

• 충돌 (새로운 필드) 의 경우 - 변경 사항을 강조한 "초안 업데이트".

5) UX 전환 패턴

로컬 단계 검증 후에 만 진행하십시오.
다시-데이터 손실이 없는지 확인하지 않고.
네트워크 오류가 발생하면 로컬로 저장하고 "다음 연결에서 복원" 을 표시하십시오.
'/form/step/2 '→ 는 탐색/복구에 편리합니다.
다음 단계로 빠르게 전환하려면 '보이기 + 입력' 을 지원하십시오.

6) 상태 및 시각적 신호

진행 중: 회색/활성 표시기는 이전 단계가 완료된 경우에만 단계를 클릭 할 수 있습니다.
완성: 녹색 진드기/아이콘; 편집을 위해 열 수 있습니다.
오류: 빨간색 윤곽선, 필드 아래 텍스트 및 진행선.
비활성화 - 현재 단계를 숨기거나 사용할 수 없습니다.

html
<nav aria-label = "Progress">
<ol class="steps">
<li class = "done "> <span> 1 </span> Data </li>
<li class = "current" aria-current = "step "> <span> 2 </span> Documents </li>
<li> 3 Verification </li>
</ol>
</nav>

7) A11y 및 가용성

활성 단계에 대한 'aria-urrent = "step"'.
단계 변경은 'aria-live = "polite" 로 표시됩니다.
현재 단계 내에서 집중하십시오. 전환하는 동안-헤더로 이동하십시오.
탭 및 입력 탐색을 예측할 수 있습니다. Esc는 상황을 잃어서는 안됩니다.
단계별 진행 막대의 경우 단계에 'role = "list"', 'role = "listitem"' 및 'aria-label' 을 사용하십시오.

8) 오류 및 인터럽트 동작

네트워크 오류: "연결 손실. 데이터는 로컬로 저장됩니다.
시간: 3-5 초에 자동으로 반복하십시오. 실패시-오프라인 초안.
세션 중단: 로그인 후 → "마지막 단계에서 계속하십시오".

단계 오류: 부분적으로 채워진 필드를 저장하고 문제가있는 필드를 강조

9) 병렬 세션 및 보안

'draft _ id' 는 사용자 당 고유합니다.

새 탭을 열 때 "다른 세션이 열려 있습니다. 여기서 업데이트하거나 계속

CCM/재무 양식의 경우 초안을 저장하기 전에 데이터가 클라이언트 (AES/GCM) 에서 암호화됩니다.
TTL로 초안을 삭제합니다 (예: 7 일 동안 활동이 없음).

10) iGaming 시나리오 예

10. 1 CCM/검증

1. 개인 데이터 → 2. 문서 → 3. → 4를 확인하십시오. 완료.

사진을 업로드 한 후 추가합니다.
휴식 후 테스트 단계에서 복구.
표시기와 함께 "확인을 기다리는" 상태.

10. 2 지불/보증금

단계: 1. 금액 → 2. 방법 → 3. 확인.
방법 데이터는 세션 간에 저장됩니다.
금액을 지우지 않고도 메소드 선택으로 돌아갈 수 있습니다.

10. 3 설정 한계

단계는 한계 유형 → 값 → 확인입니다.

진행 상황은 나머지 단계를 보여줍

완료 후-화면 "... 에 적용됩니다"...

11) 측정 및 제어

완료율: 모든 단계를 완료 한 사용자의%

단계당 하락: 그들이 떠나는 단계에서.
단계 당 평균 시간은 완료 시간입니다.
자동 저장 성공률.
오류 복구율-실패 후 성공적인 복구 비율.

12) 안티 패턴

"백" 이없는 하드 내비게이션.
재부팅시 입력 손실.
문맥없이 단계를 뛰어 넘습니다.
10 개의 화면 당 하나의 공통 제출.
단계 오류- "다시 시작".
네트워크 오류 후 빈 화면.
의미 이름이없는 진행 막대 ("1/4/7"...).

13) 디자인 시스템 토큰 (예)

json
{
"steps": {
"radius": 10,
"gap": 8,
"barHeight": 4,
"activeColor": "#2B9F5E",
"inactiveColor": "#E0E0E0"
},
"autosave": {
"debounceMs": 800,
"retryMs": 3000,
"ttlDays": 7
},
"a11y": {
"ariaLive": "polite",
"focusBehavior": "scrollToTitle"
}
}

CSS 사전 설정

css
.steps { display:flex; gap:8px; list-style:none; counter-reset:step; }
.steps li { position:relative; flex:1; text-align:center; }
.steps li::before { counter-increment:step; content:counter(step); display:block; width:24px; height:24px; line-height:24px; margin:0 auto 4px; border-radius:50%; background:var(--inactive); color:#fff; }
.steps li. done::before { background:var(--success); }
.steps li[aria-current="step"]::before { background:var(--primary); }

14) QA 체크리스트

저장 및 복원

• 각 단계에서 초안이 작성되고 업데이트됩니다.
• 재부팅시 복구가 가능하고 정확합니다.
• 버전 충돌이 처리되고 있습니다 (이전/새 형식).

탐색

• "뒤로" 는 데이터를 잃지 않습니다.
• 탭은 현재 단계에 해당합니다.
• 상태와 동기화 된 진행 막대.

네트워크 및 오프라인

• 오프라인은 로컬을 저장하고 온라인으로 복원합니다.
• 실패 메시지는 이해할 수 있고 파괴적이지 않습니다.

A11y

• 'aria-urrent = "step"', 'aria-live = "polite"' 작업.
• 초점이 단계 헤더로 이동합니다.

성능

• 전환은 순간적입니다 (보통 100ms).
• 비동기 저장은 UI를 차단하지 않습니다.

15) 설계 시스템의 문서

'StepIndicator', 'MultiStepForm', 'AutosaveBanner', 'DraftRecoveryModal'.
컨텍스트 (로컬 대 서버), A11y 및 ARIA 속성 저장을위한 가이드.
UX 템플릿: KYC, 예금, 한계, 설문지, 오류 후 반환.
네트워크 장애 및 성공적인 복구 사례를 사용하지 마십시오.

간략한 요약

사용자가 산만 해 지거나 페이지를 다시 부팅하거나 네트워크를 잃어버린 경우에도 다단계 양식은 지속적인 프로세스처럼 느껴져야합니다. 자동 저장, 복구, 가시적 진행 상황 및 보안 배상은 복잡한 시나리오 (KYC, 지불, 한도) 를 예측 가능하고 신뢰할 수있는 경험으로 바꿉니다.