Микрокаржылоо жана фидбек

1) Микро карыз деген эмне

Микро аракеттер - система колдонуучуну укканын жана натыйжага карай жылып баратканын тастыктаган "сигналдык жооп" кыска циклдери.

1. Триггер (click, swipe, фокус, системалык окуя).

2. Эрежелер (эмне жана кантип өзгөрөт).

3. Фидбек (көрүү/үн/тактилдик/текст).

4. Цикл/мета эрежелери (кайталоо, аяктоо, undo/redo).

Максаты: тапшырманы алаксытпай, белгисиздикти жана когнитивдик жүктү азайтуу.

2) Долбоорлоо принциптери

Мааниси> таасири. Эффект "эмне болгонун" жана "андан кийин эмне болорун" түшүндүрөт.
көз ирмемдик. Биринчи жооп ≤ 100 ms (баскычтар/баскычтар).
Так. Ар кандай шарттар: hover/focus/pressed/disabled/loading.
Экономия. Минималдуу касиеттери, кыска мөөнөттүү, "салют" жок.
Консистенттүүлүк. Бирдей аракеттер - бирдей сигналдар.
Жеткиликтүүлүк. Фидбек көрүп, угуп, скринридер менен окуп; кыймыл/үн үчүн альтернатива бар.

3) Таймингдер жана ийри сызыктар

Hover/Focus: 120-180 ms

Pressed/Toggle: 80–120 мс

Toast/Tooltip: кирүү 180-240 мс, чыгуу 120-160 мс

Inline-валидация: 100ms ≤ талаанын фокусун жоготкондон кийин

