شاخص های پیشرفت و وضعیت

1) اصول

1. پاسخ فوری (≤ 100 میلی ثانیه) هر عمل بلافاصله به صورت بصری تایید می شود: فشار دادن «مشغول »/اسکلت/microanimation.
2. صداقت و قابل پیش بینی بودن درصد نشان دهنده پیشرفت واقعی است، نه «99٪ ابدی». اگر ارزیابی امکان پذیر نیست، از یک نوع و توضیح نامشخص استفاده کنید.
3. زمینه در کنار فعالیت شاخص جایی است که کاربر به دنبال/اقدام (دکمه، کارت، بلوک)، نه در گوشه دور.
4. خفا پس از موفقیت موفقیت یک چک/محو شدن کوتاه است و همین. خطا - توضیح قابل فهم و تکرار ایمن.
5. در دسترس بودن پیش فرض. 'role = «progressbar»', «aria-valuenow», مناطق زنده, کنتراست ≥ AA.

2) انواع شاخص ها و زمان استفاده از آنها

پیشرفت خطی (تعیین/نامشخص). بارگیری/واردات/صادرات، مراحل با دامنه روشن.
پیشرفت دایره ای (معمولا نامشخص). عملیات محلی کوتاه در مکان های جمع و جور.
گام به گام (Step-by-step) مراحل متوالی («مرحله 2 از 4»)، KYC، فرآیندهای اصلی.
اسکلت (شاخه های اسکلت). برای جایگزینی ساختار محتوا به جای اسپینر ؛ اجتناب از «روشن و خاموش شدن» برای کاربران با «ترجیح کاهش حرکت».
مدالها وضعیت (موفقیت/هشدار/خطر/اطلاعات). وضعیت شیء (در حال پردازش، رد شده، آماده).
نان تست بنر/وضعیت. رویدادهای جهانی: آفلاین، خرابی سرور، هماهنگ سازی صف.
لودر درون خطی (دکمه/خط). عملیات محلی: «ذخیره»...، «ارسال»....

3) پیشرفت قطعی در مقابل نامشخص

تعیین: مقدار کار شناخته شده است → ما نشان می دهد ٪/مراحل.
نامشخص: حجم ناشناخته → «پردازش در حال انجام»... + زمینه («معمولا تا 1-2 دقیقه»).
انتقال دولت - شما می توانید با نامشخص شروع → رفتن به تعیین زمانی که ارزیابی به نظر می رسد.
ETA را با دقت انجام دهید: محدوده («~ 30-60 ثانیه») را نشان دهید و از «وعده ها» اجتناب کنید.

4) قرار دادن و الگوهای

به صورت محلی به عمل: دکمه «aria-busy»، اسپینر در ردیف جدول، پیشرفت کارت.
در بالای بلوک/لیست: نوار خطی زیر هدر بخش در طول عملیات دسته ای.
جهانی: پیشرفت ظریف بالا (مسیر تغییر)، آگهی ها سیستم.
پانل چسبنده (تلفن همراه): تایید/پیشرفت در CTA در پایین اسکله.

5) در دسترس بودن (A11y)

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

نامعین: مجموعه 'role = «progressbar»' بدون 'aria-valuenow'، متن توضیحی را به 'role = «status»' اضافه کنید.
مناطق زنده: "aria-live =" مودب "برای به روز رسانی منظم،" قاطعانه "فقط برای موارد مهم.
"aria-busy" = "true" "در یک ظرف که به طور موقت توسط اقدامات مسدود شده است.
تمرکز «پرش» نمی کند: هنگام تغییر مرحله، تمرکز را به هدر مرحله پله حرکت دهید.

6) کپی رایت و معانی بصری

به طور خلاصه و در مورد: «بارگیری در حال انجام»...، «پردازش پرداخت»....
اضافه کردن "چه چیزی بعدی": "انجام شده است. صفحه را به صورت اتوماتیک Refresh کنید.
رنگ ها: سبز - موفقیت، نارنجی - هشدار/توجه، قرمز - خطا. رنگ تنها رسانه معنی ≠: یک آیکون/متن بدهید.

7) به روز رسانی خوش بین و پولبک

خوش بینانه: ما رابط کاربری را بلافاصله تغییر می دهیم (به عنوان مثال، علامت «Favorites») و بی سر و صدا آن را با سرور تایید می کنیم.
در صورت خطا - برگشت نرم + توضیح و 'Retry'.
عملیات بحرانی (نرخ/پرداخت): به صورت اختیاری «خوش بینانه نرم» (رفع «ارسال → در انتظار تایید»...)، اما بدون تغییر شرایط پولی قبل از تایید.

8) صف و وظایف پس زمینه

نمایش صف: وظایف «n» در پردازش، کارت های فردی با پیشرفت.
مکث/لغو برای عملیات طولانی در صورت امکان.
پردازش پس زمینه: «در پس زمینه» نشان، نان تست پس از اتمام، «تاریخچه کار» بخش.

