مؤشرات التقدم والحالة

1) المبادئ

1. الاستجابة الفورية (≤ 100 مللي ثانية). يتم تأكيد أي إجراء على الفور بصريًا: الضغط على → «مشغول »/هيكل عظمي/ميكروان.
2. الصدق والقدرة على التنبؤ. النسب المئوية تعكس التقدم الحقيقي وليس «الأبدي 99٪». إذا كان التقييم غير ممكن، استخدم بديل غير محدد وشرحًا.
3. السياق بجانب النشاط. المؤشر هو المكان الذي يبحث فيه المستخدم/يتصرف (زر، بطاقة، كتلة)، وليس في الزاوية البعيدة.
4. التخفي بعد النجاح. النجاح هو فحص/تلاشي قصير وهذا كل شيء. خطأ - تفسير مفهوم وتكرار آمن.
5. توافر افتراضي. "role =" progressbar "،" aria-valuenow "، المناطق الحية، على النقيض ≥ AA.

2) أنواع المؤشرات ومتى يتم استخدامها

التقدم الخطي (تحديد/غير محدد). التحميل/الاستيراد/التصدير، خطوات ذات نطاق واضح.
التقدم الدائري (عادة غير محدد). عمليات محلية قصيرة في أماكن مدمجة.
ستيبر (خطوة بخطوة). الخطوات المتتالية («الخطوة 2 من 4»)، KYC، العمليات الرئيسية.
هيكل عظمي (سدادات هيكل عظمي). استبدال هيكل المحتوى بدلاً من المغازل ؛ تجنب «الوميض» للمستخدمين الذين لديهم «يفضلون الحركة المخفضة».
شارات الحالة (نجاح/تحذير/خطر/معلومات). حالة الكائن (قيد العملية، مرفوض، جاهز).
لافتة/نخب الحالة. الأحداث العالمية: خارج الإنترنت، فشل الخادم، تزامن قائمة الانتظار.
محمل داخلي (زر/سطر). العمليات المحلية: «احفظ»...، «أرسل»....

3) بالتأكيد مقابل التقدم غير المؤكد

تحديد: مقدار العمل معروف → نظهر %/مراحل.
غير محدد: مجلد غير معروف → «المعالجة جارية»... + سياق («عادة حتى 1-2 دقيقة»).
انتقال الولاية - يمكنك البدء → غير محددة لتحديد موعد ظهور التقييم.
ETA بعناية: أظهر النطاق («~ 30-60 ثانية») وتجنب «الوعود».

4) التنسيب والأنماط

محليًا للعمل: زر «أغنية مشغولة»، دوار في صف الطاولة، تقدم البطاقة.
فوق الكتلة/القائمة: شريط خطي أسفل رأس القسم أثناء عمليات الدفعة.
عالمي: أعلى تقدم خفي (تغيير المسار)، لافتات النظام.
لوحة لاصقة (متنقلة): تأكيد/تقدم على CTA في الرصيف السفلي.

5) التوافر (A11y)

html
<div role = "progressbar" aria-valuemin =" 0" aria-valuemax =" 100" aria-valuenow =" 42" aria-label = "Load Report "> </div>

غير محدد: set 'role = «progressbar»' بدون 'aria-valuenow'، إضافة نص توضيحي إلى 'role =' status ''.
المناطق الحية: «aria-live =» مهذب «» للتحديثات المنتظمة، «حازم» للأشخاص المهمين فقط.
"aria-busy =" صحيح "على حاوية تم حظرها مؤقتًا بسبب الإجراءات.
التركيز لا «يقفز»: عند تغيير المسرح، انقل التركيز إلى رأس خطوة السير.

6) كتابة الإعلانات والدلالات البصرية

باختصار وفي الحالة: «التحميل قيد التنفيذ»...، «معالجة الدفع»....
أضف "ما التالي": "تم. دعونا تحديث الصفحة تلقائيا.
الألوان: أخضر - نجاح، برتقالي - تحذير/انتباه، أحمر - خطأ. اللون ≠ الوسيلة الوحيدة للمعنى: إعطاء أيقونة/نص.

7) تحديثات متفائلة وسحب

