Hover efektleri ve etkileşim

1) UX'de rehberlik rolü

• "İnteraktif mi?" (hover/imleç/vurgu)
• "Neredeyim ben?" (odak stili),
• "Tıklama ile ne olur?" (statü ve maliyet),
• "Eylem işe yaradı mı?" (aktif/basılı ve sonraki geribildirim).

İlke: Etkiler anlamı güçlendirir, değiştirmez. Önemli bilgiler ve eyleme erişim sadece vurgunun arkasına gizlenmemelidir.

2) Devlet modeli ve semantik

Temel küme: 'default' - 'hover' - 'focus' - 'active/pressed' - 'disabled' - 'loading' (isteğe bağlı).
Bağlantılar için 'visited', anahtarlar için - 'checked' ekleriz.

• Durumlar arasında - şekil/kalınlık/simgede görsel bir fark, sadece renk değil.
• Arka planda metin/simge kontrastı: ≥ 4. 5:1 (düz metin), ≥ 3:1 (büyük/kalın).
• Odak, işaret etmeden görülebilir (klavye/ekran okuyucu).

3) Cihazlar ve medya istekleri

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

• Dokunmatik cihazlarda, işaretleme efektleri eylemi tespit etmek için kritik değildir - açık fiyatlar kullanın: renk/simge/çerçeve/ipucu.
• Gezinme/denetimleri yalnızca "gezinme altında" gizlemeyin.

4) Süreler ve eğriler

• Hover: 120-180ms
• Odak: 120-180ms
• Aktif/Preslenmiş: 80-120 мс
• Dalgalanma/mürekkep (kullanılıyorsa): ≤ 240 ms, 1 döngü

Varsayılan eğri 'cubic-bezier (0. 2, 0, 0. 2, 1)`

Etkin - daha hızlı ('kübik-bezier (0. 4, 0, 1, 1) '), çıkış daha yumuşaktır (' kübik-bezier (0, 0, 0. 2, 1)`).

5) Tasarım sistemi belirteçleri (örnek)

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üğmeler: referans deseni

Varsayılan: okunabilir metin ≥ 4. 5:1 doldurmak için.
Hover: − Δ L arka plan 0. 02–0. 04, ışık gölgesi, işaretçi '.
Etkin: L 0 − daha fazla Δ. 02–0. 04, kısaltılmış gölge/girinti (ölçek 0. 98), sürer. 80-100 ms.
Odak: bulanıklık olmadan kontrast halkası 2-3 px.
Devre dışı: курсор 'izin verilmiyor'/' varsayılan', opaklık ≤ 0. 38, hover etkisi yok.

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) Bağlar ve metin eylemleri

Sadece renge göre ayırt etme: varsayılan olarak veya hover/focus üzerinde altını çizin.
Rehberlik için: altı çizili geliştirme (kalınlık/ofset), tonda hafif değişiklik.
'Ziyaret edilen' aynı paletin farklı bir tonudur, kontrast korunur.

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, listeler, tablolar

• Vurgulu: yumuşak gölge/çerçeve vurgusu, imleç 'işaretçisi' yalnızca tüm kart tıklanabilir ise.
• Etkin: kısa girinti, başlık vurgusu.
• Odak: sadece içeride değil, kartın etrafında görünür bir halka.

• Arka planı Δ L 0 ile gezdirin. 02–0. 04; Etkin satır açık bir kenarlıktır.
• Bir satırda tıklamalara yalnızca açık bir şekilde izin verilir ("-" simgesi, ipucu).

• Kaskad gecikmelerinin "merdivenini" dikkatlice sınırlayın - maksimum 6-8 eleman (20-30 ms stagger).

9) Giriş formları ve alanları

Alanlar için gezinme: çerçevenin ince arka aydınlatması (Δ L ~ 0. 05), blok boyutunu değiştirmeden.
Odak: kontrast halkası + çerçeve renk değişimi; Yer tutucu ayırt edilebilir kalır (≥ 3:1).
Hata: renk + simge/metin; Kısa "shake'bir kez 6 px, ≤ 140 ms ≤ geçerlidir.

10) Simgeler ve küçük hedefler

Simgenin kendisi 20-24 piksel olsa bile, tıklama bölgesini 32 × 32 (masaüstü )/40 × 40 (mobil) değerine yükseltin.
Hover: opaklığı/dolguyu/kalınlığı, maksimum 1-2 özelliği değiştirir.
Etkin: 0 ölçeğine göre kısa "yapışma". 98.
Focus: Zone container'ı tıklatarak çalın.

11) Erişilebilirlik (A11y) ve klavye

