معدل التفاعل وواجهة المستخدم الكامنة

1) ما هي سرعة الواجهة

السرعة ليست فقط تحميل الصفحة. هذا هو مجموع أربعة تأخيرات:

1. زمن انتظار الإدخال - من الإيماءة إلى التعامل مع الحدث.

2. زمن انتقال الشبكة - قبل الاستجابة الخلفية/ذاكرة التخزين المؤقت.

3. عرض زمن الانتظار - التجهيز على التيار الرئيسي (JS/CSS/layout/paint).

4. زمن انتقال الرسوم المتحركة - نعومة واستقرار الإطارات.

الغرض: يرى المستخدم فورا أن الإجراء قد بدأ وأين تتحرك العملية ؛ النتيجة الحقيقية تأتي بشكل متوقع.

2) عتبات الإدراك البشري

≤ 50 مللي ثانية - «البرق السريع» (صدى مطبوع، مطبعة رئيسية).
≤ 100 مللي ثانية - «على الفور» (انقر → الاستجابة البصرية).
≤ 200 مللي ثانية - مقبول لمعظم ردود فعل واجهة المستخدم.
≤ 1000 مللي ثانية - مقبولة مع تقدم/هيكل عظمي واضح.

💡 10 s - يفقد المستخدم السياق، وهناك حاجة إلى التصعيد (حفظ، تأجيل، إشعار).

3) نموذج السكك الحديدية والميزانيات المستهدفة

R (الرد): استجابة المدخلات

انقر/انقر → الاستجابة البصرية ≤ 100 مللي ثانية.
التركيز/التحليق → ≤ 80-120 مللي ثانية.

أ (الرسوم المتحركة): النعومة

60 إطار ⇒ FPS 16. 7 ملليمترات ؛ عمليات ثقيلة للخروج من الإطار.
نحن نحرك فقط «تحويل »/« عتامة».

I (Idle): المهام الأساسية

انقسم إلى فتحات ≤ 50 مللي ثانية، استخدم النوافذ الخاملة.

L (Load): التحميل

TTFB ≤ 200 م، LCP ≤ 2. 5s، INP ≤ 200 ms، CLS ≤ 0. 1.

4) KPI وتنبيهات السرعة

INP (التفاعل مع الطلاء التالي): p75 <200 ms (جيد)، 200-500 (سيتم تحسينها).
المهام الطويلة (> 50 مللي ثانية): نسبة الإطارات مع LT <5٪.
TTFB p75 <200 مللي ثانية (ذاكرة التخزين المؤقت/الحافة)، LCP p75 <2. 5 ص.
ملاحظات المستخدم الأولى (FUF): الوقت حتى أول تأكيد مرئي للعمل ≤ 100 مللي ثانية.
الوقت إلى الاستخدام للنماذج ≤ 1 s قبل إدخال الحقل الأول.

5) أنماط الاستجابة الفورية لـ UX

1. تحديثات متفائلة: تغيير واجهة المستخدم على الفور (التوازن/الرهان/الإعجاب)، التراجع عن الخطأ.
2. الهياكل العظمية بدلاً من الدوار إذا كان الهيكل معروفًا.
3. التقدم/الخطوات: شريط قطعي تدريجي إذا كان طول العملية معروفا.
4. نصائح محلية: نخب فوري/حالة «إرسال»... ≤ 100 مللي ثانية.
5. التحميل المسبق للنية: التحليق/الرؤية → 'prefetch '/' preload'.

6) تقنيات التخفيف من التأخير

6. 1 → الإدخال

قم بإطلاق النار على تأخير 300 مللي ثانية على الهاتف المحمول: "<meta name =" viewport' content = "width = device-width, initial-scale = 1"> ".
المستمعون سلبيون للتمرير/tach: «AddeEventListener ('touchstart'، المعالج، {السلبي: الحقيقي})».
انقر فوق المعالجة - في مهمة صغيرة أو «طلب إطار الرسوم المتحركة» لسحب التأكيد بسرعة.
تجنب التخطيط: اقرأ/اكتب التخطيط - بوتش.

6. 2 JS والتيار الرئيسي

حزم منفصلة (تقسيم الرمز)، التحميل على طول الطرق.
الحوسبة الثقيلة → عامل الويب.
استخدم الجدولة. ما بعد المهمة "/" طلب IdleCallback "لمهام الخلفية.
CSS الحاسمة - inline ؛ JS с 'effer '/' async'.
افتراضية القائمة، 'content-visibility: auto'، 'containing: content'.

6. 3 العرض والرسوم المتحركة

