Wpływ na kręgosłup i interaktywność

1) Rola wytycznych w UX

• „Czy jest interaktywny?” (hover/cursor/highlight)
• „Gdzie ja jestem?” (styl ostrości),
• „Co się dzieje klikając?” (status i przystępność cenowa),
• „Czy akcja zadziałała?” (aktywne/naciśnięte i kolejne informacje zwrotne).

Zasada: Efekty wzmacniają znaczenie, a nie zastępują. Kluczowe informacje i dostęp do akcji nie powinny być ukryte tylko za zawisem.

2) Model państwa i semantyka

Zestaw bazowy: 'default' → 'hover' → 'focus' → 'active/pressed' → 'disabled' → 'loading' (opcjonalnie).
Dla linków dodajemy 'visited', dla przełączników - 'checked'.

• Między stanami - wizualna różnica w kształcie/grubości/ikona, nie tylko kolor.
• Tekst/ikona kontrast do tła: ≥ 4. 5:1 (zwykły tekst), ≥ 3:1 (duży/śmiały).
• Ostrość jest widoczna bez wskazywania (klawiatura/czytnik ekranu).

3) Urządzenia i żądania medialne

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

• Na urządzeniach dotykowych efekty wskazywania nie są kluczowe do wykrywania działania - użyj wyraźnych affordances: kolor/ikona/ramka/podpowiedź.
• Nie ukrywać nawigacji/sterowania tylko „pod zawisem”.

4) Okresy i krzywe

• Hover: 120-180ms
• Uwaga: 120-180ms
• Aktywny/naciśnięty: 80-120 мoz
• Marszczyć/atrament (jeśli używany): ≤ 240 ms, 1 cykl

Domyślną krzywą jest 'cubic-bezier (0. 2, 0, 0. 2, 1)`

Aktywny - szybciej ('sześcienno-bezier (0. 4, 0, 1, 1) „), wyjście jest miększe (” sześcienno-bezier (0, 0, 0. 2, 1)`).

5) Żetony systemu projektowania (przykład)

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) Przyciski: wzorzec odniesienia

Domyślnie: tekst czytelny ≥ 4. 5:1 do wypełnienia.
Zawisza: − Tło Α L 0. 02–0. 04, jasny cień, wskaźnik ".
Aktywny: − Więcej Α L 0. 02–0. 04, skrócony cień/wgniecenie (skala 0. 98), trwa. 80-100 ms.
Ostrość: pierścień kontrastu 2-3 px bez rozmycia.
Disabled: курсой 'niedozwolone '/' domyślne', nieprzezroczystość ≤ 0. 38, żadnych efektów zawisu.

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) Linki i działania tekstowe

Wyróżniając nie tylko kolor: podkreślenie domyślnie lub na hover/focus.
Wskazówki: podkreślenie wzmocnienia (grubość/przesunięcie), niewielka zmiana tonu.
„Visited” to inny odcień tej samej palety, kontrast jest zachowany.

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) Karty, listy, tabele

• Hover: miękki cień/ramka, kursor 'pointer' tylko wtedy, gdy cała karta jest klikalna.
• Aktywny: krótkie nacięcie, podkreślenie tytułu.
• Skup się: widoczny pierścień wokół karty, nie tylko wewnątrz.

• Zawisło tło z 0 W-L. 02–0. 04; aktywny rząd jest wyraźną granicą.
• Kliknięcia na linii są dozwolone tylko z wyraźnym affordance („→” ikona, wskazówka).

• Ostrożnie ograniczyć „drabinę” opóźnień kaskadowych - maksymalnie 6-8 elementów (stagger 20-30 ms).

9) Formularze i pola wejściowe

Zawisnąć dla pól: cienkie podświetlenie ramki (Α L ~ 0. 05), bez zmiany rozmiaru bloku.
Ostrość: pierścień kontrastu + zmiana koloru ramki; znacznik pozostaje rozróżnialny (≥ 3:1).
Błąd: kolor + ikona/tekst; krótki "wstrząs' jest ważny ≤ 6 px, ≤ 140 ms, raz.

10) Ikony i małe cele

Zwiększ strefę kliknięcia do 32 × 32 (pulpit )/40 × 40 (mobilny), nawet jeśli sama ikona wynosi 20-24 px.
Zawiska: zmienia zmętnienie/wypełnienie/grubość, maksymalnie 1-2 właściwości.
Aktywny: krótki „snap” według skali 0. 98.
Ostrość: pierścień przez kliknięcie strefy kontenera.

