Ugrukdyryş täsiri we interaktiwlik

1) UX-da ugrukdyrmagyň roly

• "Bu interaktiw?" (ugrukdyrmak/kursor/yşyklandyrmak),
• "Men nirede?" (fokus stili),
• "Basylanda näme bolar?" (ýagdaý we affordance),
• "Hereket boldumy?" (active/pressed we indiki feedback).

Prinsip: täsirler manyny güýçlendirýär, onuň ornuny tutmaýar. Esasy maglumatlar we herekete girmek diňe ugrukdyryş üçin gizlenmeli däldir.

2) Ýagdaýlaryň modeli we semantika

Esasy toplumy: 'default' → 'hover' → 'focus' → 'active/pressed' → 'disabled' → 'loading' (goşmaça).
Baglanyşyklar üçin 'visited', açarlar üçin 'checked' goşýarys.

• Ýagdaýlaryň arasynda - diňe reňk bilen däl, şekiliň/galyňlygyň/nyşanyň wizual tapawudy.
• Tekstiň/nyşanlaryň fon garşylygy: ≥ 4. 5:1 (adaty tekst), ≥ 3:1 (uly/ýagly).
• Fokus görkezilmän görünýär (klawiatura/ekran).

3) Enjamlar we media soraglary

css
/ There is an exact pointer and hover (mouse/trackpad )/
@ media (hover: hover) and (pointer: fine) {/hover effects/}

/ No hover or rough pointer (touch/remote control )/
@ media (hover: none), (pointer: coarse) {/alternatives to hover/}

/ Any type of pointer (hybrid devices )/
@ media (any-hover: hover) {/minimal improvements/}

• Taç enjamlarynda hereketiň täsirini anyklamak üçin möhüm däl - aç-açan affordances ulanyň: reňk/nyşan/çarçuwa/yşarat.
• Nawigasiýa/gözegçilikleri diňe "hower" astynda gizlemäň.

4) Dowamlylygy we egri

• Hover: 120-180 ms
• Focus: 120-180 ms
• Active/Pressed: 80–120 мс
• Ripple/ink (ulanylsa): ≤ 240 ms, 1 aýlaw

Adaty egri: 'cubic-bezier (0. 2, 0, 0. 2, 1)`

Active - Has çalt ('cubic-bezier (0. 4, 0, 1, 1) '), çykyş - has ýumşak (' cubic-bezier (0, 0, 0. 2, 1)`).

5) Dizaýn-ulgamyň bellikleri (mysal)

json
{
"interactive": {
"duration": { "hover": 160, "focus": 160, "active": 90 },
"easing": { "std": "cubic-bezier(0. 2,0,0. 2,1)", "acc": "cubic-bezier(0. 4,0,1,1)" },
"shadow": { "hover": "var(--elev-2)", "focus": "0 0 0 3px var(--focus-ring)" },
"opacity": { "disabled": 0. 38, "muted": 0. 64 }
}
}

6) Düwmeler: salgylanma nusgasy

Default: okalýan tekst ≥ 4. 5:1 guýmak.
Hover: − Δ L fon 0. 02–0. 04, ýeňil kölege, 'pointer' kursory.
Active: − Δ L 0. 02–0. 04, gysgaldylan kölege/basmak (scale 0. 98), dowam edýär. 80-100 ms.
Focus: blur bolmazdan 2-3 px kontrast halkasy.
Disabled: курсор `not-allowed`/`default`, opacity ≤ 0. 38, hower effektleri ýok.

css
.button {
transition: background-color. 16s var(--ease), transform. 09s var(--ease-acc), box-shadow. 16s var(--ease);
}
@media (hover:hover) and (pointer:fine) {
.button:hover  { background: var(--btn-bg-hover); box-shadow: var(--shadow-hover); }
}
.button:active  { transform: scale(.98); }
.button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.button[disabled] { opacity:.38; pointer-events: none; }

7) Baglanyşyklar we tekst hereketleri

