Микро өзара іс-қимыл және фидбек

1) Микро өзара іс-қимыл дегеніміз не?

Микро әрекеттер - жүйенің пайдаланушыны естігенін және нәтижеге қарай жылжып келе жатқанын растайтын қысқа «жауап сигналы» циклдары.

1. Триггер (басу, свайп, фокус, жүйелік оқиға).

2. Ережелер (не және қалай өзгереді).

3. Фидбек (визуалды/дыбыстық/тактильді/мәтіндік).

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

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

2) Жобалау қағидаттары

Мағынасы> әсері. Нәтиже «не болғанын» және «одан әрі не болғанын» түсіндіреді.
Жылдам. Бірінші жауап ≤ 100 мс (түймешіктер/ауыстырып қосқыштар).
Біркелкілік. Әртүрлі жағдайлар: hover/focus/pressed/disabled/loading.
Үнемдеу. Қасиеттерінің минимумы, ұзақтығы қысқа, «салютсіз».
Консистенттілік. Бірдей әрекеттер - бірдей сигналдар.
Қол жетімділік. Фидбекті скринридермен көреміз, естиміз және оқимыз; қозғалысқа/дыбысқа балама бар.

3) Таймингтер мен қисықтар

Hover/Focus: 120-180 мс

Pressed/Toggle: 80–120 мс

Toast/Tooltip: кіру 180-240 мс, шығу 120-160 мс

Inline-валидация: өріс фокусын жоғалтқаннан кейін 100 мс ≤

Әдепкі қисық: '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 Тосттар/баннерлер/снекбарлар

Бұғатталмайтын растаулар үшін пайдаланыңыз.
Ұзақтығы 2-5 с, hover/focus кезінде үзіліс, Undo түймесі орынды.
Маңызды контент пен CTA-ны жаппаңыз.

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

Егер процестің ұзындығы белгілі болса - прогрессбар; егер жоқ болса - spinner орнына skeleton.
layout: фикс. блоктардың биіктігі.

4. 5 Бейдждер/есептегіштер

Санның қарама-қайшылығы ≥ 4. 5:1; ең көбі 99/999 '99 +' қиылысымен.
Инкремент анимациясы - 40-60 мс батчамен қысқа қадамдар, макетті «дірілдетпей».

4. 6 Tooltip/Help

hover/focus бойынша пайда болу; 'aria-describedby' арқылы қол жетімділік.
Тек tooltip бағдарламасында сыни ақпаратқа тыйым салу.

5) Қателер, бос жағдайлар, undo

Қате: адал мәтін, себебін және әрекетін түсіндіру («Қайталау», «Картаны өзгерту»).
Бос күйі: ол не және қалай бастау керек; иллюстрация, AA/AAA мәтінінің қарама-қайшылығы.
Undo window: кері әрекеттер үшін 5-10 с (пулға дейін мөлшерлемені алып тастау, алып тастау).

6) Мультимодальды фидбек

Дыбыс: тыныш, қысқа, оқиға түріне бір паттерн (табыс/қате/назар); параметрлерді өшіреміз.
Вибро/хаптика: баспасөз/сәттілікке оңай жауап беру; 'prefers-reduced-motion' және жүйелік шектеулерді құрметтейміз.
Көзбен шолу: тек 'transform/opacity', массивтерде ауыр blur/көлеңкелерсіз.

7) Қол жетімділік (A11y)

': focus-visible' пернетақта үшін; blur жоқ фокус-сақина.
Скринридер: 'role =' status '/' alert '' тосттар үшін; тірі аймақтар 'aria-live = «polite/assertive»'.
Дыбыс/қозғалысқа балама; 'prefers-reduced-motion: reduce'.
Мәтін мен иконалардың қарама-қайшылығы - WCAG бойынша (қалыпты ≥ 4. 5:1).

8) Перформанс

100 мс ≤ үшін жауап беріңіз: желіге дейін көзбен шолу.
'transform/opacity' анимациясын жасау; Көптеген элементтерде 'height/left/box-shadow' дегеннен аулақ болыңыз.
Желілік әсерлер - префетшпен және оптимистикамен; ретрайлер іспеттес.

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 мс, Long Tasks үлесі <5%.
First User Feedback (басу → көрнекі жауап) ≤ 100 мс.
Кері қайтарумен оптимистік әрекеттердің үлесі <3% (басқаша - сенімсіздік).
UX-сауалнамалар: қателер туралы хабарламалардың түсініктілігі, растаулардың көрінуі.

QA-чек парағы

• Әрбір интерактивте 'pressed/busy/disabled' бар.
• Қателер мәтінмен және әрекеттермен қатар жүреді (Retry/Undo).
• Тосттар SR арқылы қол жетімді және негізгі мазмұнды қамтымайды.
• Inline-валидация енгізуге кедергі келтірмейді; хабарламалар нақты.
• Қолдау 'prefers-reduced-motion'; дыбыс/діріл ажыратылады.
• layout және strobe секірулері жоқ; 'transform/opacity' анимациясы.

12) iGaming ерекшелігі

Мөлшерлеме/сатып алу: жедел 'pressed → busy', Undo (егер регламент мүмкіндік берсе), idempotent-кілттерімен «қабылданды» тосты; кешіктірілгенде> 1 с - «Растауды күтеміз»....
Spin/Reveal: қысқа пресс-фидбек, шексіз жыпылықтамай тегіс бастау/тоқтату; ұтыс - серпіліс ≤ 500 мс + оқылатын мәтін (AAA).
Лайв-коэффициенттер: батчалармен жаңарту, «секірулерсіз» көрнекі дифф (көрсеткі/қалыңдығы).
Төлемдер/қорытындылар: қадамдық прогресс (КБК → Тексеру → Төлем), бас тарту себептерінің ашық мәтіндері.
Жауапты ойын: алаңдататын әсерсіз хабарламалар; «Лимит белгілеу» CTA айқын жоғары қарама-қарсылық.

13) Қарсы үлгілер

Шертуге жауап бермес бұрын желілік жауап күтіңіз.
«Пішінсіз түс»: күй реңкімен ғана ерекшеленеді.
Шексіз пульсация/жыпылықтау, ажыратқышсыз қатты дыбыстар.
Пернетақтадан қол жетімді емес критикалық мазмұнымен Tooltip.
Прогрессіз/скелетонсыз> 1-2 с бос спиннер.
Жүздеген элементтердегі жұқа көлеңкелер/blur (әлсіз құрылғылардағы лаг).

14) Дизайн-жүйедегі құжаттама

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

Қысқаша түйіндеме

Микро өзара іс-қимыл - сенімділік тілі. 100 мс ≤ жауап беріңіз, түсінікті жағдайларды белгілеңіз, қауіпсіз кері қайтарылатын оптимистиканы пайдаланыңыз, тек түске сүйенбеңіз және жеңіл қасиеттерді анимациялаңыз. Қол жетімділік пен өнімділікті құрметтеңіз - онда өнім, әсіресе нақты уақыт сценарийлерінде тірі, адал және сенімді сезіледі.