متفائل: نغير واجهة المستخدم على الفور (على سبيل المثال، علامة «المفضلة») ونؤكدها بهدوء باستخدام الخادم.
في حالة الخطأ - التراجع الناعم + التفسير و «Retry».
العمليات الحرجة (السعر/الدفع): اختياريًا «متفائل ناعم» (إصلاح «إرسال → في انتظار التأكيد»...)، ولكن دون تغيير الشرط النقدي قبل التأكيد.

8) طوابير الانتظار والمهام الأساسية

أظهر قائمة الانتظار: المهام «n» في المعالجة، البطاقات الفردية مع التقدم.
توقف مؤقتًا/ألغي للعمليات الطويلة إن أمكن.
معالجة الخلفية: شارة «في الخلفية»، نخب عند الانتهاء، قسم «سجل المهام».

9) الأداء والتوقيت

التفاعل الأول ≤ 100 مللي ثانية: استخدم الهيكل العظمي/inline-busy بدلاً من الفراغ.
الرسوم المتحركة: 120-180 مللي ثانية (في)، 80-140 مللي ثانية (خارج)، فقط «تحويل/عتامة».
العمليات الطويلة: تحديث التقدم ما لا يزيد عن 10-15 مرة/ثانية ؛ تغييرات المجموعة.

10) مقتطفات

التقدم المحلي على الزر

html
<button id="export" class="btn" aria-busy="false">Экспорт CSV</button>
<script>
const btn = document. getElementById('export');
btn. addEventListener('click', async () => {
btn. setAttribute('aria-busy','true'); btn. disabled = true;
try {
const r = await fetch('/api/export', { method:'POST' });
if(!r.ok) throw new Error();
//show toast "Export has begun. We will notify upon readiness"
} catch {
//toast with cause and Retry
} finally {
btn. disabled = false; btn. setAttribute('aria-busy','false');
}
});
</script>

تحديد خطي

html
<div class="progress">
<div class="bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"></div>
</div>
<style>
.progress{height:4px; background:var(--bg-muted); border-radius:999px; overflow:hidden}
.progress. bar{height:100%;width:0%;background:var(--accent); transition:width. 16s}
</style>
<script>
const bar = document. querySelector('.progress. bar');
let n=0; const t=setInterval(()=>{ n=Math. min(100, n+5); bar. style. width=n+'%'; bar. setAttribute('aria-valuenow',n); if(n===100) clearInterval(t); },160);
</script>

ستيبر

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> <span> 3 </span> Confirmation </li>
</ol>
</nav>

11) الهيكل العظمي صحيح

استخدم شكل المحتوى المستقبلي (بطاقات/سطور)، بدون وميض لا نهاية له (أو تعطيل مع «تفضيل-حركة مخفضة»).
الحد الزمني: إذا كان التحميل> 300-500 مللي ثانية، فإن الهيكل العظمي له ما يبرره ؛ مع تأخيرات أقل، يكفي «التلاشي الدقيق».

12) شارات الحالة (حالات الكائن)

ومن الأمثلة على ذلك مشروع، قيد التنفيذ، ريثما يتم التأكيد، جاهز، مرفوض.

نص قصير، أيقونة مستقرة/ألوان خلفية، تباين ≥ AA.
Icon' aria-hidden =» true» + text label (for SR).
انقر - اكشف التفاصيل أو افتح «التاريخ».

13) تفاصيل iGaming

• الضغط على CTA → «أرسل»...، مع تأخير> 3 ثوانٍ - «في انتظار التأكيد»... (غير محدد).
• النجاح - «الرهان مقبول» + الشيك ؛ خطأ - تفسير صادق («تغيرت فترة السوق المغلقة/النسبة») وإعادة التجربة الآمنة.

• تحديد المراحل: «تحقق من الطريقة → إرسال → تأكيد PSP».
• بالنسبة للإخراج - في شارة العملية، شاشة الحالة في الملف الشخصي، نطاق ETA ؛ دفع على الانتهاء.

• Stepper (steps), progress to award (N/points), «Participing» status badge.
• تحديث في الوقت الفعلي - أنيق، بدون وميض، مع أغنية aria-live = «مهذب».

• Stepper + badge "قيد المراجعة. "أظهر ما تم قبوله بالفعل (القراد) وما تبقى.

14) الألوان والتباين والنص

النجاح/المعلومات/التحذير/الخطر - أربع نغمات ثابتة في نظام التصميم.
النص يتناقض مع الشارة الخلفية ≥ AA.
لا تستخدم نفس اللون لـ «قيد التشغيل» و «التحذير».