Diňe reňk bilen tapawutlanmaýar: adaty ýa-da hover/focus.
Ugrukdyrmak üçin: nygtamany güýçlendirmek (galyňlyk/ofset), äheňi aňsat üýtgetmek.
'Visited' - şol bir palitranyň başga bir kölegesi, kontrast saklandy.

css a { text-decoration: underline; text-underline-offset:.12em; }
@media (hover:hover) and (pointer:fine) {
a:hover { text-underline-offset:.2em; }
}
a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }

8) Kartoçkalar, sanawlar, tablisalar

• Hover: çarçuwanyň ýumşak kölegesi/yşyklandyrylyşy, 'pointer' kursory diňe tutuş kartoçka basylsa.
• Active: Gysga basmak, sözbaşyny yşyklandyrmak.
• Focus: kartoçkanyň töwereginde görünýän halka, diňe içinde däl.

• Hower-fon Δ L 0. 02–0. 04; işjeň setir - aýdyň çarçuwa.
• Setirdäki basmalar diňe aç-açan affordance ("→" nyşany, yşarat).

• Kaskadly gijikdirmelerden iň köp 6-8 element (stagger 20-30 ms).

9) Giriş görnüşleri we meýdanlary

Meýdanlarda hover: çarçuwanyň inçe yşyklandyrylyşy (Δ L ~ 0. 05), blokyň ululygyny üýtgetmezden.
Focus: kontrast halka + çarçuwanyň reňkini üýtgetmek; placeholder tapawutlanýar (≥ 3:1).
Hata: reňk + nyşan/tekst; gysga "shake" 6 px, ≤ 140 ms, bir gezek ≤ kabul edilýär.

10) Nyşanlar we kiçi nyşanlar

Düwmäniň zolagyny 20 × 24 px bolsa-da 32-32 (desktop )/40 × 40 (mobile) çenli ulanyň.
Hover: 1-2 aýratynlykdan köp bolmadyk aç-açanlygy/guýulmagy/galyňlygy üýtgetmek.
Active: scale 0. 98.
Focus: basma zolagynyň konteýneri boýunça halka.

11) Elýeterlilik (A11y) we klawiatura

Goldaw beriň ': focus-visible' (syçan üçin fokus stillerini görkezmeýäris, klawiatura üçin - görkezýäris).
Hover-maslahatlary döredýän elementleriň fokus boýunça ekwiwalenti bolmaly (şol bir mazmun Tab/Enter düwmesi boýunça peýda bolýar).
Aria-atributlar: interaktiwlerde ýagdaý boýunça 'role', 'aria-pressed '/' aria-expanded '/' aria-current' bar.
Prefers-reduced-motion: iň az (opacity/fill) masştabyny çalyşýarys, impulslary öçürýäris.

css
@media (prefers-reduced-motion: reduce) {
{ transition-duration:.01ms! important; animation: none! important; }
}

12) Öndürijilik

Diňe 'opacity' we 'transform' animasiýa ediň; 'width/height/left/top', köp elementde agyr blur/kölegelerden gaça duruň.
"will-change" -ni ortaça ulanyň; geçiş tamamlanandan soň aýyryň.
Sanawlarda/tablisalarda - minimal effektler, "global" repaint ýok.

13) Hower-intent we "ýelmeşmek"

• Çylşyrymly tooltip/menýu görkezilmezden öň gijä galmagyň çägi 80-120 ms.
• Kursoryň "ýelmeşmegi": eger ulanyjy nokatdan menýuga burçly hereket etse, 200-300 ms "koridor" (Fitts üçburçlygy) berýäris.
• Taç - hover-i press ýa-da açyk "başga" düwmesi bilen çalyşýarys.

14) Gural/menýu/damja

Açmak: hover-intent (desktop )/press (taç), ýapmak - ideg/blur/ESC.
Pozisiýa - çeşmä, oky deňleşdirildi; max-width we göçürmeler goşuldy.
Elýeterliligi: 'role =' tooltip '', baglanyşdyrýarys 'aria-describedby'; menýu üçin - 'role = "menu"' + oklary dolandyrmak.