Destek ': focus-visible' (fare için odak stilleri göstermiyoruz, klavye için gösteriyoruz).
Vurgulu ipuçları oluşturan öğelerin bir odak eşdeğeri olmalıdır (Sekme/Enter tuşunda aynı içerik görüntülenir).
Aria-nitelikleri: etkileşimler duruma göre 'role', 'aria-pressed'/' aria-expanded'/' aria-current' özelliğine sahiptir.
Prefers-reduced-motion: scale/shift öğesini minimum (opaklık/dolgu) ile değiştirin, dalgalanmaları kapatın.

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

12) Performans

Yalnızca 'opaklığı've' dönüştürmeyi 'canlandırın; 'width/height/left/top', birden fazla öğede ağır bulanıklık/gölgelerden kaçının.
'Will-change'i idareli kullanın; geçiş tamamlandıktan sonra geri çekin.
Listelerde/tablolarda - minimal efektler, "global" yeniden boyama olmadan.

13) Hover-niyet ve "yapışkanlık"

• Karmaşık bir araç ipucu/menü göstermeden önce gecikme eşiği 80-120 ms'dir.
• İmlecin "yapışkanlığı": kullanıcı öğeden menüye bir açıyla hareket ederse, 200-300 ms "koridor" (Fitts üçgeni) veririz.
• Bir dokunuşla - basın veya açık bir'daha "düğmesiyle değiştirin.

14) Araç ipucu/menüler/açılır menüler

Açma: hover-intent (desktop )/press (touch), closing - care/blur/ESC.
Konum - kaynağa, ok hizalanır; maks. Genişlik ve tireleme etkinleştirildi.
Kullanılabilirlik: 'Role = "tooltip"', associate 'aria-description by'; Menü için - 'role = "menu"' + ok kontrolü.

15) iGaming'in özellikleri

Katsayılar/afişler: Vurgulu satır/hücreyi vurgular, ancak konumlandırma metriklerini değiştirmez ("sıçramalar" olmadan).
Turnuva/bonus kartları: hover, çerçeveyi/simgeyi "canlandırabilir", ancak metin CTA'sı ve koşulları okunabilir kalır (≥ 4. 5:1).
Sorumlu bildirimler (18 +, limitler): dikkat dağıtıcı etkiler olmadan; Gezinme yalnızca bağlantıların altını çizmeye ve net odaklanmaya izin verir.
Bet/buy butonları: Aktif geribildirim zorunludur (görsel tıklama/girinti) ve gönderildikten sonra açık bir şekilde devre dışı bırakılır.

16) Arayüz tarifleri örnekleri

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-desenler

Yalnızca gezinme için kritik eylemleri/menüleri gizleyin.
Hover'da boyut/mizanpaj değiştirme (mizanpaj sıçramaları).
Durumları ayırt etmek için sadece renge güvenin.
Titreme, sonsuz titreşimler, metinlerde "asit" parlaması.
Odak stilleri eksikliği veya karanlık bir tema üzerindeki görünmezlikleri.
Etkileşimli olmayan öğeler üzerinde 'işaretçi' üzerine gelin.

18) KG kontrol listesi

Kullanılabilirlik

• Tüm etkileşimlere klavye ile ulaşılabilir; Görüyoruz odaklanıyoruz.
• Hover içeriği 'focus'/' aria'ile kullanılabilir.
• Metin ve simgelerin kontrastı WCAG'ye karşılık gelir.

Davranış

• Hover/active/disabled/visited şekil ve ton ile ayırt edilebilir.
• Yanıt gecikmesi yok> 120ms.
• Dokunuş üzerinde durmanın bir alternatifi var.

Performans

• Sadece 'transform'/' opacity' animasyonludur.
• Birden fazla öğede ağır bulanıklık/gölge yok.
• Uzun listelerde, etkiler en aza indirgenir.

19) Tasarım sistemindeki belgeler

Temel bileşenler için durum tablosu (düğmeler, bağlantılar, kartlar, alanlar, tablo satırları).
Süre/eğri/gölge belirteçleri ve açık/karanlık için örnek kod.
"Hover vs Touch" bölümü: alternatiflerin ve örneklerin kuralları.
Kısa klipler ve kontrast puanlarıyla "Yap/Yapma".

Kısa Özet

Hedefleme efektleri, arayüz dilinin yardımcı ancak kritik bir parçasıdır. Onları kısa ve öngörülebilir tutun, klavyeyi ve dokunmayı koruyun, kontrast ve görünür odak sağlayın, yalnızca ucuz özellikleri canlandırın. Daha sonra etkileşim, onları engellemek yerine netliği ve eylem hızını arttırır.