فرم های چند مرحله ای و حفظ زمینه

1) اصول

1. یک هدف چندین مرحله طبیعی است. تقسیم بر جداول پایگاه داده نیست، اما توسط منطق کاربر: «داده → تایید → تکمیل».
2. هر قدم یک معنای کامل دارد. خیلی ریز خرد نکنید: 3-5 مرحله بهینه است.
3. انتقال نباید زمینه را دوباره تنظیم کند. تمام فیلدها، انتخاب ها و فایل ها ذخیره می شوند.
4. بذار برگردم. برگشت - بدون از دست دادن داده ها.
5. پیشرفت را پیگیری کنید. نوار پیشرفت، هدر مرحله و CTA های روشن.
6. کاربر می تواند برود و برگردد. پیش نویس - به صورت محلی یا بر روی سرور.

2) معماری چند مرحله ای

وضعیت مشتری: فروشگاه محلی (به عنوان مثال React Context/Redux/Signal) یا ذخیره سازی موقت ('sessionStorage'، IndexedDB).
وضعیت سرور: یک پیش نویس با «draft _ id» ایجاد کنید، بعد از هر مرحله ذخیره کنید.
امنیت: 'draft _ id' با کاربر مرتبط است و در N ساعت منقضی می شود ؛ داده ها در حالت استراحت رمزگذاری می شوند.

• «currentStep» - فهرست مرحله فعلی ؛
• 'completedSteps' - لیست تکمیل شده ؛
• 'errors' - خطاهای هر مرحله ؛
• 'progress = current/total'.

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-current =" step "استفاده کنید.
• نمایش% اگر گامها ناهموار باشند.
• گزینه «Can come back later» را انتخاب کنید.

4) صرفه جویی در زمینه و داده ها

ذخیره خودکار

• تغییر فیلد (با debunk از 500-1000 میلی ثانیه) ؛
• حرکت به مرحله بعدی
• از دست دادن تمرکز تب.

• locally ('localStorage '/IndexedDB) - اگر فرم کوتاه باشد ؛
• سرور - برای CCM/پرداخت/پرسشنامه.

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

بازیابی

هنگام باز کردن فرم، به دنبال پیش نویس («draft _ id» یا کلید محلی) باشید.

• در صورت تعارض (زمینه های جدید) - «پیش نویس به روز رسانی» با برجسته کردن تغییرات.

5) الگوهای انتقال UX

فقط پس از اعتبارسنجی مرحله محلی به جلو بروید.
برگشت - بدون تایید اگر هیچ از دست دادن داده ها وجود دارد.
در صورت خطای شبکه، آن را به صورت محلی ذخیره کنید، «Restore at the next connection» را نشان دهید.
URL را خودسرانه تغییر ندهید: '/form/step/2 '→ برای ناوبری/بازیابی مناسب است.
پشتیبانی از 'Ctrl + Enter' برای انتقال سریع به مرحله بعدی.

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-current =» step»' برای گام فعال.
تغییر گام با "aria-live =" مودبانه "بیان می شود.
تمرکز در مرحله فعلی ؛ در طول انتقال - حرکت به هدر.
ناوبری تب و وارد قابل پیش بینی است. 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) معیارها و کنترل

نرخ تکمیل:٪ از کاربران که تمام مراحل را تکمیل کرده اند.
رها کردن در هر مرحله: در چه مرحله ای آنها را ترک می کنند.
متوسط زمان در هر مرحله и زمان برای تکمیل.
میزان موفقیت خودکار را ذخیره کنید.
Error recovery rate: درصد موفقیت بازیابی پس از شکست.

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

صرفه جویی و بازگرداندن

• پیش نویس در هر مرحله ایجاد و به روز می شود.
• در راه اندازی مجدد، بازیابی در دسترس و درست است.
• تضاد نسخه در حال رسیدگی است (قالب قدیمی/جدید).

ناوبری

• «بازگشت» داده ها را از دست نمی دهد.
• URL مربوط به مرحله فعلی است.
• نوار پیشرفت هماهنگ با وضعیت.

شبکه و آفلاین

• آفلاین به صورت محلی ذخیره می کند و آنلاین را بازیابی می کند.
• پیام های شکست قابل درک و غیر مخرب هستند.

A11y

• 'aria-current =' step ',' aria-live = 'مودبانه' کار.
• تمرکز به هدر مرحله حرکت می کند.

عملکرد

• انتقال فوری (≤ 100 میلی ثانیه) است.
• صرفه جویی در ناهمزمان UI ها را مسدود نمی کند.

15) مستندات در سیستم طراحی

Компоненты: 'StepIndicator', 'MultiStepForm', 'AutosaveBanner', 'DraftRecoveryModal'.
راهنمای ذخیره سازی زمینه (محلی در مقابل سرور)، ویژگی های A11y و ARIA.
الگوهای UX: KYC، سپرده ها، محدودیت ها، پرسشنامه ها، بازگشت پس از خطا.
آیا/آیا با نمونه هایی از شکست شبکه و بازیابی موفق نیست.

خلاصه ای کوتاه

فرم چند مرحله ای باید مانند یک فرایند مداوم احساس شود، حتی اگر کاربر منحرف شود، صفحه را مجددا راه اندازی کند یا شبکه را از دست بدهد. ذخیره خودکار، بازیابی، پیشرفت قابل مشاهده و بازپرداخت امن، سناریوهای پیچیده (KYC، پرداخت، محدودیت ها) را به تجربیات قابل پیش بینی و قابل اعتماد تبدیل می کند.