호버 효과 및 상호 작용
1) UX의지도 역할
호버/프레스/포커스는 피드백 언어입니다. 사용자는 즉시 이해해야합니다
"대화식입니까?" (호버/커서/하이라이트)
"내가 어디 있니?" (포커스 스타일),
"클릭으로 어떻게됩니까?" (상태 및 경제성),
"액션이 작동 했습니까?" (활성/압축 및 후속 피드백).
원리: 효과는 의미를 대체하지 않고 의미를 강화합니다. 주요 정보와 작업에 대한 액세스는 호버 뒤에만 숨겨져서는 안됩니다.
2) 상태 모델 및 의미론
기본 세트: '기본' → '호버' → '초점' → '활성/압축' → '비활성화' → '로딩' (선택 사항).
링크의 경우 '방문', 스위치- '확인' 을 추가합니다.
- 상태 간-색상뿐만 아니라 모양/두께/아이콘의 시각적 차이.
- 배경/아이콘 대비 텍스트/아이콘 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/}- 터치 장치에서 포인팅 효과는 동작 감지에 중요하지 않습니다. 색상/아이콘/프레임/힌트와 같은 명시 적 여유를 사용하십시오.
- 탐색/제어 만 "호버 아래" 만 숨기지 마십시오.
4) 듀레이션과 곡선
짧고 예측 가능한:- 호버: 120-180ms
- 초점: 120-180ms
- 액티브/프레스: 80-120
- 리플/잉크 (사용되는 경우): λ240ms, 1주기
기본 곡선은 '입방-베지어 (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 채우십시오.
호버: -λL 배경 0. 02–0. 04, 가벼운 그림자, 포인터 '.
활성: -더 많은 차수 L 0. 02–0. 04, 그림자/들여 쓰기 단축 (스케일 0. 98), 지속됩니다. 80-100 ms.
초점: 흐림없이 대비 링 2-3 px.
사용하지 않는 경우 (PHP 3 = 3.0.6, PHP 4) 38, 호버 효과 없음.
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) 링크 및 텍스트 작업
색상별로 구별: 기본적으로 밑줄 또는 호버/초점.
안내를 위해: 밑줄 향상 (두께/오프셋), 톤의 약간의 변화.
'방문한' 은 같은 팔레트의 다른 그늘이며 대비는 유지됩니다.
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) 카드, 목록, 테이블
카드:- 호버: 전체 카드를 클릭 할 수있는 경우에만 소프트 섀도우/프레임 하이라이트, 커서 '포인터'.
- 활성: 짧은 들여 쓰기, 제목 하이라이트.
- 초점: 내부뿐만 아니라 카드 주위에 보이는 고리.
- 게 이름이 뭐죠? 02–0. 04; 활성 행은 명확한 테두리입니다.
- 한 줄의 클릭은 명시 적 경제성 ("→" 아이콘, 힌트) 으로 만 허용됩니다.
- 캐스케이드 지연의 "사다리" 를 조심스럽게 제한합니다 (최대 6-8 요소 (비틀 거리는 20-30ms).
9) 입력 양식 및 필드
필드 용 호버: 프레임의 얇은 백라이트 05), 블록 크기를 변경하지 않고.
초점: 대비 링 + 프레임 색상 변경; 자리 표시자는 구별 할 수있는 상태로 유지됩니다 (계정 3:1
오류: 색상 + 아이콘/텍스트; 짧은 "쉐이크" 는 한 번에 유효한
10) 아이콘과 작은 대상
아이콘 자체가 20-24 px 인 경우에도 클릭 영역을 32 × 32 (데스크톱 )/40 × 40 (모바일) 으로 늘립니다.
호버: 불투명도/충전/두께, 최대 1-2 특성 변경.
활성: 스케일 0으로 짧은 "스냅". 98.
초점: 클릭 영역 컨테이너 별 링.
11) 접근성 (A11y) 및 키보드
지원 ': 초점 표시' (마우스에 초점 스타일을 표시하지 않고 키보드에 표시합니다).
호버 힌트를 생성하는 요소는 초점이 동일해야합니다 (탭/입력 키에 동일한 컨텐츠가 나타남).
아리아 속성: 상호 작용은 상황에 따라 '역할', '아리아 프레스 '/' 아리아 확장 '/' 아리아 전류' 를 갖습니다.
선호 감소 운동: 스케일/시프트를 최소 (불투명도/필) 로 바꾸고 리플을 끄십시오.
css
@media (prefers-reduced-motion: reduce) {
{ transition-duration:.01ms! important; animation: none! important; }
}12) 성능
'불투명도' 와 '변환' 만 애니메이션합니다. 여러 요소에서 '너비/높이/왼쪽/상단', 무거운 흐림/그림자를 피하십시오.
'의지 변경' 을 드물게 사용하십시오. 전환 완료 후 철회.
목록/테이블에서 - "글로벌" 다시 칠하지 않고 최소한의 효과.
13) 호버 의도와 "끈적 끈적함"
데스크톱에서 잘못된 호버 트리거를 줄입니다
복잡한 툴팁/메뉴를 표시하기 전에 지연 임계 값은 80-120ms입니다.
커서의 "고정": 사용자가 항목에서 메뉴로 각도를 이동하면 200-300ms의 "복도" (Fitts 삼각형) 를 제공합니다.
터치-호버를 누르거나 명시적인 "더 많은" 버튼으로 교체하십시오.
14) 툴팁/메뉴/드롭 다운
오프닝: 호버 의도 (데스크톱 )/프레스 (터치), 닫기-케어/블러/ESC.
위치-소스에 화살표가 정렬됩니다. 최대 너비와 하이픈이 활성화됩니다.
가용성: 'role = "tultip"', 동료 'aria-descripedby'; 메뉴- 'role = "medio"' + 화살표 제어.
15) iGaming의 세부 사항
계수/리드 보드: 호버는 행/셀을 강조하지만 "점프" 없이 포지셔닝 메트릭을 변경하지는 않습니다.
토너먼트/보너스 카드: 호버는 프레임/아이콘을 "부활" 할 수 있지만 텍스트 CTA 및 조건은 읽을 수 있습니다 (보너스 4 이상). 5:1).
책임있는 알림 (18 +, 한계): 산만 효과없이; 호버링은 링크의 밑줄과 명확한 초점 만 허용합니다.
내기/구매 버튼: 활성 피드백은 필수 (시각적 클릭/입력) 이며 전송 후 모호하지 않은 비활성화입니다.
16) 인터페이스 레시피의 예
버튼 -CTA (라이트/다크):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) 반 패턴
호버링을 위해서만 중요한 동작/메뉴를 숨깁니다.
호버에서 크기/레이아웃을 변경합니다 (레이아웃 점프).
상태를 구별하기 위해 색상에만 의존합니다.
플리커, 끝없는 맥동, 텍스트에 "산" 이 빛납니다.
어두운 테마에 초점 스타일이 부족하거나 보이지 않습니다.
대화식이 아닌 요소에 대한 호버 '포인터'.
18) QA 체크리스트
가용성
- 모든 상호 작용은 키보드로 도달 할 수 있습니다. 우리가 보는 초점.
- 호버 컨텐츠는 '포커스 '/' 아리아' 로 제공됩니다.
- 텍스트와 아이콘의 대비는 WCAG에 해당합니다.
행동
- 호버/액티브/비활성화/방문은 모양과 톤으로 구별됩니다.
- 응답 지연> 120ms 없음.
- 터치에 대한 대안이 있습니다.
성능
- '변환 '/' 불투명도' 만 애니메이션됩니다.
- 여러 요소에 큰 흐림/그림자가 없습니다.
- 긴 목록에서는 효과가 최소화됩니다.
19) 설계 시스템의 문서
기본 구성 요소 (버튼, 링크, 카드, 필드, 테이블 행) 의 상태 테이블.
빛/어두운 기간/곡선/그림자 토큰 및 샘플 코드.
"호버 vs 터치" 섹션: 대안 및 예제 규칙.
짧은 클립과 대비 점수로 "Do/Do n 't".
간략한 요약
대상 효과는 인터페이스 언어의 보조 부분이지만 중요한 부분입니다. 짧고 예측 가능하게 유지하고 키보드와 터치를 유지하며 대비와 가시적 인 초점을 제공하며 저렴한 속성 만 애니메이션 그런 다음 상호 작용은 명확성과 행동 속도를 방해하지 않고 향상시킵니다.