15) iGaming aýratynlyklary

Koeffisiýentler/Liderbordlar: hover setiri/öýjügi görkezýär, ýöne ýerleşiş metrikasyny üýtgetmeýär ("bökmezden").
Ýaryşlaryň/bonuslaryň kartoçkalary: hower çarçuwany/nyşany "janlandyryp" biler, ýöne tekstli CTA we şertler okalyp bolmaýar (≥ 4. 5:1).
Jogapkär habarnamalar (18 +, çäkler): ünsüni sowmagyň täsiri bolmazdan; görkezilende diňe baglanyşyklary nygtamaga we anyk fokusa ýol berilýär.
Jedel/satyn alyş düwmeleri: active-feedback hökmany (wizual basmak/basmak) we iberilenden soň birmeňzeş disable.

16) Interfeýs reseptleriniň mysallary

css
.cta {
background: var(--role-primary);
color: var(--on-primary);
transition: background-color. 16s var(--ease), transform. 09s var(--ease-acc), box-shadow. 16s var(--ease);
}
@media (hover:hover) and (pointer:fine) {
.cta:hover { background: var(--role-primary-hover); box-shadow: var(--elev-2); }
}
.cta:active { transform: scale(.98); }
.cta:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring); }

css
.card { transition: box-shadow. 16s var(--ease), border-color. 16s var(--ease); }
@media (hover:hover) and (pointer:fine) {
.card:hover { box-shadow: var(--elev-2); border-color: var(--border-strong); }
}
.card:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring); }

css
.table tr { transition: background-color. 12s var(--ease); }
@media (hover:hover) and (pointer:fine) {
.table tr:hover { background: var(--row-hover); }
}
.table tr:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }

17) Anti-patternler

Möhüm hereketleri/menýuny diňe hover üçin gizläň.
Ugrukdyrylanda ululygy/ýerleşişini üýtget.
Ýagdaýlaryň tapawudy üçin diňe reňk esaslanýar.
Titremeler, tükeniksiz impulslar, tekstlerde "kislotaly" glow.
Focus stilleriniň ýoklugy ýa-da garaňky mowzukda görünmezligi.
'Pointer' kursoryny hereketsiz elementlere gönükdiriň.

18) QA-çek-sanawy

Elýeterlilik

• Interaktiwleriň hemmesi klawiatura arkaly elýeterlidir; hile görýäris.
• Hover-mazmun 'focus '/' aria' arkaly elýeterlidir.
• Tekstiň we nyşanlaryň gapma-garşylygy WCAG-a laýyk gelýär.

Özüni alyp barşy

• Hover/active/disabled/visited görnüşi we äheňi bilen tapawutlanýar.
• Jogap gijikdirilmedi> 120 ms.
• Taçda hover alternatiwasy bar.

Çykyş

• Diňe 'transform '/' opacity' animasiýa edilýär.
• Köp elementde agyr blur/kölegeler ýok.
• Uzyn sanawlarda täsirler iň az.

19) Dizaýn-ulgamdaky resminamalar

Esasy komponentler üçin ýagdaý tablisasy (düwmeler, baglanyşyklar, kartoçkalar, meýdanlar, tablisalaryň setirleri).
Uzynlyk/egri/kölege bellikleri we light/dark üçin kod mysaly.
"Hover vs Touch" bölümi: alternatiwalaryň düzgünleri we mysallar.
"Do/Don 't" gysga klipler we kontrast görkezijileri bilen.

Gysgaça gysgaça

Ugrukdyryş effektleri interfeýs diliniň kömekçi, ýöne möhüm bölegidir. Olary gysga we öňünden aýdyp boljak ediň, klawiatura we taýagy saklaň, kontrast we görünýän ünsi üpjün ediň, diňe arzan aýratynlyklary janlandyryň. Şonda interaktiwlik hereketleriň aýdyňlygyny we tizligini güýçlendirýär, olara päsgel bermeýär.