Жетекчилик эффекттери жана интерактивдүүлүк

1) UX багыттоо ролу

• "Бул интерактивдүүбү?" (багыттоо/курсор/жарык),
• "Мен кайда?" (фокус-стили),
• "чыкылдатуу менен эмне болот?" (абалы жана affordance),
• "Иш-аракет болду беле?" (active/pressed жана кийинки feedback).

Принцип: эффекттер маанини бекемдейт, аны алмаштырбайт. Негизги маалымат жана иш-аракет жеткиликтүүлүгү гана багыттоо үчүн жашыруун болбошу керек.

2) абалы жана семантика модели

Негизги топтому: 'default' → 'hover' → 'focus' → 'active/pressed' → 'disabled' → 'loading' (кошумча).
шилтемелер үчүн кошуу 'visited', баскычтар үчүн - 'checked'.

• Шарттардын ортосунда - бир гана түс эмес, формасы/калыңдыгы/сөлөкөтүнүн визуалдык айырмасы.
• Текст/сөлөкөт контрасты: ≥ 4. 5:1 (кадимки текст), ≥ 3:1 (чоң/майлуу).
• Фокус багытсыз көрүнүп турат (клавиатура/скринридер).

3) Аппараттар жана медиа суроолор

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/}

• Такталык түзмөктөрдө жетектөөчү эффекттер иш-аракеттерди аныктоо үчүн маанилүү эмес - ачык affordances колдонуңуз: түс/сөлөкөт/кадр/кеңеш.
• Навигацияны/көзөмөлдү "hover астында" гана жашырбаңыз.

4) узактыгы жана ийри

• Hover: 120-180 мс
• Focus: 120-180 ms
• Active/Pressed: 80–120 мс
• Ripple/ink (колдонулган болсо): ≤ 240 мс, 1 цикл

Демейки ийри сызык: 'cubic-bezier (0. 2, 0, 0. 2, 1)`

Active - тез ('cubic-bezier (0. 4, 0, 1, 1) '), чыгаруу - жумшак (' cubic-bezier (0, 0, 0. 2, 1)`).

5) Дизайн системасы токендери (мисал)

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) Баскычтар: үлгү

Default: текст ≥ 4. 5:1 куюп.
Hover: − Δ L 0. 02–0. 04, жарык көлөкө, курсор 'pointer'.
Active: дагы − Δ L 0. 02–0. 04, кыскартылган көлөкө/кысып (scale 0. 98), созулат. 80-100 ms.
Focus: контраст шакек 2-3 PX Blur жок.
Disabled: курсор `not-allowed`/`default`, opacity ≤ 0. 38, эч кандай hover таасирлери.

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) шилтемелер жана тексттик иш-аракеттер

айырмачылыктар гана түс эмес: демейки же hover/focus боюнча баса.
Багыттоо үчүн: басым күчөтүү (калыңдыгы/offset), жеңил тон өзгөртүү.
'Visited' - ошол эле палитранын башка көлөкөсү, контраст сакталган.

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) Карталар, тизмелер, таблицалар

• Hover: жумшак көлөкө/жарык кадр, курсор 'pointer' бүт карта чыкылдатуу гана.
• Active: кыска басуу, аталышы жарык.
• Focus: карта тегерегинде көрүнгөн шакек, бир гана ичинде эмес.

• Hover-фон Δ L 0. 02–0. 04; активдүү сап - так алкак.
• Жол боюнча чыкылдатуу ачык affordance (сөлөкөт "→", чакыруу) гана жол берилет.

• Кылдаттык менен каскаддык кечигүүлөрдөн "тепкичти" чектеңиз - максимум 6-8 элемент (stagger 20-30 ms).

9) Киргизүү формалары жана талаалары

талаа Hover: ичке жарык кадр (Δ L ~ 0. 05), блоктун өлчөмүн өзгөртпөстөн.
Focus: контрасттык шакек + алкактын түсүн өзгөртүү; placeholder айырмаланып турат (≥ 3:1).
Ката: түс + сөлөкөт/текст; кыска "shake" 6 px, ≤ 140 ms, бир жолу ≤ жол берилет.

10) Сөлөкөттөр жана кичинекей максаттар

Click аймагын 32 × 32 (desktop )/40 × 40 (мобилдик) чейин көбөйтүңүз, ал тургай иконанын өзү 20-24 px.
Hover: 1-2 касиеттери көп эмес, тунук/куюп/калыңдыгын өзгөртүү.
Active: кыска "snap" боюнча scale 0. 98.
Focus: Click аймагынын контейнер шакек.

11) Жеткиликтүүлүк (A11y) жана клавиатура