9) عملکرد و زمان بندی

واکنش اول ≤ 100ms: استفاده از اسکلت/درون خطی مشغول به جای از درجه اعتبار ساقط است.
انیمیشن ها: 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) اسکلت درست است

از فرم محتوای آینده (کارت ها/خطوط) استفاده کنید، بدون لرزش بی پایان (یا با «prefers-reduced-motion» غیرفعال کنید).
محدودیت زمانی: در صورت بارگیری> 300-500 میلی ثانیه، اسکلت توجیه می شود. با تاخیر کمتر، «میکرو محو شدن» کافی است.

12) مدالها وضعیت (حالت های شیء)

نمونه ها پیش نویس، در حال انجام، در انتظار تایید، آماده، رد شده است.

متن کوتاه، رنگ های آیکون/پس زمینه پایدار، کنتراست ≥ AA.
نماد' aria-hidden =» true»' + برچسب متن (برای SR).
کلیک کنید - جزئیات را نشان می دهد یا «تاریخچه» را باز کنید.

13) ویژگی های iGaming

• فشار دادن CTA → «ارسال»...، با تاخیر> 3 ثانیه - «در انتظار تایید»... (نامشخص)
• موفقیت - «شرط پذیرفته شده» + بررسی ؛ error - توضیح صادقانه («دوره بازار بسته/نسبت تغییر») و امن مجدد.

• تعیین توسط مراحل: «بررسی روش → ارسال → تایید PSP».
• برای خروجی - در فرآیند نشان، صفحه نمایش وضعیت در مشخصات، محدوده ETA ؛ فشار برای تکمیل

• مرحله ثبت نام (مراحل)، پیشرفت به جایزه (N/امتیاز)، نشان وضعیت «شرکت».
• به روز رسانی در زمان واقعی - شسته و رفته، بدون چشمک می زند، با 'aria-live = «مودب».

• استپر + نشان "تحت بررسی. نشان دهید که چه چیزی قبلا پذیرفته شده (تیک) و چه چیزی باقی مانده است.

14) رنگ، کنتراست و متن

موفقیت/اطلاعات/هشدار/خطر - چهار تن پایدار در سیستم طراحی.
تضاد متن با پس زمینه نشان ≥ AA.
از یک رنگ برای «در حال پردازش» و «هشدار» استفاده نکنید.

15) معیارها

Time-to-First-Feedback (TTFF): بر روی اولین پاسخ بصری کلیک کنید.
زمان اتمام عملیات و میزان افت/لغو برای وظایف طولانی.
میزان موفقیت مجدد برای عملیات پیشرفت.
٪ از خوش بینانی که با موفقیت به پایان رسید (و سهم rollbacks).
اسکلت قابل مشاهده/اسپینر (هدف: به عنوان کم که ممکن است).

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 میلی ثانیه ؛ یک اسکلت شلوغ/محلی وجود دارد.
• تعیین -٪ واقعی ؛ نامشخص - با یک توضیح.

در دسترس بودن

• 'role =' progressbar '/' aria-valuenow 'درست است ؛ مناطق زنده در به روز رسانی.
• کنتراست مدالها/متن ≥ AA ؛ رنگ تنها حامل معنا نیست.

رفتار

• خوش بینانه با عقب نشینی صحیح و توضیح.
• نمایش داده می شود ؛ لغو/مکث (در صورت لزوم) وجود دارد.
• پیشرفت در نزدیکی صحنه با CTA همپوشانی ندارد.

عملکرد

• به روز رسانی بیش از 10-15 بار در ثانیه ؛ انیمیشن های «transform/opacity».
• اسکلت با «کاهش حرکت» خاموش نمی شود.

متن ها

• کوتاه، بدون اصطلاحات فنی ؛ «بعدش چي» بعد از تکميل.
• هیچ «وعده» از زمان دقیق مگر اینکه تضمین شده است.

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

Компоненты: 'ProgressBar', 'ProgressCircle', 'Stepper', 'StatusBadge', 'InlineLoader', 'Skeleton'.
قوانین برای انتخاب نوع، copywriting و رنگ برای وضعیت.
الگوها: خوش بینانه، صف، پردازش پس زمینه، هماهنگ سازی آفلاین.
آیا/آیا گالری نیست: «نخ ریسی دائمی»، درصد کاذب، «قطع» CTA در مقابل TTFF خوب است.

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

شاخص های پیشرفت و وضعیت باید بازخورد به موقع، صادقانه و قابل دسترس را ارائه دهند. آنها را در کنار عمل قرار دهید، بین پیشرفت قطعی و نامشخص تمایز قائل شوید، به a11y احترام بگذارید و از انیمیشن ها سوء استفاده نکنید. در iGaming، این امر به ویژه برای شرط بندی، پرداخت، مسابقات و KYC مهم است - پیشرفت آرام و قابل پیش بینی به طور مستقیم اعتماد و تبدیل را افزایش می دهد.