تحريك «التحويل/التعتيم» ؛ لا تحرك «الارتفاع/اليسار/ظل الصندوق» على مئات العناصر.
وضع «التغيير» مؤقتًا قبل الرسوم المتحركة ؛ تنظيف بعد.
Sprites/vector بدلاً من PNGs الضخمة ؛ تجنب الضبابية الثقيلة.

6. 4 شبكة ومخبأ

Edge- кеш (CDN)، "cache-control'،" stale-whine-revalidate ".
الربط المسبق بالمجالات الحرجة ؛ تلميحات مبكرة (103)، HTTP/2/3.
Prefetch by note (hover/viewport).
البث/SSR + الترطيب التقدمي/الجزر.

7) عمليات التخزين/الخنق وقوائم الانتظار

مناقشة - للبحث أثناء الإدخال (150-300 مللي ثانية).
الخنق - للتمرير/تغيير الحجم (100-200 مللي ثانية).
قوائم الانتظار/تحديث واجهة المستخدم للأحداث المتكررة (البيانات الحية).

js const debounce = (fn, ms=200)=>{let t; return (...a)=>{clearTimeout(t); t=setTimeout(()=>fn(...a),ms)}}
const throttle = (fn, ms=120)=>{let t=0; return (...a)=>{const n=Date. now(); if(n-t>ms){t=n; fn(...a)}}}

8) أنماط التحميل والتغذية المرتدة

الهيكل العظمي → المحتوى (بدون تعديلات، ارتفاعات ثابتة).
Shimmer 1200-1600 ms، السعة ≤ 20٪.
بطاقة متفائلة: معاينة رمادية + نص - نستبدلها عند وصول البيانات.
خطأ: لافتة إعادة نظر قصيرة، مفاتيح الغباء للتكرار.

9) استراتيجيات الشبكة للاستجابة السريعة

الإجراءات الحاسمة (السعر/الدفع):

تأكيد واجهة المستخدم على الفور (متفائل)، خلفي - خفي ؛
عند المهلة (3-5 ثوانٍ)، مع عرض الحالة «المتلقاة والمعالجة» + عمليات إعادة تشغيل الخلفية ؛
WebSocket/SSE للحالات، backoff 1-2-4-8 s.

البيانات المسبقة: ذاكرة التخزين المؤقت للإحماء في جدول زمني، ومقدمة من الطرق الشعبية.

وظائف الحافة: عمليات التحقق/التجميع الأقرب إلى المستخدم.

10) رمز مقتطف واجهة المستخدم السريعة

الرد الفوري للنقر (التعليقات قبل استجابة الشبكة):

js btn. addEventListener('click', () => {
btn. classList. add ('is-busy') ;//requestAnimationFrame instant visual response (async () => {
try {
const res = await fetch('/api/action', { method: 'POST', body: payload });
if (!res.ok) throw new Error('fail');
btn. classList. add('is-done');
} catch {
btn. classList. remove('is-busy'); btn. classList. add('is-error');
}
});
});

بادئة النية (تحوم/عرض):

js const prefetch = url => fetch(url, { credentials:'include', priority:'low' }). catch(()=>{});
document. querySelectorAll('a[data-prefetch]'). forEach(a=>{
a. addEventListener('mouseenter', () => prefetch(a. href), { once:true });
const io=new IntersectionObserver(e=>{ if(e[0].isIntersecting){prefetch(a. href); io. disconnect();} });
io. observe(a);
});

CSS للرسوم المتحركة والهيكل العظمي «الرخيص»:

css
.btn. is-busy { pointer-events:none; }
.skeleton { position:relative; background: var(--bg-elevated); overflow:hidden; }
.skeleton::after {
content:""; position:absolute; inset:0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
animation: shimmer 1. 4s infinite;
}
@keyframes shimmer { from { transform: translateX(-100%);} to { transform: translateX(100%);} }

11) التشخيص والرصد

الحقل: RUM (المقاييس الميدانية) p75 حسب البلد/الشبكة/الجهاز.
انقر فوق تتبع «إدخال → معالج → شبكة → طلاء».
ترميز المنطقة الحمراء: علامات المهمة الطويلة، وقت الحظر، قائمة الطريق البطيء.
إنذارات تدهور INP/LCP/TTFB.
اختبارات السيناريو: سجل الوقت المرجعي «انقر → تغيير DOM».

12) تفاصيل iGaming

العطاء/الشراء:

