Միկրովզաիմոդգրաֆիա և ֆիբեկ

1) Ի՞ նչ է միկրովիզամագնիսական ազդեցությունը

Միկրովիզաիմոդենիան կարճ ցիկլեր է, որոնք ապացուցում են, որ համակարգը լսել է օգտագործողին և շարժվում է արդյունքի։

Դասական չորսը

1. (տեսահոլովակ, սվայպ, ֆոկուս, համակարգային իրադարձություն)։

2. Կանոնները (ինչ և ինչպես է փոխվում)։

3. Ֆիդբեքը (տեսողական/ձայնային/մարտավարական/տեքստային)։

4. Ցիկլը/մետա կանոնները (խոհարար, մաքրում, undo/redo)։

Նպատակը 'նվազեցնել անորոշությունը և ճանաչողական բեռը, առանց շեղելու առաջադրանքից։

2) Նախագծման սկզբունքները

Իմաստը> էֆեկտը։ Էֆեկտը բացատրում է «ինչ է տեղի ունեցել» և «ինչ է հաջորդը»։

Ակնթարթային։ Առաջին արձագանքը 100 մզ (կոճակներ/անջատիչներ)։

Միանշանակ։ Տարբեր վիճակներ ՝ hover/focus/pressed/wwww.abled/loading։

Խնայողություններ։ Նվազագույն հատկությունները, կարճ տևողությունը, առանց «բարևների»։

Կոնսիստենտություն։ Նույն գործողությունները նույն ազդանշաններն են։

Հասանելիություն։ Ֆիդբեքը տեսնում է, լսում և կարդում սկրինիդեր։ կա այլընտրանք շարժմանը/ձայնին։

3) Թայմինգները և կորերը

Hover/Focus: 120-180 ms

Pressed/Toggle: 80–120 мс

To.ru/Tooltip: 35180-240 ms, դուրս 120-160 մզ

International-validation: 35100 մզ դաշտի ֆոկուսի կորստից հետո

Կորը լռելյայն '"cubic-bezier (0։ 2, 0, 0. 2, 1)`; presed-ի համար արագացված "cubic-bezier (0. 4, 0, 1, 1)`.

4) Միկրովազիմեդիայի կատալոգը

4. 1 Կոճակներ և անջատիչներ

Չարտոնված արձագանքը 'տեսողական «ալյուր »/ավելացնելով + վիճակը« buby »ցանցային խնդրով։

Լավատեսական նորարարություն 'փոխենք UI-ը անմիջապես, սխալմամբ (undo)։

Կրկնակի տեսահոլովակների դեբաունսը 'մենք արգելափակում ենք կրկնօրինակը պատասխանը/timeout։

4. 2 Ձևերի inault-validation

Վալիդացիան բլուր դաշտի վրա; հաղորդագրությունները կարճ և կառուցվածքային են («առնվազն 8 նիշ»)։

Կարգավիճակի պատկերակը + գույնը + տեքստ (ոչ մեկ գույնով)։

Գաղտնաբառերի համար «ուժի» ակնթարթային ցուցիչը (չի խանգարում ներդրմանը)։

4. 3 Tosts/banners/Snexbars

Օգտագործեք ոչ արգելափակող ապացույցների համար։

Տևողությունը 2-5 c, դադար hover/focus, Undo կոճակը որտեղ տեղին է։

Մի փակեք կարևոր բովանդակությունը և CTA-ը։

4. 4 Առաջընթաց և կմախքներ

Եթե գործընթացի երկարությունը հայտնի է առաջընթաց, եթե ոչ, skeleton փոխարեն։

Առանց layout 'fix։ բլոկներ։

4. 5 Բեյջի/հաշվիչներ

Հակադրություն թիվ 4 թվերի։ 5: 1; առավելագույնը 99/999 '«99 +» հանգույցով։

Ալյումինի անիմացիաները 40-60 մսի կարճ քայլերն են, առանց մակետի «դողերի»։

4. 6 Tooltip/Help

Հայտնվելը hover/focus; հասանելիությունը «aria-describedby» -ի միջոցով։

Քննադատական տեղեկատվության արգելքը միայն tooltip-ում։

5) Սխալներ, դատարկ վիճակներ, undo

Սխալ 'ազնիվ տեքստը, պատճառների և գործողությունների բացատրությունը («Կրկնել», «Փոխել քարտը»)։

Դատարկ վիճակ 'ի՞ նչ և ինչպես սկսել։ նկարազարդումը, AA/AAA տեքստի հակադրությունը։

Undo 24: 5-10 հակադարձ գործողությունների համար (հեռացումը, տոկոսադրույքի վերացումը մինչև փամփուշտները)։

6) Մուլտիմոդալ ֆիբեկ

Ձայնը 'հանգիստ, կարճ, մեկ փամփուշտ իրադարձության տեսակի վրա (հաջողություն/սխալ/ուշադրություն); անջատում ենք պարամետրերի մեջ։

Վիբրո/հապտիկա 'թեթև արձագանք press/հաջողություն; հարգում ենք «wwww.fers-reduced-motion» և ռուսական սահմանափակումները։

