میکرو تعاملات و بازخورد

1) میکرو تعامل چیست

Microinteractions چرخه پاسخ ↔ سیگنال کوتاه است که تایید می کند که سیستم کاربر را شنیده و به سمت نتیجه حرکت می کند.

1. ماشه (کلیک کنید، کش رفتن، تمرکز، رویداد سیستم).

2. قوانین (چه چیزی تغییر می کند و چگونه)

3. Fidbeck (بصری/صدا/لمسی/متن).

4. قوانین حلقه/متا (تکرار، انقضا، لغو/تکرار).

هدف: کاهش عدم قطعیت و بار شناختی بدون حواس پرتی از کار.

2) اصول طراحی

معنی> اثر این اثر توضیح می دهد «چه اتفاقی افتاده است» و «چه چیزی بعد است».
لحظه به لحظه اولین پاسخ 100 میلی ثانیه ≤ (دکمه ها/سوئیچ ها).
بدون ابهام. حالت های قابل تشخیص: شناور/تمرکز/فشرده/غیر فعال/بارگیری.
پس انداز کردن حداقل خواص، کوتاه مدت، بدون آتش بازی.
انسجام. اقدامات مشابه همان سیگنال ها هستند.
قابلیت دسترسی Fidbek دیده می شود، شنیده و خوانده شده توسط یک خواننده صفحه نمایش ؛ یک جایگزین برای حرکت/صدا وجود دارد.

3) زمان بندی و منحنی

شناور/تمرکز: 120-180 میلی ثانیه

فشرده/تعویض: 80-120 мс

نان تست/راهنمای ابزار: ورودی 180-240ms، خروجی 120-160ms

اعتبار سنجی درون خطی: ≤ 100 میلی ثانیه پس از از دست دادن تمرکز میدان

