Таъсири Hover ва интерактивӣ

1) Нақши роҳнамо дар UX

• "Оё интерактивӣ аст?" (hover/курсор/равшанӣ)
• "Ман дар куҷоям?" (услуби фокус),
• "Бо клик чӣ мешавад?" (мақом ва дастрасӣ),
• "Оё амал кор кард?" (фикру мулоҳизаҳои фаъол/фишурдашуда ва минбаъда).

Принсип: Таъсирҳо маънои мустаҳкам мекунанд, онро иваз намекунанд. Иттилооти асосӣ ва дастрасӣ ба амал набояд танҳо дар паси hover пинҳон карда шавад.

2) Модели давлатӣ ва семантика

Маҷмӯи асосӣ: 'пешфарз' → 'hover' → 'focus' → 'фаъол/фишурда' → 'маъюбон' → 'боркунӣ' (ихтиёрӣ).
Барои истинодҳо мо 'боздид', барои коммутаторҳо - 'санҷида' илова мекунем.

• Байни ҳолатҳо - фарқияти визуалӣ дар шакл/ғафсӣ/нишона, на танҳо ранг.
• Матн/нишона аз замина фарқ мекунад: ≥ 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/}

• Дар дастгоҳҳои ламсӣ, таъсири ишора барои муайян кардани амал муҳим нест - аз имконоти возеҳ истифода баред: ранг/нишона/чаҳорчӯба/ишора.
• Паймоиш/назоратро танҳо "зери hover" пинҳон накунед.

4) Давомнокӣ ва хатҳо

• Ҳовер: 120-180м
• Фокус: 120-180м
• Фаъол/Фишор: 80-120 мс
• Риппл/ранг (агар истифода шавад): ≤ 240 мс, 1 давра

Хати каҷи тартиботи саввум 'cubic-bezier (0. 2, 0, 0. 2, 1)`

Фаъол - тезтар ('кубик-безер (0. 4, 0, 1, 1) ', натиҷа мулоимтар аст (' кубик-безер (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) Тугмаҳо: шакли истинод

Пешфарз: матни хондашаванда ≥ 4. 5:1 пур кардан.
Hover: − Δ L замина 0. 02–0. 04, сояи сабук, ишоракунанда '.
Фаъол: − бештар Δ L 0. 02–0. 04, сояи/индекси кӯтоҳ (ҷадвали 0). 98), давом мекунад. 80-100 мс.
Фокус: ҳалқаи контраст 2-3 px бе норавшан.
Ғайрифаъол: курсор 'иҷозат дода намешавад '/' пешфарз', шаффофият ≤ 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 зер кунед.
Барои роҳнамо: такмилдиҳии асосӣ (ғафсӣ/ҷуброн), тағироти ночиз дар оҳанг.
'Боздид аз сояи гуногуни ҳамон палитра, контраст нигоҳ дошта мешавад.

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: сояи мулоим/чаҳорчӯбаи равшан, курсор 'нуқта' танҳо дар сурате, ки тамоми корт клик карда шавад.
• Фаъол: индекси кӯтоҳ, сарлавҳаи унвон.
• Фокус: ҳалқаи намоён дар атрофи корт, на танҳо дар дохили.

• Заминаи Hover бо Δ L 0. 02–0. 04; сатри фаъол сарҳади равшан аст.
• Кликҳо дар хат танҳо бо дастрасии возеҳ иҷозат дода мешаванд ("→" нишона, ишора).

• Бодиққат "зинапоя" -и таъхирҳои каскадро маҳдуд кунед - ҳадди аксар 6-8 унсур (stagger 20-30 ms).

9) Шаклҳо ва майдонҳои вуруд

Hover барои майдонҳо: равшании тунуки чаҳорчӯба (Δ L ~ 0). 05), бе тағйир додани андозаи блок.
Фокус: ҳалқаи контраст + тағйири ранги чорчӯба; ҷойгоҳ фарқкунанда боқӣ мемонад (≥ 3:1).
Хато: ранг + нишона/матн; кӯтоҳ "ларзиш" дуруст аст ≤ 6 px, ≤ 140 ms, як маротиба.

10) Нишонаҳо ва ҳадафҳои хурд

Минтақаи ангуштзаниро ба 32 × 32 (мизи корӣ )/40 × 40 (мобилӣ) зиёд кунед, ҳатто агар худи нишона 20-24 px бошад.
Hover: тағирёбии шаффофӣ/пур/ғафсӣ, ҳадди аксар 1-2 хусусиятҳо.
Фаъол: "кӯтоҳ" аз рӯи ҷадвали 0. 98.
Фокус: занг задан бо контейнери минтақаи клик.

11) Дастрасӣ (A11y) ва клавиатура

