الإجراءات المتناهية الصغر والتغذية المرتدة

1) ما هو التفاعل الجزئي

العمليات الدقيقة هي دورات استجابة ↔ إشارات قصيرة تؤكد أن النظام قد سمع المستخدم ويتجه نحو النتيجة.

1. الزناد (انقر، تمرير، التركيز، حدث النظام).

2. القواعد (ما هي التغييرات وكيف).

3. Fidbeck (بصري/صوتي/لمسي/نص).

4. Loop/meta-rules (تكرار، انتهاء الصلاحية، التراجع/إعادة).

الهدف: تقليل عدم اليقين والحمل المعرفي دون تشتيت الانتباه عن المهمة.

2) مبادئ التصميم

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

3) التوقيت والمنحنيات

تحوم/التركيز: 120-180 مللي ثانية

ضغط/تبديل: 80-120 мс

الخبز المحمص/الأدوات: مدخل 180-240 مللي ثانية، إخراج 120-160 مللي ثانية

التحقق الداخلي: ≤ 100 مللي ثانية بعد فقدان التركيز الميداني

المنحنى الافتراضي هو "bezier مكعب (0. 2, 0, 0. 2, 1)`; مكعب بيزير (0. 4, 0, 1, 1)`.

4) كتالوج microinteraction

4. 1 أزرار ومفاتيح

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

4. 2 التحقق من صحة الاستمارات

التحقق من صحة الحقول الضبابية ؛ الرسائل موجزة وبناءة («8 أحرف على الأقل»).
أيقونة الحالة + اللون + النص (لا لون واحد).
لكلمات المرور - مؤشر فوري على «القوة» (لا يتداخل مع الإدخال).

4. 3 توست/لافتات/وجبات خفيفة

استخدم في التأكيدات غير المحظورة.
المدة 2-5 ثانية، توقف مؤقتًا عند التحليق/التركيز، زر التراجع عند الاقتضاء.
لا تغلق المحتوى المهم و CTAs.

4. 4 التقدم والهياكل العظمية

إذا كان طول العملية معروفًا، فإن معيار التقدم ؛ إذا لم يكن كذلك، الهيكل العظمي بدلاً من الدوار.
لا قفزات تخطيط: إصلاح. ارتفاعات الكتلة.

4. 5 شارات/عدادات

تباين الرقم ≥ 4. 5:1; 99/999 كحد أقصى مع القطع '99 +'.
الرسوم المتحركة الإضافية - خطوات قصيرة من 40-60 مللي ثانية، دون تخطيط «الارتعاش».

4. 6 أداة/مساعدة

المظهر بالتحويم/التركيز ؛ إمكانية الوصول عبر «aria-description».
حظر المعلومات الهامة فقط في الأدوات.

5) أخطاء، حالات فارغة، التراجع

خطأ: نص صادق، شرح السبب والفعل («كرر»، «بطاقة التغيير»).
الدولة الفارغة: ما هي وكيف تبدأ ؛ رسم توضيحي صامت، النص يتناقض مع AA/AAA.
نافذة التراجع: 5-10 ث للإجراءات القابلة للعكس (الإزالة، إلغاء الرهان قبل الرصاصة).

6) ردود الفعل متعددة الوسائط

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

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

': التركيز المرئي' للوحة المفاتيح ؛ حلقة التركيز بدون ضبابية.
Screensaver: 'role = "status'/" alert"' for toast; المناطق الحية 'aria-live = «مهذب/حازم».
بديل للصوت/الحركة ؛ «prefers-reducted-motion: reduce».
تباين النص والأيقونة - WCAG (≥ العادية 4. 5:1).

8) الأداء

الرد ≤ 100 مللي ثانية: الاستجابة المرئية للشبكة.
تحريك «التحويل/التعتيم» ؛ تجنب «الارتفاع/اليسار/ظل الصندوق» على عناصر متعددة.
تأثيرات الشبكة - مع البدايات والتفاؤل ؛ retrai غبية.

9) رموز microinteraction (نظام التصميم)

json
{
"micro": {
"duration": { "hover": 160, "focus": 160, "press": 90, "toastIn": 220, "toastOut": 140 },
"easing":  { "std": "cubic-bezier(0. 2,0,0. 2,1)", "acc": "cubic-bezier(0. 4,0,1,1)" },
"toast":  { "timeoutMs": 3500, "pauseOnHover": true },
"badge":  { "max": 99, "emphasisStepMs": 50 }
}
}