منحنی پیش فرض 'cubic-bezier (0 است. 2, 0, 0. 2, 1)`; برای فشرده - شتاب 'مکعب bezier (0. 4, 0, 1, 1)`.

4) کاتالوگ میکرو تعامل

4. 1 دکمه ها و سوئیچ ها

پاسخ فوری: کلیک بصری/تورفتگی + حالت مشغول زمانی که توسط شبکه پرس و جو.
به روز رسانی خوش بینانه: تغییر UI بلافاصله، بازگشت به خطا (با لغو).
بحث دوبار کلیک کنید: تکرار بلوک تا/timeout پاسخ داده شده است.

4. 2 اعتبار سنجی درون خطی فرم ها

اعتبار سنجی در زمینه های تاری ؛ پیام های کوتاه و سازنده («حداقل 8 کاراکتر»).
آیکون وضعیت + رنگ + متن (نه یک رنگ).
برای کلمه عبور - یک شاخص فوری از «قدرت» (با ورودی تداخل ندارد).

4. 3 نان تست/آگهی ها/تنقلات

برای تأییدهای غیر مسدود استفاده کنید.
مدت زمان 2-5 ثانیه، مکث در شناور/تمرکز، دکمه خنثی کردن که در آن مناسب است.
محتوای مهم و CTA را تعطیل نکنید.

4. ۴ پیشرفت و اسکلت

اگر طول فرآیند مشخص باشد، نوار پیشرفت ؛ اگر نه، اسکلت به جای اسپینر.

بدون طرح جهش: ثابت. ارتفاع بلوک

4. 5 مدالها/شمارنده

کنتراست رقمی ≥ 4. 5:1; حداکثر 99/999 با قطع '99 +'.
انیمیشن های افزایشی - مراحل کوتاه دسته های 40-60 میلی ثانیه، بدون طرح «لرزش».

4. 6 راهنمای ابزار/راهنما

ظاهر توسط شناور/تمرکز ؛ دسترسی از طریق «aria-describedby».
اطلاعات مهم را فقط در راهنمای ابزار ممنوع کنید.

5) خطاها، حالت های خالی، خنثی کردن

خطا: متن صادقانه، توضیح دلیل و عمل («تکرار»، «تغییر کارت»).
دولت خالی: آنچه در آن است و چگونه برای شروع ؛ تصویر خاموش، کنتراست متن AA/AAA.
پنجره لغو: 5-10 ثانیه برای اقدامات برگشت پذیر (حذف، لغو شرط قبل از گلوله).

6) بازخورد چند منظوره

صدا: آرام، کوتاه، یک الگو در هر نوع رویداد (موفقیت/خطا/توجه) ؛ خاموش در تنظیمات.
Vibro/haptika: پاسخ مطبوعات آسان/موفقیت ؛ احترام به «prefers-reduced-motion» و محدودیت های سیستم.
ویژوال: فقط 'transform/opacity'، بدون تاری سنگین/سایه در آرایه ها.

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

«: تمرکز قابل مشاهده» برای صفحه کلید ؛ حلقه تمرکز بدون تاری.
محافظ صفحه نمایش: "نقش =" وضعیت "/" هشدار "برای نان تست ؛ 'aria-live = «مودبانه/قاطعانه»'.
جایگزینی برای صدا/حرکت ؛ 'prefers-reduced-motion: کاهش'.
کنتراست متن و آیکون - WCAG (منظم ≥ 4. 5:1).

8) عملکرد

≤ 100ms پاسخ دهید: پاسخ بصری به شبکه.
پویانمایی «تبدیل/کدورت» ؛ اجتناب از «ارتفاع/چپ/جعبه سایه» در عناصر متعدد.
اثرات شبکه - با پیش فرض و خوش بینی ؛ retrai idempotent هستند.

9) نشانه های میکرو تعامل (سیستم طراحی)

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 ms، سهم وظایف طولانی <5٪.

اولین بازخورد کاربر klik → vizualnyy ≤ 100ms

نسبت اقدامات خوش بینانه با عقبگرد <3٪ (در غیر این صورت - بی اعتمادی).
نظرسنجی UX: وضوح پیام های خطا، قابلیت مشاهده تأییدیه ها.

چک لیست QA

• هر تعاملی «فشرده/مشغول/غیرفعال» است.
• خطاها با متن و اقدامات (Retry/Undo) همراه است.
• Toasts در SR در دسترس هستند و محتوای کلیدی همپوشانی ندارند.
• اعتبار سنجی درون خطی با ورودی دخالت نمی کند ؛ پیام ها مشخص است.
• 'prefers-reduced-motion' پشتیبانی می شود ؛ صدا/لرزش خاموش می شوند.
• بدون طرح و بارق پرش ؛ انیمیشن ها در «transform/opacity».

12) ویژگی های iGaming

شرط/خرید: فوری 'فشرده → مشغول'، نان تست «پذیرفته شده» با خنثی کردن (اگر مقررات اجازه می دهد)، کلید idempotent ؛ با تأخیر> 1 s - «در انتظار تأیید»....
چرخش/آشکار: بازخورد مطبوعات کوتاه، شروع صاف/توقف بدون چشمک زدن بی پایان ؛ برنده - پشت سر هم ≤ 500 میلی ثانیه + متن قابل خواندن (AAA).
ضرایب زنده: به روز رسانی با دسته، تفاوت بصری (فلش/ضخامت) بدون «جهش».
پرداخت/نتیجه گیری: پیشرفت گام به گام (KUS → Proverka → Vyplata)، متون شفاف از دلایل امتناع.
بازی مسئول: اطلاعیه ها بدون اثرات منحرف کننده ؛ کنتراست بالاتر، CTA های صریح «تنظیم حد».

13) ضد الگوهای

قبل از نشان دادن پاسخ به یک کلیک، منتظر پاسخ شبکه باشید.
«رنگ بدون شکل»: دولت تنها در سایه متفاوت است.
پالس های بی پایان/چشمک زدن، صداهای تیز بدون سوئیچ.
نکته ابزار با محتوای انتقادی از صفحه کلید قابل دسترسی نیست.
اسپینر در خالی> 1-2 ثانیه بدون پیشرفت/اسکلت.
سایه های نازک/تاری در صدها عنصر (تاخیر در دستگاه های ضعیف).

14) مستندسازی در سیستم طراحی

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

«A11y و حرکت»: قوانین برای SR/HC/کاهش حرکت ؛ مثال های ARIA

«انجام/انجام»: کلیپ های کوتاه با زمان بندی، INP/شماره بازخورد اول.

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

تعاملات میکرو یک زبان اعتماد به نفس است. در ≤ 100 میلی ثانیه پاسخ دهید، حالت های قابل فهم را ضبط کنید، از خوش بینانه با بازگشت ایمن استفاده کنید، فقط به رنگ تکیه نکنید و خواص نور را تحریک کنید. احترام به در دسترس بودن و عملکرد - پس از آن محصول احساس زنده، صادق و قابل اعتماد، به ویژه در سناریوهای زمان واقعی است.