Бағыттау әсерлері және интерактивтілік

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 мс
• 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 мс.
Focus: blur жоқ 2-3 px контрасты сақина.
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 мс).

9) Енгізу нысандары мен өрістері

Hover: жіңішке жақтау (Δ L ~ 0. 05), блок өлшемін өзгертпей.
Focus: қарама-қарсы сақина + жақтау түсін өзгерту; placeholder ерекшеленеді (3:1 ≥).
Қате: түсі + белгішесі/мәтіні; қысқа «shake» 6 px, ≤ 140 мс, бір рет ≤ рұқсат етіледі.

10) Иконалар және шағын мақсаттар

Белгішенің өзі 20 × 24 px болса да, басу аймағын 32-32 (desktop )/40 × 40 (mobile) дейін ұлғайтыңыз.
Hover: 1-2 сипаттан аспайтын мөлдірлікті/бояуды/қалыңдықты ауыстыру.
Active: scale 0 бойынша қысқаша «snap». 98.
Focus: басу аймағының контейнері бойынша сақина.

11) Қол жетімділік (A11y) және пернетақта

Қолдау ': focus-visible' (тышқан үшін фокус стилін көрсетпейміз, пернетақта үшін - көрсетеміз).
Hover кеңестерін жасайтын элементтер фокус бойынша баламалы болуы тиіс (сол мазмұн Tab/Enter пернесі бойынша пайда болады).
Aria-төлсипаттары: интерактивтерде жағдай бойынша 'role', 'aria-pressed '/' aria-expanded '/' aria-current' бар.
Prefers-reduced-motion: масштабты/ығысуды минимумға (opacity/fill) ауыстырамыз, пульсацияны ажыратамыз.

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 және «жабысқақтық»

• Кешіктіру шегі 80-120 мс күрделі tooltip/мәзірді көрсету алдында.
• Меңзердің «жабысқақтығы»: егер пайдаланушы тармақтан мәзірге бұрышпен қозғалса, «дәліз» (Fitts үшбұрышы) 200-300 мс береді.
• Тач - hover-ті press немесе «тағы да» түймешігімен ауыстырамыз.

14) Tooltip/мәзір/дропдауналар

Ашу: hover-intent (десктоп )/press (тач), жабу - күтім бойынша/blur/ESC.
Позиция - көзге, көрсеткі тураланған; max-width және тасымалдар қосылған.
Қол жетімділік: 'role =' tooltip ', байланыстырамыз' aria-describedby '; мәзір үшін - 'role = «menu»' + көрсеткілерді басқару.

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

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

16) Интерфейстік рецептілердің үлгілері

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-чек парағы

Қол жетімділік

• Пернетақта арқылы барлық интерактивтерге қол жеткізуге болады; фокусты көріп отырмыз.
• Hover-контент 'focus '/' aria' бойынша қол жетімді.
• Мәтін мен иконалардың қарама-қайшылығы WCAG сәйкес келеді.

Мінез-құлық

• Hover/active/disabled/visited пішіні мен тонымен ажыратылады.
• > 120 мс жауап беру кідірісі жоқ.
• Тасқа hover баламасы бар.

Көрініс

• Тек 'transform '/' opacity' анимацияланады.
• Көптеген элементтерде ауыр blur/көлеңкелер жоқ.
• Ұзақ тізімдерде әсерлер барынша аз.

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

Базалық компоненттерге арналған күй кестесі (түймешіктер, сілтемелер, карточкалар, өрістер, кесте жолдары).
Ұзындық/қисық/көлеңке токендері және light/dark кодының үлгісі.
«Hover vs Touch» бөлімі: баламалар ережелері мен мысалдар.
Қысқа клиптері және контраст көрсеткіштері бар «Do/Don 't».

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

Бағыттау әсерлері - бұл интерфейс тілінің қосалқы, бірақ сындарлы бөлігі. Оларды қысқа және болжамды етіңіз, пернетақтаны және белгіні ұстаңыз, қарама-қайшылықты және көрінетін фокусты қамтамасыз етіңіз, тек арзан қасиеттерді анимациялаңыз. Сонда интерактивтілік оларға кедергі келтірмей, іс-қимылдың айқындығы мен жылдамдығын арттырады.