Istiqamətləndirmə effektləri və interaktivlik

1) UX-də istiqamətləndirmə rolu

• «Bu interaktiv?» (istiqamətləndirmə/kursor/işıqlandırma),
• «Mən haradayam?» (fokus üslubu),
• «Klik nə olacaq?» (vəziyyət və affordance),
• «Bir hərəkət oldu?» (active/pressed və sonrakı feedback).

Prinsip: effektlər mənanı gücləndirir, onu əvəz etmir. Əsas məlumat və hərəkətə giriş yalnız istiqamətləndirmə arxasında gizlədilməməlidir.

2) Hallar modeli və semantika

Əsas dəst: 'default' → 'hover' → 'focus' → 'active/pressed' → 'disabled' → 'loading' (isteğe bağlı).
Linklər üçün 'visited', açarlar üçün 'checked' əlavə edin.

• Hallar arasında - vizual forma/qalınlıq/ikona fərqi, yalnız rəng deyil.
• Mətn/ikonanın fon kontrastı: ≥ 4. 5:1 (adi mətn), ≥ 3:1 (böyük/yağlı).
• Fokus istiqamətsiz görünür (klaviatura/ekran).

3) Cihazlar və media sorğuları

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

• Tac cihazlarında, hərəkət effektlərini aşkar etmək üçün kritik deyil - açıq affordances istifadə edin: rəng/simge/çərçivə/ipucu.
• Naviqasiya/nəzarət yalnız «hover altında» gizlətməyin.

4) Uzunluq və əyri

• Hover: 120-180 ms
• Focus: 120-180 ms
• Active/Pressed: 80–120 мс
• Ripple/ink (istifadə edilərsə): ≤ 240 ms, 1 dövr

Default əyri: 'cubic-bezier (0. 2, 0, 0. 2, 1)`

Active - daha sürətli ('cubic-bezier (0. 4, 0, 1, 1) '), çıxış - daha yumşaq (' cubic-bezier (0, 0, 0. 2, 1)`).

5) Dizayn sistemi tokenləri (nümunə)

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üymələr: istinad nümunəsi

Default: oxunan mətn ≥ 4. 5:1 doldurulması.
Hover: − Δ L fonu 0. 02–0. 04, yüngül kölgə, 'pointer' kursoru.
Active: daha − Δ L 0. 02–0. 04, qısaldılmış kölgə/basma (scale 0. 98), davam edir. 80-100 ms.
Focus: blur olmadan 2-3 px kontrast ring.
Disabled: курсор `not-allowed`/`default`, opacity ≤ 0. 38, hover effektləri yoxdur.

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) Linklər və mətn hərəkətləri

Fərqlilik yalnız rəng deyil: default və ya hover/focus üzərində vurğulayın.
Rəhbərlik üçün: vurğulamanın gücləndirilməsi (qalınlığı/offset), yüngül ton dəyişikliyi.
'Visited' - eyni palitranın fərqli çalarıdır, kontrast saxlanılır.

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) Kartlar, siyahılar, cədvəllər

• Hover: yumşaq kölgə/işıqlandırma çərçivəsi, 'pointer' kursoru yalnız bütün kart klikabildir.
• Active: qısa basma, başlıq işıqlandırma.
• Focus: kart ətrafında görünür ring, yalnız daxili deyil.

• Hover-fon Δ L 0. 02–0. 04; aktiv sətir - aydın çərçivə.
• Xətt üzrə klik yalnız açıq affordance (ikona «→», ipucu) ilə icazə verilir.

• Kaskadlı gecikmələrdən ibarət «zolağı» diqqətlə məhdudlaşdırın - maksimum 6-8 element (stagger 20-30 ms).

9) Giriş formaları və sahələri

Sahələrdə Hover: nazik işıqlandırma çərçivəsi (Δ L ~ 0. 05), blokun ölçüsünü dəyişdirmədən.
Focus: kontrast ring + çərçivə rəng dəyişikliyi; placeholder fərqləndirici olaraq qalır (≥ 3:1).
Səhv: rəng + ikona/mətn; qısa «shake» ≤ 6 px, ≤ 140 ms, bir dəfə icazə verilir.

10) Simvollar və kiçik hədəflər

Klik zonasını 20 × 24 px olsa belə 32-32 (masaüstü )/40 × 40 (mobil) qədər artırın.
Hover: 1-2 xassədən çox olmayan qeyri-şəffaflıq/doldurma/qalınlığı dəyişdirin.
Active: scale 0 qısa «snap». 98.
Focus: klik zonasının konteyner üzüyü.

11) Əlçatanlıq (A11y) və klaviatura