10) مقتطفات التنفيذ

html
<div id="toast" role="status" aria-live="polite" hidden></div>
<script>
const toast = (msg, {undo, timeout=3500}={})=>{
const el = document. getElementById('toast');
el. innerHTML = undo? '$ {msg} <button> Undo </button>': msg;
el. hidden = false;
let t = setTimeout(close, timeout);
el. onmouseenter = () => clearTimeout(t);
el. onmouseleave = () => t = setTimeout(close, timeout);
if (undo) el. querySelector('button'). onclick = ()=>{ undo(); close(); };
function close(){ el. hidden = true; el. innerHTML=''; }
};
</script>

js const rules = { password: v => v.length>=8         "Minimum 8 characters"};
document. querySelectorAll('[data-validate]'). forEach(i=>{
i.addEventListener('blur', e=>{
const rule = rules[e. target. name]; if (!rule) return;
const ok = rule(e. target. value);
e. target. dataset. state = ok===true? 'ok': 'err';
e. target. nextElementSibling. textContent = ok===true? '': ok;
});
});

js export const haptic = type => {
if (!('vibrate' in navigator)) return;
if (type==='success') navigator. vibrate(10);
if (type==='error') navigator. vibrate([20,40,20]);
};

css
.button{ transition: transform. 09s cubic-bezier(.4,0,1,1), box-shadow. 16s cubic-bezier(.2,0,.2,1); }
.button:active{ transform: scale(.98); }
.input[data-state="err"]{ outline: 2px solid var(--role-danger); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (prefers-reduced-motion: reduce){ { animation:none! important; transition-duration:.01ms! important; } }

11) المقاييس ومراقبة الجودة

INP p75 <200 مللي ثانية، حصة المهام الطويلة <5٪.

أول ملاحظات المستخدم klik→vizualnyy ≤ 100 مللي ثانية

نسبة الإجراءات المتفائلة مع تراجع أقل من 3٪ (بخلاف ذلك - عدم الثقة).
استطلاعات UX: وضوح رسائل الخطأ، ورؤية التأكيدات.

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

• كل تفاعلي «مضغوط/مشغول/معطل».
• الأخطاء مصحوبة بنص وإجراءات (Retry/Undo).
• الخبز المحمص متاح على SR ولا يتداخل مع المحتوى الرئيسي.
• المصادقة الداخلية لا تتعارض مع المدخلات ؛ الرسائل محددة.
• دعم «يفضل الحركة المخفضة» ؛ يتم إيقاف تشغيل الصوت/الاهتزاز.
• لا يوجد تخطيط وقفزات قوية ؛ الرسوم المتحركة على «التحول/التعتيم».

12) تفاصيل iGaming

الرهان/الشراء: «pressed→busy» فورية، توست «مقبول» مع Undo (إذا سمحت اللوائح)، مفاتيح خفية ؛ في التأخير> 1 s - «في انتظار التأكيد»....
Spin/Reveal: ملاحظات صحفية قصيرة، بداية/توقف سلس دون وميض لا نهاية له ؛ win - bust ≤ 500 ms + نص قابل للقراءة (AAA).
المعاملات الحية: تحديثات مع دفعات، ورق بصري (سهم/سمك) بدون «قفزات».
المدفوعات/الاستنتاجات: التقدم التدريجي (KUS→Proverka→Vyplata)، نصوص شفافة لأسباب الرفض.
اللعب المسؤول: الإشعارات دون تأثيرات مشتتة ؛ تباين أعلى، «تحديد الحد» صراحة CTAs.

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

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

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

«الرموز الصغيرة»: «المدة/التيسير»، العروض المسبقة للنخب/الشارات/المعتمدين.
«الأنماط»: الأزرار، الأشكال، الخبز المحمص، التقدم، الأخطاء الداخلية، التراجع.
«A11y والحركة»: قواعد SR/HC/الحركة المخفضة ؛ أمثلة ARIA.
«افعل/لا تفعل»: مقاطع قصيرة مع التوقيت وأرقام INP/First Feedback.

موجز موجز

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