Дастгирии ': фокус намоён' (мо услубҳои фокусро барои муш нишон намедиҳем, онҳоро барои клавиатура нишон медиҳем).
Унсурҳое, ки маслиҳатҳои hover эҷод мекунанд, бояд эквиваленти фокус дошта бошанд (ҳамон мундариҷа дар калиди Tab/Enter пайдо мешавад).
Ариа-атрибутҳо: интерактивҳо аз рӯи вазъият 'нақш', 'aria-pressed '/' aria-васеъшуда '/' aria-current' доранд.
Ҳаракатро коҳиш медиҳад: миқёс/сменаро бо ҳадди аққал иваз кунед (шаффофият/пур кардан), печидаҳоро хомӯш кунед.

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

12) Иҷро

Танҳо "шаффофият" ва "табдил" -ро зинда кунед; аз 'width/баландӣ/чап/боло' канорагирӣ кунед, норавшан/сояҳо дар унсурҳои сершумор.
'Тағир додани' -ро кам истифода баред; пас аз ба итмом расидани гузариш даст кашед.
Дар рӯйхатҳо/ҷадвалҳо - эффектҳои ҳадди аққал, бе рангкунии "глобалӣ".

13) Ҳовер-ният ва "часпидан"

• Ҳадди таъхир 80-120 мс пеш аз нишон додани асбоби/менюи мураккаб аст.
• "Часпидан" -и курсор: агар корбар аз ашё ба меню дар кунҷ гузарад, мо 200-300 мс "долон" (секунҷаи Фиттс) медиҳем.
• Бо ламс - иваз кардани hover бо пахш ё тугмаи возеҳи "бештар".

14) Асбобҳо/менюҳо/dropdowns

Кушодан: hover-indent (мизи корӣ )/press (touch), пӯшидан - нигоҳубин/норӯшан/ESC.
Мавқеъ - ба манбаъ, тир мувофиқ карда шудааст; паҳнои максималӣ ва гипенатсия фаъол аст.
Мавҷудият: 'нақш = "абзор"', шарики 'aria-descripedby'; барои меню - 'нақш = "меню"' + назорати тир.

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

Коэффисиентҳо/пешсафҳо: hover сатр/ҳуҷайраро таъкид мекунад, аммо ченакҳои мавқеъро тағир намедиҳад (бидуни "ҷаҳиш").
Кортҳои мусобиқа/бонус: hover метавонад чаҳорчӯба/нишонро "эҳё кунад", аммо матни CTA ва шартҳо қобили хондан боқӣ мемонанд (≥ 4. 5:1).
Огоҳиҳои масъул (18 +, маҳдудиятҳо): бе таъсири парешон; hovering танҳо имкон медиҳад, ки пайвандҳо ва фокуси равшан нишон дода шаванд.
Тугмаҳои Бет/харидан: фикру мулоҳизаҳои фаъол ҳатмӣ мебошанд (клики визуалӣ/индент) ва пас аз фиристодан яктарафа хомӯш карда мешаванд.

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 пинҳон кунед.
Тағир додани андоза/тарҳҳо дар hover (ҷаҳиши тарҳ).
Барои фарқ кардани ҳолатҳо танҳо ба ранг такя кунед.
Фликер, пульсацияҳои беохир, дурахшидани "кислота" ба матнҳо.
Набудани услубҳои фокусӣ ё ноаён будани онҳо дар мавзӯи торик.
Hover 'ишора' бар унсурҳои ғайрифаъол.

18) Рӯйхати назоратии QA

Мавҷудият

• Ҳама интерактивҳо тавассути клавиатура дастрасанд; диққати моро мебинем.
• Мундариҷаи Hover тавассути 'focus '/' aria' дастрас аст.
• Муқоисаи матн ва нишонаҳо ба WCAG мувофиқат мекунад.

Рафтор

• Hover/фаъол/маъюбон/ташрифоваранда бо шакл ва оҳанг фарқ мекунанд.
• Таъхири посух> 120 мс.
• Алтернатива барои hover оид ба ламс вуҷуд дорад.

Иҷро

• Танҳо 'табдил '/' шаффофият' аниматсия карда шудааст.
• Ҳеҷ гуна норавшан/сояи унсурҳои сершумор.
• Дар рӯйхатҳои дароз, эффектҳо кам карда мешаванд.

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

Ҷадвали ҳолат барои ҷузъҳои асосӣ (тугмаҳо, пайвандҳо, кортҳо, майдонҳо, сатрҳои ҷадвал).
Давомнокӣ/нишонаи каҷ/соя ва рамзи намуна барои сабук/торик.
Бахши "Hover vs Touch": қоидаҳои алтернативӣ ва мисолҳо.
"Иҷро кунед/накунед" бо клипҳои кӯтоҳ ва холҳои контраст.

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

Таъсири мақсаднок як қисми ёрирасон, вале муҳими забони интерфейс мебошад. Онҳоро кӯтоҳ ва пешгӯишаванда нигоҳ доред, клавиатура ва ламсро нигоҳ доред, фокуси контраст ва намоёнро таъмин кунед, танҳо хусусиятҳои арзонро зинда кунед. Он гоҳ интерактивӣ ба ҷои монеъ шудан ба онҳо возеҳият ва суръати амалро тақвият медиҳад.