واجهة المستخدم: تثبيت فوري لحالة الزر (مضغوط → مشغول)، نخب مزدوج «مقبول».
الواجهة الخلفية: المفتاح الخفي حسب المعدل ؛ الحالة - عن طريق WebSocket ؛ المهلة → شفافة «معلقة».
ميزانية واجهة المستخدم: FUF ≤ 100 mm، التأكيد النهائي ≤ 1 s (إذا كان أطول، فإننا نظهر المؤقت/السبب).

تدور/تكشف:

تسارع ≤ 200 مللي ثانية، دوران موحد، توهين 300-500 مللي ثانية ؛ بدون دورات لا حصر لها.
اربح البقع - بدون رداء، نص/كمية قابلة للقراءة (AAA).

المعاملات الحية:

بقع دلتا مرة كل 250-1000 مللي ثانية، الجزر ؛
السهم البصري (السهم/اللون/السمك) بدون قفزات تخطيط ؛
تحديثات مكافحة الارتداد على التحليق/التركيز.

البطولات/التصنيفات:

زيادة الحساب على دفعات 40-60 مللي ثانية، أرقام الجداول ؛
رأسية لزجة، افتراضية سلسلة.

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

لا يوجد رد فوري للنقر (في انتظار الشبكة).
رسوم متحركة ثقيلة «مرشح/ظل صندوق» على مئات العناصر.
حزمة JS ضخمة> 1-2 ميجابايت لكل مسار حرج.
Spinner in the Void يزيد عن 1-2 بدون تقدم/هيكل عظمي.
تصميم القراءة/الكتابة في علامة واحدة (تخطيط الضرب).
ميزات تحوم فقط على الهاتف المحمول.

14) رموز السرعة (نظام التصميم)

json
{
"latencyBudget": {
"tapFeedbackMs": 100,
"keyEchoMs": 50,
"hoverMs": 120,
"pressMs": 90,
"modalInMs": 240,
"toastInMs": 200
},
"webVitalsTargets": { "INP": 200, "LCP": 2500, "CLS": 0. 1, "TTFB": 200 },
"animation": {
"easing": { "std": "cubic-bezier(0. 2,0,0. 2,1)", "acc": "cubic-bezier(0. 4,0,1,1)" },
"duration": { "hover": 160, "active": 90, "overlay": 240 }
}
}

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

الرد

انقر/انقر → الاستجابة البصرية ≤ 100 مللي ثانية ؛ → صدى المدخلات ≤ 50 مللي ثانية.
لا يوجد تأخير 300 ملم على الهاتف المحمول.
INP p75 ≤ 200 ms ؛ تشترك المهام الطويلة ≤ 5٪.

التحميل

TTFB ≤ 200 مللي ثانية ؛ LCP ≤ 2. 5 s ؛ CLS ≤ 0. 1.
الهياكل العظمية/التقدم بدلاً من المغازل «المعلقة».

عرض

فقط «التحويل/التعتيم» في الرسوم المتحركة ؛ لا توجد ظلال «ثقيلة» على المصفوفات.
رؤية المحتوى/الافتراضية للقوائم الطويلة.

الشبكة

Edge cache، preconce، intent prefix.
الخصوصية والتراجع عن الإجراءات الحاسمة.

A11y

دعم «يفضل الحركة المخفضة».
المحتوى المحوم متاح حسب التركيز/لوحة المفاتيح.

16) وثائق نظام التصميم

«ميزانيات الكمون»: جدول العتبات (النقر، التحليق، الوسيلة، الخبز المحمص، الشكل).
«ردود الفعل الفورية»: أنماط عمل متفائلة + تراجع.
«Prefetch by Intent»: الدليل والمرافق.
«Performance Playbook»: تنميط القوائم المرجعية وتنبيهات RUM.
«افعل/لا تفعل»: أمثلة على النصوص السريعة/البطيئة ذات الأرقام.

موجز موجز

سرعة التفاعل هي الاستجابة الفورية + التسليم المتوقع للنتيجة. احتفظ بـ 100 مللي ثانية كميزانية مقدسة للتعليقات الأولى، وحسن الشبكة (Edge/cache/prefix)، وأفرغ التدفق الرئيسي، وحرك الخصائص الرخيصة فقط وطبق أنماطًا متفائلة. ثم تبدو الواجهة مفعمة بالحيوية ومفهومة ومرنة - خاصة في سيناريوهات iGaming عالية المخاطر في الوقت الفعلي.

معدل التفاعل وواجهة المستخدم الكامنة

التحميل

عرض

الشبكة

A11y

موجز موجز

اتصل بنا

اتصال سريع

سيتم تحديث الفيديو قريبًا

نحن مشغولون جدًا بالمشاريع في الوقت الحالي