Микроинтераксияҳо ва фикру мулоҳизаҳо

1) Микро-ҳамкорӣ чист

Микроинтераксияҳо сигнали кӯтоҳ ↔ давраҳои вокуниш мебошанд, ки тасдиқ мекунанд, ки система корбарро шунидааст ва ба натиҷа ҳаракат мекунад.

1. Триггер (клик, лағжиш, фокус, ҳодисаи система).

2. Қоидаҳо (чӣ тағир меёбад ва чӣ тавр).

3. Фидбек (визуалӣ/садо/дастӣ/матн).

4. Қоидаҳои давр/мета-қоидаҳо (такрор, ба охир расидан, барҳам додан/дубора).

Ҳадаф: коҳиш додани номуайянӣ ва сарбории маърифатӣ бидуни парешон аз вазифа.

2) Принсипҳои тарроҳӣ

Маънӣ> таъсир. Таъсир "чӣ шуд" ва "чӣ оянда" -ро шарҳ медиҳад.
Instantaneity. Ҷавоби аввал ≤ 100 мс (тугмаҳо/коммутаторҳо).
Якдилӣ. Ҳолатҳои фарқкунанда: hover/focus/pressed/ғайрифаъол/боркунӣ.
Пасандоз. Хусусиятҳои ҳадди аққал, давомнокии кӯтоҳ, оташфишонӣ нестанд.
Мутобиқат. Амалҳои якхела ҳамон сигналҳо мебошанд.
Дастрасӣ. Фидбекро хонандаи экран дида, мешунавад ва мехонад; алтернатива ба ҳаракат/садо вуҷуд дорад.

3) Вақтҳо ва хатҳо

Ҳовер/Фокус: 120-180м

Фишор/Тугма: 80-120 мс

Toast/Tooltip: вуруди 180-240ms, баромади 120-160ms

Санҷиши дохилӣ: ≤ 100 мс пас аз гум кардани фокуси саҳро

