الأشكال متعددة الخطوات والحفاظ على السياق

1) المبادئ

1. أحد الأهداف هو عدة خطوات طبيعية. لا يقسم على جداول قاعدة البيانات، ولكن على منطق المستخدم: «Data → Confirmation → Completation».
2. كل خطوة هي معنى كامل. لا تسحق جيدًا: 3-5 خطوات مثالية.
3. وينبغي ألا يعيد الانتقال تحديد السياق. يتم حفظ جميع الحقول والاختيارات والملفات.
4. دعني أعود. العودة - لا فقدان البيانات.
5. تتبع التقدم. شريط التقدم، رأس الخطوة و CTAs واضحة.
6. يمكن للمستخدم المغادرة والعودة. المسودة - محليا أو على الخادم.

2) بنية متعددة الخطوات

حالة العميل: المتجر المحلي (على سبيل المثال، React Context/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-current =» step «».
• أظهر% إذا كانت الخطوات غير متساوية.
• أضف مطالبة «يمكن أن تعود لاحقًا».

4) حفظ السياق والبيانات

أوتوساف

• والتغيير الميداني (مع فضح 500-1000 مللي ثانية) ؛
• انتقل إلى الخطوة التالية
• فقدان تركيز علامة التبويب.

• محلياً ('التخزين المحلي '/الفهرسة) - إذا كان النموذج قصيراً ؛
• خادوم - CCM/payments/questionnaire.

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

التعافي

عند فتح النموذج، ابحث عن مسودة («مشروع معرف» أو مفتاح محلي).

• في حالة النزاع (ميادين جديدة) - «مشروع تحديث» مع تسليط الضوء على التغييرات.

5) أنماط انتقال UX

المضي قدمًا فقط بعد التحقق من صحة الخطوة المحلية.
العودة - بدون تأكيد إذا لم يكن هناك فقدان للبيانات.
في حالة حدوث خطأ في الشبكة، احفظه محليًا، أظهر «استعادة الاتصال التالي».
لا تغير عنوان 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 =" خطوة "للخطوة النشطة.
يتم التعبير عن تغيير الخطوة من خلال «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. الانتهاء.

Autosave بعد تحميل صورة.
التعافي من خطوة الاختبار بعد الاستراحة.
حالة «انتظار التأكيد» مع المؤشر.

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 المرجعية

التوفير والاستعادة

• وضع مشروع واستكماله في كل خطوة.
• عند إعادة التشغيل، يكون الاسترداد متاحًا وصحيحًا.
• يتم التعامل مع التنازع (الشكل القديم/الجديد).

الملاحة

• «العودة» لا تفقد البيانات.
• عنوان URL يتوافق مع الخطوة الحالية.
• شريط التقدم متزامن مع الحالة.

الشبكة وخارجها

• يحفظ خارج الإنترنت محليًا ويستعيد عبر الإنترنت.
• رسائل الفشل مفهومة وغير مدمرة.

A11y

• "aria-current =" خطوة "،" aria-live = "مهذب" "work.
• ينتقل التركيز إلى رأسية الخطوة.

الأداء

• الانتقالات فورية (≤ 100 مللي ثانية).
• الحفظات غير المتزامنة لا تمنع واجهات المستخدم.

15) التوثيق في نظام التصميم

Компоненты: "StepIndicator"، "MultiStepsForm'،" AutosaveBanner "،" DraftRecoveryModal ".
أدلة لسياق التخزين (خادم محلي مقابل خادم)، A11y وسمات ARIA.
قوالب UX: KYC، الودائع، الحدود، الاستبيانات، العودة بعد الخطأ.
لا تفعل/لا تفعل مع أمثلة على فشل الشبكة والتعافي الناجح.

موجز موجز

يجب أن يبدو النموذج متعدد الخطوات وكأنه عملية مستمرة، حتى لو كان المستخدم مشتتًا أو أعاد تشغيل الصفحة أو فقد الشبكة. يحول التوفير التلقائي والاسترداد والتقدم المرئي وإعادة التصوير الآمن السيناريوهات المعقدة (KYC، المدفوعات، الحدود) إلى تجارب يمكن التنبؤ بها وموثوقة.