Saxlayın ': focus-visible' (siçan üçün fokus stilləri göstərmirik, klaviatura üçün - göstəririk).
Hover ipuçlarını yaradan elementlərin fokus ekvivalenti olmalıdır (eyni məzmun Tab/Enter klavişində görünür).
Aria atributları: interaktivlərin vəziyyətə görə 'role', 'aria-pressed '/' aria-expanded '/' aria-current' var.
Prefers-reduced-motion: Ölçü/sürüşməni minimum (opacity/fill) ilə əvəz edirik, dalğalanmaları söndürürük.

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

12) Performans

Yalnız 'opacity' və 'transform' animasiya edin; 'width/height/left/top', bir çox elementlərdə ağır blur/kölgələrdən çəkinin.
Orta dərəcədə 'will-change' istifadə edin; keçid bitdikdən sonra təmizləyin.
Siyahılar/cədvəllər - minimal effektlər, «qlobal» repaint olmadan.

13) Hover-intent və «yapışqanlıq»

• Çətin tooltip/menyu göstərməzdən əvvəl 80-120 ms gecikmə həddi.
• Kursorun «yapışqanlığı»: istifadəçi nöqtədən menyuya bucaq altında hərəkət edirsə, 200-300 ms «dəhliz» (Fitts üçbucağı) verin.
• tach - hover press və ya açıq «daha çox» düyməsi ilə əvəz.

14) Tooltip/menyu/dropdown

Açılış: hover-intent (masaüstü )/press (taç), bağlanma - qulluq/blur/ESC.
Mövqe - mənbəyə, ox hizalanmışdır; max-width və transfer daxildir.
Əlçatanlığı: 'role =' tooltip ', bağlayın' aria-describedby '; menyu üçün - 'role = «menu»' + oxları idarə etmək.

15) iGaming xüsusiyyətləri

Əmsallar/Liderbordlar: hover sətir/hüceyrə işıqlandırır, lakin mövqe metrikasını dəyişdirmir («atlama» olmadan).
Turnir/bonus kartları: hover çərçivə/ikonanı «canlandıra» bilər, lakin mətn CTA və şərtlər oxunaqlı olaraq qalır (≥ 4. 5:1).
Məsuliyyətli bildirişlər (18 +, limitlər): diqqəti yayındırma effektləri olmadan; istiqamətləndirərkən yalnız linklərin vurğulanmasına və aydın fokusa icazə verilir.
Bahis/alış düymələri: active-feedback tələb olunur (vizual klik/basma) və göndərildikdən sonra birmənalı disable.

16) Interfeys reseptləri nümunələri

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-nümunələr

Kritik hərəkətləri/menyunu yalnız hover arxasında gizlətmək.
Yerdəyişmə zamanı ölçüləri/düzülüşləri dəyişdirin (layout sıçrayışları).
Vəziyyətlərin fərqliliyi üçün yalnız rəngə əsaslanır.
Titrəmə, sonsuz dalğalanmalar, mətnlərdə «turşu» glow.
Qaranlıq mövzuda focus stillərinin olmaması və ya görünməzliyi.
'Pointer' kursorunu aktiv olmayan elementlərə yönəlt.

18) QA-çek siyahısı

Mövcudluq

• Bütün interaktivlər klaviatura ilə əldə edilə bilər; fokus görürük.
• Hover məzmunu 'focus '/' aria' ilə mövcuddur.
• Mətn və simvolların kontrastı WCAG-a uyğundur.

Davranış

• Hover/active/disabled/visited forma və ton ilə fərqlənir.
• Cavab gecikməsi yoxdur> 120ms.
• Tach bir alternativ hover var.

Performans

• Yalnız 'transform '/' opacity' animasiya olunur.
• Bir çox elementdə ağır blur/kölgələr yoxdur.
• Uzun siyahılarda effektlər minimuma endirilir.

19) Dizayn sistemində sənədləşmə

Əsas komponentlər (düymələr, istinadlar, kartlar, sahələr, cədvəl sətirləri) üçün hallar cədvəli.
Light/dark üçün uzunluq/əyri/kölgə tokenləri və kod nümunəsi.
«Hover vs Touch» bölməsi: alternativlər qaydaları və nümunələr.
Qısa kliplər və kontrast göstəriciləri ilə «Do/Don 't».

Qısa xülasə

Rəhbərlik effektləri interfeys dilinin köməkçi, lakin kritik hissəsidir. Onları qısa və proqnozlaşdırıla bilən edin, klaviatura və taçları saxlayın, kontrast və görünən fokusu təmin edin, yalnız ucuz xüsusiyyətləri canlandırın. Sonra interaktivlik hərəkətlərin aydınlığını və sürətini artırır, onlara mane olmur.