15) المقاييس

Time-to-First-Feedback (TTFF): انقر فوق أول استجابة بصرية.
وقت إنجاز العمليات ومعدل الهبوط/الإجهاض للمهام الطويلة.
إعادة تجربة معدل النجاح لعمليات التقدم.
النسبة المئوية للمتفائلين الذين أكملوا بنجاح (وحصة التراجع).
الهيكل العظمي/الدوار الزمني المرئي (الهدف: أقل قدر ممكن).

16) الأنماط المضادة

زر صامت (لا مزدحم/دوار)> 100 مللي ثانية.
المغازل اللانهائية بدون تفسير أو بديل.
نسبة خاطئة/99٪ منزلق معلق.
يعيد ضبط المحتوى عند الفشل ولا يمكن إعادة تجربته.
اللون فقط بدون نص/أيقونات للحالة.
التقدم بعيد كل البعد عن العمل (المستخدم لا يرى).

17) رموز نظام التصميم (مثال)

json
{
"progress": {
"barHeight": 4,
"radius": 999,
"inMs": 160,
"outMs": 120,
"pollHz": 10
},
"status": {
"tones": { "success": "#", "info": "#", "warning": "#", "danger": "#" },
"badge": { "radius": 8, "px": "6 10", "icon": 14 }
},
"skeleton": {
"rowHeight": 16,
"gap": 8,
"reduceMotion": true
},
"a11y": {
"useAriaBusy": true,
"live": "polite",
"contrastAA": true
}
}

css
.badge{display:inline-flex; gap:6px; align-items:center; padding:6px 10px; border-radius:8px; font-size:.875rem}
.badge--success{background:var(--bg-success); color:var(--on-success)}
.skeleton{background:linear-gradient(90deg, var(--sk1), var(--sk2), var(--sk1)); border-radius:8px}
@media (prefers-reduced-motion: reduce){.skeleton{background:var(--sk1)} }

18) قائمة QA المرجعية

الاستجابة والصدق

• TTFF ≤ 100 mm ؛ هناك هيكل محلي مزدحم/عظمي.
• تحديد - النسبة الحقيقية ؛ غير محدد - مع تفسير.

التوافر

• «الدور =» شريط التقدم «»/« aria-valuenow» صحيح ؛ المناطق الحية على التحديثات.
• تباين الشارات/النص ≥ AA ؛ اللون ليس حامل المعنى الوحيد

السلوك

• متفائل بالتراجع الصحيح والتفسير.
• يتم عرض قوائم الانتظار ؛ هناك إلغاء/توقف مؤقت (عند الاقتضاء).
• التقدم بالقرب من مكان الحادث لا يتداخل مع CTA.

الأداء

• تحديثات لا تزيد عن 10-15 مرة/ثانية ؛ الرسوم المتحركة «التحويل/التعتيم».
• الهيكل العظمي لا يثير وميض «حركة الانخفاض».

النصوص

• قصيرة، بدون مصطلحات تقنية ؛ «ماذا بعد» بعد الانتهاء.
• لا توجد «وعود» بالوقت المحدد ما لم يتم ضمانها.

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

Компоненты: «ProgressBar» و «ProgressCircle» و «Stepper» و «StatusBadge» و «InlineLoader» و «Skeleton».
قواعد اختيار النوع وكتابة الإعلانات والألوان للأوضاع.
الأنماط: متفائل، قوائم الانتظار، معالجة الخلفية، التزامن غير المتصل بالإنترنت.
افعل/لا تفعل المعرض: «الدوار الدائم»، النسب المئوية الخاطئة، «البكم» CTA مقابل TTFF الجيد.

موجز موجز

وينبغي لمؤشرات التقدم والحالة أن توفر تعليقات في الوقت المناسب وأمينة ويمكن الوصول إليها. ضعها جنبًا إلى جنب مع الحدث، وفرق بين التقدم المحدد وغير المؤكد، واحترم a11y ولا تسيء استخدام الرسوم المتحركة. في iGaming، هذا مهم بشكل خاص للمراهنة والمدفوعات والبطولات و KYC - التقدم الهادئ الذي يمكن التنبؤ به يزيد بشكل مباشر من الثقة والتحويل.