Демейки ийри сызык: 'cubic-bezier (0. 2, 0, 0. 2, 1)`; pressed үчүн - тездетилген 'cubic-bezier (0. 4, 0, 1, 1)`.

4) Микро иш-аракеттер каталогу

4. 1 баскычтар жана баскычтар

Дароо жооп: көрүү "чыкылдатуу "/басуу + тармак суроо-талабы боюнча 'busy 'абалы.
Оптимисттик жаңыртуу: UI дароо өзгөртүп, ката (undo менен).
Дебаунс кош чыкылдатуу: жооп/timeout чейин кайталоону бөгөттөө.

4. 2 Inline валидация формалары

Blur талаага валидация; билдирүүлөр кыска жана конструктивдүү ("кеминде 8 белги").
Статус сөлөкөтү + түс + текст (бир түстө эмес).
Сырсөздөр үчүн - "күч" индикатору (кирүүгө тоскоол болбойт).

4. 3 Тост/баннерлер/Snackbars

Кулпусу жок ырастоо үчүн колдонуңуз.
узактыгы 2-5 с, hover/focus боюнча тыныгуу, Undo баскычы туура жерде.
Маанилүү мазмунду жана CTAны жаппаңыз.

4. 4 Прогресс жана скелеттер

Эгерде процесстин узундугу белгилүү болсо - прогрессбар; жок болсо - spinner ордуна skeleton.
Без скачков layout: фикс. блоктордун бийиктиги.

4. 5 Бейдждер/эсептегичтер

Контраст саны ≥ 4. 5:1; максимум 99/999 '99 +' кыскартуу менен.
Анимация инкремент - кыска кадам 40-60 ms батч, жок "титиреп" макети.

4. 6 Tooltip/Help

hover/focus боюнча көрүнүшү; 'aria-describedby' аркылуу жеткиликтүүлүк.
бир гана tooltip боюнча сын маалымат тыюу салуу.

5) каталар, бош шарттар, undo

Ката: чынчыл текст, себебин жана иш-аракеттерин түшүндүрүү ("Кайталоо", "Картаны өзгөртүү").
Бош мамлекет: бул эмне жана кантип баштоо керек; иллюстрация басылган, тексттин контрасты AA/AAA.
Undo window: 5-10 артка иш-аракеттер үчүн (алып салуу, ок коюмду жокко чыгаруу).

6) Multimodal Фидбек

Үн: тынч, кыска, окуя түрүнө бир үлгү (ийгилик/ката/көңүл); орнотууларды өчүрүп.
Vibro/хаптика: пресс/ийгиликке жеңил жооп; 'prefers-reduced-motion' жана системалык чектөөлөрдү сыйлайбыз.
Визуалдык: бир гана 'transform/opacity', массивдерде оор blur/көлөкөлөр жок.

7) Жеткиликтүүлүк (A11y)

': focus-visible' үчүн клавиатура; blur жок focus шакек.
Screenrider: 'role = "status "/" alert"' тосттор үчүн; тирүү аймактар 'aria-live = "polite/assertive"'.
Үн/кыймылга альтернатива; 'prefers-reduced-motion: reduce'.
Текст менен иконалардын карама-каршылыгы - WCAG (кадимки ≥ боюнча 4. 5:1).

8) Аткаруу

100 мс ≤ үчүн жооп бериңиз: тармакка визуалдык жооп.
Жандандыруу 'transform/opacity'; 'height/left/box-shadow' дегенден качыңыз.
Тармак эффекттери - префет жана оптимизм менен; retrais 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) ишке ашыруу Snippets

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, Long Tasks үлүшү <5%.
Биринчи колдонуучу Feedback (чыкылдатуу → көрүү жооп) ≤ 100 ms.
Артка кайтаруу менен оптимисттик аракеттердин үлүшү <3% (болбосо - ишенбөөчүлүк).
UX-сурамжылоолор: ката билдирүүлөрдүн түшүнүктүүлүгү, ырастоо көрүнүшү.

QA чек тизмеси

• Ар бир interactive 'pressed/busy/disabled' бар.
• Каталар текст жана иш-аракеттер менен коштолот (Retry/Undo).
• Тосттор SR боюнча жеткиликтүү жана негизги мазмунду камтыбайт.
• Inline-валидация кирүүгө тоскоол болбойт; билдирүүлөр конкреттүү.
• Колдоого 'prefers-reduced-motion'; үн/вибрация өчүрүлөт.
• Эч кандай секирүү жана Strobe; 'transform/opacity' анимациялары.

12) iGaming өзгөчөлүктөрү

Коюм/сатып алуу: заматта 'pressed → busy', Undo менен "кабыл алынган" тост (эгерде регламент уруксат берсе), idempotent-ачкычтар; кечигүү менен> 1 с - "Биз ырастоо күтүп жатабыз"....
Spin/Reveal: кыска пресс-фидбек, акырындык менен баштоо/чексиз жаркырап туруп токтотуу; Win - ≤ 500 ms + окулуучу текст (AAA).
Жашоо коэффициенттери: батч менен жаңылоо, визуалдык дифф (жебе/туурасы) "секирүү" жок.
Төлөмдөр/корутундулар: кадам сайын прогресс (KUS → Текшерүү → Төлөм), баш тартуу себептеринин ачык тексттери.
Жооптуу оюн: алаксытуучу таасирлери жок билдирүүлөр; жогорку карама-каршы, ачык-айкын CTA "Лимитти белгилөө".

13) Анти-үлгүлөрү

чыкылдатуу жооп көрсөтүүгө чейин тармак жооп күтүп.
"Түрү жок түс": абалы гана көлөкөсү менен айырмаланат.
Чексиз пульсация/жарк этүү, өчүргүч жок курч үндөр.
Клавиатурадан жеткиликтүү болбогон критикалык мазмун менен Tooltip.
боштук Spinner> 1-2 прогресс/скелет жок.
жүздөгөн элементтердин ичке көлөкө/blur (алсыз түзмөктөрдө лаг).

14) Дизайн системасында документтер

"Micro-tokens": 'duration/easing', тост/төш белги/валидаторлор.
"Үлгүлөр": баскычтар, формалар, тосттор, прогресс, inline каталар, undo.
"A11y & Motion": SR/HC/reduced-motion үчүн эрежелер; ARIA мисалдар.
"Do/Don 't": таймингдер, INP/First Feedback сандары менен кыска клиптер.

Кыскача резюме

Микро - ишеним тили. 100 мс ≤ жооп бериңиз, түшүнүктүү шарттарды оңдоп, коопсуз артка кайтаруу менен оптимизмди колдонуңуз, түсгө гана таянбаңыз жана жеңил касиеттерди анимациялаңыз. Жеткиликтүүлүктү жана өндүрүмдүүлүктү урматтаңыз - анда продукт жандуу, чынчыл жана ишенимдүү сезилет, өзгөчө реалдуу убакыт сценарийлеринде.