Տեսողական 'միայն «transform/opacity», առանց ծանր բլուր/ստվերների զանգվածային։

7) Հասանելիություն (A11y)

'focus-visible' ստեղնաշարի համար; ֆոկուս օղակը առանց բլուրի։

Scrinrider: 'role = «status »/» alment» -ը թոստերի համար։ կենդանի տարածաշրջանները 'aria-210 = «polite/assertive»։

Ձայնի/շարժման այլընտրանք; «wwww.fers-reduced-motion: reduce»։

Տեքստի և սրբապատկերների հակադրությունը WCAG-ով (սովորական թիվ 4։ 5:1).

8) Պերֆորանսը

Արձագանքեք 100 մզ-ին 'տեսողական արձագանքը ցանցին։

Անիմիրուրու 'transform/opacity "; խուսափեք «height/left/big-shadow» բազմաթիվ տարրերից։

Ցանցային էֆեկտները 'պրեֆետի և լավատեսության հետ։ trai impotent.

9) Microvimoday (դիզայնի համակարգ)

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) Իրականացման սնիպետներ

Թոստ 'hover և Undo

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>

Intert-validation բլուրի վրա

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-ը «էժան» էֆեկտների համար

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 տոկոսը։

First User Feedback (տեսահոլովակը կատարվում է տեսողական արձագանքով) 36100 մզ է։

Լավատեսական գործողությունների մասնաբաժինը '<3 տոկոսը (հակառակ դեպքում' անվստահություն)։

UX-հարցումները 'սխալների մասին հաղորդագրությունների հասկանալը, ապացույցների տեսանելիությունը։

QA-chek թերթ

• Յուրաքանչյուր ինտերակտիվ ունի «pressed/busy/wwww.abled»։
• Սխալները ուղեկցվում են տեքստով և գործողություններով (Retry/Undo)։
• Թոստները հասանելի են SR-ով և չեն արգելափակում հիմնական բովանդակությունը։
• Intert-validation չի խանգարում ներածությանը։ հաղորդագրությունները կոնկրետ են։
• Աջակցված է 'wwww.fers-reduced-motion "; ձայնը/թրթուրը անջատվում են։
• Չկա layout և կառուցվածք։ անիմացիաներ 'transform/opacity>։

12) iGaming հատկությունները

Տոկոսադրույքը/գնումը 'ակնթարթային «pressed wwww.buby», «Սովորական» -ը Undo-ից (եթե կանոնակարգը թույլ է տալիս), idempotent-բանալիները։ հետաձգման ժամանակ> 1 s - «Սպասում ենք ապացույց»...

Spin/Reveal: Կարճ մամուլի ֆիդբեկ, լողացող մեկնարկը/stop առանց անվերջ միգրացիայի; Հաղթանակը 500 մզ + ընթերցանության տեքստ է (AAA)։

Live-գործակիցները 'մարտկոցների նորարարությունները, տեսողական շարժիչը (սլաքը/105) առանց «ցատկելու»։

Վճարումները/եզրակացությունները 'տուրքի առաջընթացը (KUS) Ստուգում է Prazata-ը, թափանցիկ տեքստերը ձախողման պատճառներից։

Պատասխանատու խաղ 'ծանուցումներ առանց շեղող էֆեկտների։ բարձր հակադրություն, որը ակնհայտ է CTA «Տեղադրել սահմանը»։

13) Anti-patterna

Սպասել ցանցային պատասխանին, նախքան ցույց տալ, թե ինչ արձագանք կա տեսահոլովակի վրա։

«Գույնը առանց ձևի», վիճակը տարբերվում է միայն երանգով։

Անսահման իմպուլսացիա/միգրացիա, կտրուկ ձայներ առանց անջատիչի։

Tooltip-ը կրիտիկական բովանդակությամբ, որը հասանելի չէ ստեղնաշարից։

Դատարկության մեջ "1-2 s առանց առաջընթացի/կմախքի։

Բարակ ստվերներ/բլուր հարյուրավոր տարրերի վրա (լագը թույլ սարքերում)։

14) Մոսկվա դիզայնի համակարգում

«Micro-tokens»: «duration/easing», ճնշում tosts/bajey/validators։

«Patterns» 'կոճակներ, ձևեր, տոստներ, առաջընթաց, intert-սխալներ, undo։

«A1y & Motion» 'կանոնները SR/HC/reduced-motion համար; ARIA-ի օրինակները։

«Do/Don 't»: կարճ տեսահոլովակներ թայմինգներով, INP/First Feedback թվերով։

Live ռեզյումե

Միկրովզաիմոդիզմը վստահության լեզուն է։ Եկեք արձագանքենք 100 մկմ տրամագծով, արձանագրենք հասկանալի վիճակներ, օգտագործենք լավատեսություն ապահով արձագանքով, մի ապավինեք միայն գույնին և անիմիրուզեք թոքային հատկությունները։ Հարգեք հասանելիությունը և արտադրողականությունը, այդ ժամանակ ապրանքը զգում է կենդանի, ազնիվ և հուսալի, հատկապես իրական ժամանակի սցենարներում։