11) Dostępność (A11y) i klawiatura

Wsparcie ': focus-visible' (nie pokazujemy stylów ostrości dla myszy, pokazujemy je dla klawiatury).
Elementy tworzące podpowiedzi muszą mieć ekwiwalent ostrości (ta sama zawartość jest wyświetlana na kluczu Tab/Enter).
Aria-atrybuty: interaktywne mają 'rolę', 'aria-pressed '/' aria-expanded '/' aria-current' według sytuacji.
Preferuje zredukowany ruch: wymiana skali/przesunięcie minimalnym (zmętnienie/wypełnienie), wyłączenie ripples.

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

12) Wydajność

Animować tylko „nieprzezroczystość” i „przekształcić”; unikać 'szerokości/wysokości/lewej/górnej', ciężkiej rozmycia/cienia na wielu elementach.
delikatnie wykorzystywać „zmiany woli”; wycofać po zakończeniu przejścia.
Na listach/tabelach - minimalne efekty, bez „globalnej” repaint.

13) Hover-intent i „lepkość”

• Próg opóźnienia wynosi 80-120 ms przed pokazaniem złożonej końcówki narzędzi/menu.
• „Lepkość” kursora: jeśli użytkownik przechodzi z elementu do menu pod kątem, dajemy 200-300 ms „korytarza” (trójkąt Fitts).
• Za pomocą dotyku - wymień zawisek z naciśnięciem lub wyraźnym przyciskiem „więcej”.

14) Końcówka narzędzi/menu/krople

Otwarcie: hover-intent (pulpit )/press (touch), closing - care/smur/ESC.
Pozycja - do źródła, strzałka jest wyrównana; maksymalna szerokość i łączność są włączone.
Dostępność: 'role =' tooltip ', associate' aria-descripedby '; dla menu - 'role = „menu”' + strzałka control.

15) Specyfika iGaming

Współczynniki/lidery: zawisa podkreśla wiersz/komórkę, ale nie zmienia mierników pozycjonowania (bez „skoków”).
Turniej/karty bonusowe: zawisza może „ożywić” ramkę/ikonę, ale tekst CTA i warunki pozostają czytelne (≥ 4. 5:1).
Odpowiedzialne powiadomienia (18 +, limity): bez efektu rozpraszającego; hovering pozwala tylko na podkreślenie linków i jasne skupienie.
Przyciski zakup/zakup: aktywny sprzężenie zwrotne jest obowiązkowe (kliknięcie/tiret wizualne) i jednoznaczne wyłączenie po wysłaniu.

16) Przykłady receptur interfejsu

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) Anty-wzory

Ukryj krytyczne działania/menu tylko dla zawiszy.
Zmień rozmiary/układy na zawisie (skoki układu).
Polegaj tylko na kolorze, aby odróżnić stany.
Migotanie, niekończące się pulsacje, „kwaśny” blask na tekstach.
Brak stylów ostrości lub ich niewidzialność na ciemnym motywie.
Hover 'pointer' nad elementami nie interaktywnymi.

18) Lista kontrolna QA

Dostępność

• Wszystkie interaktywne urządzenia są dostępne za pomocą klawiatury; skupiamy się widzimy.
• Treść zawisu jest dostępna pod nazwą „focus ”/„ aria”.
• Kontrast tekstu i ikon odpowiada WCAG.

Zachowanie

• Hover/active/disabled/visited są wyróżniające się kształtem i tonem.
• Brak opóźnienia w udzielaniu odpowiedzi> 120 ms.
• Istnieje alternatywa dla zawisu w dotyku.

Wydajność

• Tylko „transformacja ”/„ nieprzezroczystość” są animowane.
• Brak ciężkiej rozmycia/cienia na wielu elementach.
• Na długich listach efekty są zminimalizowane.

19) Dokumentacja w systemie projektowym

Tabela stanu dla podstawowych komponentów (przyciski, linki, karty, pola, wiersze tabeli).
Czas trwania/krzywa/żetony cieni i kod próbki dla światła/ciemności.
Sekcja „Hover vs Touch”: zasady alternatyw i przykładów.
„Do/Don” z krótkimi klipsami i punktami kontrastu.

Krótkie podsumowanie

Efekty celowania są pomocniczą, ale kluczową częścią języka interfejsu. Zachować je krótkie i przewidywalne, zachować klawiaturę i dotyk, zapewnić kontrast i widoczne skupienie, animować tylko tanie właściwości. Następnie interaktywność zwiększa jasność i szybkość działania, a nie utrudnia ich.