Колдоо ': focus-visible' (чычкан үчүн фокус стилдерин көрсөтпөйбүз, клавиатура үчүн - көрсөтөбүз).
Hover-чакырыктарды жараткан элементтер фокус боюнча эквивалентке ээ болушу керек (ошол эле мазмун Tab/Enter баскычында пайда болот).
Aria-атрибуттар: interactive 'role', 'aria-pressed '/' aria-expanded '/' aria-current' кырдаал боюнча бар.
Prefers-reduced-motion: масштаб/минималдуу өзгөртүү (opacity/fill) алмаштыруу, pulsations өчүрүү.

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

12) аткаруу

'opacity' жана 'transform' гана анимация; 'width/height/left/top', оор blur/көптөгөн элементтердин көлөкө качуу.
Орточо 'will-change'; өтүү аяктагандан кийин алып салыңыз.
Тизмелерде/таблицаларда - минималдуу эффекттер, "глобалдуу" repaint жок.

13) Hover-intent жана "жабышчаак"

• Татаал tooltip/менюну көрсөтүүгө чейин 80-120 мс кечигүү босогосу.
• Курсордун "жабышчаак": колдонуучу бурчта менюга пункттан жылса, 200-300 ms "коридор" (үч бурчтук Fitts) беребиз.
• tach - пресс же ачык баскычы менен hover алмаштыруу "дагы".

14) Tooltip/меню/тамеки

Ачуу: hover-intent (desktop )/press (tach), жабуу - кам көрүү/blur/ESC.
Позиция - булакка, жебе тегизделген; max-width жана которуулар камтылган.
Жеткиликтүүлүгү: 'role =' tooltip '', байлап 'aria-describedby'; меню үчүн - 'role = "menu"' + жебелерди башкаруу.

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

Коэффициенттер/лидборддор: hover сызык/уячаны көрсөтөт, бирок позициялоо метрикасын өзгөртпөйт ("секирүү" жок).
Турнирлердин/бонустардын карталары: hover алкакты/иконаны "жандандыра" алат, бирок тексттик CTA жана шарттар окула берет (≥ 4. 5:1).
Жоопкерчиликтүү билдирүүлөр (18 +, лимиттер): алаксытуу эффектисиз; багытталганда гана шилтемелерди баса белгилөөгө жана так фокуска жол берилет.
Коюм/сатып алуу баскычтары: active-feedback милдеттүү (визуалдык чыкылдатуу/басуу) жана жөнөтүүдөн кийин ачык-айкын disable.

16) Мисал интерфейстик Recipes

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) Анти-үлгүлөрү

гана hover үчүн маанилүү иш-аракеттерди/менюсун жашыруу.
Багыттоодо өлчөмдөрдү/макеттерди өзгөртүү (layout секирүү).
шарттардын айырмасы үчүн гана түс таянат.
Жыпар жыттуу, чексиз пульсация, тексттер боюнча "кислоталуу" glow.
Караңгы темада focus стилдеринин жоктугу же алардын көрүнбөгөндүгү.
'pointer' курсорун активдүү эмес элементтерге багыттоо.

18) QA-чек тизмеси

Жеткиликтүүлүк

• Бардык Interactives клавиатура боюнча жеткиликтүү; көрөбүз.
• Hover мазмуну 'focus '/' aria' аркылуу жеткиликтүү.
• Тексттин жана иконалардын карама-каршылыгы WCAG ылайык келет.

Жүрүм-туруму

• Hover/active/disabled/visited түрү жана тон менен айырмаланат.
• эч кандай жооп кечигүү> 120 ms.
• TAC альтернатива hover бар.

Аткаруу

• 'transform '/' opacity' гана жанданат.
• Эч кандай оор blur/көлөкө элементтердин көп.
• узун тизмелер боюнча таасирлери минималдуу.

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

Базалык компоненттер үчүн шарттар таблицасы (баскычтар, шилтемелер, карталар, талаалар, таблицалардын саптары).
узактыгы/ийри/көлөкө токендери жана жарык/dark үчүн коддун мисалы.
"Hover vs Touch" бөлүмү: альтернатива эрежелери жана мисалдар.
Кыска клиптер жана контрасттык көрсөткүчтөр менен "Do/Don 't".

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

Багыттоо эффекттери - бул интерфейс тилинин көмөкчү, бирок маанилүү бөлүгү. Аларды кыска жана алдын ала айтууга болот, клавиатураны жана тактаны сактап калуу, контрастты жана көрүнгөн фокусту камсыз кылуу, арзан касиеттерди гана жандандыруу. Анда интерактивдүүлүк аларга тоскоолдук кылбастан, иш-аракеттердин ачыктыгын жана ылдамдыгын жогорулатат.