Хати каҷи тартиботи саввум 'cubic-bezier (0. 2, 0, 0. 2, 1)`; барои фишор - суръатбахшии 'кубик-безер (0. 4, 0, 1, 1)`.

4) Каталоги микроинтераксия

4. 1 Тугмаҳо ва коммутаторҳо

Ҷавоби фаврӣ: клики визуалӣ/indent + ҳолати банд ҳангоми пурсиш аз шабака.
Навсозии оптимистӣ: UI-ро фавран иваз кунед, ба хатогӣ баргардед (бо бекоркунӣ).
Баҳси дукарата клик: такрори блокро то/вақт ҷавоб додан.

4. 2 Санҷиши дохилии шаклҳо

Санҷиш дар майдонҳои норавшан; паёмҳо мухтасар ва созанда мебошанд ("ҳадди аққал 8 аломат").
Тасвири ҳолат + ранг + матн (на як ранг).
Барои паролҳо - нишондиҳандаи фаврии "қувват" (ба воридшавӣ халал намерасонад).

4. 3 Тост/баннерҳо/газакҳо

Барои тасдиқи басташавӣ истифода баред.
Давомнокии 2-5 с, таваққуф дар hover/focus, Бекор кардани тугма дар ҳолати зарурӣ.
Мундариҷаи муҳим ва CTA-ро хомӯш накунед.

4. 4 Пешрафт ва скелетҳо

Агар дарозии раванд маълум бошад, сатри пешрафт; агар не, скелет ба ҷои спиннер.
Ягон тарҳ ҷаҳида намешавад: ислоҳ кунед. баландии блок.

4. 5 Нишонаҳо/ҳисобкунакҳо

Контрасти рақам ≥ 4. 5:1; ҳадди аксар 99/999 бо буриши '99 +'.
Аниматсияҳои афзоиш - қадамҳои кӯтоҳи 40-60 мс, бе тарҳбандии "ларзон".

4. 6 Асбоб/Кӯмак

Намуди зоҳирӣ аз ҷониби hover/focus; дастрасӣ тавассути 'aria-тавсифӣ'.
Иттилооти танқидиро танҳо дар абзор манъ кунед.

5) Хатогиҳо, ҳолати холӣ, бекор кардан

Хато: матни ростқавл, шарҳи сабаб ва амал ("Такрор", "Корти тағирот").
Ҳолати холӣ: он чист ва чӣ гуна бояд оғоз кард; тасвир хомӯш карда шуд, контрасти матн AA/AAA.
Тирезаро барҳам диҳед: 5-10 с барои амалҳои баръакс (хориҷ кардан, бекор кардани гарав пеш аз тир).

6) Фикрҳои мултимодалӣ

Садо: ором, кӯтоҳ, як намуна барои як намуди ҳодиса (муваффақият/хатогӣ/диққат); дар танзимот хомӯш кунед.
Vibro/haptika: вокуниши осон/муваффақият; эҳтиром 'маҳдудиятҳои коҳишёфтаи ҳаракат' ва система.
Визуалӣ: танҳо 'табдил/шаффофият', ҳеҷ гуна норавшанӣ/сояҳо дар массивҳо.

7) Дастрасӣ (A11y)

': фокус намоён' барои клавиатура; ангуштарин фокус бе blur.
Экрани экран: 'нақш = "ҳолат "/" ҳушдор "'барои вудкои; минтақаҳои зинда 'aria-live = "хушмуомила/эътимодбахш"'.
Алтернатива ба садо/ҳаракат; 'афзалият-кам-ҳаракат: кам кардан'.
Контрасти матн ва нишона - WCAG (≥ муқаррарӣ 4. 5:1).

8) Иҷро

Ҷавоб додан ≤ 100 мм: вокуниши визуалӣ ба шабака.
Animate 'табдил/шаффофӣ'; аз унсурҳои сершумор 'баландӣ/чап/қуттии соя' пешгирӣ кунед.
Таъсири шабака - бо префетч ва некбинӣ; 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).
• Тостҳо дар SR дастрасанд ва мундариҷаи калидиро такрор намекунанд.
• Тасдиқи хаттӣ ба вуруд халал намерасонад; паёмҳо мушаххас мебошанд.
• 'дастгирии-кам-кам' дастгирӣ; садо/ларзиш хомӯш карда мешавад.
• Ягон тарҳ ва strobe ҷаҳида нест; аниматсияҳо оид ба 'табдил/шаффофият'.

12) Хусусиятҳои IGaming

Бет/харид: фавран 'фишурда → банд', вудкои "Қабулшуда" бо Undo (агар қоидаҳо иҷозат диҳанд), калидҳои бекас; бо таъхир> 1 с - "Интизории тасдиқ"....
Чарх занед/Ошкор кунед: фикру мулоҳизаҳои кӯтоҳ, оғози ҳамвор/таваққуф бидуни чашмакзании беохир; win - burst ≤ 500 ms + матни хондан (AAA).
Коэффисиентҳои зинда: навсозиҳо бо маҷмӯаҳо, diff визуалӣ (тир/ғафсӣ) бе "ҷаҳиш".
Пардохтҳо/хулосаҳо: пешрафти зина ба зина (KUS → Proverka → Vyplata), матнҳои шаффофи сабабҳои рад кардан.
Бозии масъул: огоҳиҳо бидуни таъсири парешон; муқоисаи баландтар, возеҳи "Set Limit" CTA.

13) Анти-намунаҳо

Пеш аз нишон додани ҷавоб ба клик ҷавоби шабакаро интизор шавед.
"Ранг бе шакл": давлат танҳо бо соя фарқ мекунад.
Пульсацияҳои беохир/чашмакҳо, садоҳои тез бидуни гузариш.
Асбоб бо мундариҷаи интиқодӣ аз клавиатура дастрас нест.
Spinner дар холӣ> 1-2 s бе пешрафт/скелет.
Сояҳои лоғар/садҳо унсурҳо (ақибмонӣ дар дастгоҳҳои заиф).

14) Ҳуҷҷатгузорӣ дар системаи тарроҳӣ

"Микро-токенҳо": 'давомнокӣ/сабукӣ', захираи тостҳо/нишонаҳо/валидаторҳо.
"Намунаҳо": тугмаҳо, шаклҳо, тостҳо, пешрафт, хатогиҳои дохилӣ, бекоркунӣ.
"A11y & ҳаракат": қоидаҳо барои SR/HC/кам-ҳаракат; Намунаҳои ARIA.
"Иҷро кунед/накунед": клипҳои кӯтоҳ бо вақт, рақамҳои INP/Аввалин фикру мулоҳизаҳо.

Хулосаи мухтасар

Микро-ҳамкорӣ забони эътимод аст. Дар ≤ 100 мс ҷавоб диҳед, ҳолати фаҳмо гиред, оптимистро бо бозгашти бехатар истифода баред, танҳо ба хусусиятҳои рангӣ ва аниматсионии рӯшноӣ такя накунед. Эҳтиром ба мавҷудият ва муваффақият - пас маҳсулот худро зинда, ростқавл ва боэътимод ҳис мекунад, алахусус дар сенарияҳои вақти воқеӣ.